LumeWeb
/
web3.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: some interactivity to the searchbar

This commit is contained in:
Juan Di Toro 2023-11-22 12:46:56 +01:00
parent f44a5a35df
commit 211b8ceb3f
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Feed.tsx
View File

@ -28,7 +28,7 @@ const Feed = ({
async (overwrite: boolean = false) => { async (overwrite: boolean = false) => {
const response = await fetchFeedData({ const response = await fetchFeedData({
filter: { timerange: selectedFilter }, filter: { timerange: selectedFilter },
next: dataResponse?.next, next: dataResponse?.next ?? undefined,
current: dataResponse?.current, current: dataResponse?.current,
limit: 5 limit: 5
}) })

27
src/components/SearchBar.tsx
View File

@ -24,6 +24,7 @@ const SearchBar = ({ }: Props) => {
const inputRef = useRef<HTMLInputElement>() const inputRef = useRef<HTMLInputElement>()
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [activeInput, setActiveInput] = useState(true) const [activeInput, setActiveInput] = useState(true)
const [dirtyInput, setDirtyInput] = useState(false)
const [results, setResults] = useState<SearchResult[]>([]) const [results, setResults] = useState<SearchResult[]>([])
const handleSearch = useCallback( const handleSearch = useCallback(
@ -61,27 +62,30 @@ const SearchBar = ({ }: Props) => {
] ]
) )
const isActive = results.length > 0 || dirtyInput
useEffect(() => { useEffect(() => {
if (searchParams.get("q") && searchParams.get("q") !== "") { if (!dirtyInput && searchParams.get("q") && searchParams.get("q") !== "") {
handleSearch() handleSearch()
} }
}, [searchParams, handleSearch]) }, [])
return ( return (
<div <div
className={`w-full mt-8 p-4 border-2 ${ className={`w-full mt-8 p-4 border-2 ${
results.length > 0 ? "border-sky-300 bg-gray-950" : "border-primary" isActive ? "border-sky-300 bg-gray-950" : "border-primary"
}`} }`}
> >
<form className={`flex items-center text-lg`} onSubmit={handleSearch}> <form className={`flex items-center text-lg`} onSubmit={handleSearch}>
{isLoading || results.length > 0 ? ( {isLoading || isActive ? (
<span className="text-white mr-2">Searching for</span> <span className="text-white mr-2">Searching for</span>
) : null} ) : null}
{activeInput ? ( {activeInput ? (
<fieldset <fieldset
className={`block w-full p-0 h-auto flex-1 overflow-hidden`} className={`block w-full p-0 h-auto flex-1 overflow-hidden`}
> >
{results.length > 0 ? ( {isActive ? (
<span className="text-blue-300 underline-offset-4 underline mr-[-0.5px]"> <span className="text-blue-300 underline-offset-4 underline mr-[-0.5px]">
{'"'} {'"'}
</span> </span>
@ -95,12 +99,12 @@ const SearchBar = ({ }: Props) => {
} }
}} }}
className={`flex-grow inline bg-transparent text-white placeholder-gray-400 outline-none ring-none ${ 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` ? `text-blue-300 p-0 underline underline-offset-4`
: "w-full p-2" : "w-full p-2"
}`} }`}
placeholder={ placeholder={
results.length === 0 isActive
? "Search for web3 news from the community" ? "Search for web3 news from the community"
: undefined : undefined
} }
@ -113,9 +117,14 @@ const SearchBar = ({ }: Props) => {
} }
: undefined : undefined
} }
onChange={(e) => setQuery(e.target.value)} onChange={(e) => {
if(!dirtyInput) {
setDirtyInput(true);
}
setQuery(e.target.value)
}}
/> />
{results.length > 0 ? ( {isActive ? (
<span className="text-blue-300 underline-offset-4 underline ml-[-5.5px]"> <span className="text-blue-300 underline-offset-4 underline ml-[-5.5px]">
{'"'} {'"'}
</span> </span>