-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #15 from ajesuscode/11-search-field
feat: added search functionality
- Loading branch information
Showing
11 changed files
with
157 additions
and
83 deletions.
There are no files selected for viewing
This file contains 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 |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| { | ||
| "extends": "next/core-web-vitals" | ||
| "extends": "next/core-web-vitals" | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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 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 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 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 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,84 @@ | ||
| "use client"; | ||
| import { useState, useEffect } from "react"; | ||
| import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"; | ||
| import type { Database } from "@/app/lib/database.types"; | ||
| import Link from "next/link"; | ||
| import { useClickAway } from "@uidotdev/usehooks"; | ||
|
|
||
| type SpotConditions = Database["public"]["Tables"]["spot_conditions"]["Row"]; | ||
|
|
||
| const SearchPintxos = () => { | ||
| const [pintxos, setPintxos] = useState<SpotConditions[] | null>(null); | ||
| const [search, setSearch] = useState<string>(""); | ||
| const supabase = createClientComponentClient<Database>(); | ||
| const ref = useClickAway(() => { | ||
| setPintxos(null); | ||
| setSearch(""); | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| async function searchPintxos() { | ||
| if (search.trim() === "") { | ||
| setPintxos(null); | ||
| return; | ||
| } | ||
| const { data, error } = await supabase | ||
| .from("spot_conditions") | ||
| .select("*") | ||
| .like("name", `%${search}%`); | ||
|
|
||
| if (error) { | ||
| console.log("ERROR", error.message); | ||
| } | ||
| setPintxos(data); | ||
| } | ||
| searchPintxos(); | ||
| }, [search]); | ||
|
|
||
| const handlePintxoClick = (): void => { | ||
| setPintxos(null); | ||
| setSearch(""); | ||
| }; | ||
|
|
||
| console.log("SEARCH", search); | ||
| console.log("PINTXO", pintxos); | ||
|
|
||
| return ( | ||
| <div className=""> | ||
| <div | ||
| className="relative" | ||
| ref={ref as React.RefObject<HTMLDivElement>} | ||
| > | ||
| <input | ||
| type="text" | ||
| placeholder="Search pintxos" | ||
| value={search} | ||
| onChange={(e) => setSearch(e.target.value)} | ||
| className="border border-secondary/50 rounded-md p-2 !bg-transparent font-body text-md font-light text-secondary ring-0 focus:ring-secondary focus:outline-none" | ||
| /> | ||
| {pintxos && pintxos.length > 0 && ( | ||
| <div className="absolute top-12 left-0 bg-light/100 rounded-md p-2 flex flex-col justify-start items-start gap-2 w-full"> | ||
| {pintxos?.map((pintxo) => ( | ||
| <div | ||
| key={pintxo.spot_id} | ||
| onClick={() => handlePintxoClick()} | ||
| className="w-full" | ||
| > | ||
| <Link | ||
| href={`/spots/${pintxo.spot_id}`} | ||
| className="flex flex-row justify-between items-center w-full" | ||
| > | ||
| <div className="text-dark font-body tracking-wider text-lg grow"> | ||
| {pintxo.name} | ||
| </div> | ||
| </Link> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SearchPintxos; |
This file contains 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 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 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 |
|---|---|---|
| @@ -1,28 +1,29 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "es5", | ||
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "strict": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "noEmit": true, | ||
| "esModuleInterop": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "bundler", | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "jsx": "preserve", | ||
| "incremental": true, | ||
| "plugins": [ | ||
| { | ||
| "name": "next" | ||
| } | ||
| ], | ||
| "paths": { | ||
| "@/*": ["./src/*"] | ||
| } | ||
| }, | ||
| "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], | ||
| "exclude": ["node_modules"] | ||
| "compilerOptions": { | ||
| "target": "es5", | ||
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "strict": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "noEmit": true, | ||
| "esModuleInterop": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "bundler", | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "jsx": "preserve", | ||
| "incremental": true, | ||
| "noUnusedLocals": false, | ||
| "plugins": [ | ||
| { | ||
| "name": "next" | ||
| } | ||
| ], | ||
| "paths": { | ||
| "@/*": ["./src/*"] | ||
| } | ||
| }, | ||
| "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], | ||
| "exclude": ["node_modules"] | ||
| } |
This file contains 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 |
|---|---|---|
|
|
@@ -375,6 +375,11 @@ | |
| "@typescript-eslint/types" "6.3.0" | ||
| eslint-visitor-keys "^3.4.1" | ||
|
|
||
| "@uidotdev/usehooks@^2.4.1": | ||
| version "2.4.1" | ||
| resolved "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.4.1.tgz" | ||
| integrity sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg== | ||
|
|
||
| abort-controller@^3.0.0: | ||
| version "3.0.0" | ||
| resolved "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz" | ||
|
|
@@ -2274,7 +2279,7 @@ queue-microtask@^1.2.2: | |
| resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz" | ||
| integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== | ||
|
|
||
| "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.0.0 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=15.0.0, [email protected]: | ||
| "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.0.0 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=15.0.0, react-dom@>=18.0.0, react-dom@18.2.0: | ||
| version "18.2.0" | ||
| resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz" | ||
| integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== | ||
|
|
@@ -2317,7 +2322,7 @@ [email protected]: | |
| prop-types "^15.6.2" | ||
| react-lifecycles-compat "^3.0.4" | ||
|
|
||
| "react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.0.0 || ^17.0.0 || ^18.0.0", react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=15.0.0, [email protected]: | ||
| "react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.0.0 || ^17.0.0 || ^18.0.0", react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=15.0.0, react@>=18.0.0, react@18.2.0: | ||
| version "18.2.0" | ||
| resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz" | ||
| integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== | ||
|
|
||