group clubs

Author: 33tm

client/src/components/lists/List.tsx

@@ -9,7 +9,8 @@ type ListProps<T> = {
     filter: ([id, value]: [string, T]) => boolean,
     map: ([id, value]: [string, T]) => JSX.Element,
     sort: ([idA, valueA]: [string, T], [idB, valueB]: [string, T]) => number,
-    pinned: string[]
+    pinned: string[],
+    groupBy?: keyof T
 }
 
 // A higher order list component of type T where T is the type of the JSON representation of a list value
@@ -21,8 +22,8 @@ type ListProps<T> = {
 // Pinned items (given as a string[] of IDs) are displayed in a separate category above other results.
 export default function List<T>(props: ListProps<T>) {
     // Filter and map are different for each list, so pass them in as props
-    const {data, filter, map, sort, pinned: pinnedIds} = props;
-    const [{pinned, unpinned}, setContent] = useState(parseContent());
+    const {data, filter, map, sort, pinned: pinnedIds, groupBy} = props;
+    const [{pinned, unpinned, grouped}, setContent] = useState(parseContent());
 
     // Maps content to JSX components, sorting, filtering, and splitting by pinned and unpinned.
     function parseContent() {
@@ -36,9 +37,20 @@ export default function List<T>(props: ListProps<T>) {
         const pinnedContent = parsed.filter(([id, value]) => pinnedIds.includes(id));
         const unpinnedContent = parsed.filter(([id, value]) => !pinnedIds.includes(id));
 
+        const groupedContent = groupBy ? unpinnedContent.reduce((clubs, [id, club]) => {
+            const group = club[groupBy] as string;
+            if (!clubs[group]) clubs[group] = [];
+            clubs[group].push([id, club]);
+            return clubs;
+        }, {} as Record<string, [string, T][]>) : {};
+
         return {
             pinned: pinnedContent.filter(filter).map(map),
-            unpinned: unpinnedContent.filter(filter).map(map)
+            unpinned: unpinnedContent.filter(filter).map(map),
+            grouped: Object.entries(groupedContent).map(([group, clubs]) => [
+                group,
+                clubs.filter(filter).map(map)
+            ])
         };
     }
 
@@ -57,10 +69,22 @@ export default function List<T>(props: ListProps<T>) {
             </MaterialList>
         )}
         {unpinned.length > 0 && pinned.length > 0 && <hr/>}
-        {unpinned.length > 0 && (
-            <MaterialList>
-                {unpinned}
-            </MaterialList>
+        {groupBy ? grouped.map(([group, clubs]) => (
+            clubs.length > 0 && (
+                <>
+                    <p className="mt-2 pl-2 text-secondary text-2xl font-bold">{group}</p>
+                    <hr className="mx-2 mt-2 mb-0" />
+                    <MaterialList>
+                        {clubs}
+                    </MaterialList>
+                </>
+            )
+        )) : (
+            unpinned.length > 0 && (
+                <MaterialList>
+                    {unpinned}
+                </MaterialList>
+            )
         )}
     </>) : (
         <NoResults/>

client/src/pages/Clubs.tsx

@@ -105,6 +105,7 @@ export default function Clubs() {
                 )}
                 sort={([idA, clubA], [idB, clubB]) => clubA.name.localeCompare(clubB.name)}
                 pinned={userData.clubs}
+                groupBy="type"
             />
         </HeaderPage>
     );