feat: フォーム一覧画面のラベルによる絞り込み機能を実装

GiganticMinecraft · Aug 24, 2024 · 241bbb3 · 241bbb3
1 parent d49e218
commit 241bbb3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/src/app/(authed)/admin/forms/_components/FormLabelFilter.tsx b/src/app/(authed)/admin/forms/_components/FormLabelFilter.tsx
@@ -3,8 +3,12 @@ import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import TextField from '@mui/material/TextField';
 import type { GetFormLabelsResponse } from '@/app/api/_schemas/ResponseSchemas';
+import type { Dispatch, SetStateAction } from 'react';
 
-const FormLabelFilter = (props: { labelOptions: GetFormLabelsResponse }) => {
+const FormLabelFilter = (props: {
+  labelOptions: GetFormLabelsResponse;
+  setLabelFilter: Dispatch<SetStateAction<GetFormLabelsResponse>>;
+}) => {
   return (
     <Autocomplete
       multiple
@@ -43,6 +47,11 @@ const FormLabelFilter = (props: { labelOptions: GetFormLabelsResponse }) => {
           sx={{ borderBottom: '1px solid #FFFFFF6B' }}
         />
       )}
+      onChange={(_event, value) => {
+        props.setLabelFilter(
+          props.labelOptions.filter((label) => value.includes(label.name))
+        );
+      }}
     />
   );
 };

diff --git a/src/app/(authed)/admin/forms/page.tsx b/src/app/(authed)/admin/forms/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Grid } from '@mui/material';
+import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import ErrorModal from '@/app/_components/ErrorModal';
 import LoadingCircular from '@/app/_components/LoadingCircular';
@@ -19,6 +20,22 @@ const Home = () => {
     useSWR<Either<ErrorResponse, GetFormsResponse>>('/api/forms');
   const { data: labels, isLoading: isLoadingLabels } =
     useSWR<Either<ErrorResponse, GetFormLabelsResponse>>('/api/labels/forms');
+  const [labelFilter, setLabelFilter] = useState<GetFormLabelsResponse>([]);
+  const [filteredForms, setFilteredForms] = useState<GetFormsResponse>([]);
+
+  useEffect(() => {
+    if (forms?._tag === 'Right' && labelFilter.length === 0) {
+      setFilteredForms(forms.right);
+    } else if (forms?._tag === 'Right' && labelFilter.length !== 0) {
+      setFilteredForms(
+        forms.right.filter((form) =>
+          labelFilter.every((label) =>
+            form.labels.map((label) => label.id).includes(label.id)
+          )
+        )
+      );
+    }
+  }, [labelFilter, forms]);
 
   if (!forms || !labels) {
     return <LoadingCircular />;
@@ -41,15 +58,18 @@ const Home = () => {
           justifyContent="space-between"
         >
           <Grid item xs="auto">
-            <FormLabelFilter labelOptions={labels.right} />
+            <FormLabelFilter
+              labelOptions={labels.right}
+              setLabelFilter={setLabelFilter}
+            />
           </Grid>
           <Grid item xs={2}>
             <FormCreateButton />
           </Grid>
         </Grid>
       </Grid>
       <Grid item>
-        <Forms forms={forms.right} />
+        <Forms forms={filteredForms} />
       </Grid>
     </Grid>
   );