From 1b3a49272b0e6e3d1b2f99144fbf21625f2e8078 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Fri, 15 Nov 2024 22:43:06 -0500 Subject: [PATCH 01/16] Begin Rework Search Filter + Bar, Adjust Styles on Header --- .../app/(pages)/(dashboard)/roles/page.tsx | 5 +-- apps/web/src/app/_components/header.tsx | 13 +++---- .../src/app/_components/search/search-bar.tsx | 38 +++++++++++++++++-- .../app/_components/search/search-filter.tsx | 37 ++++++++++++++---- 4 files changed, 72 insertions(+), 21 deletions(-) diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx index 59a827b..82cb2bc 100644 --- a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx +++ b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx @@ -3,13 +3,12 @@ import { useEffect, useState } from "react"; import { z } from "zod"; -import { +import type { ReviewType, - WorkEnvironment, WorkEnvironmentType, - WorkTerm, WorkTermType, } from "@cooper/db/schema"; +import { WorkEnvironment, WorkTerm } from "@cooper/db/schema"; import { cn } from "@cooper/ui"; import { useToast } from "@cooper/ui/hooks/use-toast"; diff --git a/apps/web/src/app/_components/header.tsx b/apps/web/src/app/_components/header.tsx index 1b02b41..26dacab 100644 --- a/apps/web/src/app/_components/header.tsx +++ b/apps/web/src/app/_components/header.tsx @@ -46,25 +46,24 @@ export default function Header({ session, auth }: HeaderProps) { {/* Centered Links */} -
+

- {" "} - Jobs{" "} + Jobs

Companies diff --git a/apps/web/src/app/_components/search/search-bar.tsx b/apps/web/src/app/_components/search/search-bar.tsx index 6ca060e..89ab845 100644 --- a/apps/web/src/app/_components/search/search-bar.tsx +++ b/apps/web/src/app/_components/search/search-bar.tsx @@ -7,14 +7,14 @@ export function SearchBar() { const form = useFormContext(); return ( -
+
( - + -
+
{/* SEARCH TEXT INPUT */}
@@ -41,6 +41,36 @@ export function SearchBar() { )} /> + ( + + + + + + )} + /> + ( + + + + + + )} + />
); } diff --git a/apps/web/src/app/_components/search/search-filter.tsx b/apps/web/src/app/_components/search/search-filter.tsx index fe32850..d7187c0 100644 --- a/apps/web/src/app/_components/search/search-filter.tsx +++ b/apps/web/src/app/_components/search/search-filter.tsx @@ -1,17 +1,28 @@ "use client"; -import { useCallback } from "react"; +import { useCallback, useEffect } from "react"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; +import { WorkEnvironment, WorkTerm } from "@cooper/db/schema"; import { Form } from "@cooper/ui/form"; import { SearchBar } from "~/app/_components/search/search-bar"; const formSchema = z.object({ searchText: z.string(), + searchCycle: z + .nativeEnum(WorkTerm, { + message: "Invalid cycle type", + }) + .optional(), + searchTerm: z + .nativeEnum(WorkEnvironment, { + message: "Invalid cycle type", + }) + .optional(), }); export type SearchFilterFormType = typeof formSchema; @@ -38,18 +49,30 @@ export default function SearchFilter() { ); function onSubmit(values: z.infer) { + let searchString = ""; + if (values.searchText != "") { - router.push( - pathName + `/?${createQueryString("search", values.searchText)}`, - ); - } else { - router.push(pathName); + searchString = `/?${createQueryString("search", values.searchText)}`; + } else if (values.searchCycle) { + searchString += `/?${createQueryString("cycle", values.searchCycle)}`; + } else if (values.searchTerm) { + searchString += `/?${createQueryString("term", values.searchTerm)}`; } + + router.push(pathName + searchString); } + useEffect(() => console.log("errors", form.formState.errors), [form]); + return (
- + { + console.log("submit"); + form.handleSubmit(onSubmit); + }} + className="w-[100vw]" + >
From 2760b33bc9494e5d4a6582e93701f4e9e0c4ab43 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Sat, 16 Nov 2024 23:06:55 -0500 Subject: [PATCH 02/16] Change Cycle/WorkModel to dropdowns + add search button since shi is broke --- .../src/app/_components/search/search-bar.tsx | 101 +++++++---- .../app/_components/search/search-filter.tsx | 46 ++--- packages/ui/package.json | 1 + packages/ui/src/select.tsx | 160 ++++++++++++++++++ pnpm-lock.yaml | 94 +++++++++- 5 files changed, 336 insertions(+), 66 deletions(-) create mode 100644 packages/ui/src/select.tsx diff --git a/apps/web/src/app/_components/search/search-bar.tsx b/apps/web/src/app/_components/search/search-bar.tsx index 89ab845..831fd25 100644 --- a/apps/web/src/app/_components/search/search-bar.tsx +++ b/apps/web/src/app/_components/search/search-bar.tsx @@ -1,7 +1,17 @@ import { useFormContext } from "react-hook-form"; +import { Button } from "@cooper/ui/button"; import { FormControl, FormField, FormItem } from "@cooper/ui/form"; import { Input } from "@cooper/ui/input"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "@cooper/ui/select"; export function SearchBar() { const form = useFormContext(); @@ -12,31 +22,13 @@ export function SearchBar() { control={form.control} name="searchText" render={({ field }) => ( - + -
- {/* SEARCH TEXT INPUT */} - - - - - -
+ )} @@ -47,11 +39,25 @@ export function SearchBar() { render={({ field }) => ( - + )} @@ -62,15 +68,42 @@ export function SearchBar() { render={({ field }) => ( - + )} /> +
); } diff --git a/apps/web/src/app/_components/search/search-filter.tsx b/apps/web/src/app/_components/search/search-filter.tsx index d7187c0..ddef709 100644 --- a/apps/web/src/app/_components/search/search-filter.tsx +++ b/apps/web/src/app/_components/search/search-filter.tsx @@ -1,7 +1,7 @@ "use client"; -import { useCallback, useEffect } from "react"; -import { usePathname, useRouter, useSearchParams } from "next/navigation"; +import { useCallback } from "react"; +import { usePathname, useRouter } from "next/navigation"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; @@ -35,44 +35,34 @@ export default function SearchFilter() { }, }); - const searchParams = useSearchParams(); const router = useRouter(); const pathName = usePathname(); const createQueryString = useCallback( - (name: string, value: string) => { - const params = new URLSearchParams(searchParams); - params.set(name, value); - return params.toString(); + ({ searchText, searchCycle, searchTerm }: z.infer) => { + // Initialize URLSearchParams with the required searchText + const params = new URLSearchParams({ search: searchText }); + + // Conditionally add searchCycle and searchTerm if they have values + if (searchCycle) { + params.set("cycle", searchCycle); + } + if (searchTerm) { + params.set("term", searchTerm); + } + + return params.toString(); // Returns a query string, e.g., "search=yo&cycle=SPRING" }, - [searchParams], + [], ); function onSubmit(values: z.infer) { - let searchString = ""; - - if (values.searchText != "") { - searchString = `/?${createQueryString("search", values.searchText)}`; - } else if (values.searchCycle) { - searchString += `/?${createQueryString("cycle", values.searchCycle)}`; - } else if (values.searchTerm) { - searchString += `/?${createQueryString("term", values.searchTerm)}`; - } - - router.push(pathName + searchString); + router.push(pathName + "?" + createQueryString(values)); } - useEffect(() => console.log("errors", form.formState.errors), [form]); - return ( - { - console.log("submit"); - form.handleSubmit(onSubmit); - }} - className="w-[100vw]" - > +
diff --git a/packages/ui/package.json b/packages/ui/package.json index cdcde64..f1c076b 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -27,6 +27,7 @@ "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.0", + "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-toast": "^1.2.2", "class-variance-authority": "^0.7.0", diff --git a/packages/ui/src/select.tsx b/packages/ui/src/select.tsx new file mode 100644 index 0000000..d45f1a8 --- /dev/null +++ b/packages/ui/src/select.tsx @@ -0,0 +1,160 @@ +"use client"; + +import * as React from "react"; +import * as SelectPrimitive from "@radix-ui/react-select"; +import { Check, ChevronDown, ChevronUp } from "lucide-react"; + +import { cn } from "@cooper/ui"; + +const Select = SelectPrimitive.Root; + +const SelectGroup = SelectPrimitive.Group; + +const SelectValue = SelectPrimitive.Value; + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1", + className, + )} + {...props} + > + {children} + + + + +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; + +const SelectScrollUpButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; + +const SelectScrollDownButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollDownButton.displayName = + SelectPrimitive.ScrollDownButton.displayName; + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + + {children} + + + + +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SelectLabel.displayName = SelectPrimitive.Label.displayName; + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 358988a..3906f80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -408,6 +408,9 @@ importers: '@radix-ui/react-radio-group': specifier: ^1.2.0 version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-select': + specifier: ^2.1.2 + version: 2.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) @@ -511,7 +514,7 @@ importers: version: 7.35.0(eslint@9.7.0) eslint-plugin-react-hooks: specifier: rc - version: 5.1.0-rc-cae764ce-20241025(eslint@9.7.0) + version: 5.1.0-rc.1(eslint@9.7.0) eslint-plugin-turbo: specifier: ^2.0.6 version: 2.0.9(eslint@9.7.0) @@ -2456,6 +2459,9 @@ packages: '@polka/url@1.0.0-next.25': resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==} + '@radix-ui/number@1.1.0': + resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==} + '@radix-ui/primitive@1.0.1': resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} @@ -2651,6 +2657,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-focus-guards@1.1.1': + resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-focus-scope@1.0.4': resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==} peerDependencies: @@ -2882,6 +2897,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-select@2.1.2': + resolution: {integrity: sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-slot@1.0.2': resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -5108,8 +5136,8 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 - eslint-plugin-react-hooks@5.1.0-rc-cae764ce-20241025: - resolution: {integrity: sha512-T0dII19NLMIDsd/kbOrPSVnbr0IhlFITOQoCVZuHDBatzGUY6p9wFPuAei7tQYpOnBhdywGIdx2nR4w/cfkcsA==} + eslint-plugin-react-hooks@5.1.0-rc.1: + resolution: {integrity: sha512-nAD017D/00XFwjP4F7cXaIbCxQ9A4pGaqjLs5347px37w/WclOtPqz8bBiTQFoj+teVQei6Ahr1h1aZiuaXMSw==} engines: {node: '>=10'} peerDependencies: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 @@ -7785,6 +7813,16 @@ packages: '@types/react': optional: true + react-remove-scroll@2.6.0: + resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + react-router-config@5.1.1: resolution: {integrity: sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==} peerDependencies: @@ -11613,6 +11651,8 @@ snapshots: '@polka/url@1.0.0-next.25': {} + '@radix-ui/number@1.1.0': {} + '@radix-ui/primitive@1.0.1': dependencies: '@babel/runtime': 7.25.4 @@ -11807,6 +11847,12 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + '@radix-ui/react-focus-guards@1.1.1(@types/react@18.3.3)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.3 + '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.4 @@ -12040,6 +12086,35 @@ snapshots: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 + '@radix-ui/react-select@2.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/number': 1.1.0 + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + aria-hidden: 1.2.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll: 2.6.0(@types/react@18.3.3)(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + '@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.25.4 @@ -14519,7 +14594,7 @@ snapshots: safe-regex-test: 1.0.3 string.prototype.includes: 2.0.0 - eslint-plugin-react-hooks@5.1.0-rc-cae764ce-20241025(eslint@9.7.0): + eslint-plugin-react-hooks@5.1.0-rc.1(eslint@9.7.0): dependencies: eslint: 9.7.0 @@ -17728,6 +17803,17 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + react-remove-scroll@2.6.0(@types/react@18.3.3)(react@18.3.1): + dependencies: + react: 18.3.1 + react-remove-scroll-bar: 2.3.6(@types/react@18.3.3)(react@18.3.1) + react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1) + tslib: 2.6.3 + use-callback-ref: 1.3.2(@types/react@18.3.3)(react@18.3.1) + use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + react-router-config@5.1.1(react-router@5.3.4(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.25.4 From c1b3f1ffca60d2ca8c231f2250358467f3f007d4 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Sat, 16 Nov 2024 23:27:52 -0500 Subject: [PATCH 03/16] Search bar changes --- apps/web/src/app/_components/header.tsx | 2 +- apps/web/src/app/_components/search/search-bar.tsx | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/web/src/app/_components/header.tsx b/apps/web/src/app/_components/header.tsx index 26dacab..28f82c5 100644 --- a/apps/web/src/app/_components/header.tsx +++ b/apps/web/src/app/_components/header.tsx @@ -28,7 +28,7 @@ export default function Header({ session, auth }: HeaderProps) {
{/* Logo + Cooper */} -
+
@@ -37,7 +37,7 @@ export function SearchBar() { control={form.control} name="searchCycle" render={({ field }) => ( - + - + @@ -86,7 +86,7 @@ export function SearchBar() { )} /> +
+ + ); +} diff --git a/apps/web/src/app/_components/search/search-bar.tsx b/apps/web/src/app/_components/search/search-bar.tsx index d5bf4c9..d9a41bb 100644 --- a/apps/web/src/app/_components/search/search-bar.tsx +++ b/apps/web/src/app/_components/search/search-bar.tsx @@ -1,3 +1,4 @@ +import { useSearchParams } from "next/navigation"; import { useFormContext } from "react-hook-form"; import { Button } from "@cooper/ui/button"; @@ -15,6 +16,7 @@ import { export function SearchBar() { const form = useFormContext(); + const searchParams = useSearchParams(); return (
@@ -40,11 +42,10 @@ export function SearchBar() { From a48d55d4fc0fcf76be3e8f3609a090c046998e52 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Fri, 22 Nov 2024 22:24:48 -0500 Subject: [PATCH 07/16] Search Filters Populate Based on URL Search Params --- .../app/(pages)/(dashboard)/roles/page.tsx | 6 +++- .../src/app/_components/search/search-bar.tsx | 28 +++++++++++-------- .../app/_components/search/search-filter.tsx | 14 ++++++++-- 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx index b798648..20b17bf 100644 --- a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx +++ b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx @@ -84,7 +84,11 @@ export default function Roles({ return ( <> - + {reviews.data && (
diff --git a/apps/web/src/app/_components/search/search-bar.tsx b/apps/web/src/app/_components/search/search-bar.tsx index d5bf4c9..0a930c7 100644 --- a/apps/web/src/app/_components/search/search-bar.tsx +++ b/apps/web/src/app/_components/search/search-bar.tsx @@ -13,7 +13,20 @@ import { SelectValue, } from "@cooper/ui/select"; -export function SearchBar() { +interface SearchBarProps { + cycle?: "FALL" | "SPRING" | "SUMMER"; + term?: "INPERSON" | "HYBRID" | "REMOTE"; +} + +/** + * This Search Bar employs filtering and fuzzy searching. + * + * NOTE: Cycle and Term only make sense for Roles + * + * @param param0 Cycle and Term to be set as default values for their respective dropdowns + * @returns A search bar which is connected to a parent 'useForm' + */ +export function SearchBar({ cycle, term }: SearchBarProps) { const form = useFormContext(); return ( @@ -39,13 +52,7 @@ export function SearchBar() { render={({ field }) => ( - @@ -68,10 +75,7 @@ export function SearchBar() { render={({ field }) => ( - diff --git a/apps/web/src/app/_components/search/search-filter.tsx b/apps/web/src/app/_components/search/search-filter.tsx index 36a0dff..e9cfac8 100644 --- a/apps/web/src/app/_components/search/search-filter.tsx +++ b/apps/web/src/app/_components/search/search-filter.tsx @@ -29,18 +29,26 @@ export type SearchFilterFormType = typeof formSchema; interface SearchFilterProps { search?: string; + cycle?: "FALL" | "SPRING" | "SUMMER"; + term?: "INPERSON" | "HYBRID" | "REMOTE"; } /** * Handles searching logic, updates the search param base on user search and passes the text to backend with fuzzy searching. - * @param param0 user input text that's passed to the fuzzy search + * @param param0 user input text that's passed to the fuzzy search, cycle filter, and term filter * @returns the search bar with the user inputted text */ -export default function SearchFilter({ search }: SearchFilterProps) { +export default function SearchFilter({ + search, + cycle, + term, +}: SearchFilterProps) { const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { searchText: search ?? "", + searchCycle: cycle, + searchTerm: term, }, }); @@ -73,7 +81,7 @@ export default function SearchFilter({ search }: SearchFilterProps) {
- +
From 4cd269ee0b4c5d2b9e7d8c2907bb2b8074755b04 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Fri, 22 Nov 2024 23:27:59 -0500 Subject: [PATCH 08/16] Rishi micromanaging (jk) --- apps/web/src/app/(pages)/(dashboard)/roles/page.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx index 20b17bf..2859309 100644 --- a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx +++ b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx @@ -84,11 +84,7 @@ export default function Roles({ return ( <> - + {reviews.data && (
From 403d423ccd488cb3b60f4db5db1d03f1bcc05cfd Mon Sep 17 00:00:00 2001 From: banushi-a Date: Fri, 22 Nov 2024 23:55:30 -0500 Subject: [PATCH 09/16] Home page reroutes to roles --- apps/web/public/svg/hidingLogo.svg | 49 ++++++++----------- apps/web/src/app/(pages)/(dashboard)/page.tsx | 2 +- apps/web/src/app/_components/header.tsx | 4 +- .../app/_components/search/search-filter.tsx | 12 ++++- 4 files changed, 34 insertions(+), 33 deletions(-) diff --git a/apps/web/public/svg/hidingLogo.svg b/apps/web/public/svg/hidingLogo.svg index bcefdd5..70e2a5b 100644 --- a/apps/web/public/svg/hidingLogo.svg +++ b/apps/web/public/svg/hidingLogo.svg @@ -1,28 +1,21 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/app/(pages)/(dashboard)/page.tsx b/apps/web/src/app/(pages)/(dashboard)/page.tsx index 45b8310..c660326 100644 --- a/apps/web/src/app/(pages)/(dashboard)/page.tsx +++ b/apps/web/src/app/(pages)/(dashboard)/page.tsx @@ -4,7 +4,7 @@ export default function Home() { return (
- +
); diff --git a/apps/web/src/app/_components/header.tsx b/apps/web/src/app/_components/header.tsx index 28f82c5..4391843 100644 --- a/apps/web/src/app/_components/header.tsx +++ b/apps/web/src/app/_components/header.tsx @@ -31,9 +31,9 @@ export default function Header({ session, auth }: HeaderProps) {
Logo Picture

>({ resolver: zodResolver(formSchema), @@ -74,7 +77,12 @@ export default function SearchFilter({ ); function onSubmit(values: z.infer) { - router.push(pathName + "?" + createQueryString(values)); + console.log(alternatePathname); + if (alternatePathname) { + router.push(alternatePathname + "?" + createQueryString(values)); + } else { + router.push(pathName + "?" + createQueryString(values)); + } } return ( From b2aadc99e6e5f2bad3194f78c3de2d140429c8f6 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Sat, 23 Nov 2024 00:38:01 -0500 Subject: [PATCH 10/16] Loading Page Updates --- .../app/(pages)/(dashboard)/roles/page.tsx | 5 +++- apps/web/src/app/_components/cooper-logo.tsx | 16 +++++++++++++ apps/web/src/app/_components/header.tsx | 9 ++------ .../src/app/_components/loading-results.tsx | 12 ++++++++++ apps/web/src/app/_components/no-results.tsx | 23 ++++++++++--------- .../src/app/_components/search/search-bar.tsx | 2 -- 6 files changed, 46 insertions(+), 21 deletions(-) create mode 100644 apps/web/src/app/_components/cooper-logo.tsx create mode 100644 apps/web/src/app/_components/loading-results.tsx diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx index b6e9465..a6edac9 100644 --- a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx +++ b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx @@ -12,6 +12,8 @@ import { WorkEnvironment, WorkTerm } from "@cooper/db/schema"; import { cn } from "@cooper/ui"; import { useToast } from "@cooper/ui/hooks/use-toast"; +import Loading from "~/app/_components/loading-results"; +import LoadingResults from "~/app/_components/loading-results"; import NoResults from "~/app/_components/no-results"; import { ReviewCard } from "~/app/_components/reviews/review-card"; import { ReviewCardPreview } from "~/app/_components/reviews/review-card-preview"; @@ -86,7 +88,7 @@ export default function Roles({ return ( <> - {reviews.data && ( + {reviews.data?.length > 0 && (
{reviews.data.map((review, i) => { @@ -114,6 +116,7 @@ export default function Roles({
)} {reviews.data?.length === 0 && } + {!reviews.data && } ); } diff --git a/apps/web/src/app/_components/cooper-logo.tsx b/apps/web/src/app/_components/cooper-logo.tsx new file mode 100644 index 0000000..6c1a73e --- /dev/null +++ b/apps/web/src/app/_components/cooper-logo.tsx @@ -0,0 +1,16 @@ +import Image from "next/image"; + +interface CooperLogoProps { + width?: number; +} + +export default function CooperLogo({ width }: CooperLogoProps) { + return ( + Logo Picture + ); +} diff --git a/apps/web/src/app/_components/header.tsx b/apps/web/src/app/_components/header.tsx index 4391843..cb6d287 100644 --- a/apps/web/src/app/_components/header.tsx +++ b/apps/web/src/app/_components/header.tsx @@ -1,6 +1,5 @@ "use client"; -import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; @@ -9,6 +8,7 @@ import { cn } from "@cooper/ui"; import { NewReviewDialog } from "~/app/_components/reviews/new-review-dialogue"; import { altivoFont } from "~/app/styles/font"; +import CooperLogo from "./cooper-logo"; interface HeaderProps { session: Session | null; @@ -29,12 +29,7 @@ export default function Header({ session, auth }: HeaderProps) { {/* Logo + Cooper */}
- Logo Picture +

+ +
+

Loading ...

+
+ + ); +} diff --git a/apps/web/src/app/_components/no-results.tsx b/apps/web/src/app/_components/no-results.tsx index c6e1f3f..55012e1 100644 --- a/apps/web/src/app/_components/no-results.tsx +++ b/apps/web/src/app/_components/no-results.tsx @@ -1,10 +1,11 @@ "use client"; -import Image from "next/image"; import { usePathname, useRouter } from "next/navigation"; import { Button } from "@cooper/ui/button"; +import CooperLogo from "./cooper-logo"; + export default function NoResults() { const router = useRouter(); const pathname = usePathname(); @@ -14,16 +15,16 @@ export default function NoResults() { } return ( -
- Logo Picture -
-

No Results Found

-
diff --git a/apps/web/src/app/_components/search/search-bar.tsx b/apps/web/src/app/_components/search/search-bar.tsx index 4d723ea..0a930c7 100644 --- a/apps/web/src/app/_components/search/search-bar.tsx +++ b/apps/web/src/app/_components/search/search-bar.tsx @@ -1,4 +1,3 @@ -import { useSearchParams } from "next/navigation"; import { useFormContext } from "react-hook-form"; import { Button } from "@cooper/ui/button"; @@ -29,7 +28,6 @@ interface SearchBarProps { */ export function SearchBar({ cycle, term }: SearchBarProps) { const form = useFormContext(); - const searchParams = useSearchParams(); return (
From 045488f6b3c2f819b1a57f826a962aa4d7068405 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Sat, 23 Nov 2024 01:17:54 -0500 Subject: [PATCH 11/16] Jank solution to reset select --- .../src/app/_components/search/search-bar.tsx | 37 +++++++++++++++++-- .../app/_components/search/search-filter.tsx | 1 - 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app/_components/search/search-bar.tsx b/apps/web/src/app/_components/search/search-bar.tsx index 0a930c7..0920dc4 100644 --- a/apps/web/src/app/_components/search/search-bar.tsx +++ b/apps/web/src/app/_components/search/search-bar.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from "react"; import { useFormContext } from "react-hook-form"; import { Button } from "@cooper/ui/button"; @@ -9,6 +10,7 @@ import { SelectGroup, SelectItem, SelectLabel, + SelectSeparator, SelectTrigger, SelectValue, } from "@cooper/ui/select"; @@ -29,6 +31,9 @@ interface SearchBarProps { export function SearchBar({ cycle, term }: SearchBarProps) { const form = useFormContext(); + const [selectedCycle, setSelectedCycle] = useState(cycle); + const [selectedTerm, setSelectedTerm] = useState(term); + return (
( - { + setSelectedCycle(value); + form.setValue( + field.name, + value === "CYCLE" ? undefined : value, + ); + }} + value={selectedCycle} + > - Cycle + + Cycle + + Fall Spring Summer @@ -75,13 +92,25 @@ export function SearchBar({ cycle, term }: SearchBarProps) { render={({ field }) => ( - { + setSelectedTerm(value); + form.setValue( + field.name, + value === "WORKTERM" ? undefined : value, + ); + }} + value={selectedTerm} + > - Work Model + + Work Term + + Hybrid Remote In Person diff --git a/apps/web/src/app/_components/search/search-filter.tsx b/apps/web/src/app/_components/search/search-filter.tsx index fd89107..0d2224d 100644 --- a/apps/web/src/app/_components/search/search-filter.tsx +++ b/apps/web/src/app/_components/search/search-filter.tsx @@ -77,7 +77,6 @@ export default function SearchFilter({ ); function onSubmit(values: z.infer) { - console.log(alternatePathname); if (alternatePathname) { router.push(alternatePathname + "?" + createQueryString(values)); } else { From 82482e885f4de1c59ee012e35f66a01b04193186 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Sat, 23 Nov 2024 15:55:22 -0500 Subject: [PATCH 12/16] Lint --- apps/web/src/app/_components/search/search-bar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/web/src/app/_components/search/search-bar.tsx b/apps/web/src/app/_components/search/search-bar.tsx index 0920dc4..1c0ba5e 100644 --- a/apps/web/src/app/_components/search/search-bar.tsx +++ b/apps/web/src/app/_components/search/search-bar.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useFormContext } from "react-hook-form"; import { Button } from "@cooper/ui/button"; @@ -9,7 +9,6 @@ import { SelectContent, SelectGroup, SelectItem, - SelectLabel, SelectSeparator, SelectTrigger, SelectValue, From 8df9768ac6e19f3e031b187bd05691bb51b336b5 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Sat, 23 Nov 2024 16:22:17 -0500 Subject: [PATCH 13/16] Linting + Toast Issue --- .../app/(pages)/(dashboard)/roles/page.tsx | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx index 2859309..aa1a937 100644 --- a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx +++ b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx @@ -47,25 +47,19 @@ export default function Roles({ useEffect(() => { setMounted(true); }, []); + useEffect(() => { - if (!mounted) { - return; - } - if (!validationResult.success) { + if (mounted && !validationResult.success) { toast({ - title: "Invalid search params", + title: "Invalid Search Parameters", description: validationResult.error.issues .map((issue) => issue.message) .join(", "), variant: "destructive", }); + setMounted(false); } - }, [ - toast, - mounted, - validationResult.success, - validationResult.error?.issues, - ]); + }, [toast, mounted, validationResult]); const reviews = api.review.list.useQuery({ search: searchParams?.search, @@ -73,19 +67,19 @@ export default function Roles({ }); const [selectedReview, setSelectedReview] = useState( - reviews.data ? reviews.data[0] : undefined, + reviews.isSuccess ? reviews.data[0] : undefined, ); useEffect(() => { - if (reviews.data) { + if (reviews.isSuccess) { setSelectedReview(reviews.data[0]); } - }, [reviews.data]); + }, [reviews.isSuccess, reviews.data]); return ( <> - {reviews.data && ( + {reviews.isSuccess && (
{reviews.data.map((review, i) => { From c13184ba84c69af348b3754651b088abbd55b075 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Sun, 24 Nov 2024 19:26:25 -0500 Subject: [PATCH 14/16] Lint... --- apps/web/src/app/(pages)/(dashboard)/roles/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx index a3acd67..e47adbe 100644 --- a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx +++ b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx @@ -102,7 +102,7 @@ export default function Roles({ })}
- {reviews.data?.length > 0 && reviews.data[0] && ( + {reviews.data.length > 0 && reviews.data[0] && ( )}
From 175ed2ed96dfbfa56ff9bf0654121d4ea93adf37 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Sun, 24 Nov 2024 19:31:55 -0500 Subject: [PATCH 15/16] Prettier Fix --- apps/web/src/app/_components/cooper-logo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/app/_components/cooper-logo.tsx b/apps/web/src/app/_components/cooper-logo.tsx index 6c1a73e..5339fbc 100644 --- a/apps/web/src/app/_components/cooper-logo.tsx +++ b/apps/web/src/app/_components/cooper-logo.tsx @@ -9,7 +9,7 @@ export default function CooperLogo({ width }: CooperLogoProps) { Logo Picture ); From 29e64e5b6744153185f9f7107369e53335b0a557 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Fri, 29 Nov 2024 14:48:53 -0600 Subject: [PATCH 16/16] how to center a div? --- apps/web/src/app/_components/no-results.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/app/_components/no-results.tsx b/apps/web/src/app/_components/no-results.tsx index 55012e1..43c8650 100644 --- a/apps/web/src/app/_components/no-results.tsx +++ b/apps/web/src/app/_components/no-results.tsx @@ -17,7 +17,7 @@ export default function NoResults() { return (
-
+

No Results Found