[feat]ユーザ一覧ページにおいて学科ごとのフィルタ機能を追加

view/next-project/src/pages/users/index.tsx

@@ -11,40 +11,53 @@ import MainLayout from '@components/layout/MainLayout/MainLayout';
 import OpenEditModalButton from '@components/users/OpenEditModalButton';
 import { BUREAUS } from '@constants/bureaus';
 import { ROLES } from '@constants/role';
-import { User } from '@type/common';
+import { Bureau, User } from '@type/common';
 
 interface Props {
   users: User[];
+  bureaus: Bureau[];
 }
 
 export const getServerSideProps = async () => {
   const getUserURL = process.env.SSR_API_URI + '/users';
+  const getBureausURL = process.env.SSR_API_URI + '/bureaus';
   const userRes = await get(getUserURL);
+  const bureauRes = await get(getBureausURL);
 
   return {
     props: {
       users: userRes,
+      bureaus: bureauRes,
     },
   };
 };
 
 export default function Users(props: Props) {
-  const { users } = props;
+  const { users, bureaus } = props;
   const router = useRouter();
 
   const user = useRecoilValue(userAtom);
   const [currentUser, setCurrentUser] = useState<User>();
+  const [selectedBureau, setSelectedBureau] = useState(0);
+  const [filterUsers, setFilterUsers] = useState<User[]>(users);
 
   useEffect(() => {
     setCurrentUser(user);
-  }, []);
+  }, [user]);
+
+  useEffect(() => {
+    const newFilterUsers =
+      selectedBureau === 0
+        ? users
+        : users.filter((user) => user.bureauID === selectedBureau);
+    setFilterUsers(newFilterUsers);
+  }, [selectedBureau, users])
 
   const [deleteUsers, setDeleteUsers] = useState<{ users: User[]; ids: number[] }>({
     users: [],
     ids: [],
   });
 
-  // ログイン中のユーザの権限
   const isAdmin = useMemo(() => {
     if (currentUser?.roleID === 2 || currentUser?.roleID === 3) {
       return true;
@@ -58,7 +71,7 @@ export default function Users(props: Props) {
     if (!isAdmin) {
       router.push('/purchaseorders');
     }
-  }, [isAdmin, currentUser?.roleID]);
+  }, [isAdmin, currentUser?.roleID, router]);
 
   return (
     <MainLayout>
@@ -71,6 +84,18 @@ export default function Users(props: Props) {
         <div className='mx-5 mt-10'>
           <div className='flex'>
             <Title title={'ユーザー一覧'} />
+            <select
+              className='md:w-100 mx-auto my-4 w-fit md:mx-10 md:my-0'
+              value={selectedBureau}
+              onChange={(e) => setSelectedBureau(Number(e.target.value))}
+            >
+              <option value={0}>全ての学科</option>
+              {bureaus.map((bureau) => (
+                <option value={bureau.id} key={bureau.id}>
+                  {bureau.name}
+                </option>
+              ))}
+            </select>
           </div>
         </div>
         <div className='mb-2 p-5'>
@@ -98,13 +123,13 @@ export default function Users(props: Props) {
               </tr>
             </thead>
             <tbody className='border border-x-white-0 border-b-primary-1 border-t-white-0'>
-              {users.map((user: User, index) => (
+              {filterUsers.map((user: User, index) => (
                 <tr key={user.id}>
                   <td
                     className={clsx(
                       'px-1 py-3',
                       index === 0 ? 'pb-3 pt-4' : 'py-3',
-                      index === users.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
+                      index === filterUsers.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
                     )}
                   >
                     <p className='text-center text-sm text-black-600'>{user.name}</p>
@@ -113,7 +138,7 @@ export default function Users(props: Props) {
                     className={clsx(
                       'px-1',
                       index === 0 ? 'pb-3 pt-4' : 'py-3',
-                      index === users.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
+                      index === filterUsers.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
                     )}
                   >
                     <p className='text-center text-sm text-black-600'>
@@ -124,7 +149,7 @@ export default function Users(props: Props) {
                     className={clsx(
                       'px-1',
                       index === 0 ? 'pb-3 pt-4' : 'py-3',
-                      index === users.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
+                      index === filterUsers.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
                     )}
                   >
                     <p className='text-center text-sm text-black-600'>
@@ -135,7 +160,7 @@ export default function Users(props: Props) {
                     className={clsx(
                       'px-1',
                       index === 0 ? 'pb-3 pt-4' : 'py-3',
-                      index === users.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
+                      index === filterUsers.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
                     )}
                   >
                     <div className='flex justify-end'>
@@ -146,7 +171,7 @@ export default function Users(props: Props) {
                     className={clsx(
                       'px-1 text-center text-sm text-black-600',
                       index === 0 ? 'pb-3 pt-4' : 'py-3',
-                      index === users.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
+                      index === filterUsers.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
                     )}
                   >
                     <input
@@ -177,4 +202,4 @@ export default function Users(props: Props) {
       </Card>
     </MainLayout>
   );
-}
+}