create simple resource component; create simple resources page with b…

…utton that makes you navigate to new resource form b00tc4mp#482

staff/judy-grayland/project/api/logic/createResource.spec.js

@@ -12,7 +12,7 @@ dotenv.config()
 
 describe('createResource', () => {
   before(() => mongoose.connect(process.env.MONGODB_URL_TEST))
-  beforeEach(() => Resource.deleteMany())
+  // beforeEach(() => Resource.deleteMany())
 
   // HAPPY path - book
   it('succeeds on new book being correctly created', () => {
@@ -88,7 +88,7 @@ describe('createResource', () => {
     const title = random.title()
     const description = random.description()
     const resourceType = ''
-    const topic = ['igualdad de genero']
+    const topic = ['bullying']
     const link = random.link()
     const image = random.image()
     const author = ''
@@ -113,7 +113,7 @@ describe('createResource', () => {
     const title = random.title()
     const description = random.description()
     const resourceType = 'activity'
-    const topic = ['igualdad de genero']
+    const topic = ['diversidad cultural', 'diversidad funcional']
     const link = random.link()
     const image = random.image()
     const author = ''

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 ResourcesList from './pages/ResourcesList'
 import Login from './pages/Login'
 import Register from './pages/Register'
 import { useNavigate } from 'react-router-dom'
@@ -37,13 +38,15 @@ function App() {
         <nav>
           <NavLink to="profile">Profile</NavLink>
           <NavLink to="/">Home</NavLink>
+          <NavLink to="resources">Resources</NavLink>
           <Button onClick={handleLogout}>Log out</Button>
         </nav>
       </header>
       <Routes>
         <Route index element={<Home />} />
         <Route path="login" element={<Login />} />
         <Route path="register" element={<Register />} />
+        <Route path="resources" element={<ResourcesList />} />
         <Route element={<ProtectedRoute />}>
           <Route path="profile" element={<Profile />} />
         </Route>

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

@@ -2,12 +2,14 @@ import registerUser from './registerUser'
 import authenticateUser from './authenticateUser'
 import logoutUser from './logoutUser'
 import createResource from './createResource'
+import retrieveResources from './retrieveResources'
 
 const logic = {
   registerUser,
   authenticateUser,
   logoutUser,
   createResource,
+  retrieveResources,
 }
 
 export default logic

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

@@ -2,8 +2,6 @@ import { validate, errors } from '../../../shared'
 import { SystemError } from '../../../shared/errors'
 
 function registerUser(name, email, password) {
-  console.log('Received parameters:', { name, email, password })
-
   validate.text(name, 'name')
   validate.email(email, 'email')
   validate.password(password, 'password')

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

@@ -0,0 +1,29 @@
+import { errors } from '../../../shared'
+import { SystemError } from '../../../shared/errors'
+
+function retrieveResources() {
+  const req = {
+    method: 'GET',
+  }
+
+  return fetch(`${import.meta.env.VITE_API_URL}/resources`, 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) => {
+            throw new errors[body.error](body.message)
+          })
+      }
+
+      return res.json()
+    })
+}
+
+export default retrieveResources

staff/judy-grayland/project/app/src/pages/NewResource.jsx

@@ -1,11 +1,14 @@
+import { useNavigate } from 'react-router-dom'
 import { Form, Field, Button } from '../components'
 import { useState } from 'react'
 import logic from '../logic'
 
 function NewResource() {
   const [resourceType, setResourceType] = useState('activity')
+  const navigate = useNavigate()
 
   function handleCreateResourceSuccess() {
+    navigate('/resources')
     console.log('resource created successfully')
   }
   function handleSubmit(event) {
@@ -46,8 +49,7 @@ function NewResource() {
 
   return (
     <>
-      <h2>Recursos</h2>
-      <h3>Añade un recurso</h3>
+      <h3>Crea un recurso</h3>
       <Form onSubmit={handleSubmit}>
         {/* fieldset is an element used to group together part of a form. legend is used for the caption,ie.title */}
         <fieldset>

staff/judy-grayland/project/app/src/pages/Resource.jsx

@@ -0,0 +1,11 @@
+function Resource() {
+  return (
+    <article className="resource">
+      <h2>Resource title</h2>
+
+      <p>Description</p>
+    </article>
+  )
+}
+
+export default Resource

staff/judy-grayland/project/app/src/pages/ResourcesList.jsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom'
+
+import { Button } from '../components'
+import Resource from './Resource'
+
+function ResourcesList() {
+  const navigate = useNavigate()
+
+  function handleNewResourceClick() {
+    navigate('/resources/new')
+  }
+  return (
+    <>
+      <h2>Resources</h2>
+      <Resource></Resource>
+      <Button onClick={handleNewResourceClick}>Crear nuevo recurso</Button>
+    </>
+  )
+}
+
+export default ResourcesList