From 59fb6c99e17b2d83447ff9812a6b577f04716a76 Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 03:24:03 -0700 Subject: [PATCH 01/18] added max-h --- app/(main)/schedules/search/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/(main)/schedules/search/page.tsx b/app/(main)/schedules/search/page.tsx index f026093..230cdcc 100644 --- a/app/(main)/schedules/search/page.tsx +++ b/app/(main)/schedules/search/page.tsx @@ -48,9 +48,9 @@ export default async function Page({

Search results for "{searchParams.query}"

-
+
-
+

Filters

Limit

-
+

{total_results ?? '-'} Courses(s)

{items && total_results > 0 From 59645a49a8373f621da4eee8a244fb8e3f795cb6 Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 03:32:34 -0700 Subject: [PATCH 02/18] increased debounce to 500 ms --- components/molecules/search-bar/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/molecules/search-bar/component.tsx b/components/molecules/search-bar/component.tsx index 10217fb..b699d1c 100644 --- a/components/molecules/search-bar/component.tsx +++ b/components/molecules/search-bar/component.tsx @@ -26,7 +26,7 @@ export const SearchBar: React.FC = ({ const searchParams = useSearchParams(); const pathname = usePathname(); const { replace } = useRouter(); - const debouncedReplace = useDebouncedCallback(replace, 100); + const debouncedReplace = useDebouncedCallback(replace, 500); const params = new URLSearchParams(searchParams); const currentParam = params.get(param); From 479f9373c712a23d6057e2dfee659dec112e541c Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 03:37:54 -0700 Subject: [PATCH 03/18] filter by non null professor_name --- app/(main)/schedules/search/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/(main)/schedules/search/page.tsx b/app/(main)/schedules/search/page.tsx index f026093..f11f48c 100644 --- a/app/(main)/schedules/search/page.tsx +++ b/app/(main)/schedules/search/page.tsx @@ -77,7 +77,9 @@ export default async function Page({ variant="radio" param="professor_name" values={ - filters.professor_name?.flatMap((p) => p.professor_name) ?? [] + filters.professor_name + ?.filter((p) => p.professor_name !== null) + .flatMap((p) => p.professor_name) ?? [] } className="pb-lg" /> From ae0247f5d1088f8aebe4d628e130dba10834fa51 Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 04:15:27 -0700 Subject: [PATCH 04/18] added conditional rendering --- app/(main)/courses/[id]/@reviews/page.tsx | 78 ++++---- app/(main)/courses/search/page.tsx | 93 +++++---- app/(main)/professors/[id]/@reviews/page.tsx | 78 ++++---- app/(main)/professors/search/page.tsx | 22 ++- app/(main)/schedules/search/page.tsx | 189 +++++++++++-------- 5 files changed, 267 insertions(+), 193 deletions(-) diff --git a/app/(main)/courses/[id]/@reviews/page.tsx b/app/(main)/courses/[id]/@reviews/page.tsx index 60d22b1..284363d 100644 --- a/app/(main)/courses/[id]/@reviews/page.tsx +++ b/app/(main)/courses/[id]/@reviews/page.tsx @@ -61,30 +61,36 @@ export default function Page({ params }: { params: { id: string } }) { const items = data ? data.flatMap((d) => d.items) : []; return (
-
-
-

Filters

-

Limit

- -

Tags

- t.tag) ?? - searchParams.getAll('tags') - } - shouldResetPageOnChange={false} - /> + {results?.total_results ? ( +
+
+

Filters

+

Limit

+ + {results?.filters.tags.length ? ( + <> +

Tags

+ t.tag) ?? + searchParams.getAll('tags') + } + shouldResetPageOnChange={false} + /> + + ) : null} +
-
+ ) : null}

{results?.total_results ?? '-'} Review(s)

@@ -128,18 +134,20 @@ export default function Page({ params }: { params: { id: string } }) { {!isLoading && !isValidating && items.length === 0 ? 'No reviews found.' : null} - {size !== results?.pages || isLoading || isValidating ? ( -
- setSize(size + 1)} - > - {size !== results?.pages ? 'Load more' : null} - {isLoading || isValidating ? : null} - -
+ {results?.total_results ? ( + size !== results?.pages || isLoading || isValidating ? ( +
+ setSize(size + 1)} + > + {size !== results?.pages ? 'Load more' : null} + {isLoading || isValidating ? : null} + +
+ ) : null ) : null}
diff --git a/app/(main)/courses/search/page.tsx b/app/(main)/courses/search/page.tsx index 76919d0..57fb802 100644 --- a/app/(main)/courses/search/page.tsx +++ b/app/(main)/courses/search/page.tsx @@ -36,48 +36,63 @@ export default async function Page({

Search results for "{searchParams.query}"

-
-
-

Filters

-

Limit

- -

Department

- d.department)} - className="pb-lg" - /> -

Units

- u.units)} - className="pb-lg" - /> + {total_results ? ( +
+
+

Filters

+

Limit

+ + {filters.departments.length ? ( + <> +

Department

+ d.department)} + className="pb-lg" + />{' '} + + ) : null} + {filters.units.length ? ( + <> +

Units

+ u.units)} + className="pb-lg" + /> + + ) : null} - {/* TODO: Uncomment when satisfies_area is added to the response */} - {/*

Satisfies Area

- s.satisfies_area)} - className="pb-lg" - /> */} + {/* TODO: Uncomment when satisfies_area is added to the response */} + {/* + {filters.satisfies_areas.length ? ( <> +

Satisfies Area

+ s.satisfies_area)} + className="pb-lg" + /> + ) : null} + */} - - Reset - + + Reset + +
-
+ ) : null}

{total_results ?? '-'} Courses(s)

diff --git a/app/(main)/professors/[id]/@reviews/page.tsx b/app/(main)/professors/[id]/@reviews/page.tsx index 15de031..71b0fd7 100644 --- a/app/(main)/professors/[id]/@reviews/page.tsx +++ b/app/(main)/professors/[id]/@reviews/page.tsx @@ -98,30 +98,36 @@ export default function Page({ params }: { params: { id: string } }) { const items = data ? data.flatMap((d) => d.items) : []; return (
-
-
-

Filters

-

Limit

- -

Tags

- t.tag) ?? - searchParams.getAll('tags') - } - shouldResetPageOnChange={false} - /> + {results?.total_results ? ( +
+
+

Filters

+

Limit

+ + {results?.filters.tags.length ? ( + <> +

Tags

+ t.tag) ?? + searchParams.getAll('tags') + } + shouldResetPageOnChange={false} + /> + + ) : null} +
-
+ ) : null}

{results?.total_results ?? '-'} Review(s)

@@ -166,18 +172,20 @@ export default function Page({ params }: { params: { id: string } }) { {!isLoading && !isValidating && items.length === 0 ? 'No reviews found.' : null} - {size !== results?.pages || isLoading || isValidating ? ( -
- setSize(size + 1)} - > - {size !== results?.pages ? 'Load more' : null} - {isLoading || isValidating ? : null} - -
+ {results?.total_results ? ( + size !== results?.pages || isLoading || isValidating ? ( +
+ setSize(size + 1)} + > + {size !== results?.pages ? 'Load more' : null} + {isLoading || isValidating ? : null} + +
+ ) : null ) : null}
diff --git a/app/(main)/professors/search/page.tsx b/app/(main)/professors/search/page.tsx index cecd139..373a52e 100644 --- a/app/(main)/professors/search/page.tsx +++ b/app/(main)/professors/search/page.tsx @@ -24,17 +24,19 @@ export default async function Page({

Search results for "{searchParams.query}"

-
-
-

Filters

-

Limit

- + {total_results ? ( +
+
+

Filters

+

Limit

+ +
-
+ ) : null}

{total_results ?? '-'} Professor(s)

diff --git a/app/(main)/schedules/search/page.tsx b/app/(main)/schedules/search/page.tsx index f026093..6811904 100644 --- a/app/(main)/schedules/search/page.tsx +++ b/app/(main)/schedules/search/page.tsx @@ -49,81 +49,122 @@ export default async function Page({

Search results for "{searchParams.query}"

-
-
-

Filters

-

Limit

- -

Term

- t.term) ?? []} - className="pb-lg" - /> -

Year

- y.year.toString()) ?? []} - className="pb-lg" - /> -

Professor

- p.professor_name) ?? [] - } - className="pb-lg" - /> -

Course Number

- c.course_number) ?? [] - } - className="pb-lg" - /> -

Department

- d.department) ?? []} - className="pb-lg" - /> -

Mode of Instruction

- m.mode_of_instruction, - ) ?? [] - } - className="pb-lg" - /> -

Units

- u.units.toString()) ?? []} - className="pb-lg" - /> - - Reset - + {total_results ? ( +
+
+

Filters

+

Limit

+ + {filters.term?.length ? ( + <> + {' '} +

Term

+ t.term) ?? []} + className="pb-lg" + /> + + ) : null} + {filters.year?.length ? ( + <> +

Year

+ y.year.toString()) ?? [] + } + className="pb-lg" + /> + + ) : null} + {filters.professor_name?.length ? ( + <> +

Professor

+ p.professor_name, + ) ?? [] + } + className="pb-lg" + /> + + ) : null} + {filters.course_number?.length ? ( + <> +

Course Number

+ c.course_number) ?? + [] + } + className="pb-lg" + /> + + ) : null} + {filters.department?.length ? ( + <> +

Department

+ d.department) ?? [] + } + className="pb-lg" + /> + + ) : null} + {filters.mode_of_instruction?.length ? ( + <> +

Mode of Instruction

+ m.mode_of_instruction, + ) ?? [] + } + className="pb-lg" + /> + + ) : null} + {filters.units?.length ? ( + <> +

Units

+ u.units.toString()) ?? [] + } + className="pb-lg" + /> + + ) : null} + + Reset + +
-
+ ) : null}

{total_results ?? '-'} Courses(s)

From 7e87770de30134d2c9bab4a571f77f10340a410c Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 04:17:12 -0700 Subject: [PATCH 05/18] added hidden input in search bar for dropdown state --- components/molecules/client/nav-search-bar/component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/molecules/client/nav-search-bar/component.tsx b/components/molecules/client/nav-search-bar/component.tsx index 133b9cf..a2a9f1b 100644 --- a/components/molecules/client/nav-search-bar/component.tsx +++ b/components/molecules/client/nav-search-bar/component.tsx @@ -177,6 +177,7 @@ export const NavSearchBar: React.FC = () => { action={`/${currentOption}/search`} className="relative flex whitespace-nowrap" > + Date: Sat, 28 Sep 2024 04:23:47 -0700 Subject: [PATCH 06/18] persist query when reseting filters --- app/(main)/courses/search/page.tsx | 2 +- app/(main)/schedules/search/page.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/(main)/courses/search/page.tsx b/app/(main)/courses/search/page.tsx index 76919d0..54ecda0 100644 --- a/app/(main)/courses/search/page.tsx +++ b/app/(main)/courses/search/page.tsx @@ -72,7 +72,7 @@ export default async function Page({ Reset diff --git a/app/(main)/schedules/search/page.tsx b/app/(main)/schedules/search/page.tsx index f026093..09541a2 100644 --- a/app/(main)/schedules/search/page.tsx +++ b/app/(main)/schedules/search/page.tsx @@ -118,7 +118,7 @@ export default async function Page({ Reset From f7ecb0b5044e1599985385d17e9a5bb44b517e27 Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 04:28:36 -0700 Subject: [PATCH 07/18] check for null searchParams --- app/(main)/courses/search/page.tsx | 2 +- app/(main)/schedules/search/page.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/(main)/courses/search/page.tsx b/app/(main)/courses/search/page.tsx index 54ecda0..e232864 100644 --- a/app/(main)/courses/search/page.tsx +++ b/app/(main)/courses/search/page.tsx @@ -72,7 +72,7 @@ export default async function Page({ Reset diff --git a/app/(main)/schedules/search/page.tsx b/app/(main)/schedules/search/page.tsx index 09541a2..e34a4dc 100644 --- a/app/(main)/schedules/search/page.tsx +++ b/app/(main)/schedules/search/page.tsx @@ -118,7 +118,7 @@ export default async function Page({ Reset From a2755cac2b554bde82fcade3c603e0908d0cdd26 Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 07:03:36 -0700 Subject: [PATCH 08/18] fixed params not being equal --- .../molecules/filter-group/component.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/components/molecules/filter-group/component.tsx b/components/molecules/filter-group/component.tsx index 569239b..063cd6f 100644 --- a/components/molecules/filter-group/component.tsx +++ b/components/molecules/filter-group/component.tsx @@ -28,8 +28,14 @@ export const FilterGroup: React.FC = ({ const pathname = usePathname(); const { replace } = useRouter(); - const params = new URLSearchParams(searchParams); - const currentParam = params.getAll(param); + const params = React.useMemo( + () => new URLSearchParams(searchParams), + [searchParams], + ); + const currentParam = React.useMemo( + () => params.getAll(param), + [params, param], + ); const [pendingParam, setPendingParam] = React.useState(currentParam); function handleChange() { @@ -47,19 +53,25 @@ export const FilterGroup: React.FC = ({ setPendingParam(params.getAll(param)); replace(`${pathname}?${params.toString()}#${scrollTarget || ''}`); } + + React.useEffect(() => { + formRef.current?.reset(); + setPendingParam(currentParam); + }, [currentParam]); + return (
- {values.map((value, i) => ( + {values.map((value) => ( handleChange()} disabled={currentParam.toString() !== pendingParam.toString()} > From 6cd5f44d1470f7fd09f762014d3e79496ec7625b Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 07:10:09 -0700 Subject: [PATCH 09/18] using defaultValue instead of value --- components/molecules/client/nav-search-bar/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/molecules/client/nav-search-bar/component.tsx b/components/molecules/client/nav-search-bar/component.tsx index a2a9f1b..815ca67 100644 --- a/components/molecules/client/nav-search-bar/component.tsx +++ b/components/molecules/client/nav-search-bar/component.tsx @@ -188,7 +188,7 @@ export const NavSearchBar: React.FC = () => { param="navOption" shouldResetPageOnChange={false} className="rounded-l-none border-border bg-background" - value={currentOption} + defaultValue={currentOption} > From 2db1c3b1f44aee55fe80dd563745631ccd3c6e5b Mon Sep 17 00:00:00 2001 From: ahmadgaz Date: Sat, 28 Sep 2024 23:26:06 -0700 Subject: [PATCH 10/18] added theme picker in footer --- app/globals.css | 76 +++++++++++++--- app/layout.tsx | 10 ++- assets/hero-image.png | Bin 0 -> 55892 bytes components/atoms/btn/component.tsx | 9 +- components/atoms/link-btn/component.tsx | 9 +- .../client/color-mode-picker/component.tsx | 47 ++++++++++ .../client/color-mode-picker/index.ts | 2 + components/molecules/client/index.ts | 1 + .../organisms/client/bar-chart/component.tsx | 81 +++++++++++++++++- .../organisms/client/navbar/component.tsx | 4 +- components/organisms/footer/component.tsx | 35 ++------ tailwind.config.ts | 18 ++++ 12 files changed, 235 insertions(+), 57 deletions(-) create mode 100644 assets/hero-image.png create mode 100644 components/molecules/client/color-mode-picker/component.tsx create mode 100644 components/molecules/client/color-mode-picker/index.ts diff --git a/app/globals.css b/app/globals.css index 2b3093d..f4a313e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -4,22 +4,72 @@ @layer base { :root { - --color-primary: 241 185 71; - --color-secondary: 119 164 215; - --color-accent: 183 208 237; - --color-background: 255 255 255; - --color-text: 20 16 12; - --color-neutral: 164 164 164; - --color-important: 166 0 0; - --color-highlight: 241 241 241; - --color-good: 18 218 169; - --color-ok: 253 159 30; - --color-bad: 255 83 83; - --color-border: 229 229 229; - --color-hovered-border: 255 255 255; + --color-light-primary: 241 185 71; + --color-light-secondary: 119 164 215; + --color-light-accent: 183 208 237; + --color-light-background: 255 255 255; + --color-light-page: 255 255 255; + --color-light-text: 20 16 12; + --color-light-neutral: 164 164 164; + --color-light-important: 166 0 0; + --color-light-highlight: 241 241 241; + --color-light-good: 18 218 169; + --color-light-ok: 253 159 30; + --color-light-bad: 255 83 83; + --color-light-border: 229 229 229; + --color-light-hovered-border: 255 255 255; + --color-dark-primary: 241 185 71; + --color-dark-secondary: 119 164 215; + --color-dark-accent: 183 208 237; + --color-dark-background: 40 40 40; + --color-dark-page: 30 30 30; + --color-dark-text: 240 240 240; + --color-dark-neutral: 139 139 139; + --color-dark-important: 255 83 83; + --color-dark-highlight: 241 241 241; + --color-dark-good: 164 255 233; + --color-dark-ok: 255 222 176; + --color-dark-bad: 255 156 156; + --color-dark-border: 50 50 50; + --color-dark-hovered-border: 60 60 60; } } +html { + --color-primary: var(--color-light-primary); + --color-secondary: var(--color-light-secondary); + --color-accent: var(--color-light-accent); + --color-background: var(--color-light-background); + --color-page: var(--color-light-page); + --color-text: var(--color-light-text); + --color-neutral: var(--color-light-neutral); + --color-important: var(--color-light-important); + --color-highlight: var(--color-light-highlight); + --color-good: var(--color-light-good); + --color-ok: var(--color-light-ok); + --color-bad: var(--color-light-bad); + --color-border: var(--color-light-border); + --color-hovered-border: var(--color-light-hovered-border); +} + +html.dark { + color-scheme: dark; + --color-primary: var(--color-dark-primary); + --color-secondary: var(--color-dark-secondary); + --color-accent: var(--color-dark-accent); + --color-background: var(--color-dark-background); + --color-page: var(--color-dark-page); + --color-text: var(--color-dark-text); + --color-neutral: var(--color-dark-neutral); + --color-important: var(--color-dark-important); + --color-highlight: var(--color-dark-highlight); + --color-good: var(--color-dark-good); + --color-ok: var(--color-dark-ok); + --color-bad: var(--color-dark-bad); + --color-border: var(--color-dark-border); + --color-hovered-border: var(--color-dark-hovered-border); +} + ::selection { background: rgb(var(--color-accent)); } diff --git a/app/layout.tsx b/app/layout.tsx index 639b1a7..d134643 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; +import { Footer } from '@/components/organisms'; +import { cookies } from 'next/headers'; const inter = Inter({ subsets: ['latin'] }); @@ -39,12 +41,12 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const theme = cookies().get('theme')?.value ?? ''; return ( - - + + {children} +