From 1b3a49272b0e6e3d1b2f99144fbf21625f2e8078 Mon Sep 17 00:00:00 2001 From: banushi-a Date: Fri, 15 Nov 2024 22:43:06 -0500 Subject: [PATCH 01/11] 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/11] 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/11] 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() { )} />