refactor: replace useReducer with useState in context providers

MasqueradeProvider and FiltersProvider used useReducer with action
type enums for what are simple value states. Replaced with useState
for less boilerplate while preserving the same public API.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: arbrandes

src/data/context/FiltersProvider.tsx

@@ -1,6 +1,5 @@
 import React, {
-  createContext, useContext, useReducer, useMemo,
-  useCallback,
+  createContext, useContext, useState, useMemo, useCallback,
 } from 'react';
 
 type SortOption = 'enrolled' | 'title';
@@ -19,96 +18,36 @@ interface FiltersContextType {
 
 const FiltersContext = createContext<FiltersContextType | null>(null);
 
-interface FiltersState {
-  filters: string[],
-  sortBy: SortOption,
-  pageNumber: number,
-}
-
-const initialState: FiltersState = {
-  filters: [],
-  sortBy: 'enrolled',
-  pageNumber: 1,
-};
-
-type FiltersAction =
-  | { type: 'SET_FILTERS', payload: string[] }
-  | { type: 'ADD_FILTER', payload: string }
-  | { type: 'REMOVE_FILTER', payload: string }
-  | { type: 'CLEAR_FILTERS' }
-  | { type: 'SET_SORT_BY', payload: SortOption }
-  | { type: 'SET_PAGE_NUMBER', payload: number };
-
-const filtersReducer = (state: FiltersState, action: FiltersAction): FiltersState => {
-  switch (action.type) {
-    case 'SET_FILTERS':
-      return { ...state, filters: action.payload };
-    case 'ADD_FILTER':
-      return { ...state, filters: [...state.filters, action.payload] };
-    case 'REMOVE_FILTER':
-      return { ...state, filters: state.filters.filter(item => item !== action.payload) };
-    case 'CLEAR_FILTERS':
-      return { ...state, filters: [] };
-    case 'SET_SORT_BY':
-      return { ...state, sortBy: action.payload };
-    case 'SET_PAGE_NUMBER':
-      return { ...state, pageNumber: action.payload };
-    /* istanbul ignore next */
-    default:
-      return state;
-  }
-};
-
 export const FiltersProvider = ({ children }: { children: React.ReactNode }) => {
-  const [state, dispatch] = useReducer(filtersReducer, initialState);
-
-  const setFilters = useCallback((newFilters: string[]) => {
-    dispatch({ type: 'SET_FILTERS', payload: newFilters });
-  }, []);
+  const [filters, setFilters] = useState<string[]>([]);
+  const [sortBy, setSortBy] = useState<SortOption>('enrolled');
+  const [pageNumber, setPageNumber] = useState(1);
 
   const addFilter = useCallback((filter: string) => {
-    dispatch({ type: 'ADD_FILTER', payload: filter });
+    setFilters(prev => [...prev, filter]);
   }, []);
 
   const removeFilter = useCallback((filter: string) => {
-    dispatch({ type: 'REMOVE_FILTER', payload: filter });
+    setFilters(prev => prev.filter(item => item !== filter));
   }, []);
 
   const clearFilters = useCallback(() => {
-    dispatch({ type: 'CLEAR_FILTERS' });
-  }, []);
-
-  const setSortBy = useCallback((sortOption: SortOption) => {
-    dispatch({ type: 'SET_SORT_BY', payload: sortOption });
-  }, []);
-
-  const setPageNumber = useCallback((pageNumber: number) => {
-    dispatch({ type: 'SET_PAGE_NUMBER', payload: pageNumber });
+    setFilters([]);
   }, []);
 
   const contextValue = useMemo(
     () => ({
-      filters: state.filters,
-      sortBy: state.sortBy,
-      pageNumber: state.pageNumber,
+      filters,
+      sortBy,
+      pageNumber,
       setFilters,
       addFilter,
       removeFilter,
       clearFilters,
       setSortBy,
       setPageNumber,
     }),
-    [
-      state.filters,
-      state.sortBy,
-      state.pageNumber,
-      setFilters,
-      addFilter,
-      removeFilter,
-      clearFilters,
-      setSortBy,
-      setPageNumber,
-    ],
+    [filters, sortBy, pageNumber, addFilter, removeFilter, clearFilters],
   );
 
   return (

src/data/context/MasqueradeProvider.tsx

@@ -1,6 +1,5 @@
 import React, {
-  createContext, useContext, useMemo, useReducer, ReactNode,
-  useCallback,
+  createContext, useContext, useMemo, useState, ReactNode,
 } from 'react';
 
 interface MasqueradeContextType {
@@ -10,46 +9,17 @@ interface MasqueradeContextType {
 
 const MasqueradeContext = createContext<MasqueradeContextType | null>(null);
 
-interface MasqueradeState {
-  masqueradeUser: string | undefined,
-}
-
-const initialState: MasqueradeState = {
-  masqueradeUser: undefined,
-};
-
-interface MasqueradeAction {
-  type: 'SET_MASQUERADE_USER', payload: string | undefined,
-}
-
-const masqueradeReducer = (state: MasqueradeState, action: MasqueradeAction): MasqueradeState => {
-  switch (action.type) {
-    case 'SET_MASQUERADE_USER':
-      return {
-        ...state,
-        masqueradeUser: action.payload,
-      };
-    /* istanbul ignore next */
-    default:
-      return state;
-  }
-};
-
 interface MasqueradeProviderProps {
   children: ReactNode,
 }
 
 export const MasqueradeProvider: React.FC<MasqueradeProviderProps> = ({ children }) => {
-  const [state, dispatch] = useReducer(masqueradeReducer, initialState);
-
-  const setMasqueradeUser = useCallback((user: string | undefined) => {
-    dispatch({ type: 'SET_MASQUERADE_USER', payload: user });
-  }, []);
+  const [masqueradeUser, setMasqueradeUser] = useState<string | undefined>(undefined);
 
   const contextValue = useMemo(() => ({
-    masqueradeUser: state.masqueradeUser,
+    masqueradeUser,
     setMasqueradeUser,
-  }), [state.masqueradeUser, setMasqueradeUser]);
+  }), [masqueradeUser]);
 
   return (
     <MasqueradeContext.Provider value={contextValue}>