coloca data nos cards de terapias e oficinas

aceleradora-TW · Feb 15, 2024 · 76bfcfc · 76bfcfc
1 parent f2adee8
commit 76bfcfc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 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)
+      }
     })
   }, [])
 
@@ -48,11 +55,11 @@ const WorkshopsCarrossel = () => {
       <Swiper
         slidesPerView={3}
         navigation={true}
-        pagination={{clickable: true}}
+        pagination={{ clickable: true }}
         breakpoints={{
-          320: {slidesPerView: 1, spaceBetween:1},
-          660: {slidesPerView: 2},
-          1280: {slidesPerView: 3, spaceBetween:1}
+          320: { slidesPerView: 1, spaceBetween: 1 },
+          660: { slidesPerView: 2 },
+          1280: { slidesPerView: 3, spaceBetween: 1 },
         }}
         modules={[Navigation, Pagination]}
         className="mySwiper"
@@ -65,13 +72,10 @@ const WorkshopsCarrossel = () => {
                   <SwiperSlide>
                     <div>
                       <div>
-                        <img
-                          className="img"
-                          src={workshops.imageUrl}
-                        />
+                        <img className="img" src={workshops.imageUrl} />
                       </div>
                       <div>
-                        <p className="date">{workshops.data}</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,6 +18,10 @@ 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
           }
@@ -75,7 +79,8 @@ const TherapiesCarrossel = () => {
                         />
                       </div>
                       <div>
-                        <h1 className="title">{therapies.name}</h1>
+                        <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
@@ -66,6 +66,7 @@ const Events = () => {
                       </div>
                       <div>
                         <p className="date">{events.date}</p>
+                        {console.log(events.date)}
                         <h3 className="title">{events.name}</h3>
                       </div>
                       <EventsComponent>