Tidy the comments, remove unused components

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

@@ -1,164 +0,0 @@
-import {
-  LabeledOptions,
-  MetaFilterSelectSearch,
-  metaFilterSelectStyles,
-  TimeZoneOptions,
-  TimeZoneType,
-  Wrap,
-  WrapItem,
-  WrapProps,
-} from '@metafam/ds';
-import { SkillCategory_Enum } from 'graphql/autogen/types';
-import { SkillColors } from 'graphql/types';
-import { PlayerAggregates, SortOption, sortOptions } from 'lib/hooks/players';
-import { useIsSticky } from 'lib/hooks/useIsSticky';
-import React, { useRef } from 'react';
-import { SkillOption } from 'utils/skillHelpers';
-
-type ValueType = { value: string; label: string };
-
-const styles: typeof metaFilterSelectStyles = {
-  ...metaFilterSelectStyles,
-  multiValue: (s, { data }) => ({
-    ...s,
-    background:
-      SkillColors[(data as SkillOption).category as SkillCategory_Enum],
-  }),
-  multiValueLabel: (s, { data }) => ({
-    ...s,
-    background:
-      SkillColors[(data as SkillOption).category as SkillCategory_Enum],
-  }),
-  groupHeading: (s, { children }) => ({
-    ...s,
-    background: SkillColors[children as SkillCategory_Enum],
-  }),
-};
-
-type Props = {
-  aggregates: PlayerAggregates;
-  skills: SkillOption[];
-  setSkills: React.Dispatch<React.SetStateAction<SkillOption[]>>;
-  playerTypes: ValueType[];
-  setPlayerTypes: React.Dispatch<React.SetStateAction<ValueType[]>>;
-  timeZones: TimeZoneType[];
-  setTimeZones: React.Dispatch<React.SetStateAction<TimeZoneType[]>>;
-  availability: ValueType | null;
-  setAvailability: React.Dispatch<React.SetStateAction<ValueType | null>>;
-  sortOption: ValueType;
-  setSortOption: React.Dispatch<React.SetStateAction<ValueType>>;
-} & WrapProps;
-
-export const DesktopFilters: React.FC<Props> = ({
-  aggregates,
-  skills,
-  setSkills,
-  playerTypes,
-  setPlayerTypes,
-  timeZones,
-  setTimeZones,
-  availability,
-  setAvailability,
-  sortOption,
-  setSortOption,
-  ...props
-}) => {
-  const filterRef = useRef<HTMLDivElement>(null);
-  const isSticky = useIsSticky(filterRef);
-
-  return (
-    <Wrap
-      ref={filterRef}
-      transition="all 0.25s"
-      py={6}
-      backdropFilter="blur(7px)"
-      position="sticky"
-      top="-1px"
-      borderTop="1px solid transparent"
-      zIndex={1}
-      justifyContent="center"
-      w={isSticky ? 'calc(100% + 6rem)' : '100%'}
-      maxW={isSticky ? 'auto' : '79rem'}
-      bg={isSticky ? 'purpleTag70' : 'whiteAlpha.200'}
-      px={isSticky ? '4.5rem' : '1.5rem'}
-      borderRadius={isSticky ? 0 : '6px'}
-      overflow="visible" // Wrap defaults to hidden
-      {...props}
-    >
-      <WrapItem>
-        <MetaFilterSelectSearch
-          title={`Sorted By: ${sortOption.label}`}
-          hasValue={sortOption.value !== SortOption.SEASON_XP}
-          {...{ styles }}
-          value={[sortOption]}
-          onChange={(value) => {
-            const values = value as ValueType[];
-            if (values[values.length - 1]) {
-              setSortOption(values[values.length - 1]);
-            }
-          }}
-          options={sortOptions}
-        />
-      </WrapItem>
-      <WrapItem>
-        <MetaFilterSelectSearch
-          title="Type Of Player"
-          tagLabel={playerTypes.length > 0 ? playerTypes.length.toString() : ''}
-          styles={styles}
-          value={playerTypes}
-          hasValue={playerTypes.length > 0}
-          onChange={(values) => {
-            setPlayerTypes(values as ValueType[]);
-          }}
-          options={aggregates.playerTypes}
-        />
-      </WrapItem>
-      <WrapItem>
-        <MetaFilterSelectSearch
-          title="Skills"
-          tagLabel={skills.length > 0 ? skills.length.toString() : ''}
-          styles={styles}
-          value={skills}
-          hasValue={skills.length > 0}
-          onChange={(values) => {
-            setSkills(values as SkillOption[]);
-          }}
-          options={aggregates.skillChoices as LabeledOptions<string>[]}
-          showSearch
-        />
-      </WrapItem>
-      <WrapItem>
-        <MetaFilterSelectSearch
-          title="Availability"
-          tagLabel={availability ? `≥${availability.value}` : ''}
-          styles={styles}
-          value={availability ? [availability] : []}
-          hasValue={!!availability}
-          onChange={(value) => {
-            const values = value as ValueType[];
-            setAvailability(values[values.length - 1]);
-          }}
-          options={[1, 5, 10, 20, 30, 40].map((value) => ({
-            value: value.toString(),
-            label: `≥ ${value.toString()} hr ⁄ week`,
-          }))}
-        />
-      </WrapItem>
-      <WrapItem>
-        <MetaFilterSelectSearch
-          title="Time Zone"
-          tagLabel={timeZones.length > 0 ? timeZones.length.toString() : ''}
-          styles={styles}
-          value={timeZones}
-          hasValue={timeZones.length > 0}
-          onChange={(values) => {
-            setTimeZones((values as TimeZoneType[]).slice(-1));
-          }}
-          options={TimeZoneOptions}
-          showSearch
-          isTimeZone
-        />
-      </WrapItem>
-    </Wrap>
-  );
-};

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

@@ -1,4 +1,3 @@
-// import { InputLeftAddon } from '@chakra-ui/input';
 import {
   Box,
   Button,
@@ -15,7 +14,6 @@ import {
   MetaButton,
   SearchIcon,
   Skeleton,
-  Stack,
   Text,
   TimeZoneType,
   useBreakpointValue,
@@ -167,7 +165,7 @@ export const PlayerFilter: React.FC<Props> = ({
     position: 'sticky',
     px: '2.5em',
     py: '1em',
-    w: '98vw', // If it's higher than 98vw it gets stuck full width and won't unstick
+    w: '98vw', // If it's higher than 98vw it gets stuck full width and won't unstick, see above 'Hack warning'
   };
 
   // How it looks when it's not sticky
@@ -260,7 +258,9 @@ export const PlayerFilter: React.FC<Props> = ({
              * SEARCH BOX
              * For small screens: the search icon is inside the input as mobile devices have a search button to go with the text input
              * For md+: the search icon in the input is removed, a search button is shown instead (b/c not everyone knows to hit Enter to submit a form)
-             * Initial minWidth of the search input is 14em, so it will fit on a tiny screen. After md breakpoint, the minWidth is 18em (wide enough to show the placeholder text)
+             * Initial minWidth of the search input is 14em, so it will fit on a tiny screen.
+             * After md breakpoint, the minwidth is 30em. (Closer match to the dropdowns while in a stacked layout)
+             * After 2xl breakpoint, the minWidth is 18em so it will fit in a single row with the filter dropdowns.
              */}
             <Form width="fill" onSubmit={onSearch} display="flex">
               <InputGroup>
@@ -346,6 +346,7 @@ export const PlayerFilter: React.FC<Props> = ({
              * The FiltersIcon has a marginTop to align it in the middle
              */}
             {isSmallScreen ? (
+              // Filters button to open the menu on small screens
               <Button
                 variant="outline"
                 borderColor="blueLight"
@@ -376,7 +377,6 @@ export const PlayerFilter: React.FC<Props> = ({
                * Drop downs for the filters
                * DESKTOP VERSION
                */
-
               <DesktopFilters
                 display="flex"
                 {...{
@@ -536,20 +536,6 @@ export const PlayerFilter: React.FC<Props> = ({
           <Text fontWeight="bold" fontSize="xl">
             {total} player{total === 1 ? '' : 's'}
           </Text>
-          {/**
-           * <Button
-            variant="link"
-            color="cyan.400"
-            onClick={onOpen}
-            fontSize="sm"
-            minH="2.5rem"
-            minW="8.5rem"
-            display={isSmallScreen ? 'flex' : 'none'}
-            p={2}
-          >
-            FILTER AND SORT
-          </Button>
-      */}
         </Flex>
       ) : (
         <Flex justify="space-between" w="100%" maxW="79rem" align="center">