add logic to show topics in Spanish when each resource component is r…

…endered b00tc4mp#482

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

@@ -0,0 +1,10 @@
+const topicTranslations = {
+  'cultural-diversity': 'Diversidad cultural',
+  bullying: 'Bullying',
+  'functional-diversity': 'Diversidad funcional',
+  'lgbt+': 'LGTB+',
+  'gender-equality': 'Igualdad de género',
+  'childrens-rights': 'Derechos de la infancia',
+}
+
+export default topicTranslations

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

@@ -11,6 +11,10 @@ function NewResource() {
     navigate('/resources')
     console.log('resource created successfully')
   }
+
+  function handleCancel() {
+    navigate('/resources')
+  }
   function handleSubmit(event) {
     event.preventDefault()
 
@@ -286,7 +290,7 @@ function NewResource() {
             </fieldset>
           </>
         )}
-        <Button>Cancelar</Button>
+        <Button onClick={handleCancel}>Cancelar</Button>
         <Button type="submit">Crear</Button>
       </Form>
     </>

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

@@ -1,17 +1,26 @@
 import { Button, Topic } from '../components'
+import topicTranslations from '../logic/topicTranslations'
 
 function ResourceActivity(props) {
+  const translatedTopics = props.topic.map((topic) => topicTranslations[topic])
+
   return (
     <article className="resource-activity">
       {/* We hardcode the type of resource because we already know what it is since 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>
+      <span
+        style={{ backgroundColor: '#EDB900', color: 'white', padding: '.5em' }}
+      >
+        Actividad
+      </span>
       <h2>{props.title}</h2>
 
       <img src={props.image}></img>
       <p>{props.description}</p>
       <a>{props.link}</a>
-      <Topic topics={props.topic} />
+      <p>
+        Temas: <em>{translatedTopics.join(', ')}</em>
+      </p>
       <Button>Editar</Button>
       <Button>Eliminar</Button>
     </article>

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

@@ -1,15 +1,24 @@
 import { Button } from '../components'
+import topicTranslations from '../logic/topicTranslations'
 
 function ResourceBook(props) {
+  const translatedTopics = props.topic.map((topic) => topicTranslations[topic])
+
   return (
     <article className="resource-book">
-      <span>Libro</span>
+      <span
+        style={{ backgroundColor: '#A627A1', color: 'white', padding: '.5em' }}
+      >
+        Libro
+      </span>
       <h2>{props.title}</h2>
 
       <img src={props.image}></img>
       <p>{props.description}</p>
-      <span>{props.author}</span>
-      <p>{props.topic}</p>
+      <span>Autor: {props.author}</span>
+      <p>
+        Temas: <em>{translatedTopics.join(', ')}</em>
+      </p>
       <Button>Editar</Button>
       <Button>Eliminar</Button>
     </article>

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

@@ -1,15 +1,24 @@
 import { Button, Topic } from '../components'
+import topicTranslations from '../logic/topicTranslations'
 
 function ResourceDate(props) {
+  const translatedTopics = props.topic.map((topic) => topicTranslations[topic])
+
   return (
     <article className="resource-date">
       {/* We hardcode the type of resource because we already know what it is since 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>Fecha especial</span>
+      <span
+        style={{ backgroundColor: '#05B4C0', color: 'white', padding: '.5em' }}
+      >
+        Fecha especial
+      </span>
       <h2>{props.title}</h2>
       <p>{props.description}</p>
       <a>{props.link}</a>
-      <Topic topics={props.topic} />
+      <p>
+        Temas: <em>{translatedTopics.join(', ')}</em>
+      </p>
       <Button>Editar</Button>
       <Button>Eliminar</Button>
     </article>

staff/judy-grayland/project/shared/validate.js

@@ -8,7 +8,10 @@ const ID_REGEX = /^[0-9A-Fa-f]{24}$/
 function text(text, explain) {
   if (typeof text !== 'string')
     throw new TypeError(explain + ' is not a string')
-  if (!text.trim().length) throw new ContentError(explain + ' is empty')
+  if (!text.trim().length) {
+    alert('por favor rellena todos los campos')
+    throw new ContentError(explain + ' is empty')
+  }
 }
 
 function id(id, explain) {
@@ -53,6 +56,7 @@ function resourceType(resourceType, explain) {
 function tagArray(tags) {
   //we check that it's actually an array
   if (!Array.isArray(tags)) {
+    alert('por favor selecciona al menos un tema')
     throw new TypeError(`${tags} must be an array`)
   }
   // we check that each element in the array is a string