render actual data from database by resource type b00tc4mp#482

juditta99 · May 1, 2024 · 9a0da20 · 9a0da20
1 parent 44c6711
commit 9a0da20
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 33 deletions.
diff --git a/staff/judy-grayland/project/app/src/pages/Login.jsx b/staff/judy-grayland/project/app/src/pages/Login.jsx
@@ -5,7 +5,7 @@ import { NavLink, useNavigate } from 'react-router-dom'
 function Login(props) {
   const navigate = useNavigate()
   function authenticateUserSuccess() {
-    console.log('user logged in successfuly')
+    console.log('user logged in successfully')
     navigate('/')
   }
 

diff --git a/staff/judy-grayland/project/app/src/pages/NewResource.jsx b/staff/judy-grayland/project/app/src/pages/NewResource.jsx
@@ -169,9 +169,6 @@ function NewResource() {
             <Field name="image" inputId="image-input">
               Imagen
             </Field>
-            <Field name="link" inputId="link-input">
-              Enlace
-            </Field>
             <fieldset>
               <legend>Selecciona los temas relacionados a la actividad</legend>
               <Field
@@ -295,6 +292,7 @@ function NewResource() {
             </fieldset>
           </>
         )}
+        <Button>Cancelar</Button>
         <Button type="submit">Crear</Button>
       </Form>
     </>

diff --git a/staff/judy-grayland/project/app/src/pages/ResourceActivity.jsx b/staff/judy-grayland/project/app/src/pages/ResourceActivity.jsx
@@ -1,22 +1,19 @@
 import { Button } from '../components'
 
-function ResourceActivity() {
+function ResourceActivity(props) {
   return (
     <article className="resource-activity">
+      {/* We hardcode the type of resource because we already know what it is because this component is only rendered for this type of resource. If we write props.resourceType we get it from the database and it's in English */}
+
       <span>Actividad</span>
-      <h2>Taller</h2>
+      <h2>{props.title}</h2>
 
-      <img src="https://www.dgenes.es/wp-content/uploads/Colegio-Concepcion-CT-federito-2.jpeg"></img>
-      <p>
-        Aromatic eu, cortado, to go sit coffee foam galão, cup caramelization
-        iced spoon barista qui lungo. Roast cortado, to go whipped blue mountain
-        rich aged, affogato froth, galão mazagran shop robust iced organic galão
-        plunger pot bar mazagran brewed.
-      </p>
-      <a>www.linkylink.com</a>
-      <p>Bullying, gender equality</p>
-      <Button>Edit</Button>
-      <Button>Delete</Button>
+      <img src={props.image}></img>
+      <p>{props.description} </p>
+      <a>{props.link}</a>
+      <p>{props.topic}</p>
+      <Button>Editar</Button>
+      <Button>Eliminar</Button>
     </article>
   )
 }

diff --git a/staff/judy-grayland/project/app/src/pages/ResourceBook.jsx b/staff/judy-grayland/project/app/src/pages/ResourceBook.jsx
@@ -1,22 +1,17 @@
 import { Button } from '../components'
 
-function ResourceBook() {
+function ResourceBook(props) {
   return (
     <article className="resource">
       <span>Libro</span>
-      <h2>Leer te da alas</h2>
+      <h2>{props.title}</h2>
 
-      <img src="https://www.farmersalmanac.com/wp-content/uploads/2020/11/rainbow-AdobeStock_2206323-1137x630.jpeg"></img>
-      <p>
-        Aromatic eu, cortado, to go sit coffee foam galão, cup caramelization
-        iced spoon barista qui lungo. Roast cortado, to go whipped blue mountain
-        rich aged, affogato froth, galão mazagran shop robust iced organic galão
-        plunger pot bar mazagran brewed.
-      </p>
-      <span>Autor</span>
-      <p>Diversidad cultural</p>
-      <Button>Edit</Button>
-      <Button>Delete</Button>
+      <img src={props.image}></img>
+      <p>{props.description}</p>
+      <span>{props.author}</span>
+      <p>{props.topic}</p>
+      <Button>Editar</Button>
+      <Button>Eliminar</Button>
     </article>
   )
 }

diff --git a/staff/judy-grayland/project/app/src/pages/ResourcesList.jsx b/staff/judy-grayland/project/app/src/pages/ResourcesList.jsx
@@ -34,10 +34,33 @@ function ResourcesList() {
 
   return (
     <>
-      <h2>Resources</h2>
+      <h2>Recursos</h2>
       <p>{resources.length}</p>
-      <ResourceActivity></ResourceActivity>
-      <ResourceBook></ResourceBook>
+      {resources.map((resource) => {
+        if (resource.resourceType === 'book') {
+          return (
+            <ResourceBook
+              key={resource._id}
+              title={resource.title}
+              description={resource.description}
+              image={resource.image}
+              author={resource.author}
+              topic={resource.topic}
+            />
+          )
+        }
+
+        return (
+          <ResourceActivity
+            key={resource._id}
+            title={resource.title}
+            description={resource.description}
+            image={resource.image}
+            link={resource.link}
+            topic={resource.topic}
+          />
+        )
+      })}
 
       <Button onClick={handleNewResourceClick}>Crear nuevo recurso</Button>
     </>