From 7dd7b70db850cf4701167dc0a05a9089dfacc2ea Mon Sep 17 00:00:00 2001 From: Alikia2x Date: Fri, 12 Apr 2024 21:29:12 +0800 Subject: [PATCH] improve: suggestion, modify type decleartion Suggestion now shows a default search option same as query, this behaviour is same as major browsers. --- components/search/engineSelector.tsx | 5 +++-- components/search/onesearch/onesearch.tsx | 22 ++++++++++++++----- components/search/onesearch/suggestion.tsx | 3 +-- components/search/onesearch/suggestionBox.tsx | 4 ++-- components/search/search.tsx | 4 ++-- global.d.ts | 2 +- lib/getSearchEngineName.ts | 17 ++++++++++++++ lib/version.ts | 6 ++--- messages/en-US.json | 3 ++- messages/zh-CN.json | 3 ++- package.json | 2 +- 11 files changed, 51 insertions(+), 20 deletions(-) create mode 100644 lib/getSearchEngineName.ts diff --git a/components/search/engineSelector.tsx b/components/search/engineSelector.tsx index 414931f..ac7ad66 100644 --- a/components/search/engineSelector.tsx +++ b/components/search/engineSelector.tsx @@ -6,12 +6,13 @@ import { useTranslations } from "next-intl"; import { useRecoilValue, useSetRecoilState } from "recoil"; import { settingsState } from "../state/settings"; import { engineTranslation } from "./translatedEngineList"; +import { settingsType } from "@/global"; export default function( props: { className: string } ) { const t = useTranslations("Search"); - const settings: settings = useRecoilValue(settingsState); + const settings: settingsType = useRecoilValue(settingsState); const items = settings.searchEngines; const currentEngine: string = settings.currentSearchEngine; const displayEngine = getName(currentEngine); @@ -20,7 +21,7 @@ export default function( const setSettings = useSetRecoilState(settingsState); function setEngine(engine: string) { - setSettings((oldSettings) => { + setSettings((oldSettings: settingsType) => { return { ...oldSettings, currentSearchEngine: engine diff --git a/components/search/onesearch/onesearch.tsx b/components/search/onesearch/onesearch.tsx index db0b885..53e4711 100644 --- a/components/search/onesearch/onesearch.tsx +++ b/components/search/onesearch/onesearch.tsx @@ -3,28 +3,40 @@ import SuggestionBox from "./suggestionBox"; import Suggestion from "./suggestion"; import { useRecoilValue } from "recoil"; import { queryState } from "@/components/state/query"; -import { Suggestion as SuggestionType, Suggestions } from "search-engine-autocomplete"; -import { useLocale } from "next-intl"; +import { Suggestion as SuggestionType } from "search-engine-autocomplete"; +import { useLocale, useTranslations } from "next-intl"; import { suggestionsResponse } from "@/global"; +import getSearchEngineName from "@/lib/getSearchEngineName"; export default function () { const [suggestion, setSuggetsion] = useState([] as string[]); const [lastUpdate, setLastUpdate] = useState(0); const query = useRecoilValue(queryState); + const engineName = getSearchEngineName(); const lang = useLocale(); + const t = useTranslations("Search"); useEffect(() => { + const searchHelperText = `${t("search-help-text", { engine: engineName })}`; + if (query !== "") setSuggetsion((_) => [`${query}   ${searchHelperText}`]); + else setSuggetsion((_) => []); const time = new Date().getTime().toString(); fetch(`/api/suggestion?q=${query}&l=${lang}&t=${time}`) .then((res) => res.json()) .then((data: suggestionsResponse) => { const suggestions = data.suggestions; if (data.time < lastUpdate) return; - setSuggetsion((_) => { - return suggestions.map((s: SuggestionType) => s.suggestion); + 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]); + }, [query, engineName]); return ( {suggestion.slice(0, 10).map((s: string) => { diff --git a/components/search/onesearch/suggestion.tsx b/components/search/onesearch/suggestion.tsx index 76d25cd..9a06fa1 100644 --- a/components/search/onesearch/suggestion.tsx +++ b/components/search/onesearch/suggestion.tsx @@ -1,7 +1,6 @@ export default function(props: { children: React.ReactNode }) { return ( -
-

{props.children}

+
${props.children}

` as string }} className={`w-full h-10 leading-10 bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-800 hover:dark:bg-zinc-700 px-5 z-10 cursor-pointer duration-100`}>
); } \ No newline at end of file diff --git a/components/search/onesearch/suggestionBox.tsx b/components/search/onesearch/suggestionBox.tsx index bd40c52..70ca5aa 100644 --- a/components/search/onesearch/suggestionBox.tsx +++ b/components/search/onesearch/suggestionBox.tsx @@ -1,7 +1,7 @@ export default function(props: { children: React.ReactNode }) { return ( -
+
{props.children}
); diff --git a/components/search/search.tsx b/components/search/search.tsx index 2ef1784..20064ff 100644 --- a/components/search/search.tsx +++ b/components/search/search.tsx @@ -3,13 +3,13 @@ import { useRecoilState, useRecoilValue } from "recoil"; import { settingsState } from "../state/settings"; import { useTranslations } from "next-intl"; -import { useState } from "react"; import { normalizeURL } from "@/lib/normalizeURL"; import validLink from "@/lib/url/validLink"; import { queryState } from "../state/query"; +import { settingsType } from "@/global"; export default function Search(props: { onFocus: () => void }) { - const settings: settings = useRecoilValue(settingsState); + const settings: settingsType = useRecoilValue(settingsState); const t = useTranslations("Search"); const [query, setQuery] = useRecoilState(queryState); diff --git a/global.d.ts b/global.d.ts index 0dc44c4..e23baee 100644 --- a/global.d.ts +++ b/global.d.ts @@ -1,6 +1,6 @@ import { Suggestion } from "search-engine-autocomplete"; -type settings = { +type settingsType = { version: number; elementBackdrop: boolean; bgBlur: boolean; diff --git a/lib/getSearchEngineName.ts b/lib/getSearchEngineName.ts new file mode 100644 index 0000000..7f8d58e --- /dev/null +++ b/lib/getSearchEngineName.ts @@ -0,0 +1,17 @@ +import { engineTranslation } from "@/components/search/translatedEngineList"; +import { settingsState } from "@/components/state/settings"; +import { settingsType } from "@/global"; +import { useTranslations } from "next-intl"; +import { useRecoilValue } from "recoil"; + +export default function(){ + const settings: settingsType = useRecoilValue(settingsState); + const currentEngine = settings.currentSearchEngine; + const displayEngine = getName(currentEngine); + return displayEngine; +} + +function getName(engineKey: string) { + const t = useTranslations("Search"); + return engineTranslation.includes(engineKey) ? t(`engine.${engineKey}`) : engineKey; +} \ No newline at end of file diff --git a/lib/version.ts b/lib/version.ts index e8c665e..2916744 100644 --- a/lib/version.ts +++ b/lib/version.ts @@ -1,3 +1,3 @@ -export const SPARKHOME_VERSION="4.7.2"; -export const CLIENT_VERSION="4.7.1"; -export const NEXT_API_VERSION="4.7.1"; \ No newline at end of file +export const SPARKHOME_VERSION="4.10.2"; +export const CLIENT_VERSION="4.10.2"; +export const NEXT_API_VERSION="4.10.1"; \ No newline at end of file diff --git a/messages/en-US.json b/messages/en-US.json index 6f79e09..f627d0c 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -10,7 +10,8 @@ "yandex": "Yandex", "yahoo": "Yahoo", "ecosia": "Ecosia" - } + }, + "search-help-text": "Search {engine}" }, "404": { "title": "Page Not Found" diff --git a/messages/zh-CN.json b/messages/zh-CN.json index 915fca0..117c08b 100644 --- a/messages/zh-CN.json +++ b/messages/zh-CN.json @@ -10,7 +10,8 @@ "yandex": "Yandex", "yahoo": "雅虎", "ecosia": "Ecosia" - } + }, + "search-help-text": "{engine} 搜索" }, "404": { "title": "未找到" diff --git a/package.json b/package.json index 4640652..0d0883b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sparkhome", - "version": "4.10.0", + "version": "4.10.2", "private": false, "scripts": { "dev": "next dev",