feat: implement save, unsave, like, and dislike with redux

components/skeleton.jsx

@@ -16,3 +16,12 @@ export function ProfileSkeleton() {
 		</div>
 	);
 }
+
+export function LikeAndSaveSkeleton() {
+	return (
+		<div className='flex items-center gap-4 animate-pulse'>
+			<div className='w-12 md:w-14 aspect-square rounded-xl bg-slate-200' />
+			<div className='w-12 md:w-14  aspect-square rounded-xl bg-slate-200' />
+		</div>
+	);
+}

configs/redux/actions/recipe-action.js

@@ -0,0 +1,115 @@
+import {
+	addLikedRecipe,
+	addSavedRecipe,
+	getLikedRecipe,
+	getSavedRecipe,
+	removeLikedRecipe,
+	removeSavedRecipe,
+} from '@/lib/recipes';
+
+export function recipeLoading() {
+	return {
+		type: 'recipe/recipeLoading',
+	};
+}
+
+export function recipeFailed(error) {
+	return {
+		type: 'recipe/recipeFailed',
+		payload: error,
+	};
+}
+
+export function recipeLoaded(token, recipe_id) {
+	return async dispatch => {
+		try {
+			dispatch(recipeLoading());
+			const savedRecipeList = await getSavedRecipe(token);
+			const likedRecipeList = await getLikedRecipe(token);
+
+			const savedRecipe = savedRecipeList.find(recipe => {
+				return recipe.recipe_id === recipe_id;
+			});
+			const likedRecipe = likedRecipeList.find(recipe => {
+				return recipe.recipe_id === recipe_id;
+			});
+
+			const wasThisRecipeSaved = savedRecipe ? savedRecipe.id : '';
+			const wasThisRecipeLiked = likedRecipe ? likedRecipe.id : '';
+
+			const payload = {
+				saved_id: wasThisRecipeSaved,
+				liked_id: wasThisRecipeLiked,
+			};
+
+			dispatch({
+				type: 'recipe/recipeLoaded',
+				payload,
+			});
+		} catch (error) {
+			recipeFailed(error);
+		}
+	};
+}
+
+export function savedIdAdded(token, recipe_id) {
+	return async dispatch => {
+		try {
+			dispatch(recipeLoading());
+			const savedRecipe = await addSavedRecipe(token, recipe_id);
+			const payload = savedRecipe ? savedRecipe.id : '';
+
+			dispatch({
+				type: 'recipe/savedIdAdded',
+				payload,
+			});
+		} catch (error) {
+			recipeFailed(error);
+		}
+	};
+}
+
+export function savedIdRemoved(token, saved_id) {
+	return async dispatch => {
+		try {
+			dispatch(recipeLoading());
+			await removeSavedRecipe(token, saved_id);
+			dispatch({
+				type: 'recipe/savedIdRemoved',
+			});
+		} catch (error) {
+			recipeFailed(error);
+		}
+	};
+}
+
+export function likedIdAdded(token, recipe_id) {
+	return async dispatch => {
+		try {
+			dispatch(recipeLoading());
+			const savedRecipe = await addLikedRecipe(token, recipe_id);
+			const payload = savedRecipe ? savedRecipe.id : '';
+
+			dispatch({
+				type: 'recipe/likedIdAdded',
+				payload,
+			});
+		} catch (error) {
+			recipeFailed(error);
+		}
+	};
+}
+
+export function likedIdRemoved(token, liked_id) {
+	return async dispatch => {
+		try {
+			dispatch(recipeLoading());
+			await removeLikedRecipe(token, liked_id);
+			dispatch({
+				type: 'recipe/likedIdRemoved',
+			});
+		} catch (error) {
+			recipeFailed(error);
+		}
+	};
+}

configs/redux/reducers/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import { recipeReducer } from './recipe-reducer';
+
+export const rootReducer = combineReducers({
+	recipe: recipeReducer,
+});

configs/redux/reducers/recipe-reducer.js

@@ -0,0 +1,76 @@
+const initialState = {
+	data: {
+		liked_id: '',
+		saved_id: '',
+	},
+	error: null,
+	status: 'idle', // idle, success, failed, loading
+};
+
+export function recipeReducer(state = initialState, action) {
+	switch (action.type) {
+		case 'recipe/recipeLoaded': {
+			return {
+				...state,
+				status: 'success',
+				data: { ...action.payload },
+			};
+		}
+		case 'recipe/savedIdAdded': {
+			return {
+				...state,
+				status: 'success',
+				data: {
+					...state.data,
+					saved_id: action.payload,
+				},
+			};
+		}
+		case 'recipe/savedIdRemoved': {
+			return {
+				...state,
+				status: 'success',
+				data: {
+					...state.data,
+					saved_id: '',
+				},
+			};
+		}
+		case 'recipe/likedIdAdded': {
+			return {
+				...state,
+				status: 'success',
+				data: {
+					...state.data,
+					liked_id: action.payload,
+				},
+			};
+		}
+		case 'recipe/likedIdRemoved': {
+			return {
+				...state,
+				status: 'success',
+				data: {
+					...state.data,
+					liked_id: '',
+				},
+			};
+		}
+		case 'recipe/recipeLoading': {
+			return {
+				...state,
+				status: 'loading',
+			};
+		}
+		case 'recipe/recipeFailed': {
+			return {
+				...state,
+				status: 'failed',
+				error: action.payload,
+			};
+		}
+		default: {
+			return state;
+		}
+	}
+}

configs/redux/store.js

@@ -0,0 +1,8 @@
+import { applyMiddleware, legacy_createStore as createStore } from 'redux';
+import { rootReducer } from './reducers';
+import { thunk } from 'redux-thunk';
+import { createWrapper } from 'next-redux-wrapper';
+
+export const store = createStore(rootReducer, applyMiddleware(thunk));
+const makeStore = () => store;
+export const wrapper = createWrapper(makeStore);