feat(src/compontents/events-carrosel/index.js/helpers/format-data/ind…

…ex.js/pages/events-description/index.js): Refatora funcao formatDate exibe hora em evento -@angeloneves19 -@thayanneregoo -@Ester-Arruda
aceleradora-TW · Feb 9, 2024 · ab772d0 · ab772d0
1 parent 6cfaa06
commit ab772d0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 28 deletions.
diff --git a/src/components/events-carrosel/index.js b/src/components/events-carrosel/index.js
@@ -18,7 +18,7 @@ const Events = () => {
           return {
             id: data.id,
             name: data.attributes.nome,
-            date: new Date(`${data.attributes.data_inicio}T00:00:00-0300`),
+            date: new Date(data.attributes.data_inicio).toLocaleDateString('pt-BR', {timeZone: 'UTC'}),
             image_url: data.attributes.foto_divulgacao.data.attributes.url,
             time_start: data.attributes.horario_inicio,
             time_end: data.attributes.horario_fim,
@@ -65,7 +65,7 @@ const Events = () => {
                         <img className="img" src={events.image_url} />
                       </div>
                       <div>
-                        <p className="date">{events.date.toLocaleDateString('pt-BR', { Timezone: 'UTC' })}</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
@@ -1,35 +1,29 @@
-const daysOfWeekInPtBr = [
-  'Domingo',
-  'Segunda',
-  'Terça',
-  'Quarta',
-  'Quinta',
-  'Sexta',
-  'Sábado'
-]
 const formatDate = (date) => {
-  const day = date.toLocaleDateString(undefined, {
-    day: 'numeric',
-    timeZone: 'UTC'
-  })
-  const month = date.toLocaleDateString('pt-BR', { month: 'short' })
-  const year = date.toLocaleDateString(undefined, {
+  return new Intl.DateTimeFormat('pt-BR', {
+    timeZone: 'UTC',
+    day: '2-digit',
+    month: 'short',
     year: 'numeric',
-    timeZone: 'UTC'
-  })
-  return `${daysOfWeekInPtBr[date.getDay()]}, ${day} ${month} ${year}`
+    weekday: 'long',
+  }).format(date)
 }
-const formatWorkshopDuration = (workshop) =>
+
+export const formatWorkshopDuration = (workshop) =>
   `, ${workshop.attributes?.horario_inicio} > ${workshop.attributes?.horario_fim}`
 
 const endsOnSameDay = (workshop) =>
   workshop.attributes?.data_inicio === workshop.attributes?.data_fim
 
 export const formatWorkshopDates = (workshop) => {
-  if (workshop && workshop.attributes && workshop.attributes.data_inicio && workshop.attributes.data_fim) {
+  if (
+    workshop &&
+    workshop.attributes &&
+    workshop.attributes.data_inicio &&
+    workshop.attributes.data_fim
+  ) {
     return endsOnSameDay(workshop)
-      ? formatDate(new Date(`${workshop.attributes?.data_inicio}T00:00:00-0300`))
-      : `${formatDate(new Date(`${workshop.attributes?.data_inicio}T00:00:00-0300`))} 
-      > ${formatDate(new Date(`${workshop.attributes?.data_fim}T00:00:00-0300`))}`
+      ? formatDate(new Date(workshop.attributes?.data_inicio))
+      : `${formatDate(new Date(workshop.attributes?.data_inicio))} 
+      > ${formatDate(new Date(workshop.attributes?.data_fim))}`
   }
-}
+}
diff --git a/src/pages/events-description/index.js b/src/pages/events-description/index.js
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { FreeMode, Navigation, Thumbs } from 'swiper/modules'
 import { Link, NavLink, useParams } from 'react-router-dom'
-import { formatWorkshopDates } from '../../helpers/format-data'
+import { formatWorkshopDates, formatWorkshopDuration } from '../../helpers/format-data'
 import 'swiper/css'
 import 'swiper/css/free-mode'
 import 'swiper/css/navigation'
@@ -106,7 +106,7 @@ export const EventsPageDescription = () => {
               <div className="style-icon">
                 <FontAwesomeIcon icon={faCalendarDays} />{' '}
               </div>
-              <p>{formatWorkshopDates(event)}</p>
+              <p>{formatWorkshopDates(event)} {formatWorkshopDuration(event)}</p>
             </li>
             <li>
               <div className="style-icon">