algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 12:43:12 +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',
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'),

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

@ -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>