From 31df6a1c689cc49e397bcd0ab44ba606b484f97b Mon Sep 17 00:00:00 2001 From: Connor Harris Date: Tue, 1 Oct 2024 15:42:55 -0500 Subject: [PATCH 1/5] detailed commit message (oopsie) --- src/app/clubSearch/page.tsx | 22 ++++++++++++++++ src/components/ClubSearchComponent.tsx | 35 ++++++++++++++++++++++++++ src/components/SearchBar.tsx | 9 +++++++ src/server/api/routers/club.ts | 9 +++++++ 4 files changed, 75 insertions(+) create mode 100644 src/app/clubSearch/page.tsx create mode 100644 src/components/ClubSearchComponent.tsx diff --git a/src/app/clubSearch/page.tsx b/src/app/clubSearch/page.tsx new file mode 100644 index 00000000..080ec094 --- /dev/null +++ b/src/app/clubSearch/page.tsx @@ -0,0 +1,22 @@ +import Header from '@src/components/BaseHeader'; +import { ClubSearchComponent } from '@src/components/ClubSearchComponent'; + +type Params = { + searchParams: { [key: string]: string | undefined }; +}; + +const clubSearch = async (props: Params) => { + const { searchParams } = props; + const userSearch = searchParams['search'] || ''; + + return ( +
+
+
+ +
+
+ ); +}; + +export default clubSearch; diff --git a/src/components/ClubSearchComponent.tsx b/src/components/ClubSearchComponent.tsx new file mode 100644 index 00000000..0e0b113a --- /dev/null +++ b/src/components/ClubSearchComponent.tsx @@ -0,0 +1,35 @@ +'use client'; +import { api } from '@src/trpc/react'; +import DirectoryOrgs from './DirectoryOrgs'; +import type { SelectClub as Club } from '@src/server/db/models'; // Assuming you use this type +import { type Session } from 'next-auth'; + +interface ClubSearchComponentProps { + userSearch: string; + session: Session | null; +} + +export const ClubSearchComponent = ({ + userSearch, + session, +}: ClubSearchComponentProps) => { + const { data } = api.club.byNameNoLimit.useQuery( + { name: userSearch }, + { enabled: !!userSearch }, + ); + + if (!data) { + return

; + } + if (data.length === 0) { + return

No results found for "{userSearch}".

; + } + + return ( +
+ {data.map((club: Club, index: number) => ( + + ))} +
+ ); +}; \ No newline at end of file diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index fb219eb2..85be4083 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -25,6 +25,7 @@ type SearchBarProps = { setSearch: Dispatch>; searchResults?: Array; onClick?: (input: T) => void; + handleKeyDown?: (e: React.KeyboardEvent) => void; }; export const SearchBar = ({ @@ -33,6 +34,7 @@ export const SearchBar = ({ setSearch, searchResults, onClick, + handleKeyDown, }: SearchBarProps) => { const [input, setInput] = useState(value ?? ''); const [focused, setFocused] = useState(false); @@ -62,6 +64,7 @@ export const SearchBar = ({ onChange={handleSearch} onFocus={() => setFocused(true)} onBlur={() => setTimeout(() => setFocused(false), 300)} + onKeyDown={handleKeyDown} /> {input && focused && searchResults && searchResults.length > 0 && (
@@ -92,12 +95,18 @@ export const ClubSearchBar = () => { const onClickSearchResult = (club: Club) => { router.push(`/directory/${club.id}`); }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + router.push(`/clubSearch?search=${encodeURIComponent(search)}`); + } + }; return ( ); }; diff --git a/src/server/api/routers/club.ts b/src/server/api/routers/club.ts index ee13dbdb..8154451c 100644 --- a/src/server/api/routers/club.ts +++ b/src/server/api/routers/club.ts @@ -64,6 +64,15 @@ export const clubRouter = createTRPCRouter({ return clubs.slice(0, 5); }), + byNameNoLimit: publicProcedure.input(byNameSchema).query(async ({ input, ctx }) => { + const { name } = input; + const clubs = await ctx.db.query.club.findMany({ + where: (club) => + and(ilike(club.name, `%${name}%`), eq(club.approved, 'approved')), + }); + + return clubs; + }), byId: publicProcedure.input(byIdSchema).query(async ({ input, ctx }) => { const { id } = input; try { From 1cabb03efe5baa80585bb3e52447495407647dfb Mon Sep 17 00:00:00 2001 From: Connor Harris Date: Tue, 1 Oct 2024 16:57:43 -0500 Subject: [PATCH 2/5] added session stuff --- src/app/clubSearch/page.tsx | 4 +++- src/components/ClubSearchComponent.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/clubSearch/page.tsx b/src/app/clubSearch/page.tsx index 080ec094..3f79726e 100644 --- a/src/app/clubSearch/page.tsx +++ b/src/app/clubSearch/page.tsx @@ -1,5 +1,6 @@ import Header from '@src/components/BaseHeader'; import { ClubSearchComponent } from '@src/components/ClubSearchComponent'; +import { getServerAuthSession } from '@src/server/auth'; type Params = { searchParams: { [key: string]: string | undefined }; @@ -8,12 +9,13 @@ type Params = { const clubSearch = async (props: Params) => { const { searchParams } = props; const userSearch = searchParams['search'] || ''; + const session = await getServerAuthSession(); return (
- +
); diff --git a/src/components/ClubSearchComponent.tsx b/src/components/ClubSearchComponent.tsx index 0e0b113a..ad6084a0 100644 --- a/src/components/ClubSearchComponent.tsx +++ b/src/components/ClubSearchComponent.tsx @@ -1,7 +1,7 @@ 'use client'; import { api } from '@src/trpc/react'; import DirectoryOrgs from './DirectoryOrgs'; -import type { SelectClub as Club } from '@src/server/db/models'; // Assuming you use this type +import type { SelectClub as Club } from '@src/server/db/models'; import { type Session } from 'next-auth'; interface ClubSearchComponentProps { From a1690d72126b5c2ede56887dffe7953f0373efc5 Mon Sep 17 00:00:00 2001 From: Connor Harris Date: Tue, 1 Oct 2024 17:42:40 -0500 Subject: [PATCH 3/5] make vercel stop yelling at me hopefully --- src/components/ClubSearchComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ClubSearchComponent.tsx b/src/components/ClubSearchComponent.tsx index ad6084a0..eb0198a8 100644 --- a/src/components/ClubSearchComponent.tsx +++ b/src/components/ClubSearchComponent.tsx @@ -22,12 +22,12 @@ export const ClubSearchComponent = ({ return

; } if (data.length === 0) { - return

No results found for "{userSearch}".

; + return

No results found

; } return (
- {data.map((club: Club, index: number) => ( + {data.map((club: Club) => ( ))}
From 9ab979ca277146854f1a33c4e0ab8a1b43874e02 Mon Sep 17 00:00:00 2001 From: Connor Harris Date: Tue, 22 Oct 2024 13:17:35 -0500 Subject: [PATCH 4/5] i h8 vercel --- src/components/ClubSearchComponent.tsx | 2 +- src/server/api/routers/club.ts | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/ClubSearchComponent.tsx b/src/components/ClubSearchComponent.tsx index f8ca65e0..2b4c8c4e 100644 --- a/src/components/ClubSearchComponent.tsx +++ b/src/components/ClubSearchComponent.tsx @@ -32,4 +32,4 @@ export const ClubSearchComponent = ({ ))}
); -}; \ No newline at end of file +}; diff --git a/src/server/api/routers/club.ts b/src/server/api/routers/club.ts index 8154451c..4f9d6ef6 100644 --- a/src/server/api/routers/club.ts +++ b/src/server/api/routers/club.ts @@ -64,15 +64,17 @@ export const clubRouter = createTRPCRouter({ return clubs.slice(0, 5); }), - byNameNoLimit: publicProcedure.input(byNameSchema).query(async ({ input, ctx }) => { - const { name } = input; - const clubs = await ctx.db.query.club.findMany({ - where: (club) => - and(ilike(club.name, `%${name}%`), eq(club.approved, 'approved')), - }); + byNameNoLimit: publicProcedure + .input(byNameSchema) + .query(async ({ input, ctx }) => { + const { name } = input; + const clubs = await ctx.db.query.club.findMany({ + where: (club) => + and(ilike(club.name, `%${name}%`), eq(club.approved, 'approved')), + }); - return clubs; - }), + return clubs; + }), byId: publicProcedure.input(byIdSchema).query(async ({ input, ctx }) => { const { id } = input; try { From 21c5895ba96b5402369eee4734f6c647e91a1a7f Mon Sep 17 00:00:00 2001 From: Ethan Bickel Date: Tue, 22 Oct 2024 13:32:10 -0500 Subject: [PATCH 5/5] move routes --- .../directory/search/ClubSearch.tsx} | 2 +- src/app/{clubSearch => directory/search}/page.tsx | 2 +- src/components/searchBar/ClubSearchBar.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename src/{components/ClubSearchComponent.tsx => app/directory/search/ClubSearch.tsx} (93%) rename src/app/{clubSearch => directory/search}/page.tsx (88%) diff --git a/src/components/ClubSearchComponent.tsx b/src/app/directory/search/ClubSearch.tsx similarity index 93% rename from src/components/ClubSearchComponent.tsx rename to src/app/directory/search/ClubSearch.tsx index 2b4c8c4e..cf9a4073 100644 --- a/src/components/ClubSearchComponent.tsx +++ b/src/app/directory/search/ClubSearch.tsx @@ -2,7 +2,7 @@ import { api } from '@src/trpc/react'; import type { SelectClub as Club } from '@src/server/db/models'; import { type Session } from 'next-auth'; -import ClubCard from './club/ClubCard'; +import ClubCard from '@src/components/club/ClubCard'; interface ClubSearchComponentProps { userSearch: string; diff --git a/src/app/clubSearch/page.tsx b/src/app/directory/search/page.tsx similarity index 88% rename from src/app/clubSearch/page.tsx rename to src/app/directory/search/page.tsx index a40a0a8d..8542f9b8 100644 --- a/src/app/clubSearch/page.tsx +++ b/src/app/directory/search/page.tsx @@ -1,5 +1,5 @@ import Header from '@src/components/header/BaseHeader'; -import { ClubSearchComponent } from '@src/components/ClubSearchComponent'; +import { ClubSearchComponent } from './ClubSearch'; import { getServerAuthSession } from '@src/server/auth'; type Params = { diff --git a/src/components/searchBar/ClubSearchBar.tsx b/src/components/searchBar/ClubSearchBar.tsx index 9112234c..8b02f613 100644 --- a/src/components/searchBar/ClubSearchBar.tsx +++ b/src/components/searchBar/ClubSearchBar.tsx @@ -23,7 +23,7 @@ export const ClubSearchBar = () => { onClick={onClickSearchResult} submitButton submitLogic={() => { - router.push(`/clubSearch?search=${encodeURIComponent(search)}`); + router.push(`/directory/search?search=${encodeURIComponent(search)}`); }} /> );