Merge pull request #158 from aceleradora-TW/157-data-cards-terapias-o…

…ficinas coloca data nos cards de terapias e oficinas
aceleradora-TW · Feb 19, 2024 · 5a84a80 · 5a84a80
2 parents 7b128a6 + 940f7eb
commit 5a84a80
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 24 deletions.
diff --git a/src/components/carrossel-oficinas/index.js b/src/components/carrossel-oficinas/index.js
@@ -17,18 +17,25 @@ const WorkshopsCarrossel = () => {
   useEffect(() => {
     cms.get('api/workshops/?populate=foto_divulgacao').then((response) => {
       const { data } = response.data
-      const workshops = data
-        .filter((workshop) => workshop !== null && workshop !== undefined)
-        .map((workshop) => ({
-          id: workshop.id,
-          name: workshop.attributes.nome,
-          imageUrl: workshop.attributes.foto_divulgacao.data[0].attributes.url,
-        }))
+      if (data) {
+        const workshops = data.map((workshop) => {
+          return {
+            id: workshop.id,
+            name: workshop.attributes.nome,
+            date: new Date(workshop.attributes.data_inicio).toLocaleDateString(
+              'pt-BR',
+              { timeZone: 'UTC' }
+            ),
+            imageUrl:
+              workshop.attributes.foto_divulgacao.data[0].attributes.url
+          }
+        })
 
-      const workshopsSortedByName = workshops.sort((a, b) =>
-        a.nome < b.nome ? -1 : 1,
-      )
-      setAttributes(workshopsSortedByName)
+        const workshopsSortedByName = workshops.sort((a, b) =>
+          a.nome < b.nome ? -1 : 1
+        )
+        setAttributes(workshopsSortedByName)
+      }
     })
   }, [])
 
@@ -60,7 +67,7 @@ const WorkshopsCarrossel = () => {
         breakpoints={{
           320: { slidesPerView: 1, spaceBetween: 1 },
           660: { slidesPerView: 2 },
-          1280: { slidesPerView: 3, spaceBetween: 1 },
+          1280: { slidesPerView: 3, spaceBetween: 1 }
         }}
         modules={[Navigation, Pagination]}
         className="mySwiper"
@@ -76,7 +83,14 @@ const WorkshopsCarrossel = () => {
                         <img className="img" src={workshops.imageUrl} />
                       </div>
                       <div>
-                        <p className="date">{workshops.data}</p>
+                      { 
+                        workshops.date === "01/01/1970" ? (
+                        <p></p>                
+                        ) : (
+                          <p className="date">
+                          {workshops.date}
+                        </p>
+                        )}
                         <h3 className="title">{workshops.name}</h3>
                       </div>
                       <VerMais>

diff --git a/src/components/carrossel-terapias/index.js b/src/components/carrossel-terapias/index.js
@@ -18,14 +18,18 @@ const TherapiesCarrossel = () => {
         if (data) {
           return {
             id: data.id,
+            date: new Date(data.attributes.data_inicio).toLocaleDateString(
+              'pt-BR',
+              { timeZone: 'UTC' }
+            ),
             name: data.attributes.nome,
-            image_url: data.attributes.foto_divulgacao.data[0].attributes.url,
+            image_url: data.attributes.foto_divulgacao.data[0].attributes.url
           }
         }
         return data.attributes
       })
       const therapiesSortedByName = therapies.sort((a, b) =>
-        a.nome < b.nome ? -1 : 1,
+        a.nome < b.nome ? -1 : 1
       )
       setAttributes(therapiesSortedByName)
     })
@@ -57,7 +61,7 @@ const TherapiesCarrossel = () => {
         breakpoints={{
           320: { slidesPerView: 1, spaceBetween: 1 },
           660: { slidesPerView: 2 },
-          1280: { slidesPerView: 3, spaceBetween: 1 },
+          1280: { slidesPerView: 3, spaceBetween: 1 }
         }}
         modules={[Navigation, Pagination]}
         className="mySwiper"
@@ -73,7 +77,15 @@ const TherapiesCarrossel = () => {
                         <img className="img" src={therapies.image_url} />
                       </div>
                       <div>
-                        <h1 className="title">{therapies.name}</h1>
+                      { 
+                      therapies.date === "01/01/1970" ? (
+                        <p></p>                         
+                        ) : (
+                          <p className="date">
+                          {therapies.date}
+                        </p>
+                        )}
+                        <h3 className="title">{therapies.name}</h3>
                       </div>
                       <VerMais>
                         <div className="styled-button">

diff --git a/src/components/events-carrosel/index.js b/src/components/events-carrosel/index.js
@@ -25,7 +25,7 @@ const Events = () => {
             type: data.attributes.tipo,
             location: data.attributes.local,
             price: data.attributes.preco,
-            description: data.attributes.descricao,
+            description: data.attributes.descricao
           }
         })
         const eventsOrdered = events
@@ -64,7 +64,7 @@ const Events = () => {
         breakpoints={{
           320: { slidesPerView: 1, spaceBetween: 1 },
           660: { slidesPerView: 2 },
-          1280: { slidesPerView: 3, spaceBetween: 1 },
+          1280: { slidesPerView: 3, spaceBetween: 1 }
         }}
         modules={[Navigation, Pagination]}
         className="mySwiper"
@@ -80,11 +80,15 @@ const Events = () => {
                         <img className="img" src={events.image_url} />
                       </div>
                       <div>
-                        <p className="date">
-                          {events.date.toLocaleDateString('pt-BR', {
-                            Timezone: 'UTF',
-                          })}
+                      { 
+                      events.date === "01/01/1970" ? (
+                        <p></p>
+
+                        ) : (
+                          <p className="date">
+                          {events.date}
                         </p>
+                        )}
                         <h3 className="title">{events.name}</h3>
                       </div>
                       <EventsComponent>

diff --git a/src/helpers/format-data/index.js b/src/helpers/format-data/index.js
@@ -4,7 +4,7 @@ const formatDate = (date) => {
     day: '2-digit',
     month: 'short',
     year: 'numeric',
-    weekday: 'long',
+    weekday: 'long'
   }).format(date)
   return dateFormated[0].toUpperCase() + dateFormated.slice(1)
 }