From d4dea71152f41220de8d9cabc4888bbba67fd163 Mon Sep 17 00:00:00 2001 From: arelymartinez16 Date: Mon, 21 Oct 2024 21:31:23 -0400 Subject: [PATCH 01/12] Completed member directory filtering --- .../app/routes/_profile.directory.tsx | 62 +++++++++++++++---- 1 file changed, 51 insertions(+), 11 deletions(-) diff --git a/apps/member-profile/app/routes/_profile.directory.tsx b/apps/member-profile/app/routes/_profile.directory.tsx index 942765b42..dc09476d7 100644 --- a/apps/member-profile/app/routes/_profile.directory.tsx +++ b/apps/member-profile/app/routes/_profile.directory.tsx @@ -204,9 +204,12 @@ export default function DirectoryPage() { - + {/* + */}
- + + +
@@ -240,8 +243,9 @@ function DirectoryPagination() { const DIRECTORY_FILTER_KEYS = Object.values(DirectoryFilterKey); -function FilterDirectoryDropdown() { +function FilterDirectoryDropdown({ filter }: { filter: string }) { const [open, setOpen] = useState(false); + const [searchParams] = useSearchParams(DirectorySearchParams); function onClose() { setOpen(false); @@ -253,19 +257,55 @@ function FilterDirectoryDropdown() { return ( - } onClick={onClick} shape="square" - /> + /> : } + + {/* I tried to make the buttons for companies and schools look the same as the icon button + but I couldn't get the color to match */} + + {open && filter != "general" && ( + <> + + +
+ {toTitleCase(filter)} + is... + {filter == "company" && } + {filter == "school" && } + +
+ + + + {Object.entries(searchParams).map(([key, value]) => { + return ( + !!value && ( + + ) + ); + })} + + )} - {open && ( + {open && filter == "general" && (
Add Filter - setOpen(false)} /> + setOpen(false)} />
)} @@ -273,27 +313,27 @@ function FilterDirectoryDropdown() { ); } -function FilterForm({ close }: { close: VoidFunction }) { +function FilterForm({ close, filter }: { close: VoidFunction, filter: string }) { const [filterKey, setFilterKey] = useState(null); const [searchParams] = useSearchParams(DirectorySearchParams); return ( - + } {!!filterKey && ( From dca7a40da5cd56992c70391ff4ea0ee832373e6e Mon Sep 17 00:00:00 2001 From: arelymartinez16 Date: Wed, 30 Oct 2024 20:34:03 -0400 Subject: [PATCH 02/12] Updated settings to include prettier --- .vscode/settings.json | 5 ++++- apps/member-profile/app/routes/_profile.directory.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 5ba0484c1..c51dfc1f1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -13,5 +13,8 @@ "tailwindCSS.experimental.classRegex": [ ["cx\\(([^)]+)\\)", "'([^']*)'"], ["cx\\(([^)]+)\\)", "`([^`]*)`"] - ] + ], + "[typescriptreact]": { + "editor.defaultFormatter": "vscode.typescript-language-features" + } } diff --git a/apps/member-profile/app/routes/_profile.directory.tsx b/apps/member-profile/app/routes/_profile.directory.tsx index dc09476d7..fb1dbedf6 100644 --- a/apps/member-profile/app/routes/_profile.directory.tsx +++ b/apps/member-profile/app/routes/_profile.directory.tsx @@ -182,8 +182,8 @@ async function getAppliedFilters( param: 'joinedDirectoryDate', value: searchParams.joinedDirectoryDate ? dayjs(searchParams.joinedDirectoryDate) - .tz('America/Los_Angeles', true) - .format('M/D/YY') + .tz('America/Los_Angeles', true) + .format('M/D/YY') : undefined, }, { name: 'Location', param: keys.location, value: searchParams.location }, @@ -264,8 +264,8 @@ function FilterDirectoryDropdown({ filter }: { filter: string }) { onClick={onClick} shape="square" /> : } + {toTitleCase(filter)} + } {/* I tried to make the buttons for companies and schools look the same as the icon button but I couldn't get the color to match */} From 907949f52366f0b3782db9bed74a1bffc9192d0c Mon Sep 17 00:00:00 2001 From: arelymartinez16 Date: Wed, 30 Oct 2024 20:44:15 -0400 Subject: [PATCH 03/12] Moved dropdowns after line 206 --- apps/member-profile/app/routes/_profile.directory.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/member-profile/app/routes/_profile.directory.tsx b/apps/member-profile/app/routes/_profile.directory.tsx index fb1dbedf6..c4eac1a9c 100644 --- a/apps/member-profile/app/routes/_profile.directory.tsx +++ b/apps/member-profile/app/routes/_profile.directory.tsx @@ -204,11 +204,9 @@ export default function DirectoryPage() { - {/* - */} + +
- -
From 532898fba20d13b7bd80c2b477e336d1921a57d9 Mon Sep 17 00:00:00 2001 From: arelymartinez16 Date: Fri, 29 Nov 2024 22:48:46 -0500 Subject: [PATCH 04/12] Attempting to debug --- .../app/routes/_profile.directory.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/member-profile/app/routes/_profile.directory.tsx b/apps/member-profile/app/routes/_profile.directory.tsx index c4eac1a9c..df5b1244d 100644 --- a/apps/member-profile/app/routes/_profile.directory.tsx +++ b/apps/member-profile/app/routes/_profile.directory.tsx @@ -187,7 +187,7 @@ async function getAppliedFilters( : undefined, }, { name: 'Location', param: keys.location, value: searchParams.location }, - { name: 'School', param: keys.school, value: school }, + { name: 'School', param: keys.school, value: school || searchParams.school }, ].filter((item) => { return !!item.value; }); @@ -243,7 +243,7 @@ const DIRECTORY_FILTER_KEYS = Object.values(DirectoryFilterKey); function FilterDirectoryDropdown({ filter }: { filter: string }) { const [open, setOpen] = useState(false); - const [searchParams] = useSearchParams(DirectorySearchParams); + const searchParams = useSearchParams(DirectorySearchParams); function onClose() { setOpen(false); @@ -265,12 +265,13 @@ function FilterDirectoryDropdown({ filter }: { filter: string }) { {toTitleCase(filter)} } - {/* I tried to make the buttons for companies and schools look the same as the icon button - but I couldn't get the color to match */} - {open && filter != "general" && ( <> - + setOpen(false)} + >
{toTitleCase(filter)} From ee3247d6bad8ef51214f7c031ca14bef04ac594f Mon Sep 17 00:00:00 2001 From: arelymartinez16 Date: Fri, 29 Nov 2024 22:58:29 -0500 Subject: [PATCH 05/12] Replaced single quotation marks with double --- apps/member-profile/app/routes/_profile.directory.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/member-profile/app/routes/_profile.directory.tsx b/apps/member-profile/app/routes/_profile.directory.tsx index df5b1244d..eb0c68ca6 100644 --- a/apps/member-profile/app/routes/_profile.directory.tsx +++ b/apps/member-profile/app/routes/_profile.directory.tsx @@ -204,10 +204,10 @@ export default function DirectoryPage() { - - + +
- +
From ca62d2aae25012f89560c2ee850a037204eb98fe Mon Sep 17 00:00:00 2001 From: arelymartinez16 Date: Fri, 29 Nov 2024 23:05:11 -0500 Subject: [PATCH 06/12] Hopefully fixed the prettier errors --- .../app/routes/_profile.directory.tsx | 80 +++++++++++-------- config/tsconfig/remix.json | 4 +- 2 files changed, 50 insertions(+), 34 deletions(-) diff --git a/apps/member-profile/app/routes/_profile.directory.tsx b/apps/member-profile/app/routes/_profile.directory.tsx index eb0c68ca6..dbcbaa412 100644 --- a/apps/member-profile/app/routes/_profile.directory.tsx +++ b/apps/member-profile/app/routes/_profile.directory.tsx @@ -182,12 +182,16 @@ async function getAppliedFilters( param: 'joinedDirectoryDate', value: searchParams.joinedDirectoryDate ? dayjs(searchParams.joinedDirectoryDate) - .tz('America/Los_Angeles', true) - .format('M/D/YY') + .tz('America/Los_Angeles', true) + .format('M/D/YY') : undefined, }, { name: 'Location', param: keys.location, value: searchParams.location }, - { name: 'School', param: keys.school, value: school || searchParams.school }, + { + name: 'School', + param: keys.school, + value: school || searchParams.school, + }, ].filter((item) => { return !!item.value; }); @@ -255,17 +259,19 @@ function FilterDirectoryDropdown({ filter }: { filter: string }) { return ( - {(filter === 'general') ? } - onClick={onClick} - shape="square" - /> : } - - {open && filter != "general" && ( + {filter === 'general' ? ( + } + onClick={onClick} + shape="square" + /> + ) : ( + + )} + + {open && filter != 'general' && ( <> {toTitleCase(filter)} is... - {filter == "company" && } - {filter == "school" && } + {filter == 'company' && } + {filter == 'school' && } @@ -300,7 +306,7 @@ function FilterDirectoryDropdown({ filter }: { filter: string }) { )} - {open && filter == "general" && ( + {open && filter == 'general' && (
Add Filter @@ -312,27 +318,37 @@ function FilterDirectoryDropdown({ filter }: { filter: string }) { ); } -function FilterForm({ close, filter }: { close: VoidFunction, filter: string }) { +function FilterForm({ + close, + filter, +}: { + close: VoidFunction; + filter: string; +}) { const [filterKey, setFilterKey] = useState(null); const [searchParams] = useSearchParams(DirectorySearchParams); return ( - {filter == "general" && } + {filter == 'general' && ( + + )} {!!filterKey && ( diff --git a/config/tsconfig/remix.json b/config/tsconfig/remix.json index 2c55ffde3..5db3307ca 100644 --- a/config/tsconfig/remix.json +++ b/config/tsconfig/remix.json @@ -10,6 +10,6 @@ "moduleResolution": "Bundler", "noEmit": true, "resolveJsonModule": true, - "target": "ESNext", - }, + "target": "ESNext" + } } From 15486b29f1fe23900a29624e44751f4c5460906f Mon Sep 17 00:00:00 2001 From: arelymartinez16 Date: Sat, 30 Nov 2024 14:50:12 -0500 Subject: [PATCH 07/12] Finally got the tags working together --- .../app/routes/_profile.directory.tsx | 82 +++++++++---------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/apps/member-profile/app/routes/_profile.directory.tsx b/apps/member-profile/app/routes/_profile.directory.tsx index dbcbaa412..8719e9cfb 100644 --- a/apps/member-profile/app/routes/_profile.directory.tsx +++ b/apps/member-profile/app/routes/_profile.directory.tsx @@ -182,15 +182,15 @@ async function getAppliedFilters( param: 'joinedDirectoryDate', value: searchParams.joinedDirectoryDate ? dayjs(searchParams.joinedDirectoryDate) - .tz('America/Los_Angeles', true) - .format('M/D/YY') + .tz('America/Los_Angeles', true) + .format('M/D/YY') : undefined, }, { name: 'Location', param: keys.location, value: searchParams.location }, { name: 'School', param: keys.school, - value: school || searchParams.school, + value: school, }, ].filter((item) => { return !!item.value; @@ -247,7 +247,6 @@ const DIRECTORY_FILTER_KEYS = Object.values(DirectoryFilterKey); function FilterDirectoryDropdown({ filter }: { filter: string }) { const [open, setOpen] = useState(false); - const searchParams = useSearchParams(DirectorySearchParams); function onClose() { setOpen(false); @@ -271,42 +270,7 @@ function FilterDirectoryDropdown({ filter }: { filter: string }) { )} - {open && filter != 'general' && ( - <> - setOpen(false)} - > - -
- {toTitleCase(filter)} - is... - {filter == 'company' && } - {filter == 'school' && } - -
- - - - {Object.entries(searchParams).map(([key, value]) => { - return ( - !!value && ( - - ) - ); - })} - - )} - - {open && filter == 'general' && ( + {open && filter == "general" && (
Add Filter @@ -314,10 +278,42 @@ function FilterDirectoryDropdown({ filter }: { filter: string }) {
)} + + {open && filter != 'general' && ( + + )} ); } +function CompanyDropdown({ close }: { close: VoidFunction }) { + return ( + +
+ Company + + +
+ + ); +} + +function SchoolDropdown({ close }: { close: VoidFunction }) { + return ( + +
+ School + + +
+ + ); +} + function FilterForm({ close, filter, @@ -339,7 +335,7 @@ function FilterForm({ }} > {DIRECTORY_FILTER_KEYS.filter( - (key) => key !== 'company' && key != 'school' + (key) => key != 'company' && key != 'school' ).map((key) => { return (