Merge pull request #461 from Aspireve/feature/american-dates

[FEAT] change dates to the American people #156

Author: nevo-david

apps/frontend/src/components/launches/calendar.tsx

@@ -27,9 +27,18 @@ import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import { groupBy, sortBy } from 'lodash';
 import Image from 'next/image';
 import { extend } from 'dayjs';
+import { isUSCitizen } from './helpers/isuscitizen.utils';
 extend(isSameOrAfter);
 extend(isSameOrBefore);
 
+const convertTimeFormatBasedOnLocality = (time: number) => {
+  if (isUSCitizen()) {
+    return `${time === 12 ? 12 : time%12}:00 ${time >= 12 ? "PM" : "AM"}`
+  } else {
+    return `${time}:00`
+  }
+}
+
 export const days = [
   'Monday',
   'Tuesday',
@@ -91,7 +100,7 @@ export const DayView = () => {
               .startOf('day')
               .add(option[0].time, 'minute')
               .local()
-              .format('HH:mm')}
+              .format(isUSCitizen() ? "hh:mm A": "HH:mm")}
           </div>
           <div
             key={option[0].time}
@@ -140,7 +149,8 @@ export const WeekView = () => {
           {hours.map((hour) => (
             <Fragment key={hour}>
               <div className="p-2 pr-4 bg-secondary text-center items-center justify-center flex">
-                {hour.toString().padStart(2, '0')}:00
+                {/* {hour.toString().padStart(2, '0')}:00 */}
+                {convertTimeFormatBasedOnLocality(hour)}
               </div>
               {days.map((day, indexDay) => (
                 <Fragment key={`${day}-${hour}`}>

apps/frontend/src/components/launches/filters.tsx

@@ -3,6 +3,7 @@ import { useCalendar } from '@gitroom/frontend/components/launches/calendar.cont
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { useCallback } from 'react';
+import { isUSCitizen } from './helpers/isuscitizen.utils';
 
 export const Filters = () => {
   const week = useCalendar();
@@ -12,30 +13,30 @@ export const Filters = () => {
           .year(week.currentYear)
           .isoWeek(week.currentWeek)
           .day(week.currentDay)
-          .format('DD/MM/YYYY')
+          .format(isUSCitizen() ? 'MM/DD/YYYY' :'DD/MM/YYYY')
       : week.display === 'week'
       ? dayjs()
           .year(week.currentYear)
           .isoWeek(week.currentWeek)
           .startOf('isoWeek')
-          .format('DD/MM/YYYY') +
+          .format(isUSCitizen() ? 'MM/DD/YYYY' :'DD/MM/YYYY') +
         ' - ' +
         dayjs()
           .year(week.currentYear)
           .isoWeek(week.currentWeek)
           .endOf('isoWeek')
-          .format('DD/MM/YYYY')
+          .format(isUSCitizen() ? 'MM/DD/YYYY' :'DD/MM/YYYY')
       : dayjs()
           .year(week.currentYear)
           .month(week.currentMonth)
           .startOf('month')
-          .format('DD/MM/YYYY') +
+          .format(isUSCitizen() ? 'MM/DD/YYYY' :'DD/MM/YYYY') +
         ' - ' +
         dayjs()
           .year(week.currentYear)
           .month(week.currentMonth)
           .endOf('month')
-          .format('DD/MM/YYYY');
+          .format(isUSCitizen() ? 'MM/DD/YYYY' :'DD/MM/YYYY');
 
   const setDay = useCallback(() => {
     week.setFilters({

apps/frontend/src/components/launches/helpers/date.picker.tsx

@@ -3,6 +3,7 @@ import dayjs from 'dayjs';
 import { Calendar, TimeInput } from '@mantine/dates';
 import { useClickOutside } from '@mantine/hooks';
 import { Button } from '@gitroom/react/form/button';
+import { isUSCitizen } from './isuscitizen.utils';
 
 export const DatePicker: FC<{
   date: dayjs.Dayjs;
@@ -39,7 +40,7 @@ export const DatePicker: FC<{
       onClick={changeShow}
       ref={ref}
     >
-      <div className="cursor-pointer">{date.format('DD/MM/YYYY HH:mm')}</div>
+      <div className="cursor-pointer">{date.format(isUSCitizen() ? 'MM/DD/YYYY hh:mm A' : 'DD/MM/YYYY HH:mm')}</div>
       <div className="cursor-pointer">
         <svg
           xmlns="http://www.w3.org/2000/svg"

apps/frontend/src/components/launches/helpers/isuscitizen.utils.tsx

@@ -0,0 +1,5 @@
+
+export const isUSCitizen = () => {
+    const userLanguage = navigator.language || navigator.languages[0];
+    return userLanguage.startsWith('en-US')
+}