add new route with EditResource component; fetch individual resource …

…by id and start populating input b00tc4mp#484

staff/judy-grayland/project/app/src/App.jsx

@@ -9,6 +9,7 @@ import logic from './logic'
 import Profile from './pages/Profile'
 import Home from './pages/Home'
 import NewResource from './pages/NewResource'
+import EditResource from './pages/EditResource'
 import ResourcesList from './pages/ResourcesList'
 import Login from './pages/Login'
 import Register from './pages/Register'
@@ -53,6 +54,9 @@ function App() {
         <Route element={<ProtectedRoute />}>
           <Route path="resources/new" element={<NewResource />} />
         </Route>
+        <Route element={<ProtectedRoute />}>
+          <Route path="resources/:id" element={<EditResource />} />
+        </Route>
       </Routes>
     </>
   )

staff/judy-grayland/project/app/src/components/DeleteResourceButton.jsx

@@ -20,7 +20,7 @@ function DeleteResourceButton({ resourceId }) {
             throw new Error(error)
           })
       } catch (error) {
-        throw new Error(error)
+        throw new NotFoundError(error)
       }
     }
   }

staff/judy-grayland/project/app/src/components/EditResourceButton.jsx

@@ -0,0 +1,32 @@
+import Button from './Button'
+import { NotFoundError } from '../../../shared/errors'
+import logic from '../logic'
+import { errors } from '../../../shared'
+import { useNavigate } from 'react-router-dom'
+
+function EditResourceButton({ resourceId }) {
+  const navigate = useNavigate()
+
+  function handleEditResourceClick() {
+    navigate(`/resources/${resourceId}`)
+  }
+  // const handleEditResourceClick = () => {
+  //   try {
+  //     logic
+  //       .editResource(resourceId, newData)
+  //       .then(() => {
+  //         console.log('resource edited sucessfully')
+  //         // by using navigate(0) we reload the page we're on, so the resource that's been deleted no longer shows
+  //         navigate(0)
+  //       })
+  //       .catch((error) => {
+  //         throw new Error(error)
+  //       })
+  //   } catch (error) {
+  //     throw new NotFoundError(error)
+  //   }
+  // }
+  return <Button onClick={handleEditResourceClick}>Editar</Button>
+}
+
+export default EditResourceButton

staff/judy-grayland/project/app/src/components/Field.jsx

@@ -32,7 +32,12 @@ function Field(props) {
   return (
     <>
       <label htmlFor={props.inputId}>{props.children}</label>
-      <input name={props.name} type={props.type ?? 'text'} id={props.inputId} />
+      <input
+        name={props.name}
+        type={props.type ?? 'text'}
+        id={props.inputId}
+        value={props.value}
+      />
     </>
   )
 }

staff/judy-grayland/project/app/src/components/index.js

@@ -1,7 +1,8 @@
 import Field from './Field'
 import Button from './Button'
 import DeleteResourceButton from './DeleteResourceButton'
+import EditResourceButton from './EditResourceButton'
 import Form from './Form'
 import Topic from './Topic'
 
-export { Field, Button, DeleteResourceButton, Form, Topic }
+export { Field, Button, DeleteResourceButton, EditResourceButton, Form, Topic }

staff/judy-grayland/project/app/src/logic/editResource.js

@@ -0,0 +1,43 @@
+import { validate, errors } from '../../../shared'
+const { SystemError } = errors
+
+function editResource(resourceId, newData) {
+  if (newData.title) validate.text(newData.title, 'title')
+  if (newData.description) validate.text(newData.description, 'description')
+  if (newData.resourceType)
+    validate.resourceType(newData.resourceType, 'resourceType')
+  if (newData.topic) validate.tagArray(newData.topic, 'topic array')
+  if (newData.image) validate.text(newData.image, 'image')
+  if (newData.link) validate.text(newData.link, 'link')
+  if (newData.author) validate.text(newData.author, 'author')
+
+  // prepare the request (body)
+  const req = {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ id: resourceId, newData }),
+  }
+
+  // send the request to the backend
+  return fetch(`${import.meta.env.VITE_API_URL}/resources/${resourceId}`, req)
+    .catch((error) => {
+      throw new SystemError(error.message)
+    })
+    .then((res) => {
+      if (!res.ok) {
+        return res
+          .json()
+          .catch((error) => {
+            throw new SystemError(error.message)
+          })
+          .then((body) => {
+            console.log('error from server', body.error)
+            throw new errors[body.error](body.message)
+          })
+      }
+    })
+}
+
+export default editResource