From 36503d91986ecfb641e68c028961770e195488ab Mon Sep 17 00:00:00 2001 From: Abhinav Choudhary Date: Thu, 18 Jul 2024 16:33:34 +0530 Subject: [PATCH 1/4] fix: #464 use session to store search filter --- .../challenge-grid/challenge-grid.tsx | 53 ++++++++++++++++--- 1 file changed, 47 insertions(+), 6 deletions(-) diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx index 42f8564d8..8d521735e 100644 --- a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx +++ b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx @@ -13,13 +13,42 @@ interface Props { } function ChallengeGrid({ challenges, linkPrefix, links }: Props) { - const [searchInput, setSearchInput] = useState(''); + const initialSearchFilters = () => { + const filters = sessionStorage.getItem('searchFilters'); + if (filters) { + const parsedFilters = JSON.parse(filters); + return { + searchInput: parsedFilters.searchInput || '', + optionSelected: parsedFilters.optionSelected || [], + selectedDifficulties: parsedFilters.selectedDifficulties || [], + isSegmentBtn1: parsedFilters.isSegmentBtn1 || false, + selectedChallengesByTags: parsedFilters.selectedChallengesByTags || [], + newChallenge: parsedFilters.newChallenge || false, + }; + } + return { + searchInput: '', + optionSelected: [], + selectedDifficulties: [], + isSegmentBtn1: false, + selectedChallengesByTags: [], + newChallenge: false, + }; + }; + + const initialFilters = initialSearchFilters(); + + const [searchInput, setSearchInput] = useState(initialFilters.searchInput); const [filteredChallenges, setFilteredChallenges] = useState(challenges); - const [optionSelected, setOptionSelected] = useState([]); - const [selectedDifficulties, setSelectedDifficulties] = useState([]); - const [selectedChallengesByTags, setSelectedChallengesByTags] = useState([]); - const [isSegmentBtn1, setIsSegmentBtn1] = useState(false); - const [newChallenge, setNewChallenge] = useState(false); + const [optionSelected, setOptionSelected] = useState(initialFilters.optionSelected); + const [selectedDifficulties, setSelectedDifficulties] = useState( + initialFilters.selectedDifficulties + ); + const [selectedChallengesByTags, setSelectedChallengesByTags] = useState( + initialFilters.selectedChallengesByTags + ); + const [isSegmentBtn1, setIsSegmentBtn1] = useState(initialFilters.isSegmentBtn1); + const [newChallenge, setNewChallenge] = useState(initialFilters.newChallenge); useEffect(() => { setFilteredChallenges(() => @@ -33,6 +62,17 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) { }) ); + const searchFilters = { + searchInput: searchInput, + optionSelected: optionSelected, + selectedDifficulties: selectedDifficulties, + isSegmentBtn1: isSegmentBtn1, + selectedChallengesByTags: selectedChallengesByTags, + newChallenge: newChallenge, + }; + + sessionStorage.setItem('searchFilters', JSON.stringify(searchFilters)); + if (!searchInput && !optionSelected && !selectedDifficulties && !newChallenge) { setFilteredChallenges(challenges); } @@ -45,6 +85,7 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) { selectedChallengesByTags, newChallenge, ]); + return (
Date: Thu, 18 Jul 2024 16:47:08 +0530 Subject: [PATCH 2/4] updt: follow ES6 syntax --- .../challenges/challenge-grid/challenge-grid.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx index 8d521735e..10e276bd5 100644 --- a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx +++ b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx @@ -63,12 +63,12 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) { ); const searchFilters = { - searchInput: searchInput, - optionSelected: optionSelected, - selectedDifficulties: selectedDifficulties, - isSegmentBtn1: isSegmentBtn1, - selectedChallengesByTags: selectedChallengesByTags, - newChallenge: newChallenge, + searchInput, + optionSelected, + selectedDifficulties, + isSegmentBtn1, + selectedChallengesByTags, + newChallenge, }; sessionStorage.setItem('searchFilters', JSON.stringify(searchFilters)); From 90ca22f64776701a5f96c9c7984e2f229d21ea90 Mon Sep 17 00:00:00 2001 From: Abhinav Choudhary Date: Thu, 18 Jul 2024 19:54:11 +0530 Subject: [PATCH 3/4] updt: move initialize function to util --- .../challenge-grid/challenge-grid.tsx | 26 ++----------------- shared/data/utils/challenges.helper.ts | 22 ++++++++++++++++ shared/data/utils/index.ts | 2 +- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx index 10e276bd5..08f4d7f7a 100644 --- a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx +++ b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx @@ -5,6 +5,7 @@ import Challenge from './challenge'; import styles from './challenge-grid.module.scss'; import ChallengeFilters from './challenge-filter'; import { getChallengesByid } from '@fmc/data/utils'; +import { filtersHelper } from '@fmc/data/utils'; interface Props { challenges: IChallenge[]; @@ -13,30 +14,7 @@ interface Props { } function ChallengeGrid({ challenges, linkPrefix, links }: Props) { - const initialSearchFilters = () => { - const filters = sessionStorage.getItem('searchFilters'); - if (filters) { - const parsedFilters = JSON.parse(filters); - return { - searchInput: parsedFilters.searchInput || '', - optionSelected: parsedFilters.optionSelected || [], - selectedDifficulties: parsedFilters.selectedDifficulties || [], - isSegmentBtn1: parsedFilters.isSegmentBtn1 || false, - selectedChallengesByTags: parsedFilters.selectedChallengesByTags || [], - newChallenge: parsedFilters.newChallenge || false, - }; - } - return { - searchInput: '', - optionSelected: [], - selectedDifficulties: [], - isSegmentBtn1: false, - selectedChallengesByTags: [], - newChallenge: false, - }; - }; - - const initialFilters = initialSearchFilters(); + const initialFilters = filtersHelper(); const [searchInput, setSearchInput] = useState(initialFilters.searchInput); const [filteredChallenges, setFilteredChallenges] = useState(challenges); diff --git a/shared/data/utils/challenges.helper.ts b/shared/data/utils/challenges.helper.ts index ab0dd3d38..74cd06d59 100644 --- a/shared/data/utils/challenges.helper.ts +++ b/shared/data/utils/challenges.helper.ts @@ -113,3 +113,25 @@ export function getChallengesByid({ filteredChallenges = getChallengesByNewChallenge(filteredChallenges, newChallenge); return filteredChallenges; } +export function filtersHelper() { + const filters = sessionStorage.getItem('searchFilters'); + if (filters) { + const parsedFilters = JSON.parse(filters); + return { + searchInput: parsedFilters.searchInput || '', + optionSelected: parsedFilters.optionSelected || [], + selectedDifficulties: parsedFilters.selectedDifficulties || [], + isSegmentBtn1: parsedFilters.isSegmentBtn1 || false, + selectedChallengesByTags: parsedFilters.selectedChallengesByTags || [], + newChallenge: parsedFilters.newChallenge || false, + }; + } + return { + searchInput: '', + optionSelected: [], + selectedDifficulties: [], + isSegmentBtn1: false, + selectedChallengesByTags: [], + newChallenge: false, + }; +} diff --git a/shared/data/utils/index.ts b/shared/data/utils/index.ts index b9718319a..23d7bc8f5 100644 --- a/shared/data/utils/index.ts +++ b/shared/data/utils/index.ts @@ -1 +1 @@ -export { filterChallengeByKey, getChallengesByid } from './challenges.helper'; +export { filterChallengeByKey, getChallengesByid, filtersHelper } from './challenges.helper'; From 9da9a97a0b1f16db7ef2ff2c113ca6c564ffb729 Mon Sep 17 00:00:00 2001 From: Abhinav Choudhary Date: Thu, 18 Jul 2024 19:57:14 +0530 Subject: [PATCH 4/4] fix: import acc to best practice --- .../modules/challenges/challenge-grid/challenge-grid.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx index 08f4d7f7a..38aea3479 100644 --- a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx +++ b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx @@ -4,8 +4,7 @@ import { contributors } from '@fmc/data/content'; import Challenge from './challenge'; import styles from './challenge-grid.module.scss'; import ChallengeFilters from './challenge-filter'; -import { getChallengesByid } from '@fmc/data/utils'; -import { filtersHelper } from '@fmc/data/utils'; +import { getChallengesByid, filtersHelper } from '@fmc/data/utils'; interface Props { challenges: IChallenge[];