Clean up AttendanceModalContent

webkom · May 9, 2023 · 173bcc7 · 173bcc7
1 parent aefa1e2
commit 173bcc7
Showing 1 changed file with 35 additions and 33 deletions.
diff --git a/app/components/UserAttendance/AttendanceModalContent.tsx b/app/components/UserAttendance/AttendanceModalContent.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import { flatMap } from 'lodash';
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import Button from 'app/components/Button';
 import { TextInput } from 'app/components/Form';
@@ -13,9 +13,12 @@ import styles from './AttendanceModalContent.css';
 export type Registration = {
   id: ID;
   user: PublicUser;
+  pool?: Pool;
 };
 
 export type Pool = {
+  // only needed for the component key
+  id: string | number;
   name: string;
   registrations: Registration[];
 };
@@ -48,42 +51,38 @@ const Tab = ({ name, index, activePoolIndex, togglePool }: TabProps) => (
   </Button>
 );
 
+const generateAmendedPools = (pools: Pool[]) => {
+  if (pools.length === 1) return pools;
+
+  const registrations = flatMap(pools, (pool) => pool.registrations);
+  const summaryPool = {
+    id: 'all',
+    name: 'Alle',
+    registrations,
+  };
+  return [summaryPool, ...pools];
+};
+
 const AttendanceModalContent = ({
   title = 'Status',
   pools,
   togglePool,
   selectedPool,
   isMeeting,
 }: Props) => {
-  const [amendedPools, setAmendedPools] = useState<Pool[]>([]);
-  const [registrations, setRegistrations] = useState<Registration[]>([]);
   const [filter, setFilter] = useState<string>('');
 
-  useEffect(() => {
-    generateAmendedPools(pools);
-  }, [pools]);
-
-  const generateAmendedPools = (pools: Pool[]) => {
-    if (pools.length === 1) return setAmendedPools(pools);
+  const amendedPools = useMemo(() => generateAmendedPools(pools), [pools]);
 
-    const registrations = flatMap(pools, (pool) => pool.registrations);
-    const summaryPool = {
-      name: 'Alle',
-      registrations,
-    };
-    return setAmendedPools([summaryPool, ...pools]);
-  };
-
-  useEffect(() => {
-    const registrations = amendedPools[selectedPool]?.registrations.filter(
-      (registration) => {
+  const registrations = useMemo(
+    () =>
+      amendedPools[selectedPool]?.registrations.filter((registration) => {
         return registration.user.fullName
           .toLowerCase()
           .includes(filter.toLowerCase());
-      }
-    );
-    setRegistrations(registrations);
-  }, [filter, amendedPools, selectedPool]);
+      }),
+    [filter, amendedPools, selectedPool]
+  );
 
   return (
     <Flex
@@ -127,15 +126,18 @@ const AttendanceModalContent = ({
       </ul>
 
       <Flex justifyContent="space-between" className={styles.nav}>
-        {amendedPools.map((pool, i) => (
-          <Tab
-            name={pool.name}
-            key={i}
-            index={i}
-            activePoolIndex={selectedPool}
-            togglePool={togglePool}
-          />
-        ))}
+        {amendedPools.map((pool, i) => {
+          console.log(pool);
+          return (
+            <Tab
+              name={pool.name}
+              key={pool.id}
+              index={i}
+              activePoolIndex={selectedPool}
+              togglePool={togglePool}
+            />
+          );
+        })}
       </Flex>
     </Flex>
   );