better search for timezone filter

packages/web/components/Player/Filter/DesktopFilters.tsx

@@ -114,10 +114,7 @@ export const DesktopFilters: React.FC<Props> = ({
           onChange={(value) => {
             setPlayerTypes(value as ValueType[]);
           }}
-          options={aggregates.playerTypes.map(({ id, title }) => ({
-            value: id.toString(),
-            label: title,
-          }))}
+          options={aggregates.playerTypes}
         />
       </WrapItem>
       <WrapItem>
@@ -155,11 +152,9 @@ export const DesktopFilters: React.FC<Props> = ({
           onChange={(value) => {
             setTimezones(value as ValueType[]);
           }}
-          options={TimezoneOptions.map(({ id, label }) => ({
-            value: id.toString(),
-            label,
-          }))}
+          options={TimezoneOptions}
           showSearch
+          isTimezone
         />
       </WrapItem>
     </Wrap>

packages/web/components/Player/Filter/MobileFilters.tsx

@@ -9,13 +9,16 @@ import {
   DrawerContent,
   DrawerFooter,
   DrawerHeader,
+  filterTimezones,
   Flex,
   FlexProps,
+  getTimezonesFor,
   IconButton,
   Input,
   MetaButton,
   Text,
   TimezoneOptions,
+  TimezoneType,
 } from '@metafam/ds';
 import { SkillCategory_Enum } from 'graphql/autogen/types';
 import { SkillColors } from 'graphql/types';
@@ -194,12 +197,7 @@ export const MobileFilters: React.FC<Props> = ({
             onChange={(value) => {
               setPlayerTypes(value as ValueType[]);
             }}
-            options={aggregates.playerTypes.map(
-              ({ id, title: playerType }) => ({
-                value: id.toString(),
-                label: playerType,
-              }),
-            )}
+            options={aggregates.playerTypes}
             onBack={onBack}
           />
         )}
@@ -235,12 +233,10 @@ export const MobileFilters: React.FC<Props> = ({
             onChange={(value) => {
               setTimezones(value as ValueType[]);
             }}
-            options={TimezoneOptions.map(({ id, label }) => ({
-              value: id.toString(),
-              label,
-            }))}
+            options={TimezoneOptions}
             onBack={onBack}
             showSearch
+            isTimezone
           />
         )}
       </DrawerContent>
@@ -307,6 +303,7 @@ type FilterContentProps = {
   onBack: () => void;
   isMulti?: boolean;
   showSearch?: boolean;
+  isTimezone?: boolean;
 };
 
 const scrollbarVisible = (element: HTMLDivElement): boolean =>
@@ -314,9 +311,10 @@ const scrollbarVisible = (element: HTMLDivElement): boolean =>
 
 const searchFilter: (searchText: string) => (v: ValueType) => boolean = (
   searchText,
-) => ({ label, value }) =>
+) => ({ value, label }) =>
   label.toLowerCase().includes(searchText) ||
   value.toLowerCase().includes(searchText);
+
 const FilterContent: React.FC<FilterContentProps> = ({
   value: selectedValue,
   onChange,
@@ -324,6 +322,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
   onBack,
   isMulti = true,
   showSearch = false,
+  isTimezone = false,
 }) => {
   const isCategoryFilter = useMemo(
     () =>
@@ -341,15 +340,25 @@ const FilterContent: React.FC<FilterContentProps> = ({
   const [options, setOptions] = useState(allOptions);
 
   const [search, setSearch] = useState('');
+
   const onSearch = useCallback(
     (searchText: string) => {
+      if (!searchText) {
+        setOptions(allOptions);
+      }
+      let filteredTimezones: string[] = [];
+      if (isTimezone) {
+        filteredTimezones = getTimezonesFor(searchText);
+      }
       if (isCategoryFilter) {
         const newOptions: CategoryValueType[] = (allOptions as CategoryValueType[]).reduce(
           (t: CategoryValueType[], v: CategoryValueType) => {
             const { label, options: categoryOptions } = v;
-            const filteredOptions = categoryOptions.filter(
-              searchFilter(searchText),
-            );
+            const filteredOptions = isTimezone
+              ? (categoryOptions as TimezoneType[]).filter(
+                  filterTimezones(searchText, filteredTimezones),
+                )
+              : categoryOptions.filter(searchFilter(searchText));
             const newValue: CategoryValueType = {
               label,
               options: filteredOptions,
@@ -360,14 +369,17 @@ const FilterContent: React.FC<FilterContentProps> = ({
         );
         setOptions(newOptions);
       } else {
-        const newOptions = (allOptions as ValueType[]).filter(
-          searchFilter(searchText),
-        );
-        setOptions(newOptions);
+        const filteredOptions = isTimezone
+          ? (allOptions as TimezoneType[]).filter(
+              filterTimezones(searchText, filteredTimezones),
+            )
+          : (allOptions as ValueType[]).filter(searchFilter(searchText));
+        setOptions(filteredOptions);
       }
     },
-    [allOptions, isCategoryFilter],
+    [allOptions, isCategoryFilter, isTimezone],
   );
+
   const renderOptions = useCallback(
     (optionsToRender: ValueType[]) => {
       const lastIndex = optionsToRender.length - 1;

packages/web/graphql/getPlayers.ts

@@ -144,8 +144,8 @@ gql`
       ...PlayerSkillFragment
     }
     player_type(distinct_on: id) {
-      id
-      title
+      value: id
+      label: title
     }
   }
   ${PlayerSkillFragment}

packages/web/lib/hooks/players.ts

@@ -13,7 +13,7 @@ export type QueryVariableSetter = (key: string, value: any) => void;
 
 export interface PlayerAggregates {
   skillCategories: { name: string }[];
-  playerTypes: { id: number; title: string }[];
+  playerTypes: { value: string; label: string }[];
   skillChoices: CategoryOption[];
 }
 
@@ -36,7 +36,10 @@ const usePlayerAggregates = () => {
   const skillChoices = useMemo(() => parseSkills(data?.skill || []), [data]);
   return {
     skillCategories: data?.skill_aggregate.nodes || [],
-    playerTypes: data?.player_type || [],
+    playerTypes: (data?.player_type || []).map(({ value, label }) => ({
+      value: value.toString(),
+      label,
+    })),
     skillChoices,
   };
 };

packages/web/package.json

@@ -12,9 +12,9 @@
     "prepare": "yarn generate"
   },
   "dependencies": {
-    "@types/react": "17.0.6",
     "@metafam/ds": "0.1.0",
     "@metafam/utils": "1.0.0",
+    "@types/react": "17.0.6",
     "@urql/exchange-retry": "0.2.1",
     "@walletconnect/web3-provider": "1.4.1",
     "copy-to-clipboard": "3.3.1",
@@ -34,9 +34,9 @@
     "react-hook-form": "6.15.5",
     "react-icons": "4.2.0",
     "react-qr-svg": "2.3.0",
-    "urql": "2.0.2",
-    "web3modal": "1.9.3",
     "spacetime": "6.16.1",
-    "spacetime-informal": "0.6.1"
+    "spacetime-informal": "0.6.1",
+    "urql": "2.0.2",
+    "web3modal": "1.9.3"
   }
 }