From 84710209f38ccaafeeb3ef56ce170e871549aba7 Mon Sep 17 00:00:00 2001
From: Wu Peirong <wupeirong294@gmail.com>
Date: Sun, 30 Oct 2022 12:42:09 +0800
Subject: [PATCH] [resumes][feat] persist filter disclosure opening

---
 apps/portal/src/pages/resumes/[resumeId].tsx |   5 +
 apps/portal/src/pages/resumes/index.tsx      | 164 +++++++++++--------
 2 files changed, 102 insertions(+), 67 deletions(-)

diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 7af32460..3c0604b4 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/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'),
diff --git a/apps/portal/src/pages/resumes/index.tsx b/apps/portal/src/pages/resumes/index.tsx
index 5bcd2291..db14977f 100644
--- a/apps/portal/src/pages/resumes/index.tsx
+++ b/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,72 +515,83 @@ export default function ResumeHomePage() {
                 <h3 className="text-md font-medium tracking-tight text-slate-900">
                   Explore these filters
                 </h3>
-                {filters.map((filter) => (
-                  <Disclosure
-                    key={filter.id}
-                    as="div"
-                    className="border-b border-slate-200 pt-6 pb-4">
-                    {({ 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">
-                            <span className="font-medium text-slate-900">
-                              {filter.label}
-                            </span>
-                            <span className="ml-6 flex items-center">
-                              {open ? (
-                                <MinusIcon
-                                  aria-hidden="true"
-                                  className="h-5 w-5"
-                                />
-                              ) : (
-                                <PlusIcon
-                                  aria-hidden="true"
-                                  className="h-5 w-5"
-                                />
-                              )}
-                            </span>
-                          </Disclosure.Button>
-                        </h3>
-                        <Disclosure.Panel className="space-y-4 pt-4">
-                          <CheckboxList
-                            description=""
-                            isLabelHidden={true}
-                            label=""
-                            orientation="vertical">
-                            {filter.options.map((option) => (
-                              <div
-                                key={option.value}
-                                className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 flex items-center px-1 text-sm [&>div>div:nth-child(2)>label]:font-normal">
-                                <CheckboxInput
-                                  label={option.label}
-                                  value={userFilters[filter.id].includes(
-                                    option.value,
-                                  )}
-                                  onChange={(isChecked) =>
-                                    onFilterCheckboxChange(
-                                      isChecked,
-                                      filter.id,
+                {isFiltersOpenInit &&
+                  filters.map((filter) => (
+                    <Disclosure
+                      key={filter.id}
+                      as="div"
+                      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"
+                              onClick={() =>
+                                setIsFiltersOpen({
+                                  ...isFiltersOpen,
+                                  [filter.id]: !isFiltersOpen[filter.id],
+                                })
+                              }>
+                              <span className="font-medium text-slate-900">
+                                {filter.label}
+                              </span>
+                              <span className="ml-6 flex items-center">
+                                {open ? (
+                                  <MinusIcon
+                                    aria-hidden="true"
+                                    className="h-5 w-5"
+                                  />
+                                ) : (
+                                  <PlusIcon
+                                    aria-hidden="true"
+                                    className="h-5 w-5"
+                                  />
+                                )}
+                              </span>
+                            </Disclosure.Button>
+                          </h3>
+                          <Disclosure.Panel className="space-y-4 pt-4">
+                            <CheckboxList
+                              description=""
+                              isLabelHidden={true}
+                              label=""
+                              orientation="vertical">
+                              {filter.options.map((option) => (
+                                <div
+                                  key={option.value}
+                                  className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 flex items-center px-1 text-sm [&>div>div:nth-child(2)>label]:font-normal">
+                                  <CheckboxInput
+                                    label={option.label}
+                                    value={userFilters[filter.id].includes(
                                       option.value,
+                                    )}
+                                    onChange={(isChecked) =>
+                                      onFilterCheckboxChange(
+                                        isChecked,
+                                        filter.id,
+                                        option.value,
+                                      )
+                                    }
+                                  />
+                                  <span className="ml-1 text-slate-500">
+                                    (
+                                    {getFilterCount(filter.label, option.label)}
                                     )
-                                  }
-                                />
-                                <span className="ml-1 text-slate-500">
-                                  ({getFilterCount(filter.label, option.label)})
-                                </span>
-                              </div>
-                            ))}
-                          </CheckboxList>
-                          <p
-                            className="inline-block cursor-pointer text-sm text-slate-500 underline hover:text-slate-700"
-                            onClick={() => onClearFilterClick(filter.id)}>
-                            Clear
-                          </p>
-                        </Disclosure.Panel>
-                      </>
-                    )}
-                  </Disclosure>
-                ))}
+                                  </span>
+                                </div>
+                              ))}
+                            </CheckboxList>
+                            <p
+                              className="inline-block cursor-pointer text-sm text-slate-500 underline hover:text-slate-700"
+                              onClick={() => onClearFilterClick(filter.id)}>
+                              Clear
+                            </p>
+                          </Disclosure.Panel>
+                        </>
+                      )}
+                    </Disclosure>
+                  ))}
               </form>
             </div>
           </div>