From 2730b90512309ac7624a04bcc3bb0c3abea8e465 Mon Sep 17 00:00:00 2001
From: Athurg Gooth <github@gooth.org>
Date: Fri, 19 May 2023 08:36:08 +0800
Subject: [PATCH] feat: highlight the DatePicker's date (#1669)

Co-authored-by: Athurg Feng <athurg@gooth.org>
---
 web/src/components/kit/DatePicker.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/src/components/kit/DatePicker.tsx b/web/src/components/kit/DatePicker.tsx
index d008b3e5..519c1651 100644
--- a/web/src/components/kit/DatePicker.tsx
+++ b/web/src/components/kit/DatePicker.tsx
@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
+import { getMemoStats } from "@/helpers/api";
+import { getDateStampByDate } from "@/helpers/datetime";
+import { useUserStore } from "@/store/module";
 import Icon from "../Icon";
 import "@/less/common/date-picker.less";
 
@@ -14,11 +17,24 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
   const { t } = useTranslation();
   const { className, datestamp, handleDateStampChange } = props;
   const [currentDateStamp, setCurrentDateStamp] = useState<DateStamp>(getMonthFirstDayDateStamp(datestamp));
+  const [countByDate, setCountByDate] = useState(new Map());
 
   useEffect(() => {
     setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp));
   }, [datestamp]);
 
+  const currentUserId = useUserStore().getCurrentUserId();
+  useEffect(() => {
+    getMemoStats(currentUserId).then(({ data: { data } }) => {
+      const m = new Map();
+      for (const record of data) {
+        const date = getDateStampByDate(record * 1000);
+        m.set(date, true);
+      }
+      setCountByDate(m);
+    });
+  }, [currentUserId]);
+
   const firstDate = new Date(currentDateStamp);
   const firstDateDay = firstDate.getDay() === 0 ? 7 : firstDate.getDay();
   const dayList = [];
@@ -89,7 +105,7 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
             return (
               <span
                 key={d.datestamp}
-                className={`day-item ${d.datestamp === datestamp ? "current" : ""}`}
+                className={`day-item ${countByDate.has(d.datestamp) && "font-bold"} ${d.datestamp === datestamp ? "current" : ""}`}
                 onClick={() => handleDateItemClick(d.datestamp)}
               >
                 {d.date}