WIP

knip.json

@@ -1,5 +1,5 @@
 {
     "$schema": "https://unpkg.com/knip@5/schema.json",
-    "entry": ["src/index.tsx"],
-    "project": ["src/**/*.tsx", "src/**/*.ts"]
+    "entry": ["src/index.tsx!"],
+    "project": ["src/**/*.tsx!", "src/**/*.ts!"]
 }

src/App/index.tsx

@@ -111,14 +111,23 @@ function App() {
     const [userAuth, setUserAuth] = useState<UserAuth>();
     const [size, setSize] = useState<SizeContextProps>(getWindowSize);
     const [ready, setReady] = useState(false);
+
+    // Local Storage
+
     const [storageState, setStorageState] = useState<LocalStorageContextProps['storageState']>({
         'timur-config': {
             defaultValue: defaultConfigValue,
         },
     });
 
-    const debouncedSize = useThrottledValue(size);
+    const storageContextValue = useMemo<LocalStorageContextProps>(() => ({
+        storageState,
+        setStorageState,
+    }), [storageState]);
 
+    // Device Size
+
+    const throttledSize = useThrottledValue(size);
     useEffect(() => {
         function handleResize() {
             setSize(getWindowSize());
@@ -131,6 +140,8 @@ function App() {
         };
     }, []);
 
+    // Authentication
+
     const [meResult] = useQuery<MeQuery, MeQueryVariables>(
         { query: ME_QUERY },
     );
@@ -143,10 +154,6 @@ function App() {
         setReady(true);
     }, [meResult.data, meResult.fetching]);
 
-    const [enumsResult] = useQuery<EnumsQuery, EnumsQueryVariables>(
-        { query: ENUMS_QUERY },
-    );
-
     const removeUserAuth = useCallback(
         () => {
             setUserAuth(undefined);
@@ -163,6 +170,12 @@ function App() {
         [userAuth, removeUserAuth],
     );
 
+    // Enums
+
+    const [enumsResult] = useQuery<EnumsQuery, EnumsQueryVariables>(
+        { query: ENUMS_QUERY },
+    );
+
     const enumsContextValue = useMemo<EnumsContextProps>(
         () => ({
             enums: enumsResult.data,
@@ -182,10 +195,7 @@ function App() {
         [enumsResult],
     );
 
-    const storageContextValue = useMemo<LocalStorageContextProps>(() => ({
-        storageState,
-        setStorageState,
-    }), [storageState]);
+    // Page layouts
 
     const navbarStartActionRef = useRef<HTMLDivElement>(null);
     const navbarMidActionRef = useRef<HTMLDivElement>(null);
@@ -197,6 +207,8 @@ function App() {
         endActionsRef: navbarEndActionRef,
     }), []);
 
+    // Route
+
     const fallbackElement = (
         <div className={styles.fallbackElement}>
             <img
@@ -207,13 +219,15 @@ function App() {
         </div>
     );
 
+    // NOTE: We should block page for authentication before we mount routes
+    // TODO: Handle error with authentication
     if (!ready) {
         return fallbackElement;
     }
 
     return (
         <NavbarContext.Provider value={navbarContextValue}>
-            <SizeContext.Provider value={debouncedSize}>
+            <SizeContext.Provider value={throttledSize}>
                 <LocalStorageContext.Provider value={storageContextValue}>
                     <RouteContext.Provider value={wrappedRoutes}>
                         <UserContext.Provider value={userContextValue}>

src/App/routes/index.tsx

@@ -84,11 +84,8 @@ const settings = customWrapRoute({
     parent: rootLayout,
     path: 'settings',
     component: {
-        render: () => import('#components/TemplateView'),
-        props: {
-            title: 'Settings',
-            description: 'No settings to configure',
-        },
+        render: () => import('#views/Settings'),
+        props: {},
     },
     wrapperComponent: Auth,
     context: {

src/App/styles.module.css

@@ -3,18 +3,12 @@
     align-items: center;
     flex-direction: column;
     justify-content: center;
-    /*
-    background-color: var(--go-ui-color-background);
-    */
     width: 100vw;
     height: 100vh;
     gap: 1rem;
 
     .app-logo {
         margin-top: -4rem;
         height: 6rem;
-        /*
-        animation: slide-up var(--go-ui-duration-animation-slow) ease-in-out forwards;
-        */
     }
 }

src/PwaPrompt/index.tsx

@@ -10,7 +10,7 @@ import styles from './styles.module.css';
 // eslint-disable-next-line no-console
 console.info('PWA information:', pwaInfo);
 
-function ReloadPrompt() {
+function PwaPrompt() {
     const {
         offlineReady: [offlineReady, setOfflineReady],
         needRefresh: [needRefresh, setNeedRefresh],
@@ -38,6 +38,7 @@ function ReloadPrompt() {
             console.info('SW registration error', error);
         },
     });
+
     const reload = useCallback(
         () => {
             updateServiceWorker(true);
@@ -96,4 +97,4 @@ function ReloadPrompt() {
     );
 }
 
-export default ReloadPrompt;
+export default PwaPrompt;

src/components/Link/index.tsx

@@ -56,7 +56,7 @@ export function resolvePath(
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
-export function useLink(props: {
+function useLink(props: {
     external: true,
     href: string | undefined | null,
     to?: never,

src/utils/localStorage.ts

@@ -5,13 +5,9 @@ export function getFromStorage<T>(key: string) {
     return val === null || val === undefined ? undefined : JSON.parse(val) as T;
 }
 
-export function removeFromStorage(key: string) {
-    localStorage.removeItem(key);
-}
-
 export function setToStorage(key: string, value: unknown) {
     if (isNotDefined(value)) {
-        localStorage.clearItem(key);
+        localStorage.removeItem(key);
     }
     localStorage.setItem(key, JSON.stringify(value));
 }

src/views/DailyJournal/DayView/WorkItemRow/index.tsx

@@ -39,7 +39,6 @@ import { useFocusClient } from '#hooks/useFocus';
 import useLocalStorage from '#hooks/useLocalStorage';
 import { colorscheme } from '#utils/constants';
 import {
-    Contract,
     EntriesAsList,
     Task,
     WorkItem,
@@ -86,7 +85,7 @@ function defaultColorSelector<T>(_: T, i: number): [string, string] {
 export interface Props {
     className?: string;
     workItem: WorkItem;
-    contract: Contract;
+    contractId: string;
 
     onClone: (clientId: string, override?: Partial<WorkItem>) => void;
     onChange: (clientId: string, ...entries: EntriesAsList<WorkItem>) => void;
@@ -97,14 +96,15 @@ function WorkItemRow(props: Props) {
     const {
         className,
         workItem,
-        contract,
+        contractId,
         onClone,
         onDelete,
         onChange,
     } = props;
 
     const { enums } = useContext(EnumsContext);
     const { width: windowWidth } = useContext(SizeContext);
+
     const inputRef = useFocusClient<HTMLTextAreaElement>(workItem.clientId);
     const [config] = useLocalStorage('timur-config');
 
@@ -116,8 +116,8 @@ function WorkItemRow(props: Props) {
     );
 
     const filteredTaskList = useMemo(
-        () => enums?.private?.allActiveTasks?.filter((task) => task.contract.id === contract.id),
-        [contract.id, enums],
+        () => enums?.private?.allActiveTasks?.filter((task) => task.contract.id === contractId),
+        [contractId, enums],
     );
 
     const handleStatusCheck = useCallback(() => {

src/views/DailyJournal/DayView/index.tsx

@@ -266,7 +266,7 @@ function DayView(props: Props) {
                                     onClone={onWorkItemClone}
                                     onChange={onWorkItemChange}
                                     onDelete={onWorkItemDelete}
-                                    contract={taskDetails?.contract}
+                                    contractId={taskDetails.contract.id}
                                 />
                             </div>
                         );

src/views/DailyJournal/StartSidebar/index.tsx

@@ -1,6 +1,5 @@
 import {
     useCallback,
-    useContext,
     useMemo,
 } from 'react';
 import { MdDragIndicator } from 'react-icons/md';
@@ -25,16 +24,11 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 
-import Checkbox from '#components/Checkbox';
 import MonthlyCalendar from '#components/MonthlyCalendar';
 import RadioInput from '#components/RadioInput';
-import SelectInput from '#components/SelectInput';
-import EnumsContext from '#contexts/enums';
-import { EnumsQuery } from '#generated/types/graphql';
 import useLocalStorage from '#hooks/useLocalStorage';
 import useSetFieldValue from '#hooks/useSetFieldValue';
 import {
-    colorscheme,
     defaultConfigValue,
     numericOptionKeySelector,
     numericOptionLabelSelector,
@@ -44,7 +38,6 @@ import {
     DailyJournalAttributeKeys,
     DailyJournalAttributeOrder,
     DailyJournalGrouping,
-    EditingMode,
 } from '#utils/types';
 
 import styles from './styles.module.css';
@@ -155,47 +148,6 @@ function SortableItem(props: SortableItemProps) {
     );
 }
 
-type EditingOption = { key: EditingMode, label: string };
-function editingOptionKeySelector(item: EditingOption) {
-    return item.key;
-}
-function editingOptionLabelSelector(item: EditingOption) {
-    return item.label;
-}
-const editingOptions: EditingOption[] = [
-    { key: 'normal', label: 'Normies' },
-    { key: 'vim', label: 'Vim Masterace' },
-];
-
-type WorkItemTypeOption = EnumsQuery['enums']['TimeEntryType'][number];
-function workItemTypeKeySelector(item: WorkItemTypeOption) {
-    return item.key;
-}
-function workItemTypeLabelSelector(item: WorkItemTypeOption) {
-    return item.label;
-}
-
-type WorkItemStatusOption = EnumsQuery['enums']['TimeEntryStatus'][number];
-function workItemStatusKeySelector(item: WorkItemStatusOption) {
-    return item.key;
-}
-function workItemStatusLabelSelector(item: WorkItemStatusOption) {
-    return item.label;
-}
-function workItemStatusColorSelector(item: WorkItemStatusOption): [string, string] {
-    if (item.key === 'DOING') {
-        return colorscheme[1];
-    }
-    if (item.key === 'DONE') {
-        return colorscheme[5];
-    }
-    return colorscheme[7];
-}
-
-function defaultColorSelector<T>(_: T, i: number): [string, string] {
-    return colorscheme[i % colorscheme.length];
-}
-
 interface Props {
     selectedDate: string;
     setSelectedDate: (newDate: string) => void;
@@ -211,8 +163,6 @@ function StartSidebar(props: Props) {
         setSelectedDate,
     } = props;
 
-    const { enums } = useContext(EnumsContext);
-
     const [storedConfig, setStoredConfig] = useLocalStorage('timur-config');
 
     const setConfigFieldValue = useSetFieldValue(setStoredConfig);
@@ -327,65 +277,6 @@ function StartSidebar(props: Props) {
                     labelSelector={numericOptionLabelSelector}
                 />
             </div>
-            <div className={styles.quickSettings}>
-                <h4>
-                    Quick Settings
-                </h4>
-                <Checkbox
-                    name="compactTextArea"
-                    label="Collapse text area on blur"
-                    value={storedConfig.compactTextArea}
-                    onChange={setConfigFieldValue}
-                />
-                <Checkbox
-                    name="showInputIcons"
-                    label="Show input icons"
-                    value={storedConfig.showInputIcons}
-                    onChange={setConfigFieldValue}
-                />
-                <Checkbox
-                    name="checkboxForStatus"
-                    label="Use checkbox for status"
-                    tooltip="Use checkbox instead of select input for the status. i.e. to toggle TODO, Doing and Done"
-                    value={storedConfig.checkboxForStatus}
-                    onChange={setConfigFieldValue}
-                />
-                <SelectInput
-                    name="defaultTaskStatus"
-                    variant="general"
-                    label="Default Entry Status"
-                    options={enums?.enums.TimeEntryStatus}
-                    keySelector={workItemStatusKeySelector}
-                    labelSelector={workItemStatusLabelSelector}
-                    colorSelector={workItemStatusColorSelector}
-                    onChange={setConfigFieldValue}
-                    value={storedConfig.defaultTaskStatus}
-                    nonClearable
-                />
-                <SelectInput
-                    name="defaultTaskType"
-                    label="Default Entry Type"
-                    variant="general"
-                    options={enums?.enums.TimeEntryType}
-                    keySelector={workItemTypeKeySelector}
-                    labelSelector={workItemTypeLabelSelector}
-                    colorSelector={defaultColorSelector}
-                    onChange={setConfigFieldValue}
-                    value={storedConfig.defaultTaskType}
-                />
-                <SelectInput
-                    name="editingMode"
-                    label="Note Editing Mode"
-                    variant="general"
-                    options={editingOptions}
-                    keySelector={editingOptionKeySelector}
-                    labelSelector={editingOptionLabelSelector}
-                    // colorSelector={defaultColorSelector}
-                    onChange={setConfigFieldValue}
-                    value={storedConfig.editingMode}
-                    nonClearable
-                />
-            </div>
         </div>
     );
 }