Merge pull request #488 from sparcs-kaist/feat/recently-terminated-ag…

…endas

feat: recent agendas filtering

packages/web/src/components/atoms/ToggleSwitch.tsx

@@ -0,0 +1,52 @@
+import { bg, colors, h, margin, round, row, text, w } from "@biseo/web/styles";
+import React from "react";
+
+interface ToggleSwitchProps {
+  handleToggle: () => void;
+  label: string;
+}
+
+export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  handleToggle,
+  label,
+}) => (
+  <div>
+    <input
+      type="checkbox"
+      id="toggle"
+      onChange={handleToggle}
+      css={[
+        w(0),
+        h(0),
+        `display: none;
+        :checked + label div { background-color: ${colors.blue500}; }
+        :checked + label div span { transform: translateX(10px) }`,
+      ]}
+    />
+    <label htmlFor="toggle" css={[row, `cursor: pointer`]}>
+      <div
+        css={[
+          bg.gray300,
+          w(28),
+          h(18),
+          round.xl,
+          `position: relative`,
+          `transition: 0.2s`,
+        ]}
+      >
+        <span
+          css={[
+            w(12),
+            h(12),
+            round.xl,
+            bg.white,
+            margin(3),
+            `position: absolute`,
+            `transition: all 0.2s`,
+          ]}
+        />
+      </div>
+      <span css={[text.subtitle, text.gray600, margin.left(4)]}>{label}</span>
+    </label>
+  </div>
+);

packages/web/src/components/molecules/AgendaCard/Group.tsx

@@ -7,6 +7,7 @@ import {
   column,
   gap,
   h,
+  justify,
   padding,
   round,
   row,
@@ -15,29 +16,42 @@ import {
 } from "@biseo/web/styles";
 import type { AgendaStatus } from "@biseo/interface/agenda";
 import { agendaStatusNames } from "@biseo/web/constants/phrases";
+import { ToggleSwitch } from "@biseo/web/components/atoms/ToggleSwitch";
 import { EmptyAgendaCard } from "./EmptyAgendaCard";
 
 interface Props extends PropsWithChildren {
   agendaStatus: AgendaStatus;
+  handleRecentOnly?: () => void;
 }
 
-export const Group: React.FC<Props> = ({ agendaStatus, children = null }) => (
+export const Group: React.FC<Props> = ({
+  agendaStatus,
+  handleRecentOnly = () => {},
+  children = null,
+}) => (
   <div>
-    <div css={[row, align.center, h(42), gap(8), padding.horizontal(15)]}>
-      <h2 css={[text.title2, text.black]}>{agendaStatusNames[agendaStatus]}</h2>
-      <div
-        css={[
-          text.body,
-          text.blue600,
-          bg.blue200,
-          w(20),
-          h(20),
-          round.md,
-          center,
-        ]}
-      >
-        {Children.count(children)}
+    <div css={[row, align.center, justify.between, padding.horizontal(15)]}>
+      <div css={[row, align.center, h(42), gap(8)]}>
+        <h2 css={[text.title2, text.black]}>
+          {agendaStatusNames[agendaStatus]}
+        </h2>
+        <div
+          css={[
+            text.body,
+            text.blue600,
+            bg.blue200,
+            w(20),
+            h(20),
+            round.md,
+            center,
+          ]}
+        >
+          {Children.count(children)}
+        </div>
       </div>
+      {agendaStatus === "terminated" && (
+        <ToggleSwitch label="최근 투표만" handleToggle={handleRecentOnly} />
+      )}
     </div>
     {Children.count(children) ? (
       <ul css={[column, gap(15)]}>{children}</ul>

packages/web/src/components/organisms/AgendaSection.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import type { AgendaStatus } from "@biseo/interface/agenda";
 import { AgendaCard } from "@biseo/web/components/molecules";
 import { useAgenda } from "@biseo/web/services/agenda";
@@ -37,6 +37,8 @@ const gridLayout = css`
 `;
 
 export const AgendaSection: React.FC = () => {
+  const [showRecentAgendasOnly, setShowRecentAgendasOnly] = useState(false);
+
   const { preparingAgendas, ongoingAgendas, terminatedAgendas } = useAgenda(
     state => ({
       preparingAgendas: state.agendas.filter(isPreparingAgenda),
@@ -48,8 +50,18 @@ export const AgendaSection: React.FC = () => {
   const getAgendas = useCallback(
     (agendaStatus: AgendaStatus) => {
       if (agendaStatus === "preparing") return preparingAgendas;
-      if (agendaStatus === "ongoing") return ongoingAgendas;
-      if (agendaStatus === "terminated") return terminatedAgendas;
+      if (agendaStatus === "ongoing")
+        return ongoingAgendas.sort((a, b) => a.voters.voted - b.voters.voted);
+
+      if (agendaStatus === "terminated") {
+        const recent24Hours = new Date();
+        recent24Hours.setDate(new Date().getDate() - 1);
+        return showRecentAgendasOnly
+          ? terminatedAgendas.filter(
+              agenda => new Date(agenda.endAt) > recent24Hours,
+            )
+          : terminatedAgendas;
+      }
       return [];
     },
     [preparingAgendas, ongoingAgendas, terminatedAgendas],
@@ -58,13 +70,6 @@ export const AgendaSection: React.FC = () => {
   const getAgendaCards = useCallback(
     (agendaStatus: AgendaStatus) => {
       const agendas = getAgendas(agendaStatus);
-      if (agendaStatus === "ongoing") {
-        agendas.sort((a, b) => {
-          if (a.voters.voted === 0) return -1;
-          if (b.voters.voted === 0) return 1;
-          return 0;
-        });
-      }
       return agendas.map(agenda => (
         <AgendaCard key={agenda.id} agenda={agenda} />
       ));
@@ -81,7 +86,10 @@ export const AgendaSection: React.FC = () => {
         <AgendaCard.Group agendaStatus="preparing">
           {getAgendaCards("preparing")}
         </AgendaCard.Group>
-        <AgendaCard.Group agendaStatus="terminated">
+        <AgendaCard.Group
+          agendaStatus="terminated"
+          handleRecentOnly={() => setShowRecentAgendasOnly(curr => !curr)}
+        >
           {getAgendaCards("terminated")}
         </AgendaCard.Group>
       </div>