opt: milestone cover (#6)

Sleek Zheng · web-flow · commit 6c28ae85962c · 2023-12-14T16:17:21.000+08:00
* use lodash fix storage

* temp

* findCoverMilestones
diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
     "@mui/x-date-pickers": "^6.18.4",
     "@types/qs": "^6.9.10",
     "@uiw/react-color": "^2.0.3",
-    "DateRangePicker": "link:@mui/x-date-pickers-pro/DateRangePicker",
     "date-fns": "^2.30.0",
+    "lodash": "^4.17.21",
     "next": "14.0.4",
     "qs": "^6.11.2",
     "react": "^18",
@@ -30,6 +30,7 @@
     "use-debounce": "^10.0.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.202",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,11 +11,12 @@ import {
   differenceInDays,
   differenceInMonths,
   differenceInWeeks,
-  differenceInYears,
+  differenceInYears, endOfWeek,
   format,
   isAfter,
-  isBefore, isEqual,
-  min, parseISO
+  isBefore, isEqual, isSameWeek,
+  min, startOfWeek,
+  toDate
 } from "date-fns";
 import {
   createTheme,
@@ -42,20 +43,16 @@ import {
   TimelineOppositeContent,
   TimelineSeparator
 } from "@mui/lab";
-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";
+import useStorage, {StorageSchema} from "@/hooks/useStorage";
 
 export default function Home() {
   const [maxYear, setMaxYear] = useState(80)
   const [birthday, setBirthday] = useState<Date | undefined>(undefined)
   const [unit, setUnit] = useState(12)
   const [validDate, setValidDate] = useState(false)
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const pathname = usePathname()
 
   const {save, load} = useStorage()
 
@@ -64,7 +61,7 @@ export default function Home() {
   }, [unit, maxYear])
 
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const {milestones, addMilestone, removeMilestone, confirmDefaultMilestone} = useMilestones()
+  const {milestones, addMilestone, removeMilestone, confirmDefaultMilestone, getCoveredMilestone} = useMilestones()
 
   const theme = useMemo(
     () =>
@@ -76,7 +73,7 @@ export default function Home() {
     [prefersDarkMode],
   );
 
-  const handleChangeBirthday = useDebouncedCallback((value) => {
+  const handleChangeBirthday = useDebouncedCallback((value: Date | null) => {
     if (value) {
       setBirthday(value)
       try {
@@ -85,7 +82,7 @@ export default function Home() {
         confirmDefaultMilestone(value)
         save({
           user: {
-            birthday: value
+            birthday: value.getTime()
           }
         })
       } catch (e) {
@@ -120,7 +117,7 @@ export default function Home() {
     return days;
   }, [unit, validDate, birthday, maxYear])
 
-  const getBackgroundColor = useCallback((day: number) => {
+  const getBackgroundColors = useCallback((day: number) => {
     // 今天
     if (day === liveDays) {
       return twColorToHex('bg-sky-600')
@@ -150,23 +147,19 @@ export default function Home() {
           break
         }
       }
-      const colors = milestones.filter(it => {
-        return isEqual(it.startDate!, date) ||
-          (isBefore(date, it.endDate!) && isAfter(date, it.startDate!));
-      })
+      const colors = getCoveredMilestone(date, unit)
         .map(it => twColorToHex(it.color))
       if (colors.length) {
         return colors
       }
     }
 
     return twColorToHex('bg-green-200')
-  }, [liveDays, milestones, birthday, unit])
+  }, [liveDays, birthday, unit, getCoveredMilestone])
 
 
   const rectangles = useMemo(() => {
     return array.map((it) => {
-      const backgroundColor = getBackgroundColor(it)
       let date: Date = new Date()
       if (validDate && birthday) {
         switch (unit) {
@@ -188,14 +181,13 @@ export default function Home() {
           }
         }
       }
+      const backgroundColor = getBackgroundColors(it)
 
-      const validMilestones = milestones.filter(item =>
-        isEqual(item.startDate!, date) ||
-        (isBefore(date, item.endDate || date) && isAfter(date, item.startDate || date))
-      )
+      const validMilestones = getCoveredMilestone(date, unit)
       return <Rectangle
         key={it}
-        date={validDate ? format(date, 'yyyy-MM-dd') : undefined}
+        date={validDate ? date : undefined}
+        unit={unit}
         onClick={() => {
           customMilestoneRef.current?.open({
             startDate: date,
@@ -206,7 +198,7 @@ export default function Home() {
         milestones={validMilestones}
       />
     })
-  }, [getBackgroundColor, array, unit, validDate, birthday, milestones])
+  }, [getBackgroundColors, array, unit, validDate, birthday, getCoveredMilestone])
 
   const aliveDisplay = useMemo(() => {
     if (validDate && birthday) {
@@ -258,7 +250,7 @@ export default function Home() {
 
   const timelineItems = useMemo(() => {
     if (validDate) {
-      return milestones.filter(it => it.startDate !== undefined)
+      return milestones.filter(it => it.startDate !== undefined && isBefore(it.startDate, new Date()))
         .map(it => {
           return {
             startDate: it.startDate,
@@ -271,21 +263,11 @@ export default function Home() {
     }
   }, [validDate, milestones])
 
-  const createQueryString = useCallback(
-    (name: string, value: string) => {
-      const params = new URLSearchParams(searchParams)
-      params.set(name, value)
-
-      return params.toString()
-    },
-    [searchParams]
-  )
-
   useEffect(() => {
     const data = load()
     if (data?.user) {
       if (data.user.birthday) {
-        setBirthday(parseISO(data.user.birthday))
+        setBirthday(toDate(data.user.birthday))
         setValidDate(true)
       }
       data.user.maxYear && setMaxYear(data.user.maxYear)
@@ -317,10 +299,11 @@ export default function Home() {
               value={maxYear}
               type='number'
               onChange={(e) => {
-                setMaxYear(parseInt(e.target.value))
+                const maxYear = Math.min(parseInt(e.target.value), 120)
+                setMaxYear(maxYear)
                 save({
                   user: {
-                    maxYear: parseInt(e.target.value)
+                    maxYear
                   }
                 })
               }}/>
diff --git a/src/components/CustomMilestoneDialog.tsx b/src/components/CustomMilestoneDialog.tsx
@@ -20,6 +20,7 @@ export type Milestone = {
   startDate?: Date
   endDate?: Date
   color: string
+  order?: number
 }
 export type CustomMilestoneDialogRef = {
   open: (milestone: Partial<Milestone>) => void
diff --git a/src/components/Rectangle.tsx b/src/components/Rectangle.tsx
@@ -1,10 +1,12 @@
 import {useMemo, useState} from "react";
 import {buildLinearGradient, twColorToHex} from "@/utils/colorUtil";
 import {Milestone} from "@/components/CustomMilestoneDialog";
+import {format} from "date-fns";
 
 export interface RectangleProps {
   backgroundColor?: string[] | string
-  date?: string
+  date?: Date
+  unit?: number
   milestones?: Milestone[]
   onClick?: () => void
   className?: string
@@ -59,18 +61,35 @@ export default function Rectangle(props: RectangleProps) {
       style={style}
     >
       {
-        props.milestones && (
+        (props.milestones?.length || 0) > 0 && (
           <div
             className={`absolute border border-gray-300 -top-16 flex-col ${hover ? 'flex' : 'hidden'} w-[300px] p-4 rounded z-10 bg-white`}>
             <div className='flex flex-col gap-x-2'>
               {
-                props.milestones.map(it => (
-                  <div key={it.label} className='flex gap-1 items-center'>
-                    <Rectangle backgroundColor={it.color}/>
-                    <p>{it.label}</p>
-                    <p>今天是{props.date}</p>
-                  </div>
-                ))
+                props.milestones!.map(it => {
+                  let formatPattern = 'yyyy年MM月dd号'
+                  switch (props.unit) {
+                    case 1: {
+                      formatPattern = 'yyyy年'
+                      break
+                    }
+                    case 12: {
+                      formatPattern = 'yyyy年MM月'
+                      break
+                    }
+                    case 52: {
+                      formatPattern = 'yyyy年MM月ww周'
+                      break
+                    }
+                  }
+                  return (
+                    <div key={it.label} className='flex gap-2 items-center'>
+                      <Rectangle backgroundColor={it.color}/>
+                      <p>{it.label}</p>
+                      <p>{format(props.date!, formatPattern)}</p>
+                    </div>
+                  )
+                })
               }
             </div>
           </div>
diff --git a/src/hooks/useMilestones.ts b/src/hooks/useMilestones.ts
@@ -1,6 +1,6 @@
 import {useCallback, useEffect, useState} from "react";
 import {Milestone} from "@/components/CustomMilestoneDialog";
-import {addYears, parseISO} from "date-fns";
+import {addYears, endOfWeek, parseISO, startOfWeek} from "date-fns";
 import useStorage from "@/hooks/useStorage";
 import {sortMilestones} from "@/utils/milestoneUtil";
 
@@ -10,34 +10,42 @@ export default function useMilestones() {
     {
       label: '童年',
       color: 'bg-zinc-400',
+      order: 0
     },
     {
       label: '幼儿园',
       color: 'bg-red-600',
+      order: 1
     },
     {
       label: '小学',
       color: 'bg-orange-400',
+      order: 2
     },
     {
       label: '初中',
       color: 'bg-yellow-400',
+      order: 3
     },
     {
       label: '高中',
       color: 'bg-rose-400',
+      order: 4
     },
     {
       label: '大学本科',
       color: 'bg-cyan-400',
+      order: 5
     },
     {
       label: '日常',
       color: 'bg-green-200',
+      order: 6
     },
     {
       label: '今天',
       color: 'bg-sky-600',
+      order: 7
     },
   ])
 
@@ -96,11 +104,40 @@ export default function useMilestones() {
       setMilestones(sortMilestones(newMilestones))
     }
   }, []);
+
+  const getCoveredMilestone = (date: Date, unit: number) => {
+    return milestones
+      .filter(it => it.startDate !== undefined && it.endDate !== undefined)
+      .filter(it => {
+        switch (unit) {
+          case 1: {
+            const startYear = it.startDate!.getFullYear()
+            const endYear = it.endDate!.getFullYear()
+            return date.getFullYear() >= startYear && date.getFullYear() <= endYear
+          }
+          case 12: {
+            const startDate = new Date(it.startDate!.getFullYear(), it.startDate!.getMonth())
+            const endDate = new Date(it.endDate!.getFullYear(), it.endDate!.getMonth())
+            return date.getTime() >= startDate.getTime() && date.getTime() <= endDate.getTime()
+          }
+          case 52: {
+            const startDate = endOfWeek(it.startDate!)
+            const endDate = startOfWeek(it.endDate!)
+            return date.getTime() >= startDate.getTime() && date.getTime() <= endDate.getTime()
+          }
+          case 365: {
+            return date.getTime() >= it.startDate!.getTime() && date.getTime() <= it.endDate!.getTime()
+          }
+        }
+      })
+  }
+
   return {
     milestones,
     addMilestone,
     removeMilestone,
     confirmDefaultMilestone,
-    isMilestoneExist
+    isMilestoneExist,
+    getCoveredMilestone
   }
 }
diff --git a/src/hooks/useStorage.ts b/src/hooks/useStorage.ts

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ export type Milestone = {`
`20`	`20`	`startDate?: Date`
`21`	`21`	`endDate?: Date`
`22`	`22`	`color: string`
	`23`	`+ order?: number`
`23`	`24`	`}`
`24`	`25`	`export type CustomMilestoneDialogRef = {`
`25`	`26`	`open: (milestone: Partial<Milestone>) => void`