components/Searching/SearchModal.tsx

import useDebouncedState from "@/hooks/useDebouncedState";
import { Button, CircularProgress, TextField } from "@mui/material";
import { useEffect, useState } from "react";
import { MdClose } from "react-icons/md";
import SearchResult from "./SearchResult";

type SearchModalProps = {
    onClose: () => void;
};

export type SearchResultItem = {
    title?: string;
    description?: string;
    data: string;
    match: "title" | "description" | "data";
    url: string;
};

export default function SearchModal({ onClose }: SearchModalProps) {
    const [query, isQueued, setQuery] = useDebouncedState<string | null>(
        null,
        500,
    );
    const [results, setResults] = useState<SearchResultItem[] | null>(null);
    const [isLoading, setIsLoading] = useState(false);
    const [isNotFound, setIsNotFound] = useState(false);

    useEffect(() => {
        if (!query?.trim()) {
            return;
        }

        console.log(query);

        const controller = new AbortController();

        if (!isLoading) {
            setIsLoading(true);
        }

        fetch(`/search?q=${encodeURIComponent(query)}`, {
            signal: controller.signal,
        })
            .then(response => response.json())
            .then(data => {
                if (isNotFound) {
                    setIsNotFound(false);
                }

                setIsLoading(false);
                setResults(data.results);

                if (data.results.length === 0) {
                    setIsNotFound(true);
                }
            })
            .catch(console.error);

        return () => controller.abort();
    }, [query]);

    return (
        <>
            <div
                className="h-[100vh] w-[100vw] fixed top-0 left-0 bg-[rgba(0,0,0,0.3)] z-[10001]"
                onClick={onClose}
            >
                <div
                    onClick={event => event.stopPropagation()}
                    className="max-h-[95vh] block z-[10002] shadow-[0_0_1px_1px_rgba(255,255,255,0.2)] fixed bottom-[10px] lg:top-[50vh] left-[50%] translate-x-[-50%] lg:translate-y-[-50%] bg-[#222] min-h-[50vh] overflow-y-scroll w-[calc(100%-20px)] lg:w-[auto] md:min-w-[50vw] rounded-md p-4"
                >
                    <div className="text-xl lg:text-2xl text-center mb-5 grid grid-cols-[1fr_5fr_1fr]">
                        <span></span>
                        <span>Search Docs</span>
                        <div className="flex justify-end">
                            <Button
                                style={{ minWidth: 0, color: "white" }}
                                onClick={onClose}
                            >
                                <MdClose />
                            </Button>
                        </div>
                    </div>

                    <TextField
                        fullWidth
                        autoFocus
                        type="text"
                        variant="outlined"
                        placeholder="Type here to search"
                        onChange={event => setQuery(event.target.value.trim())}
                        onKeyUp={event => {
                            if (!(event.target as HTMLInputElement).value) {
                                setQuery(null);
                                setResults(null);
                            }

                            if (isNotFound) {
                                setIsNotFound(false);
                            }
                        }}
                    />
                    <br />
                    <div className="mt-4">
                        {isLoading ? (
                            <div className="flex justify-center items-center">
                                <CircularProgress />
                            </div>
                        ) : results && results.length > 0 && !isNotFound ? (
                            <>
                                {results?.length && (
                                    <>
                                        <p className="text-[#aaa] text-sm">
                                            Found {results.length} results.
                                        </p>
                                        <br />
                                    </>
                                )}

                                {results?.map((result, index) => (
                                    <SearchResult
                                        result={result}
                                        query={query ?? ""}
                                        key={index}
                                        onClick={onClose}
                                    />
                                ))}
                            </>
                        ) : isNotFound ? (
                            <h3 className="text-lg md:text-xl text-center">
                                No results found.{" "}
                                <span className="text-[#999]">
                                    Maybe search again with a different
                                    keyboard?
                                </span>
                            </h3>
                        ) : (
                            ""
                        )}
                    </div>
                </div>
            </div>
        </>
    );
}
1	rakinar2	577	import useDebouncedState from "@/hooks/useDebouncedState";
2			import { Button, CircularProgress, TextField } from "@mui/material";
3			import { useEffect, useState } from "react";
4			import { MdClose } from "react-icons/md";
5			import SearchResult from "./SearchResult";
6
7			type SearchModalProps = {
8			onClose: () => void;
9			};
10
11			export type SearchResultItem = {
12			title?: string;
13			description?: string;
14			data: string;
15			match: "title" \| "description" \| "data";
16			url: string;
17			};
18
19			export default function SearchModal({ onClose }: SearchModalProps) {
20			const [query, isQueued, setQuery] = useDebouncedState<string \| null>(
21			null,
22			500,
23			);
24			const [results, setResults] = useState<SearchResultItem[] \| null>(null);
25			const [isLoading, setIsLoading] = useState(false);
26			const [isNotFound, setIsNotFound] = useState(false);
27
28			useEffect(() => {
29			if (!query?.trim()) {
30			return;
31			}
32
33			console.log(query);
34
35			const controller = new AbortController();
36
37			if (!isLoading) {
38			setIsLoading(true);
39			}
40
41			fetch(`/search?q=${encodeURIComponent(query)}`, {
42			signal: controller.signal,
43			})
44			.then(response => response.json())
45			.then(data => {
46			if (isNotFound) {
47			setIsNotFound(false);
48			}
49
50			setIsLoading(false);
51			setResults(data.results);
52
53			if (data.results.length === 0) {
54			setIsNotFound(true);
55			}
56			})
57			.catch(console.error);
58
59			return () => controller.abort();
60			}, [query]);
61
62			return (
63			<>
64			<div
65			className="h-[100vh] w-[100vw] fixed top-0 left-0 bg-[rgba(0,0,0,0.3)] z-[10001]"
66			onClick={onClose}
67			>
68			<div
69			onClick={event => event.stopPropagation()}
70			className="max-h-[95vh] block z-[10002] shadow-[0_0_1px_1px_rgba(255,255,255,0.2)] fixed bottom-[10px] lg:top-[50vh] left-[50%] translate-x-[-50%] lg:translate-y-[-50%] bg-[#222] min-h-[50vh] overflow-y-scroll w-[calc(100%-20px)] lg:w-[auto] md:min-w-[50vw] rounded-md p-4"
71			>
72			<div className="text-xl lg:text-2xl text-center mb-5 grid grid-cols-[1fr_5fr_1fr]">
73			<span></span>
74			<span>Search Docs</span>
75			<div className="flex justify-end">
76			<Button
77			style={{ minWidth: 0, color: "white" }}
78			onClick={onClose}
79			>
80			<MdClose />
81			</Button>
82			</div>
83			</div>
84
85			<TextField
86			fullWidth
87			autoFocus
88			type="text"
89			variant="outlined"
90			placeholder="Type here to search"
91			onChange={event => setQuery(event.target.value.trim())}
92			onKeyUp={event => {
93			if (!(event.target as HTMLInputElement).value) {
94			setQuery(null);
95			setResults(null);
96			}
97
98			if (isNotFound) {
99			setIsNotFound(false);
100			}
101			}}
102			/>
103			<br />
104			<div className="mt-4">
105			{isLoading ? (
106			<div className="flex justify-center items-center">
107			<CircularProgress />
108			</div>
109			) : results && results.length > 0 && !isNotFound ? (
110			<>
111			{results?.length && (
112			<>
113			<p className="text-[#aaa] text-sm">
114			Found {results.length} results.
115			</p>
116			<br />
117			</>
118			)}
119
120			{results?.map((result, index) => (
121			<SearchResult
122			result={result}
123			query={query ?? ""}
124			key={index}
125			onClick={onClose}
126			/>
127			))}
128			</>
129			) : isNotFound ? (
130			<h3 className="text-lg md:text-xl text-center">
131			No results found.{" "}
132			<span className="text-[#999]">
133			Maybe search again with a different
134			keyboard?
135			</span>
136			</h3>
137			) : (
138			""
139			)}
140			</div>
141			</div>
142			</div>
143			</>
144			);
145			}