Merge pull request #500 from sparcs-kaist/feat/save-recent-votes-option

feat: save recent agendas filter option
sparcs-kaist · Sep 10, 2024 · 285e091 · 285e091
2 parents baf988d + efbff8f
commit 285e091
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/packages/web/src/components/atoms/ToggleSwitch.tsx b/packages/web/src/components/atoms/ToggleSwitch.tsx
@@ -2,11 +2,13 @@ import { bg, colors, h, margin, round, row, text, w } from "@biseo/web/styles";
 import React from "react";
 
 interface ToggleSwitchProps {
+  defaultValue: boolean;
   handleToggle: () => void;
   label: string;
 }
 
 export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  defaultValue,
   handleToggle,
   label,
 }) => (
@@ -15,6 +17,7 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
       type="checkbox"
       id="toggle"
       onChange={handleToggle}
+      checked={defaultValue}
       css={[
         w(0),
         h(0),

diff --git a/packages/web/src/components/molecules/AgendaCard/Group.tsx b/packages/web/src/components/molecules/AgendaCard/Group.tsx
@@ -21,11 +21,13 @@ import { EmptyAgendaCard } from "./EmptyAgendaCard";
 
 interface Props extends PropsWithChildren {
   agendaStatus: AgendaStatus;
+  recentOnly?: boolean;
   handleRecentOnly?: () => void;
 }
 
 export const Group: React.FC<Props> = ({
   agendaStatus,
+  recentOnly = false,
   handleRecentOnly = () => {},
   children = null,
 }) => (
@@ -50,7 +52,11 @@ export const Group: React.FC<Props> = ({
         </div>
       </div>
       {agendaStatus === "terminated" && (
-        <ToggleSwitch label="최근 투표만" handleToggle={handleRecentOnly} />
+        <ToggleSwitch
+          label="최근 투표만"
+          defaultValue={recentOnly}
+          handleToggle={handleRecentOnly}
+        />
       )}
     </div>
     {Children.count(children) ? (

diff --git a/packages/web/src/components/organisms/AgendaSection.tsx b/packages/web/src/components/organisms/AgendaSection.tsx
@@ -37,7 +37,9 @@ const gridLayout = css`
 `;
 
 export const AgendaSection: React.FC = () => {
-  const [showRecentAgendasOnly, setShowRecentAgendasOnly] = useState(false);
+  const [showRecentAgendasOnly, setShowRecentAgendasOnly] = useState(
+    localStorage.getItem("showRecentAgendasOnly") === "true",
+  );
 
   const { preparingAgendas, ongoingAgendas, terminatedAgendas } = useAgenda(
     state => ({
@@ -88,7 +90,14 @@ export const AgendaSection: React.FC = () => {
         </AgendaCard.Group>
         <AgendaCard.Group
           agendaStatus="terminated"
-          handleRecentOnly={() => setShowRecentAgendasOnly(curr => !curr)}
+          recentOnly={showRecentAgendasOnly}
+          handleRecentOnly={() => {
+            setShowRecentAgendasOnly(curr => !curr);
+            localStorage.setItem(
+              "showRecentAgendasOnly",
+              String(!showRecentAgendasOnly),
+            );
+          }}
         >
           {getAgendaCards("terminated")}
         </AgendaCard.Group>