51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { settingsAtom } from "lib/state/settings";
|
|
import { engineTranslation } from "lib/onesearch/translatedEngineList";
|
|
import { settingsType } from "global";
|
|
import { useAtomValue, useSetAtom } from "jotai";
|
|
import Picker, { PickedItem } from "./picker";
|
|
|
|
export default function EngineSelector(props: { className: string }) {
|
|
const { t } = useTranslation();
|
|
const settings: settingsType = useAtomValue(settingsAtom);
|
|
const engines = settings.searchEngines;
|
|
const currentEngine: string = settings.currentSearchEngine;
|
|
const [selected, setSelected] = useState(currentEngine);
|
|
const setSettings = useSetAtom(settingsAtom);
|
|
let engineList: PickedItem = {};
|
|
for (const engineKey of Object.keys(engines)) {
|
|
engineList[engineKey] = getName(engineKey);
|
|
}
|
|
|
|
function getName(engineKey: string) {
|
|
return engineTranslation.includes(engineKey) ? t(`search.engine.${engineKey}`) : engineKey;
|
|
}
|
|
|
|
useEffect(() => {
|
|
function setEngine(engine: string) {
|
|
setSettings((oldSettings: settingsType) => {
|
|
return {
|
|
...oldSettings,
|
|
currentSearchEngine: engine
|
|
};
|
|
});
|
|
}
|
|
if (selected !== currentEngine) {
|
|
setEngine(selected);
|
|
}
|
|
}, [currentEngine, selected, setSettings]);
|
|
|
|
return (
|
|
<Picker
|
|
selectionItems={engineList}
|
|
selected={selected}
|
|
selectionOnChange={(selected) => {
|
|
setSelected(selected);
|
|
}}
|
|
displayContent={getName(selected)}
|
|
className={props.className}
|
|
/>
|
|
);
|
|
}
|