feature issues huxulm#30

Yorafa · Nov 25, 2024 · cf53866 · cf53866
1 parent 6333566
commit cf53866
Showing 1 changed file with 87 additions and 2 deletions.
diff --git a/components/ProblemCatetory/index.tsx b/components/ProblemCatetory/index.tsx
@@ -1,7 +1,38 @@
 import { ShareIcon } from "@components/icons";
 import RatingCircle, { ColorRating } from "../RatingCircle";
-import ButtonGroup from "react-bootstrap/esm/ButtonGroup";
 import Form from "react-bootstrap/esm/Form";
+import { useCallback, useState } from "react";
+
+const LC_RATING_PROGRESS_KEY = (questionID: string) =>
+  `lc-rating-zen-progress-${questionID}`;
+
+// Progress Related
+type ProgressData = Record<string, string>;
+
+enum Progress {
+  TODO = "TODO",
+  WORKING = "WORKING",
+  TOO_HARD = "TOO_HARD",
+  REVIEW_NEEDED = "REVIEW_NEEDED",
+  AC = "AC",
+}
+
+const progressTranslations = {
+  [Progress.TODO]: "下次一定",
+  [Progress.WORKING]: "攻略中",
+  [Progress.TOO_HARD]: "太难了，不会",
+  [Progress.REVIEW_NEEDED]: "回头复习下",
+  [Progress.AC]: "过了",
+};
+const progressOptionClassNames = {
+  [Progress.TODO]: "zen-option-TODO",
+  [Progress.WORKING]: "zen-option-WORKING",
+  [Progress.TOO_HARD]: "zen-option-TOO_HARD",
+  [Progress.REVIEW_NEEDED]: "zen-option-REVIEW_NEEDED",
+  [Progress.AC]: "zen-option-AC",
+};
+
+
 
 type ProblemCategory = {
   title: string;
@@ -121,6 +152,33 @@ function ProblemCategoryList({
     }
     return "col3";
   };
+  const [localStorageProgressData, setLocalStorageProgressData] =
+    useState<ProgressData>({});
+
+  // Event handlers
+  const handleProgressSelectChange = useCallback(
+    (questionId: string, value: string) => {
+      const newValue = value || Progress.TODO;
+
+      localStorage.setItem(LC_RATING_PROGRESS_KEY(questionId), newValue);
+      setLocalStorageProgressData((prevData) => ({
+        ...prevData,
+        [questionId]: newValue,
+      }));
+    },
+    []
+  );
+
+  const title2id = (title: string) => {
+    // title: number. title
+    return title.split(".")[0];
+  }
+
+  const progress = (title: string) => {
+    const localtemp = localStorage.getItem(LC_RATING_PROGRESS_KEY(title2id(title)));
+    return localtemp || Progress.TODO;
+  }
+
   return (
     <div className="shadow rounded p-2 leaf">
       <h3 className="title" id={`${hashCode(data.title || "")}`}>
@@ -142,7 +200,7 @@ function ProblemCategoryList({
               >
                 {item.title + (item.isPremium ? " (会员题)" : "")}
                 {en && <a className="ms-2" href={"https://leetcode.com/problems" + item.src} target="_blank">
-                  <ShareIcon height={16} width={16}/>
+                  <ShareIcon height={16} width={16} />
                 </a>}
               </a>
               {item.score && rating ? (
@@ -156,6 +214,33 @@ function ProblemCategoryList({
                   </ColorRating>
                 </div>
               ) : null}
+              <div className="d-flex align-items-center ms-2">
+                <Form.Select
+                  className={progressOptionClassNames[progress(item.title)] || ""}
+                  value={progress(item.title) === Progress.TODO ? "" : progress(item.title)}
+                  onChange={(e) =>
+                    handleProgressSelectChange(title2id(item.title), e.target.value)
+                  }
+                >
+                  {/* Empty option for TODO */}
+                  <option value=""></option>
+
+                  {[
+                    Progress.WORKING,
+                    Progress.TOO_HARD,
+                    Progress.REVIEW_NEEDED,
+                    Progress.AC,
+                  ].map((p) => (
+                    <option
+                      key={p}
+                      value={p}
+                      className={progressOptionClassNames[p] || ""}
+                    >
+                      {progressTranslations[p]}
+                    </option>
+                  ))}
+                </Form.Select>
+              </div>
             </li>
           ))}
       </ul>