feat: add react hot toast and use it for notifying when user saves an…

…d likes the recipe
wafash08 · Jun 9, 2024 · 1f036a5 · 1f036a5
1 parent c426acb
commit 1f036a5
Show file tree

Hide file tree

Showing 11 changed files with 272 additions and 117 deletions.
diff --git a/components/category-recipe-list.jsx b/components/category-recipe-list.jsx
@@ -1,10 +1,10 @@
 import { isImageValid } from '@/helpers';
 import Link from 'next/link';
 
-export default function CategoryRecipeList({ recipes, type }) {
+export default function CategoryRecipeList({ recipes }) {
 	return (
 		<ul className='grid md:grid-cols-2 lg:grid-cols-3 gap-10'>
-			{recipes.map(({ id, recipe_id, recipe }) => {
+			{recipes.map(({ recipe_id, recipe }) => {
 				const { image, title } = recipe;
 				const isValid = image ? isImageValid(image) : false;
 
@@ -14,7 +14,7 @@ export default function CategoryRecipeList({ recipes, type }) {
 						className='group rounded-2xl h-[400px] overflow-hidden flex'
 					>
 						<Link
-							href={`/recipes/${recipe_id}?${type}=${id}`}
+							href={`/recipes/${recipe_id}`}
 							className='block w-full relative'
 						>
 							<div className='overflow-hidden w-full h-full'>

diff --git a/components/layout.jsx b/components/layout.jsx
@@ -43,7 +43,7 @@ function Header({ hasLoggedIn }) {
 	};
 
 	return (
-		<header className='fixed top-0 left-0 w-full h-24 flex items-center bg-white/75 z-50 backdrop-blur'>
+		<header className='fixed top-0 left-0 w-full h-24 flex items-center bg-white/50 z-50 backdrop-blur'>
 			<Container>
 				<nav className='flex justify-between gap-8'>
 					<ul className='flex items-center gap-4 lg:gap-20'>

diff --git a/components/pagination.jsx b/components/pagination.jsx
@@ -19,8 +19,8 @@ export default function Pagination() {
 						<Link
 							href={`?page=${prevPage}`}
 							className={clsx(
-								'flex items-center justify-center px-6 py-3 rounded-md bg-yellow-400 text-white',
-								'transition-colors group-hover:bg-yellow-500'
+								'bg-yellow-400 text-white flex items-center justify-center px-6 py-3 rounded outline outline-1 outline-yellow-400',
+								'transition-all hover:outline-offset-2 focus:outline-offset-2'
 							)}
 							scroll={false}
 						>
@@ -37,8 +37,8 @@ export default function Pagination() {
 					<Link
 						href={`?page=${nextPage}`}
 						className={clsx(
-							'flex items-center justify-center px-6 py-3 rounded-md bg-yellow-400 text-white',
-							'transition-colors group-hover:bg-yellow-500'
+							'bg-yellow-400 text-white flex items-center justify-center px-6 py-3 rounded outline outline-1 outline-yellow-400',
+							'transition-all hover:outline-offset-2 focus:outline-offset-2'
 						)}
 					>
 						Selanjutnya

diff --git a/lib/recipes.js b/lib/recipes.js
@@ -73,7 +73,6 @@ export async function getMyRecipe(token) {
 }
 
 export async function getLikedRecipe(token) {
-	console.log('token likedRecipe > ', token);
 	try {
 		const headers = new Headers();
 		headers.set('Authorization', `Bearer ${token}`);
@@ -108,3 +107,95 @@ export async function getSavedRecipe(token) {
 		throw error;
 	}
 }
+
+export async function addSavedRecipe(token, id) {
+	try {
+		const headers = new Headers();
+		headers.set('Authorization', `Bearer ${token}`);
+		headers.set('Content-Type', 'application/json');
+		const method = 'POST';
+		const body = { recipe_id: id };
+		const response = await fetch(`${RECIPES_URL}/save`, {
+			method,
+			headers,
+			body: JSON.stringify(body),
+		});
+		if (response.ok) {
+			const responseJson = await response.json();
+			return responseJson.data;
+		} else {
+			throw response.status;
+		}
+	} catch (error) {
+		console.log('error addSavedRecipe > ', error);
+		throw error;
+	}
+}
+
+export async function removeSavedRecipe(token, id) {
+	try {
+		const headers = new Headers();
+		headers.set('Authorization', `Bearer ${token}`);
+		headers.set('Content-Type', 'application/json');
+		const method = 'DELETE';
+		const response = await fetch(`${RECIPES_URL}/save/${id}`, {
+			method,
+			headers,
+		});
+		if (response.ok) {
+			const responseJson = await response.json();
+			return responseJson.data;
+		} else {
+			throw response.status;
+		}
+	} catch (error) {
+		console.log('error removeSavedRecipe > ', error);
+		throw error;
+	}
+}
+
+export async function addLikedRecipe(token, id) {
+	try {
+		const headers = new Headers();
+		headers.set('Authorization', `Bearer ${token}`);
+		headers.set('Content-Type', 'application/json');
+		const method = 'POST';
+		const body = { recipe_id: id };
+		const response = await fetch(`${RECIPES_URL}/like`, {
+			method,
+			headers,
+			body: JSON.stringify(body),
+		});
+		if (response.ok) {
+			const responseJson = await response.json();
+			return responseJson.data;
+		} else {
+			throw response.status;
+		}
+	} catch (error) {
+		console.log('error addLikedRecipe > ', error);
+		throw error;
+	}
+}
+
+export async function removeLikedRecipe(token, id) {
+	try {
+		const headers = new Headers();
+		headers.set('Authorization', `Bearer ${token}`);
+		headers.set('Content-Type', 'application/json');
+		const method = 'DELETE';
+		const response = await fetch(`${RECIPES_URL}/like/${id}`, {
+			method,
+			headers,
+		});
+		if (response.ok) {
+			const responseJson = await response.json();
+			return responseJson.data;
+		} else {
+			throw response.status;
+		}
+	} catch (error) {
+		console.log('error removeLikedRecipe > ', error);
+		throw error;
+	}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "cookie": "^0.6.0",
     "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
     "eslint": "^8",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,5 +1,11 @@
 import '@/styles/globals.css';
+import { Toaster } from 'react-hot-toast';
 
 export default function App({ Component, pageProps }) {
-	return <Component {...pageProps} />;
+	return (
+		<>
+			<Component {...pageProps} />
+			<Toaster containerStyle={{ bottom: 40, right: 40 }} />
+		</>
+	);
 }
diff --git a/pages/login.js b/pages/login.js
@@ -108,7 +108,7 @@ export default function Login() {
 										<span className='sr-only'>Sedang masuk</span>
 									</>
 								) : (
-									'register account'
+									'login'
 								)}
 							</Button>
 							<div className='flex justify-end'>