chore: remember filter panel state

drodil · Nov 4, 2024 · b48f1d2 · b48f1d2
1 parent bdfcbc3
commit b48f1d2
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 6 deletions.
diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx
@@ -37,12 +37,16 @@ export type AnswerFilterChange = {
   value?: AnswerFilters[keyof AnswerFilters];
 };
 
+const EXPANDED_LOCAL_STORAGE_KEY = 'qeta-answer-filters-expanded';
+
 export const AnswersContainer = (props: AnswersContainerProps) => {
   const { tags, author, entity, showFilters, showTitle, title } = props;
   const analytics = useAnalytics();
   const [page, setPage] = React.useState(1);
   const [answersPerPage, setAnswersPerPage] = React.useState(10);
-  const [showFilterPanel, setShowFilterPanel] = React.useState(false);
+  const [showFilterPanel, setShowFilterPanel] = React.useState(
+    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',
+  );
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchQuery, setSearchQuery] = React.useState('');
   const [filters, setFilters] = React.useState<AnswerFilters>({
@@ -56,6 +60,13 @@ export const AnswersContainer = (props: AnswersContainerProps) => {
   });
   const { t } = useTranslation();
 
+  useEffect(() => {
+    localStorage.setItem(
+      EXPANDED_LOCAL_STORAGE_KEY,
+      showFilterPanel ? 'true' : 'false',
+    );
+  }, [showFilterPanel]);
+
   const onPageChange = (value: number) => {
     setPage(value);
     setSearchParams(prev => {
@@ -229,7 +240,9 @@ export const AnswersContainer = (props: AnswersContainerProps) => {
         {(showFilters ?? true) && (
           <Grid item>
             <Button
-              onClick={() => setShowFilterPanel(!showFilterPanel)}
+              onClick={() => {
+                setShowFilterPanel(!showFilterPanel);
+              }}
               className="qetaAnswerContainerFilterPanelBtn"
               startIcon={<FilterList />}
             >

diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx
@@ -26,20 +26,31 @@ export type CollectionFilterChange = {
   value?: CollectionFilters[keyof CollectionFilters];
 };
 
+const EXPANDED_LOCAL_STORAGE_KEY = 'qeta-collection-filters-expanded';
+
 export const CollectionsGrid = (props: CollectionsGridProps) => {
   const { showFilters } = props;
   const { t } = useTranslation();
   const [page, setPage] = React.useState(1);
   const [pageCount, setPageCount] = React.useState(1);
   const [searchQuery, setSearchQuery] = React.useState('');
   const [collectionsPerPage, setCollectionsPerPage] = React.useState(25);
-  const [showFilterPanel, setShowFilterPanel] = React.useState(false);
+  const [showFilterPanel, setShowFilterPanel] = React.useState(
+    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',
+  );
   const [filters, setFilters] = React.useState<CollectionFilters>({
     order: 'desc',
     searchQuery: '',
     orderBy: 'created',
   });
 
+  useEffect(() => {
+    localStorage.setItem(
+      EXPANDED_LOCAL_STORAGE_KEY,
+      showFilterPanel ? 'true' : 'false',
+    );
+  }, [showFilterPanel]);
+
   const {
     value: response,
     loading,
@@ -114,7 +125,9 @@ export const CollectionsGrid = (props: CollectionsGridProps) => {
         {response && (showFilters ?? true) && (
           <Grid item>
             <Button
-              onClick={() => setShowFilterPanel(!showFilterPanel)}
+              onClick={() => {
+                setShowFilterPanel(!showFilterPanel);
+              }}
               className="qetaCollectionsContainerFilterPanelBtn"
               startIcon={<FilterList />}
             >

diff --git a/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx b/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx
@@ -135,7 +135,9 @@ export const PostsContainer = (
         {response && (showFilters ?? true) && (
           <Grid item>
             <Button
-              onClick={() => setShowFilterPanel(!showFilterPanel)}
+              onClick={() => {
+                setShowFilterPanel(!showFilterPanel);
+              }}
               className="qetaPostsContainerFilterPanelBtn"
               startIcon={<FilterList />}
             >

diff --git a/plugins/qeta-react/src/hooks/usePaginatedPosts.ts b/plugins/qeta-react/src/hooks/usePaginatedPosts.ts
@@ -29,14 +29,18 @@ export type PostFilterChange = {
   value?: PostFilters[keyof PostFilters];
 };
 
+const EXPANDED_LOCAL_STORAGE_KEY = 'qeta-post-filters-expanded';
+
 export function usePaginatedPosts(props: PaginatedPostsProps) {
   const { type, tags, author, entities, entity, favorite, initialPageSize } =
     props;
   const analytics = useAnalytics();
   const [page, setPage] = React.useState(1);
   const [pageCount, setPageCount] = React.useState(1);
   const [postsPerPage, setPostsPerPage] = React.useState(initialPageSize ?? 10);
-  const [showFilterPanel, setShowFilterPanel] = React.useState(false);
+  const [showFilterPanel, setShowFilterPanel] = React.useState(
+    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',
+  );
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchQuery, setSearchQuery] = React.useState('');
   const [filters, setFilters] = React.useState<PostFilters>({
@@ -53,6 +57,13 @@ export function usePaginatedPosts(props: PaginatedPostsProps) {
     type,
   });
 
+  useEffect(() => {
+    localStorage.setItem(
+      EXPANDED_LOCAL_STORAGE_KEY,
+      showFilterPanel ? 'true' : 'false',
+    );
+  }, [showFilterPanel]);
+
   const onPageChange = (value: number) => {
     setPage(value);
     setSearchParams(prev => {