feat: refactor timeunit hook for store persistency

src/components/hooks/useTimeUnit.ts

@@ -1,19 +1,31 @@
+import { DEFAULT_TIME_UNIT, TIME_UNIT_CONFIG } from 'lib/constants';
 import { TimeUnit } from 'lib/types';
+import { getItem, setItem } from 'next-basics';
 import { useState } from 'react';
+import useStore, { setTimeUnit } from 'store/app';
 
-export function useTimeUnit(): {
+const selector = (state: { timeUnit: string }) => state.timeUnit;
-  currentTimeUnit: TimeUnit;
+
-  timeUnitOptions: TimeUnit[];
+export function useTimeUnit() {
-  saveTimeUnit: (value: TimeUnit) => void;
+  const storeTimeUnit = useStore(selector) || getItem(TIME_UNIT_CONFIG) || DEFAULT_TIME_UNIT;
-} {
+  const [tempTimeUnit, setTempTimeUnit] = useState<TimeUnit>(storeTimeUnit);
-  const [timeUnit, setTimeUnit] = useState<TimeUnit>('hour');
   const timeUnitOptions = ['hour', 'day', 'week', 'month', 'year'];
 
-  function saveTimeUnit(value: TimeUnit) {
+  function updateTimeUnit(value: TimeUnit) {
-    setTimeUnit(value);
+    setTempTimeUnit(value);
   }
 
-  return { currentTimeUnit: timeUnit, timeUnitOptions, saveTimeUnit };
+  function saveTimeUnit() {
+    setTimeUnit(tempTimeUnit);
+    setItem(TIME_UNIT_CONFIG, tempTimeUnit);
+  }
+
+  return {
+    timeUnit: tempTimeUnit,
+    timeUnitOptions,
+    updateTimeUnit,
+    saveTimeUnit,
+  };
 }
 
 export default useTimeUnit;