chore: update heatmap click handler

web/src/components/MemoContent/Tag.tsx

@@ -3,7 +3,9 @@ interface Props {
 }
 
 const Tag: React.FC<Props> = ({ content }: Props) => {
-  return <span className="inline-block w-auto text-blue-600 dark:text-blue-400">#{content}</span>;
+  return (
+    <span className="tag-container cursor-pointer inline-block w-auto text-blue-600 dark:text-blue-400 hover:opacity-80">#{content}</span>
+  );
 };
 
 export default Tag;

web/src/components/MemoFilter.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import { getDateString } from "@/helpers/datetime";
 import { useFilterStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
@@ -10,8 +9,8 @@ const MemoFilter = () => {
   const location = useLocation();
   const filterStore = useFilterStore();
   const filter = filterStore.state;
-  const { tag: tagQuery, duration, text: textQuery, visibility } = filter;
+  const { tag: tagQuery, text: textQuery, visibility } = filter;
-  const showFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || textQuery || visibility);
+  const showFilter = Boolean(tagQuery || textQuery || visibility);
 
   useEffect(() => {
     filterStore.clearFilter();
@@ -48,22 +47,6 @@ const MemoFilter = () => {
         <Icon.Eye className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {visibility}
         <Icon.X className="w-4 h-auto ml-1 opacity-40" />
       </div>
-      {duration && duration.from < duration.to ? (
-        <div
-          className="max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through"
-          onClick={() => {
-            filterStore.setFromAndToFilter();
-          }}
-        >
-          <Icon.Calendar className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" />
-          {t("common.filter-period", {
-            from: getDateString(duration.from),
-            to: getDateString(duration.to),
-            interpolation: { escapeValue: false },
-          })}
-          <Icon.X className="w-4 h-auto ml-1 opacity-40" />
-        </div>
-      ) : null}
       <div
         className={
           "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +

web/src/components/MemoView.tsx

@@ -202,7 +202,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     const targetEl = e.target as HTMLElement;
 
-    if (targetEl.className === "tag-span") {
+    if (targetEl.classList.contains("tag-container")) {
       const tagName = targetEl.innerText.slice(1);
       const currTagQuery = filterStore.getState().tag;
       if (currTagQuery === tagName) {

web/src/components/UsageHeatMap.tsx

@@ -4,10 +4,10 @@ import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, getDateString, getTimeStampByDate } from "@/helpers/datetime";
 import * as utils from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import { useGlobalStore } from "@/store/module";
 import { useUserV1Store, extractUsernameFromName, useMemoV1Store } from "@/store/v1";
 import { useTranslate, Translations } from "@/utils/i18n";
-import { useFilterStore } from "../store/module";
 import "@/less/usage-heat-map.less";
 
 const tableConfig = {
@@ -33,7 +33,7 @@ interface DailyUsageStat {
 
 const UsageHeatMap = () => {
   const t = useTranslate();
-  const filterStore = useFilterStore();
+  const navigateTo = useNavigateTo();
   const userV1Store = useUserV1Store();
   const user = useCurrentUser();
   const memoStore = useMemoV1Store();
@@ -48,7 +48,6 @@ const UsageHeatMap = () => {
   const [memoAmount, setMemoAmount] = useState(0);
   const [createdDays, setCreatedDays] = useState(0);
   const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestamp));
-  const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
   const containerElRef = useRef<HTMLDivElement>(null);
   const memos = Array.from(memoStore.getState().memoById.values());
 
@@ -108,13 +107,7 @@ const UsageHeatMap = () => {
   }, []);
 
   const handleUsageStatItemClick = useCallback((item: DailyUsageStat) => {
-    if (filterStore.getState().duration?.from === item.timestamp) {
+    navigateTo(`/timeline?timestamp=${item.timestamp}`);
-      filterStore.setFromAndToFilter();
-      setCurrentStat(null);
-    } else if (item.count > 0) {
-      filterStore.setFromAndToFilter(item.timestamp, item.timestamp + DAILY_TIMESTAMP);
-      setCurrentStat(item);
-    }
   }, []);
 
   // This interpolation is not being used because of the current styling,
@@ -146,11 +139,7 @@ const UsageHeatMap = () => {
                 onMouseLeave={handleUsageStatItemMouseLeave}
                 onClick={() => handleUsageStatItemClick(v)}
               >
-                <span
+                <span className={`stat-container ${colorLevel} ${todayTimeStamp === v.timestamp ? "today" : ""}`}></span>
-                  className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
-                    todayTimeStamp === v.timestamp ? "today" : ""
-                  }`}
-                ></span>
               </div>
             );
           })}

web/src/pages/Timeline.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import useToggle from "react-use/lib/useToggle";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
@@ -15,15 +16,22 @@ import { useTranslate } from "@/utils/i18n";
 
 const Timeline = () => {
   const t = useTranslate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const user = useCurrentUser();
   const memoStore = useMemoV1Store();
   const memoList = useMemoList();
   const currentDateStamp = getDateStampByDate(getNormalizedDateString()) as number;
-  const [selectedDateStamp, setSelectedDateStamp] = useState<number>(currentDateStamp as number);
+  const [selectedDateStamp, setSelectedDateStamp] = useState<number>(
+    (searchParams.get("timestamp") ? Number(searchParams.get("timestamp")) : currentDateStamp) as number
+  );
   const [isRequesting, setIsRequesting] = useState(true);
   const [showDatePicker, toggleShowDatePicker] = useToggle(false);
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.createTime) - getTimeStampByDate(b.createTime));
 
+  useEffect(() => {
+    setSearchParams();
+  }, []);
+
   useEffect(() => {
     memoList.reset();
     fetchMemos();

web/src/pages/UserProfile.tsx

@@ -48,16 +48,16 @@ const UserProfile = () => {
   }, [params.username]);
 
   useEffect(() => {
-    memoList.reset();
-    fetchMemos();
-  }, [tagQuery, textQuery]);
-
-  const fetchMemos = async () => {
     if (!user) {
       return;
     }
 
-    const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
+    memoList.reset();
+    fetchMemos();
+  }, [user, tagQuery, textQuery]);
+
+  const fetchMemos = async () => {
+    const filters = [`creator == "${user!.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
     const contentSearch: string[] = [];
     if (tagQuery) {
       contentSearch.push(`"#${tagQuery}"`);

web/src/store/module/filter.ts

@@ -16,7 +16,6 @@ export const useFilterStore = () => {
       store.dispatch(
         setFilter({
           tag: undefined,
-          duration: undefined,
           text: undefined,
           visibility: undefined,
         })
@@ -36,20 +35,6 @@ export const useFilterStore = () => {
         })
       );
     },
-    setFromAndToFilter: (from?: number, to?: number) => {
-      let duration = undefined;
-      if (from && to && from < to) {
-        duration = {
-          from,
-          to,
-        };
-      }
-      store.dispatch(
-        setFilter({
-          duration,
-        })
-      );
-    },
     setMemoVisibilityFilter: (visibility?: Visibility) => {
       store.dispatch(
         setFilter({

web/src/store/reducer/filter.ts

@@ -1,13 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-interface Duration {
-  from: number;
-  to: number;
-}
-
 interface State {
   tag?: string;
-  duration?: Duration;
   text?: string;
   visibility?: Visibility;
 }