Add context for date

toggle-corp · Sep 6, 2024 · ab7f44a · ab7f44a
1 parent dcfc465
commit ab7f44a
Show file tree

Hide file tree

Showing 19 changed files with 139 additions and 140 deletions.
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -10,12 +10,16 @@ import {
     RouterProvider,
 } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
-import { listToMap } from '@togglecorp/fujs';
+import {
+    encodeDate,
+    listToMap,
+} from '@togglecorp/fujs';
 import {
     gql,
     useQuery,
 } from 'urql';
 
+import DateContext from '#contexts/date';
 import EnumsContext, { EnumsContextProps } from '#contexts/enums';
 import LocalStorageContext, { LocalStorageContextProps } from '#contexts/localStorage';
 import NavbarContext, { NavbarContextProps } from '#contexts/navbar';
@@ -108,9 +112,44 @@ const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(
 const router = sentryCreateBrowserRouter(unwrappedRoutes);
 
 function App() {
-    const [userAuth, setUserAuth] = useState<UserAuth>();
-    const [size, setSize] = useState<SizeContextProps>(getWindowSize);
-    const [ready, setReady] = useState(false);
+    // Date
+
+    const [date, setDate] = useState(() => {
+        const today = new Date();
+        return {
+            fullDate: encodeDate(today),
+            year: today.getFullYear(),
+            month: today.getMonth(),
+            day: today.getDate(),
+        };
+    });
+
+    useEffect(
+        () => {
+            const timeout = window.setInterval(
+                () => {
+                    setDate((oldValue) => {
+                        const today = new Date();
+                        const newDateString = encodeDate(today);
+                        if (oldValue.fullDate === newDateString) {
+                            return oldValue;
+                        }
+                        return {
+                            fullDate: newDateString,
+                            year: today.getFullYear(),
+                            month: today.getMonth(),
+                            day: today.getDate(),
+                        };
+                    });
+                },
+                2000,
+            );
+            return () => {
+                window.clearInterval(timeout);
+            };
+        },
+        [],
+    );
 
     // Local Storage
 
@@ -127,6 +166,7 @@ function App() {
 
     // Device Size
 
+    const [size, setSize] = useState<SizeContextProps>(getWindowSize);
     const throttledSize = useThrottledValue(size);
     useEffect(() => {
         function handleResize() {
@@ -142,6 +182,9 @@ function App() {
 
     // Authentication
 
+    const [userAuth, setUserAuth] = useState<UserAuth>();
+    const [ready, setReady] = useState(false);
+
     const [meResult] = useQuery<MeQuery, MeQueryVariables>(
         { query: ME_QUERY },
     );
@@ -227,20 +270,22 @@ function App() {
 
     return (
         <NavbarContext.Provider value={navbarContextValue}>
-            <SizeContext.Provider value={throttledSize}>
-                <LocalStorageContext.Provider value={storageContextValue}>
-                    <RouteContext.Provider value={wrappedRoutes}>
-                        <UserContext.Provider value={userContextValue}>
-                            <EnumsContext.Provider value={enumsContextValue}>
-                                <RouterProvider
-                                    router={router}
-                                    fallbackElement={fallbackElement}
-                                />
-                            </EnumsContext.Provider>
-                        </UserContext.Provider>
-                    </RouteContext.Provider>
-                </LocalStorageContext.Provider>
-            </SizeContext.Provider>
+            <DateContext.Provider value={date}>
+                <SizeContext.Provider value={throttledSize}>
+                    <LocalStorageContext.Provider value={storageContextValue}>
+                        <RouteContext.Provider value={wrappedRoutes}>
+                            <UserContext.Provider value={userContextValue}>
+                                <EnumsContext.Provider value={enumsContextValue}>
+                                    <RouterProvider
+                                        router={router}
+                                        fallbackElement={fallbackElement}
+                                    />
+                                </EnumsContext.Provider>
+                            </UserContext.Provider>
+                        </RouteContext.Provider>
+                    </LocalStorageContext.Provider>
+                </SizeContext.Provider>
+            </DateContext.Provider>
         </NavbarContext.Provider>
     );
 }

diff --git a/src/components/CalendarInput/index.tsx b/src/components/CalendarInput/index.tsx
@@ -1,12 +1,13 @@
 import {
     useCallback,
+    useContext,
     useState,
 } from 'react';
-import { isDefined } from '@togglecorp/fujs';
 
 import Button, { Props as ButtonProps } from '#components//Button';
 import Dialog from '#components/Dialog';
 import MonthlyCalendar from '#components/MonthlyCalendar';
+import DateContext from '#contexts/date';
 
 import styles from './styles.module.css';
 
@@ -23,6 +24,7 @@ function CalendarInput<const N>(props: Props<N>) {
     } = props;
 
     const [confirmationShown, setConfirmationShown] = useState<boolean>(false);
+    const { year, month } = useContext(DateContext);
 
     const handleModalOpen = useCallback(
         () => {
@@ -46,9 +48,6 @@ function CalendarInput<const N>(props: Props<N>) {
         [onChange],
     );
 
-    const today = new Date();
-    const selectedDate = isDefined(value) ? new Date(value) : today;
-
     return (
         <>
             <Button
@@ -67,8 +66,8 @@ function CalendarInput<const N>(props: Props<N>) {
             >
                 <MonthlyCalendar
                     selectedDate={value}
-                    initialYear={selectedDate.getFullYear()}
-                    initialMonth={selectedDate.getMonth()}
+                    initialYear={value ? new Date(value).getFullYear() : year}
+                    initialMonth={value ? new Date(value).getMonth() : month}
                     onDateClick={handleDateClick}
                 />
             </Dialog>

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
@@ -57,9 +57,7 @@ function Dialog(props: Props) {
     );
 
     const contextValue = useMemo(
-        () => ({
-            dialogRef,
-        }),
+        () => ({ dialogRef }),
         [],
     );
 

diff --git a/src/components/Dialog/styles.module.css b/src/components/Dialog/styles.module.css
@@ -11,6 +11,8 @@
         .header {
             display: flex;
             padding: var(--spacing-md);
+            padding-bottom: 0;
+            gap: var(--spacing-md);
 
             .heading {
                 flex-grow: 1;

diff --git a/src/components/DisplayPicture/index.tsx b/src/components/DisplayPicture/index.tsx
@@ -21,6 +21,7 @@ function DisplayPicture(props: Props) {
         className,
     } = props;
 
+    // FIXME: Use pastel colors?
     const color = useMemo(() => stringToColor(displayName), [displayName]);
 
     return (

diff --git a/src/components/MonthlyCalendar/index.tsx b/src/components/MonthlyCalendar/index.tsx
@@ -1,5 +1,6 @@
 import {
     useCallback,
+    useContext,
     useEffect,
     useMemo,
     useState,
@@ -14,6 +15,7 @@ import {
 } from '@togglecorp/fujs';
 
 import Button from '#components/Button';
+import DateContext from '#contexts/date';
 
 import styles from './styles.module.css';
 
@@ -62,7 +64,7 @@ function MonthlyCalendar(props: Props) {
     const [year, setYear] = useState(initialYear);
     const [month, setMonth] = useState(initialMonth);
 
-    const today = new Date();
+    const { fullDate } = useContext(DateContext);
 
     const resetView = useCallback(
         (newYear: number, newMonth: number) => {
@@ -105,6 +107,7 @@ function MonthlyCalendar(props: Props) {
         [month, year],
     );
 
+    // FIXME: We should be able be use a for loop here
     const daysInMonth = useMemo(() => {
         // NOTE: getDate() starts at 1
         // where as getDay() starts at 0
@@ -169,7 +172,7 @@ function MonthlyCalendar(props: Props) {
                 {daysInMonth.map((day) => {
                     const date = encodeDate(new Date(year, month, day.date));
                     let variant;
-                    if (encodeDate(today) === date) {
+                    if (fullDate === date) {
                         variant = 'secondary' as const;
                     } else if (selectedDate === date) {
                         variant = 'quaternary' as const;

diff --git a/src/components/Popup/index.tsx b/src/components/Popup/index.tsx
@@ -9,7 +9,6 @@ import styles from './styles.module.css';
 
 interface Props {
     className?: string;
-    // pointerClassName?: string;
     elementRef?: React.RefObject<HTMLDivElement>;
     parentRef: React.RefObject<HTMLElement | undefined>;
     children?: React.ReactNode;
@@ -22,7 +21,6 @@ function Popup(props: Props) {
         elementRef,
         children,
         className,
-        // pointerClassName,
         preferredWidth,
     } = props;
 
@@ -38,7 +36,6 @@ function Popup(props: Props) {
 
     const {
         content,
-        // pointer,
         width,
         orientation,
     } = placements;
@@ -61,25 +58,6 @@ function Popup(props: Props) {
             >
                 {children}
             </div>
-            {/*
-            <div
-                className={_cs(
-                    styles.pointer,
-                    orientation.vertical === 'bottom' && styles.topOrientation,
-                    pointerClassName,
-                )}
-                style={{ ...pointer }}
-            >
-                <svg
-                    className={styles.icon}
-                    viewBox="0 0 200 100"
-                >
-                    <path
-                        d="M0 100 L100 0 L200 100Z"
-                    />
-                </svg>
-            </div>
-            */}
         </Portal>
     );
 }

diff --git a/src/components/Popup/styles.module.css b/src/components/Popup/styles.module.css
@@ -11,26 +11,3 @@
         box-shadow: 0 -8pt 20pt -5pt rgb(0 0 0 / 0.5);
     }
 }
-
-/*
-.pointer {
-    position: fixed;
-    transform: translateX(-50%);
-    background-color: transparent;
-    line-height: 0;
-    color: var(--color-text-on-dark);
-    font-size: 0.5rem;
-    pointer-events: none;
-    filter: drop-shadow(0 -1pt 1pt rgb(0 0 0 / .1));
-
-    .icon {
-        width: 2em;
-        height: 1em;
-        fill: currentColor;
-    }
-
-    &.top-orientation {
-        transform: translateX(-50%) rotate(180deg);
-    }
-}
-*/
diff --git a/src/components/RadioInput/index.tsx b/src/components/RadioInput/index.tsx
@@ -140,8 +140,6 @@ function RadioInput<
         descriptionSelector,
     ]);
 
-    // const isRequired = withAsterisk ?? required;
-
     return (
         <div
             className={_cs(

diff --git a/src/components/SelectInputContainer/index.tsx b/src/components/SelectInputContainer/index.tsx
@@ -160,16 +160,6 @@ function SelectInputContainer<
         ],
     );
 
-    /*
-    const handleToggleDropdown: NonNullable<ButtonProps<undefined>['onClick']> = useCallback(
-        (_, e) => {
-            e.stopPropagation();
-            onDropdownShownChange(!dropdownShown);
-        },
-        [dropdownShown, onDropdownShownChange],
-    );
-    */
-
     const handleShowDropdown = useCallback(
         () => {
             // FIXME: this is not atomic. Call only once
@@ -317,20 +307,6 @@ function SelectInputContainer<
                                 <IoCloseSharp className={styles.icon} />
                             </Button>
                         )}
-                        {/* !readOnly && (
-                            <Button
-                                onClick={handleToggleDropdown}
-                                variant="transparent"
-                                name={undefined}
-                                title={dropdownShownActual
-                                    ? 'Close dropdown'
-                                    : 'Open dropdown'}
-                            >
-                                {dropdownShownActual
-                                    ? <IoCaretUpSharp className={styles.icon} />
-                                    : <IoCaretDownSharp className={styles.icon} />}
-                            </Button>
-                        ) */}
                     </>
                 )}
                 input={(

diff --git a/src/contexts/date.tsx b/src/contexts/date.tsx
@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+import { encodeDate } from '@togglecorp/fujs';
+
+interface DateContextType {
+    fullDate: string,
+    year: number,
+    month: number,
+    day: number,
+}
+
+const today = new Date();
+
+const DateContext = createContext<DateContextType>({
+    fullDate: encodeDate(today),
+    year: today.getFullYear(),
+    month: today.getMonth(),
+    day: today.getDate(),
+});
+
+export default DateContext;
diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -36,6 +36,7 @@ function squash<T extends object>(items: T[]): T | undefined {
     if (items.length <= 1) {
         return items[0];
     }
+    // NOTE: We should use items.slice(1) instead
     return items.reduce(
         (acc, val) => ({
             ...acc,

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -45,6 +45,7 @@ export const colorscheme: [string, string][] = [
     ['#7d5327', '#ecdecc'],
 ];
 
+// FIXME: We should instead generate these options
 export const numericOptions: NumericOption[] = [
     { key: 1, label: '1' },
     { key: 2, label: '2' },