algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 20:52:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

[resumes][feat] persist filter disclosure opening

Browse Source
This commit is contained in:
Wu Peirong
2022-10-30 12:42:09 +08:00
parent 39b5a51aa2
commit 84710209f3
2 changed files with 102 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/portal/src/pages/resumes/[resumeId].tsx
View File

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

44
apps/portal/src/pages/resumes/index.tsx
View File

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