Save in localstorage

Author: Yadro

src/consts/index.ts

@@ -1 +1,6 @@
 export const PURPLE_COLOR = '#713A91';
+
+export const LOCAL_STORAGE_KEY = {
+  HOURS_TAB: 'hours:view_tab',
+  HOURS_SELECTED_DATE: 'hours:view_date',
+};

src/hooks/useLocalStorage.ts

@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react';
+
+type Value = boolean | number | string | any[] | Record<string, any>;
+type ParseFn<T> = (raw: string) => T;
+
+function readFromStorage<T extends Value>(
+  key: string,
+  valueParse?: ParseFn<T>
+): T | null {
+  const raw = window.localStorage.getItem(key);
+  if (raw === null) {
+    return raw;
+  }
+  try {
+    const value = JSON.parse(raw);
+    if (typeof valueParse === 'function') {
+      return valueParse(value);
+    }
+    return value;
+  } catch {
+    return null;
+  }
+}
+
+export default function useLocalStorage<T extends Value>(
+  key: string,
+  defaultValue: T,
+  getFromStorageFirst: boolean,
+  valueParse?: (raw: string) => T
+): [T, (t: T) => void] {
+  const [value, setValue] = useState<T>(() => {
+    if (getFromStorageFirst) {
+      return readFromStorage(key, valueParse) ?? defaultValue;
+    }
+    return defaultValue;
+  });
+
+  const setItem = useCallback(
+    (value: T) => {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      setValue(value);
+    },
+    [key]
+  );
+
+  return [value, setItem];
+}

src/screens/hours/HoursScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Layout, Space } from 'antd';
 import { observer } from 'mobx-react';
 import { createUseStyles } from 'react-jss';
@@ -8,15 +8,28 @@ import { getTimeItems } from '../../helpers/TaskHelper';
 import TotalHours from './components/TotalHours/TotalHours';
 import Header from './components/Header';
 import GridWithTimeItemsView from './components/GridWithTimeItemsView';
-import { HoursTabView } from './types';
 import TimelineScreen from './components/TimelineScreen';
+import { HoursTabView } from './types';
+import useLocalStorage from '../../hooks/useLocalStorage';
+import { LOCAL_STORAGE_KEY } from '../../consts';
 
 const { tasksStore } = rootStore;
 
+const parseDateFromString = (value: string) => new Date(value);
+
 export default observer(function HoursScreen() {
   const classes = useStyles();
-  const [date, setDate] = useState<Date>(new Date());
-  const [tab, setTab] = useState<HoursTabView>(HoursTabView.Edit);
+  const [date, setDate] = useLocalStorage<Date>(
+    LOCAL_STORAGE_KEY.HOURS_SELECTED_DATE,
+    new Date(),
+    true,
+    parseDateFromString
+  );
+  const [tab, setTab] = useLocalStorage<HoursTabView>(
+    LOCAL_STORAGE_KEY.HOURS_TAB,
+    HoursTabView.Edit,
+    true
+  );
 
   const tasks = useMemo(() => tasksStore.getTasksByDate(date), [
     tasksStore.tasks,