[resumes][feat] persist filter disclosure opening

apps/portal/src/pages/resumes/[resumeId].tsx

@@ -142,6 +142,11 @@ export default function ResumeReviewPage() {
       pathname: '/resumes',
       query: {
         currentPage: JSON.stringify(1),
+        isFiltersOpen: JSON.stringify({
+          experience: experienceLabel !== undefined,
+          location: locationLabel !== undefined,
+          role: roleLabel !== undefined,
+        }),
         searchValue: JSON.stringify(''),
         shortcutSelected: JSON.stringify('all'),
         sortOrder: JSON.stringify('latest'),

apps/portal/src/pages/resumes/index.tsx

@@ -127,6 +127,13 @@ export default function ResumeHomePage() {
     'userFilters',
     INITIAL_FILTER_STATE,
   );
+  const [isFiltersOpen, setIsFiltersOpen, isFiltersOpenInit] = useSearchParams<
+    Record<FilterId, boolean>
+  >('isFiltersOpen', {
+    experience: false,
+    location: false,
+    role: false,
+  });
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
 
   const skip = (currentPage - 1) * PAGE_LIMIT;
@@ -137,7 +144,8 @@ export default function ResumeHomePage() {
       isSearchValueInit &&
       isShortcutInit &&
       isCurrentPageInit &&
-      isUserFiltersInit
+      isUserFiltersInit &&
+      isFiltersOpenInit
     );
   }, [
     isTabsValueInit,
@@ -146,6 +154,7 @@ export default function ResumeHomePage() {
     isShortcutInit,
     isCurrentPageInit,
     isUserFiltersInit,
+    isFiltersOpenInit,
   ]);
 
   useEffect(() => {
@@ -164,6 +173,7 @@ export default function ResumeHomePage() {
       pathname: router.pathname,
       query: {
         currentPage: JSON.stringify(currentPage),
+        isFiltersOpen: JSON.stringify(isFiltersOpen),
         searchValue: JSON.stringify(searchValue),
         shortcutSelected: JSON.stringify(shortcutSelected),
         sortOrder: JSON.stringify(sortOrder),
@@ -180,6 +190,7 @@ export default function ResumeHomePage() {
     currentPage,
     router.pathname,
     isSearchOptionsInit,
+    isFiltersOpen,
   ]);
 
   const allResumesQuery = trpc.useQuery(
@@ -399,11 +410,19 @@ export default function ResumeHomePage() {
                       <Disclosure
                         key={filter.id}
                         as="div"
-                        className="border-t border-slate-200 px-4 pt-6 pb-4">
+                        className="border-t border-slate-200 px-4 pt-6 pb-4"
+                        defaultOpen={isFiltersOpen[filter.id]}>
                         {({ open }) => (
                           <>
                             <h3 className="-mx-2 -my-3 flow-root">
-                              <Disclosure.Button className="flex w-full items-center justify-between bg-white px-2 py-3 text-slate-400 hover:text-slate-500">
+                              <Disclosure.Button
+                                className="flex w-full items-center justify-between bg-white px-2 py-3 text-slate-400 hover:text-slate-500"
+                                onClick={() =>
+                                  setIsFiltersOpen({
+                                    ...isFiltersOpen,
+                                    [filter.id]: !isFiltersOpen[filter.id],
+                                  })
+                                }>
                                 <span className="font-medium text-slate-900">
                                   {filter.label}
                                 </span>
@@ -496,15 +515,24 @@ export default function ResumeHomePage() {
                 <h3 className="text-md font-medium tracking-tight text-slate-900">
                   Explore these filters
                 </h3>
-                {filters.map((filter) => (
+                {isFiltersOpenInit &&
+                  filters.map((filter) => (
                     <Disclosure
                       key={filter.id}
                       as="div"
-                    className="border-b border-slate-200 pt-6 pb-4">
+                      className="border-b border-slate-200 pt-6 pb-4"
+                      defaultOpen={isFiltersOpen[filter.id]}>
                       {({ open }) => (
                         <>
                           <h3 className="-my-3 flow-root">
-                          <Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-slate-400 hover:text-slate-500">
+                            <Disclosure.Button
+                              className="flex w-full items-center justify-between py-3 text-sm text-slate-400 hover:text-slate-500"
+                              onClick={() =>
+                                setIsFiltersOpen({
+                                  ...isFiltersOpen,
+                                  [filter.id]: !isFiltersOpen[filter.id],
+                                })
+                              }>
                               <span className="font-medium text-slate-900">
                                 {filter.label}
                               </span>
@@ -547,7 +575,9 @@ export default function ResumeHomePage() {
                                     }
                                   />
                                   <span className="ml-1 text-slate-500">
-                                  ({getFilterCount(filter.label, option.label)})
+                                    (
+                                    {getFilterCount(filter.label, option.label)}
+                                    )
                                   </span>
                                 </div>
                               ))}