implemented company filtering #195
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| import { useState } from "react"; | ||
| import { useFormContext } from "react-hook-form"; | ||
|
|
||
| import { Button } from "@cooper/ui/button"; | ||
| import { FormControl, FormField, FormItem } from "@cooper/ui/form"; | ||
| import { useCallback } from "react"; | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectGroup, | ||
| SelectItem, | ||
| SelectSeparator, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from "@cooper/ui/select"; | ||
| import { Industry } from "@cooper/db/schema"; | ||
| import type { IndustryType, LocationType } from "@cooper/db/schema"; | ||
| import { api } from "~/trpc/react"; | ||
| import { usePathname, useRouter } from "next/navigation"; | ||
| import { z } from "zod"; | ||
|
|
||
| interface SearchBarProps { | ||
| industry?: IndustryType; | ||
| location?: LocationType; | ||
| } | ||
|
|
||
| const _formSchema = z.object({ | ||
| searchIndustry: z.string().optional(), | ||
| searchLocation: z.string().optional(), | ||
| }); | ||
| type FormSchema = z.infer<typeof _formSchema>; | ||
|
|
||
| export function CompanySearchBar({ industry, location }: SearchBarProps) { | ||
| const form = useFormContext(); | ||
| const { handleSubmit, setValue } = form; | ||
| const router = useRouter(); | ||
| const pathName = usePathname(); | ||
|
|
||
| const [selectedIndustry, setSelectedIndustry] = useState<string | undefined>( | ||
| industry, | ||
| ); | ||
| const [selectedLocation, setSelectedLocation] = useState<string | undefined>( | ||
| location?.city, | ||
| ); | ||
| const { data: locations = [] } = api.location.list.useQuery(); | ||
|
|
||
| const onSubmit = (data: FormSchema) => { | ||
| router.push(pathName + "?" + createQueryString(data)); | ||
| }; | ||
|
|
||
| const createQueryString = useCallback( | ||
| ({ searchIndustry, searchLocation }: FormSchema) => { | ||
| const params = new URLSearchParams(); | ||
| if (searchIndustry) { | ||
| params.set("industry", searchIndustry); | ||
| } | ||
| if (searchLocation) { | ||
| params.set("location", searchLocation); | ||
| } | ||
|
|
||
| return params.toString(); | ||
| }, | ||
| [], | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="flex flex-row w-full justify-between items-center pt-4"> | ||
| <div className="text-[30px] justify-left">Browse Companies</div> | ||
| <div className="flex flex-row gap-6 min-w-0"> | ||
| <FormField | ||
| control={form.control} | ||
| name="searchIndustry" | ||
| render={({ field }) => ( | ||
| <FormItem className="col-span-5 lg:col-span-2"> | ||
| <FormControl> | ||
| <Select | ||
| onValueChange={(value) => { | ||
| setSelectedIndustry(value); | ||
| const finalValue = value === "INDUSTRY" ? undefined : value; | ||
| setValue(field.name, finalValue); | ||
| void handleSubmit(onSubmit)(); | ||
| }} | ||
| value={selectedIndustry} | ||
| > | ||
| <SelectTrigger className="h-12 w-[340px] rounded-none border-2 border-l-0 border-t-0 border-[#9A9A9A] text-lg placeholder:opacity-50 focus:ring-0 active:ring-0 lg:rounded-md lg:border-2"> | ||
| <SelectValue placeholder="Industry" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <SelectGroup> | ||
| <SelectItem className="font-bold" value="INDUSTRY"> | ||
| Industry | ||
| </SelectItem> | ||
| <SelectSeparator /> | ||
| {Object.entries(Industry).map(([key, value]) => ( | ||
| <SelectItem key={value} value={value}> | ||
| {key.charAt(0) + key.slice(1).toLowerCase()} | ||
| </SelectItem> | ||
| ))} | ||
| </SelectGroup> | ||
| </SelectContent> | ||
| </Select> | ||
| </FormControl> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| <FormField | ||
| control={form.control} | ||
| name="searchLocation" | ||
| render={({ field }) => ( | ||
| <FormItem className="col-span-5 lg:col-span-2"> | ||
| <FormControl> | ||
| <Select | ||
|
There was a problem hiding this comment. We will probably need to replace this select with the Combobox mentioned above. |
||
| onValueChange={(value) => { | ||
| setSelectedLocation(value); | ||
| const finalValue = value === "LOCATION" ? undefined : value; | ||
| setValue(field.name, finalValue); | ||
| void handleSubmit(onSubmit)(); | ||
| }} | ||
| value={selectedLocation} | ||
| > | ||
| <SelectTrigger className="h-12 w-[340px] rounded-none border-2 border-l-0 border-t-0 border-[#9A9A9A] text-lg placeholder:opacity-50 focus:ring-0 active:ring-0 lg:rounded-md lg:border-2"> | ||
| <SelectValue placeholder="Location" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <SelectGroup> | ||
| <SelectItem className="font-bold" value="LOCATION"> | ||
| Location | ||
| </SelectItem> | ||
| <SelectSeparator /> | ||
| {locations.map((location: LocationType) => ( | ||
| <SelectItem key={location.id} value={location.id}> | ||
| {location.city + ", " + location.state} | ||
| </SelectItem> | ||
| ))} | ||
| </SelectGroup> | ||
| </SelectContent> | ||
| </Select> | ||
| </FormControl> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| <Button | ||
| className="bg-white hover:bg-white hover:text-[#9A9A9A] border-white text-black" | ||
|
There was a problem hiding this comment. Here we can make the text color here the same as the border color you used above to match the figma |
||
| onClick={() => { | ||
| setSelectedIndustry("INDUSTRY"); | ||
| setSelectedLocation("LOCATION"); | ||
| form.setValue("searchIndustry", undefined); | ||
| form.setValue("searchLocation", undefined); | ||
| }} | ||
| > | ||
| Clear | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is causing the extreme latency which I'm seeing on the preview deployment. I think Tracy has solved this problem though. Spend some time looking through
review-section.tsxin the form to see how Tracy implemented a Locations combobox.This should help with the problems we are facing right now. Once we get that figured out I can review (it is too slow to test right now)