alikia2x/sparkast
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

preparing: ready to refactor onesearch effect logic

Browse Source
This commit is contained in:
Alikia2x 2024-04-13 20:30:20 +08:00
parent 50c526c095
commit a136c0ab9b
2 changed files with 9 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/search/onesearch/onesearch.tsx
View File

@ -5,43 +5,31 @@ import { useRecoilValue } from "recoil";
import { queryState } from "@/components/state/query"; import { queryState } from "@/components/state/query";
import { Suggestion as SuggestionType } from "search-engine-autocomplete"; import { Suggestion as SuggestionType } from "search-engine-autocomplete";
import { useLocale, useTranslations } from "next-intl"; import { useLocale, useTranslations } from "next-intl";
import { suggestionsResponse } from "@/global"; import { suggestionItem, suggestionsResponse } from "@/global";
import getSearchEngineName from "@/lib/getSearchEngineName"; import getSearchEngineName from "@/lib/getSearchEngineName";
export default function () { export default function () {
const [suggestion, setSuggetsion] = useState([] as string[]); const [suggestion, setSuggetsion] = useState([] as suggestionItem[]);
const [lastUpdate, setLastUpdate] = useState(0); const [lastUpdate, setLastUpdate] = useState(0);
const query = useRecoilValue(queryState); const query = useRecoilValue(queryState);
const engineName = getSearchEngineName(); const engineName = getSearchEngineName();
const lang = useLocale(); const lang = useLocale();
const t = useTranslations("Search"); const t = useTranslations("Search");
useEffect(() => { useEffect(() => {
const searchHelperText = `<span class="text-zinc-500">${t("search-help-text", { engine: engineName })}</span>`;
if (query !== "") setSuggetsion((_) => [`${query} &nbsp; ${searchHelperText}`]);
else setSuggetsion((_) => []);
const time = new Date().getTime().toString(); const time = new Date().getTime().toString();
fetch(`/api/suggestion?q=${query}&l=${lang}&t=${time}`) fetch(`/api/suggestion?q=${query}&l=${lang}&t=${time}`)
.then((res) => res.json()) .then((res) => res.json())
.then((data: suggestionsResponse) => { .then((data: suggestionsResponse) => {
const suggestions = data.suggestions;
if (data.time < lastUpdate) return;
let result = suggestions.map((s: SuggestionType) => s.suggestion);
result = result.filter(function (item, pos, self) {
return self.indexOf(item) == pos;
});
setSuggetsion((oldSuggestions) => {
return oldSuggestions.concat(result).filter(function (item, pos, self) {
return self.indexOf(item) == pos;
});
});
setLastUpdate(new Date().getTime());
}); });
}, [query, engineName]); }, [query, engineName]);
useEffect(() => {
setLastUpdate(new Date().getTime());
}, [query]);
return ( return (
<SuggestionBox> <SuggestionBox>
{suggestion.slice(0, 10).map((s: string) => {
return <Suggestion key={s}>{s}</Suggestion>;
})}
</SuggestionBox> </SuggestionBox>
); );
} }

2
components/search/onesearch/suggestionBox.tsx
View File

@ -1,4 +1,4 @@
export default function(props: { children: React.ReactNode }) { export default function(props: { children?: React.ReactNode }) {
return ( return (
<div className={`relative bg-zinc-100 dark:bg-zinc-800 w-11/12 sm:w-[700px] h-auto left-1/2 <div className={`relative bg-zinc-100 dark:bg-zinc-800 w-11/12 sm:w-[700px] h-auto left-1/2
translate-x-[-50%] top-72 z-20 rounded-md overflow-hidden duration-250 ${props.children ? "opacity-100" : "opacity-0"}`}> translate-x-[-50%] top-72 z-20 rounded-md overflow-hidden duration-250 ${props.children ? "opacity-100" : "opacity-0"}`}>