qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

check "no results" in search

Browse Source
This commit is contained in:
Cristian Adán 2022-10-04 20:02:06 +02:00
parent 6e760cbbf1
commit 98175a5c0d
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/search.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Input, Text, Image, HStack, Box, Center } from "@chakra-ui/react"; import { Input, Text, Image, HStack, Box, Center, Spinner } from "@chakra-ui/react";
import useDebounce from "@/hooks/useDebounce"; import useDebounce from "@/hooks/useDebounce";
import { SVGCardProps } from "@/interfaces/components"; import { SVGCardProps } from "@/interfaces/components";
import CustomLink from "@/common/link"; import CustomLink from "@/common/link";
@ -10,6 +10,7 @@ import Tap from "@/animations/tap";
const Search = () => { const Search = () => {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [empty, setEmpty] = useState(false);
const [results, setResults] = useState<SVGCardProps[]>([]); const [results, setResults] = useState<SVGCardProps[]>([]);
const debouncedSearch = useDebounce(search, 500); const debouncedSearch = useDebounce(search, 500);
@ -18,6 +19,7 @@ const Search = () => {
fetch(getSvgByQuery + debouncedSearch).then((res) => { fetch(getSvgByQuery + debouncedSearch).then((res) => {
if (res.ok) { if (res.ok) {
res.json().then((data) => { res.json().then((data) => {
setEmpty(data.length === 0);
setResults(data); setResults(data);
}); });
} }
@ -25,6 +27,11 @@ const Search = () => {
} }
}, [debouncedSearch]); }, [debouncedSearch]);
const handleFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmpty(false);
setSearch(e.target.value);
};
const handleClear = () => { const handleClear = () => {
setSearch(""); setSearch("");
setResults([]); setResults([]);
@ -38,11 +45,13 @@ const Search = () => {
size="lg" size="lg"
placeholder="Search svgs..." placeholder="Search svgs..."
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={handleFilter}
/> />
{search && !empty && results.length === 0 && (<Box pt="4"><Spinner /></Box>)}
{search && empty && (<Box pt="3">No results found!</Box>)}
{results && results.length > 0 && ( {results && results.length > 0 && (
<> <>
<HStack spacing={4} mt={4} overflowX="auto" overflowY="hidden"> <HStack spacing={4} mt={4} overflowX="auto" overflowY="hidden" alignItems="start">
{results.map((item: SVGCardProps) => ( {results.map((item: SVGCardProps) => (
<Tap key={item.title}> <Tap key={item.title}>
<CustomLink href={`/svg/${item.id}`}> <CustomLink href={`/svg/${item.id}`}>