feat: City filter

src/js/filters/CityFilters.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useContext, useMemo } from 'react';
+import { MultiValue } from 'react-select';
+import { Option } from '../types';
+
+import { FilterSection } from './FilterSection';
+import { FiltersContext } from './FiltersContext';
+import { DropdownMultiselect } from './DropdownMultiselect';
+import { DatabaseContext } from '../database/DatabaseContext';
+
+const nothingFound = () => 'Nothing found';
+
+export const CityFilters = () => {
+  const {
+    venues: { data: venues },
+  } = useContext(DatabaseContext);
+
+  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<Option>>>(
+      (accum, [, { country, city }]) => {
+        if (!accum[country]) {
+          accum[country] = new Set();
+        }
+        accum[country].add({
+          label: city,
+          value: 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

@@ -10,10 +10,12 @@ import { defaultEpisodeTypeFiltersState, defaultSearchFiltersState } from './fil
 
 type PresenterFiltersState = number[];
 type VenueFiltersState = number[];
+type CityFiltersState = string[];
 type FilterToggleHandler<T> = (args: { name: T; checked: boolean }) => void;
 
 const defaultPresenterFiltersState: PresenterFiltersState = [];
 const defaultVenueFiltersState: VenueFiltersState = [];
+const defaultCityFiltersState: CityFiltersState = [];
 
 const noop = () => {
   return undefined;
@@ -25,10 +27,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;
 }>({
@@ -37,10 +41,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,
 });

src/js/filters/FiltersContextProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react';
+import { ReactElement, useContext, useState } from 'react';
 import { useParams } from 'react-router';
 import type {
   Episode,
@@ -9,9 +9,11 @@ import type {
 } from '../types';
 import { FiltersContext } from './FiltersContext';
 import { defaultEpisodeTypeFiltersState, defaultSearchFiltersState } from './filtersUtils';
+import { DatabaseContext } from '../database/DatabaseContext';
 
 type PresenterFiltersState = number[];
 type VenueFiltersState = number[];
+type CityFiltersState = string[];
 type FilterToggleHandler<T> = (args: { name: T; checked: boolean }) => void;
 
 // Four Undisclosed Locations
@@ -24,10 +26,16 @@ const QI_OFFICE_VENUE_IDS = [
 
 export const FiltersContextProvider = ({ children }: { children: ReactElement }) => {
   const { episodeId } = useParams();
+
+  const {
+    venues: { data: venues },
+  } = useContext(DatabaseContext);
   const [presenterFilters, setPresenterFilters] = useState<PresenterFiltersState>([]);
 
   const [venueFilters, setVenueFilters] = useState<VenueFiltersState>([]);
 
+  const [cityFilters, setCityFilters] = useState<CityFiltersState>([]);
+
   const [episodeTypeFilters, setEpisodeTypeFilters] = useState<EpisodeTypeFiltersState>(
     defaultEpisodeTypeFiltersState
   );
@@ -57,7 +65,7 @@ export const FiltersContextProvider = ({ children }: { children: ReactElement })
         return episode === parseInt(episodeId, 10);
       })
       .filter(ep => {
-        if (presenterFilters.length === 0) {
+        if (!presenterFilters.length) {
           return true;
         }
         return (
@@ -69,11 +77,17 @@ export const FiltersContextProvider = ({ children }: { children: ReactElement })
         );
       })
       .filter(ep => {
-        if (venueFilters.length === 0) {
+        if (!venueFilters.length) {
           return true;
         }
         return venueFilters.includes(ep.venue);
       })
+      .filter(ep => {
+        if (!cityFilters.length || !venues) {
+          return true;
+        }
+        return cityFilters.includes(venues[ep.venue].city);
+      })
       .filter(ep => {
         return (
           (episodeTypeFilters.live && ep.live) ||
@@ -102,10 +116,12 @@ export const FiltersContextProvider = ({ children }: { children: ReactElement })
         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> = {