Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: #464 use session to store search filter
Browse files Browse the repository at this point in the history
Abhinav-Chdhary committed Jul 18, 2024
1 parent 0c8f86b commit 36503d9
Showing 1 changed file with 47 additions and 6 deletions.
Original file line number Diff line number Diff line change
@@ -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<OptionType[]>([]);
const [selectedDifficulties, setSelectedDifficulties] = useState<OptionType[]>([]);
const [selectedChallengesByTags, setSelectedChallengesByTags] = useState<ETag[]>([]);
const [isSegmentBtn1, setIsSegmentBtn1] = useState(false);
const [newChallenge, setNewChallenge] = useState<boolean>(false);
const [optionSelected, setOptionSelected] = useState<OptionType[]>(initialFilters.optionSelected);
const [selectedDifficulties, setSelectedDifficulties] = useState<OptionType[]>(
initialFilters.selectedDifficulties
);
const [selectedChallengesByTags, setSelectedChallengesByTags] = useState<ETag[]>(
initialFilters.selectedChallengesByTags
);
const [isSegmentBtn1, setIsSegmentBtn1] = useState(initialFilters.isSegmentBtn1);
const [newChallenge, setNewChallenge] = useState<boolean>(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 (
<div className={styles.container}>
<ChallengeFilters

0 comments on commit 36503d9

Please sign in to comment.