toggle format fixed, move format from context

.eslintrc.json

@@ -44,9 +44,8 @@
     "react/prop-types": "off",
     "react/self-closing-comp": "warn",
     "react/react-in-jsx-scope": "off",
-    "testing-library/await-async-query": "error",
-    "testing-library/no-await-sync-query": "error",
-    "testing-library/no-debugging-utils": "warn",
+    "testing-library/await-async-queries": "error",
+    "testing-library/no-await-sync-queries": "error",
     "testing-library/no-dom-import": "off",
     "jest-dom/prefer-checked": "error",
     "jest-dom/prefer-enabled-disabled": "error",

.vitest/setup.ts

@@ -1,3 +1,2 @@
 /* Extend Matchers */
 import '@testing-library/jest-dom'
-import '@testing-library/jest-dom/extend-expect'

package.json

@@ -26,22 +26,22 @@
     "prisma:studio": "prisma studio"
   },
   "dependencies": {
-    "@prisma/client": "5.1.1",
-    "@types/node": "20.5.1",
-    "@types/react": "18.2.20",
+    "@prisma/client": "5.2.0",
+    "@types/node": "20.5.7",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "eslint": "8.47.0",
-    "eslint-config-next": "13.4.18",
-    "lucide-react": "0.268.0",
+    "eslint": "8.48.0",
+    "eslint-config-next": "13.4.19",
+    "lucide-react": "0.272.0",
     "minireset.css": "0.0.7",
-    "next": "13.4.18",
+    "next": "13.4.19",
     "next-auth": "4.23.1",
     "react": "18.2.0",
     "react-cookie-consent": "8.0.1",
     "react-country-flag": "3.1.0",
     "react-dom": "18.2.0",
     "react-hot-toast": "2.4.1",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   },
   "swpm": "npm",
   "volta": {
@@ -50,29 +50,29 @@
   },
   "devDependencies": {
     "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.1.2",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@vitest/coverage-v8": "0.34.2",
+    "@vitest/coverage-v8": "0.34.3",
     "autoprefixer": "10.4.15",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-jest-dom": "5.0.2",
-    "eslint-plugin-testing-library": "5.11.1",
+    "eslint-plugin-jest-dom": "5.1.0",
+    "eslint-plugin-testing-library": "6.0.1",
     "htmlhint": "1.1.4",
     "husky": "8.0.3",
     "jsdom": "22.1.0",
-    "lint-staged": "14.0.0",
-    "postcss": "8.4.28",
+    "lint-staged": "14.0.1",
+    "postcss": "8.4.29",
     "postcss-cli": "10.1.0",
     "postcss-nesting": "12.0.1",
     "postcss-syntax": "0.36.2",
-    "prettier": "3.0.2",
-    "prisma": "5.1.1",
+    "prettier": "3.0.3",
+    "prisma": "5.2.0",
     "stylelint": "15.10.3",
     "stylelint-config-idiomatic-order": "9.0.0",
     "stylelint-config-standard": "34.0.0",
-    "vitest": "0.34.2",
+    "vitest": "0.34.3",
     "vitest-mock-extended": "1.2.0"
   },
   "lint-staged": {

src/app/components/atoms/country-combo/DatesToRender.tsx

@@ -9,26 +9,28 @@ import { useTimeZoneContext } from '@/app/context/useTimeZoneContext'
 import { DatesFilteredArray } from '@/types/flags.types'
 import { Countries } from '@/types/countries.types'
 import { Timezones } from '@/types/timezones.types'
-import { EventDate } from '@/helpers/events.types'
-import { formatGmt } from '@/helpers/dates'
+import { EventDate, TimeFormat } from '@/helpers/events.types'
+import { formatGmt, formatTime } from '@/helpers/dates'
 import { GmtPattern } from '@/types/dates.types'
 
 type Props = {
   datesArray: DatesFilteredArray[]
   getTextContent: (ref: RefObject<HTMLDivElement> | null) => void
-  showGmt: boolean
-  showGmtWord: boolean
-  showHourComplete: boolean
+  format: TimeFormat
+  optionsCombo: {
+    hideMins: boolean
+    showGmt: boolean
+    hideInitials: boolean
+  }
 }
 
 export const DatesToRender = ({
   datesArray,
   getTextContent,
-  showGmt,
-  showGmtWord,
-  showHourComplete,
+  format,
+  optionsCombo,
 }: Props) => {
-  const { deleteTimeZone, format } = useTimeZoneContext()
+  const { deleteTimeZone } = useTimeZoneContext()
   const [timeToRender, setTimeToRender] = useState<React.ReactNode[]>([])
 
   const ref = useRef<HTMLDivElement>(null)
@@ -42,32 +44,19 @@ export const DatesToRender = ({
     [deleteTimeZone],
   )
   const getTimeInfo = useCallback(
-    (gmt: GmtPattern, countries: EventDate[], complementShortHour: string) => {
-      let classNameToAdd = ''
-      if (!showHourComplete) {
-        classNameToAdd =
-          format === 12 ? style['time-short-12'] : style['time-short-24']
-      }
-      const timeText = showHourComplete
-        ? countries[0].i18n.time
-        : `${countries[0].i18n.time.split(':')[0]} ${complementShortHour}`
-
-      let gmtText = ''
-      if (showGmtWord) {
-        gmtText = gmt.startsWith('-') || gmt.startsWith('+') ? 'GMT' : ''
-      }
+    (gmt: GmtPattern, countries: EventDate[]) => {
       return (
         <div key={gmt} className={style['countries']}>
           <p
-            className={`${
-              format === 12 ? style['time-12'] : style['time-24']
-            } ${classNameToAdd}`}
+            className={`${style[`time-${format}`]} ${
+              optionsCombo.hideMins ? style[`time-short-${format}`] : ''
+            }`}
           >
-            {timeText}
+            {formatTime(countries[0].i18n.time, format, optionsCombo.hideMins)}
           </p>
-          {(showGmt || showGmtWord) && (
+          {optionsCombo.showGmt && (
             <p className={style['gmt']}>
-              {`(${gmtText}${showGmt ? formatGmt(gmt) : ''})`}
+              {formatGmt(gmt, 'shortOffset', !optionsCombo.hideInitials)}
             </p>
           )}
           <div className={style['flags-container']}>
@@ -93,7 +82,7 @@ export const DatesToRender = ({
         </div>
       )
     },
-    [showHourComplete, showGmt, showGmtWord, format, handleClick],
+    [optionsCombo, format, handleClick],
   )
 
   useEffect(() => {
@@ -107,12 +96,8 @@ export const DatesToRender = ({
     const result = datesArray.map(([date, groupedCountries]) => {
       const values = Object.values(groupedCountries)
       if (values.length >= 1) {
-        const firstCountry = values[0][0]
-        const complementShortHour: string =
-          format === 12 ? firstCountry.i18n.time.split(' ')[1] : 'H'
         const timeInfo = Object.entries(groupedCountries).map(
-          ([gmt, countries]) =>
-            getTimeInfo(gmt as GmtPattern, countries, complementShortHour),
+          ([gmt, countries]) => getTimeInfo(gmt as GmtPattern, countries),
         )
 
         return (

src/app/components/molecules/country-combo/ComboboxCountries.tsx

@@ -12,25 +12,26 @@ import { useFilteredDates } from './useFilteredDates'
 
 import { useGetInfoDates } from './useGetInfoDates'
 
-import { useTimeZoneContext } from '@/app/context/useTimeZoneContext'
 import { lucidIcons } from '@/libs/icon-config'
+import { TimeFormat } from '@/helpers/events.types'
 
 type Props = {
   getTextContent: (ref: RefObject<HTMLDivElement> | null) => void
   handleAddCountry: (value: SetStateAction<boolean>) => void
-  showGmt?: boolean
-  showGmtWord?: boolean
-  showHourComplete?: boolean
+  format: TimeFormat
+  optionsCombo: {
+    hideMins: boolean
+    showGmt: boolean
+    hideInitials: boolean
+  }
 }
 
 const ComboboxCountries = ({
   getTextContent,
   handleAddCountry,
-  showGmt = true,
-  showGmtWord = true,
-  showHourComplete = true,
+  format,
+  optionsCombo,
 }: Props) => {
-  const { format } = useTimeZoneContext()
   const { dateList } = useGetInfoDates({ format })
   const filteredDates = useFilteredDates(dateList, format)
 
@@ -41,10 +42,9 @@ const ComboboxCountries = ({
       ) : (
         <DatesToRender
           datesArray={filteredDates}
+          format={format}
           getTextContent={getTextContent}
-          showGmt={showGmt}
-          showGmtWord={showGmtWord}
-          showHourComplete={showHourComplete}
+          optionsCombo={optionsCombo}
         />
       )}
       <div className={style['add-button-container']}>

src/app/components/molecules/country-list/CountryList.module.css

@@ -10,7 +10,7 @@
 
     .container-list-with-search {
         width: 90%;
-        height: calc(90% - 60px);
+        height: calc(8*47.99px);
         border-radius: 10px;
         margin: 30px auto;
         background-color: var(--color-neutral-500);
@@ -84,7 +84,7 @@
 
         .container-list-with-search {
             position: fixed;
-            top: 80px;
+            top: 55px;
             right: 80px;
             max-width: 300px;
             max-height: 500px;

src/app/components/molecules/select-country/SelectCountry.tsx

@@ -90,9 +90,7 @@ export const SelectCountry = ({
           <p className={styles['country']}>{`${getCountry(timezone)}`}</p>
         </div>
         <p className={styles['continent']}>{`${getContinent(timezone)}`}</p>
-        <p className={styles['gmt']}>{`(${
-          formatGmt(gmt) === 'UTC' ? '' : 'GMT: '
-        }${formatGmt(gmt)})`}</p>
+        <p className={styles['gmt']}>{formatGmt(gmt, 'longOffset')}</p>
       </div>
 
       {visibleSelectMenu && (

src/app/components/organisms/events/CreateEvent.module.css

@@ -107,7 +107,7 @@
                     pointer-events: none;
                 }
 
-                &.hidding-after::after {
+                &.hiding-after::after {
                     opacity: 0.5;
                     background-color: transparent;
                 }

src/app/components/organisms/events/CreateEvent.tsx

@@ -43,7 +43,6 @@ import { createEvent } from '@/services/event'
 import { EventBody } from '@/types/event.types'
 import { toastIconTheme, toastStyle } from '@/libs/react-host-toast-config'
 
-
 const CreateEvent = () => {
   const [isOpenSelectTimeZone, setIsOpenSelectTimeZone] = useState(false)
   const { timeZones, setOriginDate, addTimeZone } = useTimeZoneContext()
@@ -87,7 +86,6 @@ const CreateEvent = () => {
     formData.gmt,
   ])
 
-
   // FIXME: use values from user configuration
   const props = useMemo(
     () => ({
@@ -179,9 +177,9 @@ const CreateEvent = () => {
   }
 
   const [optionsCombo, setOptionsCombo] = useState({
-    hourComplete: true,
+    hideMins: false,
     showGmt: true,
-    showGmtWord: true,
+    hideInitials: false,
   })
 
   return (
@@ -262,7 +260,7 @@ const CreateEvent = () => {
                   styles['container-date']
                 } ${
                   formData.toggleState.dateIsDisable
-                    ? styles['hidding-after']
+                    ? styles['hiding-after']
                     : ''
                 }`}
               >
@@ -320,32 +318,31 @@ const CreateEvent = () => {
           />
 
           <ComboboxCountries
+            format={formData.toggleState.timeFormat}
             getTextContent={handleChangeTextContent}
             handleAddCountry={setIsOpenSelectTimeZone}
-            showGmt={optionsCombo.showGmt}
-            showGmtWord={optionsCombo.showGmtWord}
-            showHourComplete={optionsCombo.hourComplete}
+            optionsCombo={optionsCombo}
           />
           <div className={styles['container-options-combo']}>
             <Toggle
-              value={false}
+              value={optionsCombo.hideMins}
               onToggle={() => {
                 setOptionsCombo((prev) => ({
                   ...prev,
-                  hourComplete: !prev.hourComplete,
+                  hideMins: !prev.hideMins,
                 }))
               }}
             />
-            <p>Show only hours</p>
+            <p>Hide minutes</p>
           </div>
           <div className={styles['container-options-combo']}>
             <Toggle
-              value
+              value={optionsCombo.showGmt}
               onToggle={() => {
                 setOptionsCombo((prev) => ({
                   ...prev,
                   showGmt: !prev.showGmt,
-                  showGmtWord: !prev.showGmt,
+                  hideInitials: false,
                 }))
               }}
             />
@@ -354,15 +351,15 @@ const CreateEvent = () => {
           {optionsCombo.showGmt && (
             <div className={styles['container-options-combo']}>
               <Toggle
-                value
+                value={optionsCombo.hideInitials}
                 onToggle={() => {
                   setOptionsCombo((prev) => ({
                     ...prev,
-                    showGmtWord: !prev.showGmtWord,
+                    hideInitials: !prev.hideInitials,
                   }))
                 }}
               />
-              <p>Show GMT word</p>
+              <p>Hide Initials</p>
             </div>
           )}
 

src/app/components/organisms/events/useFormData.ts

@@ -40,7 +40,7 @@ export const useGetFormData = () => {
     },
   })
 
-  const { addTimeZone, setFormat } = useTimeZoneContext()
+  const { addTimeZone } = useTimeZoneContext()
 
   useEffect(() => {
     const setInitialFormData = async () => {
@@ -139,9 +139,6 @@ export const useGetFormData = () => {
       }
       return current
     })
-
-    // FIXME: take this value from formData state and not from context
-    setFormat((prev) => (prev === 12 ? 24 : 12))
   }
 
   const addHashtag = (tag: string) => {