[IMPLEMENT]: search feature (username / token ID) #99
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| "use client"; | ||
|
|
||
| import React, { useRef, useState, useCallback, useEffect } from "react"; | ||
| import { X, Search, CornerDownLeft } from "lucide-react"; | ||
| import { useRouter } from "next/navigation"; | ||
|
|
||
| interface SearchModalProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| mobile?: boolean; | ||
| inline?: boolean; | ||
| } | ||
|
|
||
| export function SearchModal({ | ||
| isOpen, | ||
| onClose, | ||
| mobile = false, | ||
| inline = false, | ||
| }: SearchModalProps) { | ||
| // useRef for debounce timer — no re-renders | ||
| const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null); | ||
| // useRef for input element (uncontrolled) — no re-render on every keystroke | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
| // Only ONE piece of state: whether input has content (drives the arrow button visibility) | ||
| const [hasValue, setHasValue] = useState(false); | ||
| const router = useRouter(); | ||
|
|
||
| // Clean up timer on unmount | ||
| useEffect(() => { | ||
| return () => { | ||
| if (debounceRef.current) clearTimeout(debounceRef.current); | ||
| }; | ||
| }, []); | ||
|
|
||
| const handleChange = useCallback(() => { | ||
| const value = inputRef.current?.value ?? ""; | ||
|
|
||
| // Update arrow button visibility (single boolean — cheap) | ||
| setHasValue(value.trim().length > 0); | ||
|
|
||
| // Debounce the search API call using ref, not state | ||
| if (debounceRef.current) clearTimeout(debounceRef.current); | ||
| debounceRef.current = setTimeout(() => { | ||
| const trimmed = value.trim(); | ||
| if (trimmed) { | ||
| console.log("Debounced search term:", trimmed); | ||
| // TODO: Add elasticsearch fetch here | ||
| } | ||
| }, 300); | ||
| }, []); | ||
|
|
||
| const handleSubmit = useCallback( | ||
| (e?: React.FormEvent) => { | ||
| e?.preventDefault(); | ||
| const value = inputRef.current?.value.trim(); | ||
| if (!value) return; | ||
| router.push(`/${value}`); | ||
| onClose(); | ||
| if (inputRef.current) inputRef.current.value = ""; | ||
| setHasValue(false); | ||
| }, | ||
| [router, onClose] | ||
| ); | ||
|
Comment on lines
+52
to
+63
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Check how the username parameter is used in the destination page
ast-grep --pattern 'params.$_.$_'
rg -n 'username' --type ts --type tsx -g '!node_modules'
cat app/\[username\]/page.tsx 2>/dev/null || fd -t f 'page.tsx' -x grep -l 'username' {}Repository: StabilityNexus/IdentityTokens-EVM-Frontend Length of output: 525 🏁 Script executed: #!/bin/bash
# Get full SearchModal.tsx content to verify all mentioned issues
fd -t f 'SearchModal.tsx' | head -1 | xargs wc -lRepository: StabilityNexus/IdentityTokens-EVM-Frontend Length of output: 119 🏁 Script executed: #!/bin/bash
# Read SearchModal.tsx to check for console.log, inline styles, and i18n issues
fd -t f 'SearchModal.tsx' | head -1 | xargs cat -nRepository: StabilityNexus/IdentityTokens-EVM-Frontend Length of output: 7327 🏁 Script executed: #!/bin/bash
# Check if there are i18n files in the project
fd -t d 'locales\|i18n\|translations' | head -10Repository: StabilityNexus/IdentityTokens-EVM-Frontend Length of output: 68 Remove console.log, externalize strings to i18n, and replace hardcoded inline styles with Tailwind classes. The code has three issues:
Also consider using 🤖 Prompt for AI Agents |
||
|
|
||
| const handleKeyDown = useCallback( | ||
| (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key === "Escape") onClose(); | ||
| if (e.key === "Enter") handleSubmit(); | ||
| }, | ||
| [onClose, handleSubmit] | ||
| ); | ||
|
|
||
| const searchInput = ( | ||
| <form onSubmit={handleSubmit} className="relative max-w-xs"> | ||
| {/* Search icon */} | ||
| <Search | ||
| className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500" | ||
| aria-hidden | ||
| /> | ||
|
|
||
| {/* Uncontrolled input — no value prop, no re-render per keystroke */} | ||
| <input | ||
| ref={inputRef} | ||
| type="text" | ||
| placeholder="Search by username or Token ID..." | ||
| onChange={handleChange} | ||
| onKeyDown={handleKeyDown} | ||
| autoFocus={!mobile && !inline} | ||
| className={[ | ||
| "w-full rounded-full border py-2 pr-10 pl-10 text-base", | ||
| "bg-white text-slate-950 placeholder-slate-500", | ||
| "dark:bg-slate-950/95 dark:text-white dark:placeholder-slate-400", | ||
| "border-slate-300/80 dark:border-slate-800", | ||
| "outline-0 transition-all duration-150", | ||
| inline ? "max-w-sm" : "", | ||
| ] | ||
| .filter(Boolean) | ||
| .join(" ")} | ||
| /> | ||
|
|
||
| {/* Enter / submit arrow button — visible only when input has content */} | ||
| <button | ||
| type="submit" | ||
| aria-label="Submit search" | ||
| className={[ | ||
| "absolute top-1/2 right-3 -translate-y-1/2", | ||
| "flex items-center justify-center", | ||
| "h-8 w-8 rounded-full", | ||
| "bg-blue-600 text-white", | ||
| "transition-all duration-150", | ||
| "hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none dark:focus:ring-offset-slate-950", | ||
| hasValue | ||
| ? "pointer-events-auto scale-100 opacity-100" | ||
| : "pointer-events-none scale-75 opacity-0", | ||
| ].join(" ")} | ||
| > | ||
| <CornerDownLeft size={12} strokeWidth={2.5} /> | ||
| </button> | ||
| </form> | ||
| ); | ||
|
|
||
| // ── Inline / mobile variant ────────────────────────────────────────────── | ||
| if (mobile || inline) { | ||
| return <div className="w-full">{searchInput}</div>; | ||
| } | ||
|
|
||
| if (!isOpen) return null; | ||
|
|
||
| // ── Modal variant ──────────────────────────────────────────────────────── | ||
| return ( | ||
| <div | ||
| className="animate-in fade-in fixed inset-0 z-[100] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm duration-200" | ||
| onClick={onClose} | ||
| > | ||
| <div | ||
| className="animate-in zoom-in-95 relative w-full max-w-md rounded-2xl p-6 shadow-2xl duration-200" | ||
| style={{ | ||
| backgroundColor: "#18191D", | ||
| border: "1px solid rgba(255,255,255,0.06)", | ||
| }} | ||
| onClick={(e) => e.stopPropagation()} | ||
|
Comment on lines
+135
to
+141
Contributor
There was a problem hiding this comment. 🧹 Nitpick | 🔵 Trivial Prefer theme-aware classes over hardcoded inline styles. The modal container uses hardcoded colors ( ♻️ Proposed fix using theme-aware classes <div
- className="animate-in zoom-in-95 relative w-full max-w-md rounded-2xl p-6 shadow-2xl duration-200"
- style={{
- backgroundColor: "#18191D",
- border: "1px solid rgba(255,255,255,0.06)",
- }}
+ className="animate-in zoom-in-95 relative w-full max-w-md rounded-2xl bg-slate-900 p-6 shadow-2xl duration-200 dark:bg-slate-900 border border-white/5"
onClick={(e) => e.stopPropagation()}
>🤖 Prompt for AI Agents |
||
| > | ||
| {/* Close button */} | ||
| <button | ||
| onClick={onClose} | ||
| aria-label="Close search" | ||
| className="absolute top-4 right-4 rounded-full p-2 text-[#6B7280] transition-colors hover:bg-white/10 hover:text-white focus:ring-2 focus:ring-white/20 focus:outline-none" | ||
| > | ||
| <X size={18} /> | ||
| </button> | ||
|
|
||
| {/* Header */} | ||
| <div className="mb-5"> | ||
| <h2 className="text-xl font-semibold tracking-tight text-white"> | ||
| Search Identity | ||
| </h2> | ||
| <p className="mt-1 text-sm text-[#6B7280]"> | ||
| Search by username or Token ID | ||
| </p> | ||
| </div> | ||
|
|
||
| {/* Search input (with built-in arrow submit button) */} | ||
| {searchInput} | ||
|
|
||
| {/* Hint */} | ||
| <p className="mt-3 text-center text-xs text-slate-500 dark:text-slate-400"> | ||
| Press{" "} | ||
| <kbd className="rounded border border-slate-200/70 bg-slate-50 px-1.5 py-0.5 font-mono text-[10px] text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-400"> | ||
| Enter | ||
| </kbd>{" "} | ||
| or click{" "} | ||
| <span className="inline-flex items-center gap-0.5 text-blue-500"> | ||
| <CornerDownLeft size={10} /> | ||
| </span>{" "} | ||
| to search | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
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.
🛠️ Refactor suggestion | 🟠 Major
Remove
console.logbefore production.Debug logging should be removed or replaced with a proper logging utility that can be disabled in production builds.
♻️ Proposed fix
debounceRef.current = setTimeout(() => { const trimmed = value.trim(); if (trimmed) { - console.log("Debounced search term:", trimmed); // TODO: Add elasticsearch fetch here } }, 300);📝 Committable suggestion
🤖 Prompt for AI Agents