diff --git a/src/components/Feed.tsx b/src/components/Feed.tsx index 5e33fb5..bda4766 100644 --- a/src/components/Feed.tsx +++ b/src/components/Feed.tsx @@ -28,7 +28,7 @@ const Feed = ({ async (overwrite: boolean = false) => { const response = await fetchFeedData({ filter: { timerange: selectedFilter }, - next: dataResponse?.next, + next: dataResponse?.next ?? undefined, current: dataResponse?.current, limit: 5 }) diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 61237e0..4d01e40 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -24,6 +24,7 @@ const SearchBar = ({ }: Props) => { const inputRef = useRef() const [isLoading, setIsLoading] = useState(false) const [activeInput, setActiveInput] = useState(true) + const [dirtyInput, setDirtyInput] = useState(false) const [results, setResults] = useState([]) const handleSearch = useCallback( @@ -61,27 +62,30 @@ const SearchBar = ({ }: Props) => { ] ) + const isActive = results.length > 0 || dirtyInput + useEffect(() => { - if (searchParams.get("q") && searchParams.get("q") !== "") { + if (!dirtyInput && searchParams.get("q") && searchParams.get("q") !== "") { handleSearch() } - }, [searchParams, handleSearch]) + }, []) + return (
0 ? "border-sky-300 bg-gray-950" : "border-primary" + isActive ? "border-sky-300 bg-gray-950" : "border-primary" }`} >
- {isLoading || results.length > 0 ? ( + {isLoading || isActive ? ( Searching for ) : null} {activeInput ? (
- {results.length > 0 ? ( + {isActive ? ( {'"'} @@ -95,12 +99,12 @@ const SearchBar = ({ }: Props) => { } }} className={`flex-grow inline bg-transparent text-white placeholder-gray-400 outline-none ring-none ${ - results.length > 0 + isActive ? `text-blue-300 p-0 underline underline-offset-4` : "w-full p-2" }`} placeholder={ - results.length === 0 + isActive ? "Search for web3 news from the community" : undefined } @@ -113,9 +117,14 @@ const SearchBar = ({ }: Props) => { } : undefined } - onChange={(e) => setQuery(e.target.value)} + onChange={(e) => { + if(!dirtyInput) { + setDirtyInput(true); + } + setQuery(e.target.value) + }} /> - {results.length > 0 ? ( + {isActive ? ( {'"'}