implement delete recipe frontend b00tc4mp#407

staff/belen-ivars/project/api/handlers/deleteRecipeHandler.js

@@ -2,7 +2,7 @@ import { ContentError, NotFoundError } from "com/errors.js"
 import logic from "../logic/index.js"
 import jwt from 'jsonwebtoken'
 
-export default async (req, res) => {
+const deleteRecipeHandler = async (req, res) => {
 	const recipeId = req.params.recipeId
 	const token = req.headers.authorization.substring(7)
 
@@ -21,4 +21,6 @@ export default async (req, res) => {
 
 		res.status(status).json({ error: error.constructor.name, message: error.message })
 	}
-}
+}
+
+export default deleteRecipeHandler

staff/belen-ivars/project/api/logic/editRecipe.js

@@ -14,12 +14,10 @@ async function editRecipe(userId, recipeId, title, description, image) {
 	const user = await User.findById(userId)
 	if (!user)
 		throw new NotFoundError('user not found')
-	console.log('user founded')
 
 	const recipe = await Recipe.findById(recipeId)
 	if (!recipe)
 		throw new NotFoundError('recipe not found')
-	console.log('recipe founded')
 
 	let recipeUpdated
 

staff/belen-ivars/project/app/src/components/Recipe.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
 
 import logic from "../logic"
 
-import { Button, Field, Form, Link } from "../library"
+import { Button, Container, Field, Form, Link } from "../library"
 import { useContext } from '../hooks'
 
 import session from '../logic/session'
@@ -35,6 +35,18 @@ function Recipe(props) {
 		}
 	}
 
+	const handleDeleteClick = async (event) => {
+		event.preventDefault()
+
+		try {
+			await logic.deleteRecipe(props.recipe._id)
+			props.onSuccess()
+
+		} catch (error) {
+			console.log(error)
+		}
+	}
+
 	useEffect(() => {
 
 	}, [handleSubmit])
@@ -46,9 +58,13 @@ function Recipe(props) {
 		<img className="recipe-image" src={props.recipe.image} />
 		<p>{props.recipe.description}</p>
 
+		{/* Ací estic configurant el botó d'edició*/}
+
+		{session.sessionUserId === props.recipe.author && view === null && <Button onClick={handleDeleteClick}>🗑️</Button>}
+		{session.sessionUserId === props.recipe.author && view === null && <Button className="edit-recipe" onClick={() => setView('edit')}>Edit</Button>}
+
+		{view === 'edit' && <Button onClick={() => setView(null)}>Cancel</Button>}
 
-		{view === 'edit' ? <Button onClick={() => setView(null)}>Cancel</Button> : <Button className="edit-recipe" onClick={() => setView('edit')}>Edit</Button>
-		}
 		{view === 'edit' && <Form id='edit-form' onSubmit={handleSubmit}>
 			<Field type='text' id='title' placeholder={props.recipe.title} />
 			<Field type='text' id='description' placeholder={props.recipe.description} />
@@ -57,6 +73,9 @@ function Recipe(props) {
 
 		</Form>}
 
+
+
+
 	</article>
 }
 

staff/belen-ivars/project/app/src/logic/deleteRecipe.js

@@ -0,0 +1,35 @@
+import { SystemError } from "com/errors"
+import { API_URL } from "../utils/constants"
+import session from "./session"
+import { errors } from 'com'
+
+
+export default function deleteRecipe(recipeId) {
+	return (async () => {
+		const req = {
+			method: 'DELETE',
+			headers: {
+				Authorization: `Bearer ${session.token}`,
+			}
+		}
+
+		let res
+		try {
+			res = await fetch(`${API_URL}/recipes/${recipeId}`, req)
+		} catch (error) {
+			throw new SystemError(error.message)
+		}
+
+		if (!res.ok) {
+			let body
+
+			try {
+				body = await res.json()
+			} catch (error) {
+				throw new SystemError(errors.message)
+			}
+
+			throw new errors[body.error](body.message)
+		}
+	})()
+}

staff/belen-ivars/project/app/src/logic/index.js

@@ -6,6 +6,7 @@ import isUserLoggedIn from './isUserLoggedIn'
 import createRecipe from './createRecipe'
 import retrieveRecipes from './retrieveRecipes'
 import editRecipe from './editRecipe'
+import deleteRecipe from './deleteRecipe'
 
 const logic = {
 	registerUser,
@@ -15,7 +16,8 @@ const logic = {
 	isUserLoggedIn,
 	createRecipe,
 	retrieveRecipes,
-	editRecipe
+	editRecipe,
+	deleteRecipe
 }
 
 export default logic

staff/belen-ivars/project/app/src/pages/Home.jsx

@@ -78,10 +78,9 @@ function Home(props) {
 			<Route path='/favs' element={<FavsUser />} />
 			<Route path='/new-recipe' element={<NewRecipe />} />
 			<Route path='/' element={<Recipes stamp={stamp} />} />
+		</Routes>
 
 
-
-		</Routes>
 		<footer className="footer">
 			<Container className="footer-menu">
 				{view === 'new-recipe' && <NewRecipe onPublish={handleNewRecipePublish} onCancel={handleNewRecipeCancel} />}