feat: store data in local storage (#5)

* feat: store data in local storage

* remove url listen

Author: Sleek Zheng

src/app/page.tsx

@@ -15,7 +15,7 @@ import {
   format,
   isAfter,
   isBefore, isEqual,
-  min
+  min, parseISO
 } from "date-fns";
 import {
   createTheme,
@@ -46,6 +46,7 @@ import {usePathname, useRouter, useSearchParams} from "next/navigation";
 import CustomMilestoneDialog, {CustomMilestoneDialogRef, Milestone} from "@/components/CustomMilestoneDialog";
 import useMilestones from "@/hooks/useMilestones";
 import {twColorToHex} from "@/utils/colorUtil";
+import useStorage from "@/hooks/useStorage";
 
 export default function Home() {
   const [maxYear, setMaxYear] = useState(80)
@@ -56,6 +57,8 @@ export default function Home() {
   const searchParams = useSearchParams()
   const pathname = usePathname()
 
+  const {save, load} = useStorage()
+
   const array = useMemo(() => {
     return Array.from({length: unit * maxYear}, (v, k) => k)
   }, [unit, maxYear])
@@ -80,6 +83,11 @@ export default function Home() {
         format(value, 'yyyy-MM-dd')
         setValidDate(true)
         confirmDefaultMilestone(value)
+        save({
+          user: {
+            birthday: value
+          }
+        })
       } catch (e) {
         setValidDate(false)
       }
@@ -250,13 +258,14 @@ export default function Home() {
 
   const timelineItems = useMemo(() => {
     if (validDate) {
-      return milestones.map(it => {
-        return {
-          startDate: it.startDate,
-          label: it.label,
-          color: it.color
-        }
-      })
+      return milestones.filter(it => it.startDate !== undefined)
+        .map(it => {
+          return {
+            startDate: it.startDate,
+            label: it.label,
+            color: it.color
+          }
+        })
     } else {
       return []
     }
@@ -273,17 +282,16 @@ export default function Home() {
   )
 
   useEffect(() => {
-    const params = new URLSearchParams(searchParams)
-    const maxYear = params.get('maxYear')
-    if (maxYear) {
-      setMaxYear(parseInt(maxYear))
-    }
-    const unit = params.get('unit')
-    if (unit) {
-      setUnit(parseInt(unit))
+    const data = load()
+    if (data?.user) {
+      if (data.user.birthday) {
+        setBirthday(parseISO(data.user.birthday))
+        setValidDate(true)
+      }
+      data.user.maxYear && setMaxYear(data.user.maxYear)
+      data.user.unit && setUnit(data.user.unit)
     }
-
-  }, []);
+  }, [])
 
   const customMilestoneRef = useRef<CustomMilestoneDialogRef>(null)
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
@@ -310,13 +318,21 @@ export default function Home() {
               type='number'
               onChange={(e) => {
                 setMaxYear(parseInt(e.target.value))
-                router.push(pathname + '?' + createQueryString('maxYear', e.target.value))
+                save({
+                  user: {
+                    maxYear: parseInt(e.target.value)
+                  }
+                })
               }}/>
             <FormControl>
               <FormLabel>显示粒度</FormLabel>
               <RadioGroup row value={unit} onChange={(e) => {
                 setUnit(parseInt(e.target.value))
-                router.push(pathname + '?' + createQueryString('unit', e.target.value))
+                save({
+                  user: {
+                    unit: parseInt(e.target.value)
+                  }
+                })
               }}>
                 <FormControlLabel value={365} control={<Radio/>} label="日"/>
                 <FormControlLabel value={52} control={<Radio/>} label="周"/>

src/components/Rectangle.tsx

@@ -65,7 +65,7 @@ export default function Rectangle(props: RectangleProps) {
             <div className='flex flex-col gap-x-2'>
               {
                 props.milestones.map(it => (
-                  <div className='flex gap-1 items-center'>
+                  <div key={it.label} className='flex gap-1 items-center'>
                     <Rectangle backgroundColor={it.color}/>
                     <p>{it.label}</p>
                     <p>今天是{props.date}</p>

src/hooks/useMilestones.ts

@@ -1,12 +1,14 @@
-import {useCallback, useState} from "react";
+import {useCallback, useEffect, useState} from "react";
 import {Milestone} from "@/components/CustomMilestoneDialog";
-import {addYears, isAfter, isBefore, isEqual} from "date-fns";
+import {addYears, parseISO} from "date-fns";
+import useStorage from "@/hooks/useStorage";
+import {sortMilestones} from "@/utils/milestoneUtil";
 
 const defaultMilestoneDurationYears = [3, 3, 6, 3, 3, 4]
 export default function useMilestones() {
   const [milestones, setMilestones] = useState<Milestone[]>([
     {
-      label: '出生',
+      label: '童年',
       color: 'bg-zinc-400',
     },
     {
@@ -39,26 +41,22 @@ export default function useMilestones() {
     },
   ])
 
+  const {save, load} = useStorage()
+
   const addMilestone = useCallback((milestone: Milestone) => {
     milestones.splice(milestones.length - 2, 0, milestone)
-    milestones.sort((a: Milestone, b: Milestone) => {
-      if (isBefore(a.startDate!, b.startDate!)) {
-        return -1
-      }
-      if (isAfter(a.startDate!, b.startDate!)) {
-        return 1
-      }
-      if (isEqual(a.startDate!, b.startDate!)) {
-        return isBefore(a.endDate!, b.endDate!) ? -1 : 1
-      }
-      return 0
+    setMilestones([...sortMilestones(milestones)])
+    save({
+      milestones
     })
-    setMilestones([...milestones])
   }, [milestones])
 
   const removeMilestone = useCallback((index: number) => {
     milestones.splice(index, 1)
     setMilestones([...milestones])
+    save({
+      milestones
+    })
   }, [milestones])
 
   const confirmDefaultMilestone = useCallback((birthday: Date) => {
@@ -75,11 +73,29 @@ export default function useMilestones() {
       return object
     }))
     setMilestones(newMilestones)
+    save({
+      milestones: newMilestones
+    })
   }, [])
 
   const isMilestoneExist = (label: string) => {
     return milestones.find(it => it.label === label) !== undefined
   }
+
+  useEffect(() => {
+    const data = load()
+    if (data?.milestones) {
+      const newMilestones = data.milestones
+        .map(it => {
+          return {
+            ...it,
+            startDate: it.startDate ? parseISO(it.startDate + '') : undefined,
+            endDate: it.endDate ? parseISO(it.endDate + '') : undefined
+          }
+        })
+      setMilestones(sortMilestones(newMilestones))
+    }
+  }, []);
   return {
     milestones,
     addMilestone,

src/hooks/useStorage.ts

@@ -0,0 +1,36 @@
+import {Milestone} from "@/components/CustomMilestoneDialog";
+
+export type StorageSchema = {
+  user?: {
+    birthday?: string
+    maxYear?: number
+    unit?: number
+  },
+  milestones?: Milestone[]
+}
+const key = 'lifetime__db'
+export default function useStorage() {
+  const save = (schema: StorageSchema) => {
+    const existData = load()
+    if (existData) {
+      const merged = Object.assign(existData, schema)
+      window.localStorage.setItem(key, JSON.stringify(merged))
+    } else {
+      window.localStorage.setItem(key, JSON.stringify(schema))
+    }
+  }
+
+  const load = (): StorageSchema | undefined => {
+    const data = window.localStorage.getItem(key)
+    if (data) {
+      return JSON.parse(data) as StorageSchema
+    } else {
+      return undefined
+    }
+  }
+
+  return {
+    save,
+    load
+  }
+}

src/utils/milestoneUtil.ts

@@ -0,0 +1,33 @@
+import {Milestone} from "@/components/CustomMilestoneDialog";
+
+export const sortMilestones = (milestones: Milestone[]): Milestone[] => {
+  return milestones.sort((a, b) => {
+    if (a.startDate === undefined && b.startDate === undefined) {
+      // 如果startDate都为undefined，则比较label
+      return a.label.localeCompare(b.label);
+    }
+
+    if (a.startDate !== undefined && b.startDate !== undefined) {
+      // 如果startDate都有值，则比较startDate
+      if (a.startDate.getTime() !== b.startDate.getTime()) {
+        return a.startDate.getTime() - b.startDate.getTime();
+      }
+
+      // 如果startDate相同，则比较endDate
+      if (a.endDate !== undefined && b.endDate !== undefined) {
+        if (a.endDate.getTime() !== b.endDate.getTime()) {
+          return a.endDate.getTime() - b.endDate.getTime();
+        }
+      }
+    }
+
+    // 如果startDate和endDate都相同，或者有一个是undefined，则比较label
+    if (a.startDate === undefined) {
+      return 1; // 将未定义的startDate的元素排在末尾
+    } else if (b.startDate === undefined) {
+      return -1; // 将未定义的startDate的元素排在末尾
+    }
+
+    return a.label.localeCompare(b.label);
+  });
+};