Merge pull request #598 from celestemods-com/mods-page-list-select-fi…

…lters

Implement Filtering for Remaining Mods List Columns

src/components/filterPopovers/listSelect.tsx

@@ -1,19 +1,25 @@
-
-type ListSearchProps = {
-
+import type { Dispatch, SetStateAction } from "react";
+import { MultiSelect } from "@mantine/core";
+
+type ListSearchProps<T extends string> = {
+    permittedStrings: T[];
+    selectedStrings: T[];
+    setSelectedStrings: Dispatch<SetStateAction<T[]>>;
+    maxDropdownHeight?: number;
 };
 
 
 
 
-const ListSearch = (props: ListSearchProps) => {
-
-
+export const ListSelect = <T extends string>({ permittedStrings, selectedStrings, setSelectedStrings, maxDropdownHeight=200 }: ListSearchProps<T>) => {
     return (
-        <>
-        </>
+        <MultiSelect
+            data={permittedStrings}
+            value={selectedStrings}
+            onChange={setSelectedStrings as Dispatch<SetStateAction<string[]>>} //widen type to play nicely with library component
+            placeholder="Pick values"
+            clearable
+            maxDropdownHeight={maxDropdownHeight}
+        />
     );
-};
-
-
-export default ListSearch;
+};

src/components/filterPopovers/numberSearch.tsx

@@ -16,7 +16,7 @@ type NumberSearchProps = {
 
 
 
-const NumberSearch = ({ range, setRange, maxProps, minProps }: NumberSearchProps) => {
+export const NumberSearch = ({ range, setRange, maxProps, minProps }: NumberSearchProps) => {
 
 
     return (
@@ -43,7 +43,4 @@ const NumberSearch = ({ range, setRange, maxProps, minProps }: NumberSearchProps
             />
         </Stack>
     );
-};
-
-
-export default NumberSearch;
+};

src/components/filterPopovers/stringSearch.tsx

@@ -14,7 +14,7 @@ type StringSearchProps = {
 
 
 
-const StringSearch = (props: StringSearchProps) => {
+export const StringSearch = (props: StringSearchProps) => {
     return (
         <TextInput
             {...props}
@@ -34,7 +34,4 @@ const StringSearch = (props: StringSearchProps) => {
             }
         />
     );
-};
-
-
-export default StringSearch;
+};

src/pages/mods/index.tsx

@@ -7,11 +7,12 @@ import { createStyles, MultiSelect, Title } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { Difficulty, Mod, ModRatingData, ModYesRatingData, Quality } from "~/components/mods/types";
 import { noRatingsFoundMessage } from "~/consts/noRatingsFoundMessage";
-import { modTypes } from "~/components/mods/consts";
-import { type ModType } from "@prisma/client";
-import StringSearch from "~/components/filterPopovers/stringSearch";
-import NumberSearch from "~/components/filterPopovers/numberSearch";
+import { type ModType, ModType as modTypes } from "@prisma/client";
+import { StringSearch } from "~/components/filterPopovers/stringSearch";
+import { NumberSearch } from "~/components/filterPopovers/numberSearch";
+import { ListSelect } from "~/components/filterPopovers/listSelect";
 import { Layout } from "~/components/layout/layout";
+import { getNonEmptyArray, type NonEmptyArray } from "~/utils/getNonEmptyArray";
 
 
 
@@ -161,23 +162,26 @@ const Mods: NextPage = () => {
     const qualityQuery = api.quality.getAll.useQuery({}, { queryKey: ["quality.getAll", {}] });
     const qualities = qualityQuery.data ?? [];
 
-    const qualityNames = useMemo(
+    const qualityNames = useMemo(   //get quality names for filter component
         () => qualities
             .sort((a, b) => b.order - a.order)  //better qualities have higher orders, so we want them to sort first
-            .map((quality) => quality.name),
+            .map((quality) => quality.name)
+            .slice(0, -1),  //remove "Not Recommended" from the selectable list, as no mods will ever publicly show as "Not Recommended"
         [qualities],
     );
 
 
     const difficultyQuery = api.difficulty.getAll.useQuery({}, { queryKey: ["difficulty.getAll", {}] });
     const difficulties = difficultyQuery.data ?? [];
 
-    const difficultyNames = useMemo(
+    const parentDifficultyNames = useMemo(  //get parent difficulty names for filter component
         () => difficulties
+            .filter((difficulty) => difficulty.parentDifficultyId === 0)    //parent difficulties all have the nullParent difficulty, with id = 0, as their parent
             .sort((a, b) => a.order - b.order)  //easier difficulties have lower orders, and we want them to sort first
             .map((difficulty) => difficulty.name),
         [difficulties],
     );
+
 
     /*
         //get all mod ids   //not using pagination because backend pagination is awkward with mantine-datatable     //TODO: implement this
@@ -321,7 +325,7 @@ const Mods: NextPage = () => {
     const [mapCountRange, setMapCountRange] = useState<[number | undefined, number | undefined]>([undefined, undefined]);     //[min, max]
     const [selectedModTypes, setSelectedModTypes] = useState<ModType[]>([]);
     const [selectedQualities, setSelectedQualities] = useState<string[]>([]);
-    const [selectedDifficulties, setSelectedDifficulties] = useState<string[]>([]);
+    const [selectedParentDifficulties, setSelectedParentDifficulties] = useState<string[]>([]);
 
     const [filteredModsWithInfo, setFilteredModsWithInfo] = useState<ModWithInfo[]>(modsWithInfo);
 
@@ -373,8 +377,8 @@ const Mods: NextPage = () => {
 
 
                 if (
-                    selectedDifficulties.length &&
-                    !selectedDifficulties.includes(modWithInfo.Difficulty.name)
+                    selectedParentDifficulties.length &&
+                    !selectedParentDifficulties.some((parentDifficulty) => modWithInfo.Difficulty.name.startsWith(parentDifficulty))
                 ) {
                     return false;
                 }
@@ -383,7 +387,7 @@ const Mods: NextPage = () => {
                 return true;
             }),
         );
-    }, [modsWithInfo, debouncedNameQuery, mapCountRange, selectedModTypes, selectedQualities, selectedDifficulties]);
+    }, [modsWithInfo, debouncedNameQuery, mapCountRange, selectedModTypes, selectedQualities, selectedParentDifficulties]);
 
 
 
@@ -515,7 +519,7 @@ const Mods: NextPage = () => {
     //reset page when sortStatus or page size changes
     useEffect(() => {
         setPage(1);
-    }, [sortStatus, pageSize, debouncedNameQuery, mapCountRange, selectedModTypes, selectedQualities, selectedDifficulties]);
+    }, [sortStatus, pageSize, debouncedNameQuery, mapCountRange, selectedModTypes, selectedQualities, selectedParentDifficulties]);
 
     //handle providing datatable with correct subset of data
     const [records, setRecords] = useState<ModWithInfo[]>(sortedModsWithIsExpanded.slice(0, pageSize));
@@ -564,7 +568,7 @@ const Mods: NextPage = () => {
                 fetching={isLoading}
                 records={records}
                 idAccessor={(record) => record.id}
-                columns={[      //TODO!!!: add filtering. create searchString, searchRange, and searchSet components to use here.
+                columns={[
                     {
                         accessor: "name",
                         title: "Name",
@@ -607,8 +611,10 @@ const Mods: NextPage = () => {
                         title: "Type",
                         sortable: true,
                         filter: (
-                            <div
-
+                            <ListSelect 
+                                permittedStrings={getNonEmptyArray(modTypes)}
+                                selectedStrings={selectedModTypes}
+                                setSelectedStrings={setSelectedModTypes}
                             />
                         ),
                         filtering: !!selectedModTypes.length,
@@ -619,8 +625,10 @@ const Mods: NextPage = () => {
                         sortable: true,
                         render: (modWithInfo) => modWithInfo.Quality.name,
                         filter: (
-                            <div
-
+                            <ListSelect
+                                permittedStrings={qualityNames}
+                                selectedStrings={selectedQualities}
+                                setSelectedStrings={setSelectedQualities}
                             />
                         ),
                         filtering: !!selectedQualities.length,
@@ -631,11 +639,13 @@ const Mods: NextPage = () => {
                         sortable: true,
                         render: (modWithInfo) => modWithInfo.Difficulty.name,
                         filter: (
-                            <div
-
+                            <ListSelect
+                                permittedStrings={parentDifficultyNames}
+                                selectedStrings={selectedParentDifficulties}
+                                setSelectedStrings={setSelectedParentDifficulties}
                             />
                         ),
-                        filtering: !!selectedDifficulties.length,
+                        filtering: !!selectedParentDifficulties.length,
                     },
                 ]}
                 sortStatus={sortStatus}

src/utils/getNonEmptyArray.ts

@@ -1,4 +1,4 @@
-//export type NonEmptyArray<T, IsReadonly extends boolean = true> = IsReadonly extends true ? readonly [T, ...T[]] : [T, ...T[]];
+export type NonEmptyArray<T extends any[] | readonly any[]> = [T[number], ...T[number][]];
 
 
 export const getNonEmptyArray = <