Conflit(src/components/events-carrosel/index.js): ajustando conflitos…

… com a main -@angeloneves19 -@thayanneregoo -@Wander06
aceleradora-TW · Feb 16, 2024 · db813f5 · db813f5
2 parents 96bb232 + 8b9a386
commit db813f5
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 82 deletions.
diff --git a/src/components/events-carrosel/index.js b/src/components/events-carrosel/index.js
@@ -2,15 +2,14 @@ import React, { useEffect, useState } from 'react'
 import { NavLink } from 'react-router-dom'
 import 'swiper/css'
 import 'swiper/css/navigation'
-import { FreeMode, Navigation, Pagination } from 'swiper/modules'
+import { Navigation, Pagination } from 'swiper/modules'
 import { cms } from '../../client'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { CssCarrosselGlobal } from '../global-styles'
 import EventsComponent from './styled.js'
 
 const Events = () => {
   const [attributesEvents, setAttributesEvents] = useState([])
-  const urlCms = process.env.REACT_APP_URL_CMS
   useEffect(() => {
     cms.get('api/events/?populate=foto_divulgacao').then((response) => {
       const { data } = response.data
@@ -19,7 +18,7 @@ const Events = () => {
           return {
             id: data.id,
             name: data.attributes.nome,
-            date: new Date(data.attributes.data_inicio),
+            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,
@@ -36,6 +35,7 @@ const Events = () => {
       }
     })
   }, [])
+
   return (
     <CssCarrosselGlobal style={{ background: '#FAFAFA' }}>
       <div className="carrossel">

diff --git a/src/helpers/format-data/index.js b/src/helpers/format-data/index.js
@@ -1,35 +1,28 @@
-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, {
+  const dateFormated = 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)
+  return dateFormated[0].toUpperCase() + dateFormated.slice(1)
 }
-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?.attributes?.data_inicio &&
+    workshop?.attributes?.data_fim
+  ) {
     return endsOnSameDay(workshop)
       ? 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'
@@ -108,7 +108,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">

diff --git a/src/pages/therapies-description/index.js b/src/pages/therapies-description/index.js
@@ -18,6 +18,7 @@ import 'swiper/css/navigation'
 import 'swiper/css/thumbs'
 import NavBar from '../../components/navbar'
 import { Link, useParams } from 'react-router-dom'
+import { formatWorkshopDates, formatWorkshopDuration } from '../../helpers/format-data'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 
@@ -45,19 +46,6 @@ export const DetailsTherapies = () => {
       })
   }, [])
 
-  const handleDate = (date) => {
-    const day = date.toLocaleDateString(undefined, {
-      day: 'numeric',
-      Timezone: 'UTF'
-    })
-    const month = date.toLocaleDateString('pt-BR', { month: 'short' })
-    const year = date.toLocaleDateString(undefined, {
-      year: 'numeric',
-      Timezone: 'UTF'
-    })
-    return [day, month, year].join(' ')
-  }
-
   return (
     <>
       <NavBar/>
@@ -71,14 +59,7 @@ export const DetailsTherapies = () => {
                   <p className="start-date">
                     <div className="spacingDate">
                       <FontAwesomeIcon icon={faCalendarDays} size="lg" />{' '}
-                      <p>{`
-                     ${handleDate(
-                       new Date(therapies.attributes?.data_inicio)
-                     )} •
-                    ${therapies.attributes?.horario_inicio} >
-                    ${handleDate(new Date(therapies.attributes?.data_fim))} 
-                      • ${therapies.attributes?.horario_fim}
-                      `}</p>
+                      <p>{formatWorkshopDates(therapies)} {formatWorkshopDuration(therapies)}</p>
                     </div>
                   </p>
                 </div>

diff --git a/src/pages/workshop-description/index.js b/src/pages/workshop-description/index.js
@@ -10,6 +10,7 @@ import {
   faLocationDot,
   faBullhorn
 } from '@fortawesome/free-solid-svg-icons'
+import { formatWorkshopDates, formatWorkshopDuration } from '../../helpers/format-data'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { FreeMode, Navigation, Thumbs } from 'swiper/modules'
 import 'swiper/css'
@@ -43,41 +44,6 @@ export const WorkshopDetails = () => {
         setWorkshops(data)
       })
   }, [])
-  const daysOfWeekInPtBr = [
-    'Domingo',
-    'Segunda',
-    'Terça',
-    'Quarta',
-    'Quinta',
-    'Sexta',
-    'Sábado'
-  ]
-  const formatDate = (date) => {
-    const day = date.toLocaleDateString(undefined, {
-      day: 'numeric',
-      Timezone: 'UTF'
-    })
-    const month = date.toLocaleDateString('pt-BR', { month: 'short' })
-    const year = date.toLocaleDateString(undefined, {
-      year: 'numeric',
-      Timezone: 'UTF'
-    })
-    return `${daysOfWeekInPtBr[date.getDay()]}, ${day} ${month} ${year}`
-  }
-  const formatWorkshopDuration = (workshop) =>
-    `, ${workshop.attributes?.horario_inicio} > ${workshop.attributes?.horario_fim}`
-
-  const endsOnSameDay = (workshop) =>
-    workshop.attributes?.data_inicio === workshop.attributes?.data_fim
-
-  const formatWorkshopDates = (workshop) => {
-    if (workshop && workshop.attributes && workshop.attributes.data_inicio && workshop.attributes.data_fim) {
-      return endsOnSameDay(workshop)
-        ? formatDate(new Date(workshop.attributes?.data_inicio))
-        : `${formatDate(new Date(workshop.attributes?.data_inicio))} 
-        até ${formatDate(new Date(workshop.attributes?.data_fim))}`
-    }
-  }
 
   return (
     <>