#934: Update the filters when the url changes

laingsimon · Jun 27, 2024 · 43b9d37 · 43b9d37
1 parent 91ffffe
commit 43b9d37
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 33 deletions.
diff --git a/CourageScores/ClientApp/src/components/division_fixtures/DivisionFixtures.tsx b/CourageScores/ClientApp/src/components/division_fixtures/DivisionFixtures.tsx
@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import {FilterFixtures} from "./FilterFixtures";
 import {useLocation, useNavigate} from "react-router-dom";
 import {EditNote} from "./EditNote";
@@ -49,6 +49,10 @@ export function DivisionFixtures({setNewFixtures}: IDivisionFixturesProps) {
     const [createFixturesDialogOpen, setCreateFixturesDialogOpen] = useState<boolean>(false);
     const {setTitle} = useBranding();
 
+    useEffect(() => {
+        setFilter(initFilter(location));
+    }, [location]);
+
     function getPlayersToShow(): { [date: string]: boolean } {
         if (location.hash !== '#show-who-is-playing') {
             return {};
@@ -226,7 +230,7 @@ export function DivisionFixtures({setNewFixtures}: IDivisionFixturesProps) {
         return (<div className="content-background p-3">
             {controls
                 ? (<FilterFixtures
-                    setFilter={async (newFilter: IInitialisedFilters) => changeFilter(newFilter, setFilter, navigate, location)}
+                    setFilter={async (newFilter: IInitialisedFilters) => changeFilter(newFilter, navigate, location)}
                     filter={filter}/>)
                 : null}
             {isAdmin && newDateDialogOpen ? renderNewDateDialog() : null}

diff --git a/CourageScores/ClientApp/src/helpers/filters.test.ts b/CourageScores/ClientApp/src/helpers/filters.test.ts
@@ -724,33 +724,20 @@ describe('filters', () => {
     });
 
     describe('changeFilter', () => {
-        let updatedFilter: any;
         let navigated: any;
-        const setFilter = (filter: any) => {
-            updatedFilter = filter
-        };
         const navigate = (params: any) => {
             navigated = params
         };
         const location = {pathname: 'path', hash: '#hash', search: ''};
 
-        it('sets new filter', () => {
-            updatedFilter = null;
+        beforeEach(() => {
             navigated = null;
-            const filter: IInitialisedFilters = {new: true} as IInitialisedFilters;
-
-            changeFilter(filter, setFilter, navigate, location);
-
-            expect(updatedFilter).not.toBeNull();
-            expect(updatedFilter).toEqual(filter);
         });
 
         it('removes unset filters from search', () => {
-            updatedFilter = null;
-            navigated = null;
-            const filter = {type: '', date: 'past'};
+            const filter: IInitialisedFilters = {type: '', date: 'past'};
 
-            changeFilter(filter, setFilter, navigate, location);
+            changeFilter(filter, navigate, location);
 
             expect(navigated).toBeTruthy();
             expect(navigated!.search).toEqual('date=past');
@@ -759,11 +746,9 @@ describe('filters', () => {
         });
 
         it('navigates with new search params', () => {
-            updatedFilter = null;
-            navigated = null;
-            const filter = {type: 'league', date: 'past'};
+            const filter: IInitialisedFilters = {type: 'league', date: 'past'};
 
-            changeFilter(filter, setFilter, navigate, location);
+            changeFilter(filter, navigate, location);
 
             expect(navigated).toBeTruthy();
             expect(navigated!.search).toContain('date=past');
@@ -773,12 +758,10 @@ describe('filters', () => {
         });
 
         it('retains unrelated filters', () => {
-            updatedFilter = null;
-            navigated = null;
-            const filter = {type: 'league', date: 'past'};
+            const filter: IInitialisedFilters = {type: 'league', date: 'past'};
             const locationWithOtherSearchParams = {pathname: 'path', hash: '#hash', search: '?division=abcd&division=efgh'};
 
-            changeFilter(filter, setFilter, navigate, locationWithOtherSearchParams);
+            changeFilter(filter, navigate, locationWithOtherSearchParams);
 
             expect(navigated).toBeTruthy();
             expect(navigated!.search).toContain('date=past');
@@ -789,12 +772,10 @@ describe('filters', () => {
         });
 
         it('does not retain removed filters', () => {
-            updatedFilter = null;
-            navigated = null;
-            const filter = {};
+            const filter: IInitialisedFilters = {};
             const locationWithOtherSearchParams = {pathname: 'path', hash: '#hash', search: '?division=abcd&notes=Pairs&date=past&team=a&type=league'};
 
-            changeFilter(filter, setFilter, navigate, locationWithOtherSearchParams);
+            changeFilter(filter, navigate, locationWithOtherSearchParams);
 
             expect(navigated).toBeTruthy();
             expect(navigated!.search).not.toContain('notes=Pairs');

diff --git a/CourageScores/ClientApp/src/helpers/filters.ts b/CourageScores/ClientApp/src/helpers/filters.ts
@@ -181,9 +181,7 @@ export function initFilter(location: { search: string }): IInitialisedFilters {
     return filter;
 }
 
-export function changeFilter(newFilter: IInitialisedFilters, setFilter: (filter: IInitialisedFilters) => any, navigate: Function, location: { pathname: string, hash: string, search: string }) {
-    setFilter(newFilter);
-
+export function changeFilter(newFilter: IInitialisedFilters, navigate: Function, location: { pathname: string, hash: string, search: string }) {
     const overallSearch: URLSearchParams = new URLSearchParams(newFilter as any);
     const searchParams: URLSearchParams = new URLSearchParams(location.search);
     const filterKeys: string[] = [ 'date', 'notes', 'team', 'type' ];