feat: City filter

src/js/filters/CityFilters.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useContext, useMemo } from 'react';
+import { MultiValue } from 'react-select';
+import { Option, Venue } from '../types';
+import { useDb } from '../dbHooks';
+import { FilterSection } from './FilterSection';
+import { FiltersContext } from './FiltersContext';
+import { formatVenueName, sortByLabel } from '../utils';
+import { DropdownMultiselect } from './DropdownMultiselect';
+
+const nothingFound = () => 'Nothing found';
+
+export const CityFilters = () => {
+  const {
+    venues: { data: venues },
+  } = useDb();
+
+  const { cityFilters, setCityFilters } = useContext(FiltersContext);
+
+  const handleChange = useCallback(
+    (options: MultiValue<Option>) => {
+      setCityFilters(options.map(({ value }) => value as string));
+    },
+    [setCityFilters]
+  );
+
+  const options = useMemo(() => {
+    return Object.entries(venues || {})
+      .reduce<Record<string, Set<string>>>((accum, [, { country, city }]) => {
+        if (!accum[country]) {
+          accum[country] = new Set();
+        }
+        accum[country].add(city);
+
+        return accum;
+      }, {});
+  }, [venues]);
+
+  const defaultValue =
+    venues &&
+    cityFilters.map(city => ({
+      value: city,
+      label: city,
+    }));
+
+  return (
+    venues && (
+      <FilterSection label="City filters:">
+        <DropdownMultiselect
+          defaultValue={defaultValue}
+          noOptionsMessage={nothingFound}
+          placeholder="Search cities"
+          options={options}
+          onChange={handleChange}
+        />
+      </FilterSection>
+    )
+  );
+};

src/js/filters/FilterBar.tsx

@@ -5,6 +5,7 @@ import { EpisodeTypeFilters } from './EpisodeTypeFilters';
 import { PresenterFilters } from './PresenterFilters';
 import { FiltersToggle } from './FiltersToggle';
 import { VenueFilters } from './VenueFilters';
+import { CityFilters } from './CityFilters';
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -46,6 +47,7 @@ export const FilterBar = () => {
           <EpisodeTypeFilters />
           <PresenterFilters />
           <VenueFilters />
+          <CityFilters />
         </FiltersWrapper>
       )}
     </StyledWrapper>

src/js/filters/FiltersContext.tsx

@@ -15,7 +15,8 @@ import {
 
 type PresenterFiltersState = number[];
 type VenueFiltersState = number[];
-type FilterToggleHandler<T> = (args: { name: T; checked: boolean }) => void;
+type CityFiltersState = string[];
+type FilterToggleHandler<T> = (args: { name: T; checked: boolean; }) => void;
 
 // Four Undisclosed Locations
 const WFH_VENUE_ID = 2;
@@ -41,6 +42,7 @@ const defaultSearchFiltersState = {
 
 const defaultPresenterFiltersState: PresenterFiltersState = [];
 const defaultVenueFiltersState: VenueFiltersState = [];
+const defaultCityFiltersState: CityFiltersState = [];
 
 const noop = () => {
   return undefined;
@@ -52,10 +54,12 @@ export const FiltersContext = createContext<{
   searchFilters: SearchFiltersState;
   presenterFilters: PresenterFiltersState;
   venueFilters: VenueFiltersState;
+  cityFilters: CityFiltersState;
   handleEpisodeTypeFilterToggle: FilterToggleHandler<EpisodeType>;
   handleSearchFilterToggle: FilterToggleHandler<SearchField>;
   setPresenterFilters: Dispatch<SetStateAction<PresenterFiltersState>>;
   setVenueFilters: Dispatch<SetStateAction<VenueFiltersState>>;
+  setCityFilters: Dispatch<SetStateAction<CityFiltersState>>;
   setEpisodeTypeFilters: Dispatch<SetStateAction<EpisodeTypeFiltersState>>;
   numFiltersAltered: number;
 }>({
@@ -64,10 +68,12 @@ export const FiltersContext = createContext<{
   searchFilters: defaultSearchFiltersState,
   presenterFilters: defaultPresenterFiltersState,
   venueFilters: defaultVenueFiltersState,
+  cityFilters: defaultCityFiltersState,
   handleEpisodeTypeFilterToggle: noop,
   handleSearchFilterToggle: noop,
   setPresenterFilters: noop,
   setVenueFilters: noop,
+  setCityFilters: noop,
   setEpisodeTypeFilters: n => n,
   numFiltersAltered: 0,
 });
@@ -82,6 +88,8 @@ export const FiltersContextProvider = ({
 
   const [venueFilters, setVenueFilters] = useState<VenueFiltersState>([]);
 
+  const [cityFilters, setCityFilters] = useState<CityFiltersState>([]);
+
   const [episodeTypeFilters, setEpisodeTypeFilters] =
     useState<EpisodeTypeFiltersState>(defaultEpisodeTypeFiltersState);
 
@@ -131,6 +139,15 @@ export const FiltersContextProvider = ({
 
         return venueFilters.includes(ep.venue);
       })
+      .filter(ep => {
+        if (cityFilters.length === 0) {
+          return true;
+        }
+
+
+
+        return cityFilters.includes(ep.venue);
+      })
       .filter(ep => {
         return (
           (episodeTypeFilters.live && ep.live) ||
@@ -161,10 +178,12 @@ export const FiltersContextProvider = ({
         searchFilters,
         presenterFilters,
         venueFilters,
+        cityFilters,
         handleEpisodeTypeFilterToggle,
         handleSearchFilterToggle,
         setPresenterFilters,
         setVenueFilters,
+        setCityFilters,
         setEpisodeTypeFilters,
         numFiltersAltered,
       }}

src/js/types.ts

@@ -58,7 +58,7 @@ export type EpisodeTypeFilterLabels = Record<EpisodeType, string>;
 
 export type Option = {
   label: string;
-  value: number;
+  value: string | number;
 };
 
 export type SelectedOption<T> = {