CloudHost/LingvAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add manual translate as default (#33)

Browse Source 
* Added translate and switch auto buttons

* Tests updated

* Added hotkey & improved buttons visually
This commit is contained in:
David
2021-07-12 17:06:27 +02:00
committed by GitHub
parent f537dff588
commit 5870e4b096
13 changed files with 214 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
pages/[[...slug]].tsx
View File

@@ -1,8 +1,10 @@
import { useEffect, useReducer, FC, ChangeEvent } from "react";
import { useEffect, useReducer, useCallback, FC, ChangeEvent } from "react";
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next";
import Router from "next/router";
import dynamic from "next/dynamic";
import { Stack, VStack, HStack, IconButton } from "@chakra-ui/react";
import { FaExchangeAlt } from "react-icons/fa";
import { HiTranslate } from "react-icons/hi";
import { useHotkeys } from "react-hotkeys-hook";
import { CustomHead, LangSelect, TranslationArea } from "@components";
import { useToastOnLoad } from "@hooks";
@@ -10,6 +12,8 @@ import { googleScrape, extractSlug, textToSpeechScrape } from "@utils/translate"
import { retrieveFiltered, replaceBoth } from "@utils/language";
import langReducer, { Actions, initialState } from "@utils/reducer";
const AutoTranslateButton = dynamic(() => import("@components/AutoTranslateButton"), { ssr: false });
const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, translationRes, audio, errorMsg, initial }) => {
const [{ source, target, query, delayedQuery, translation, isLoading }, dispatch] = useReducer(langReducer, initialState);
@@ -23,6 +27,20 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
});
};
const changeRoute = useCallback((customQuery: string) => {
if (isLoading)
return;
if (!customQuery || customQuery === initialState.query)
return;
if (!home && !initial)
return;
if (!home && customQuery === initial.query && source === initial.source && target === initial.target)
return;
dispatch({ type: Actions.SET_FIELD, payload: { key: "isLoading", value: true }});
Router.push(`/${source}/${target}/${encodeURIComponent(customQuery)}`);
}, [isLoading, source, target, home, initial]);
useEffect(() => {
if (home)
return dispatch({ type: Actions.SET_ALL, payload: { state: { ...initialState, isLoading: false } } });
@@ -42,20 +60,6 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
return () => clearTimeout(timeout);
}, [query]);
useEffect(() => {
if (isLoading)
return;
if (!delayedQuery || delayedQuery === initialState.query)
return;
if (!home && !initial)
return;
if (!home && delayedQuery === initial.query && source === initial.source && target === initial.target)
return;
dispatch({ type: Actions.SET_FIELD, payload: { key: "isLoading", value: true }});
Router.push(`/${source}/${target}/${encodeURIComponent(delayedQuery)}`);
}, [source, target, delayedQuery, initial, home, isLoading]);
useEffect(() => {
const handler = (url: string) => url === Router.asPath || dispatch({ type: Actions.SET_FIELD, payload: { key: "isLoading", value: true }});
Router.events.on("beforeHistoryChange", handler);
@@ -114,9 +118,26 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
placeholder="Text"
value={query}
onChange={e => isLoading || handleChange(e)}
onSubmit={useCallback(() => changeRoute(query), [query, changeRoute])}
lang={queryLang}
audio={audio?.source}
/>
<Stack direction={["row", null, "column"]} justify="center" spacing={3} px={[2, null, "initial"]}>
<IconButton
aria-label="Translate"
icon={<HiTranslate />}
colorScheme="lingva"
variant="outline"
onClick={() => changeRoute(query)}
isDisabled={isLoading}
w={["full", null, "auto"]}
/>
<AutoTranslateButton
onAuto={useCallback(() => changeRoute(delayedQuery), [delayedQuery, changeRoute])}
isDisabled={isLoading}
w={["full", null, "auto"]}
/>
</Stack>
<TranslationArea
id="translation"
aria-label="Translation result"