import { useState, useEffect, useReducer, FC, ChangeEvent } from "react"; import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next"; import Head from "next/head"; import Router from "next/router"; import Error from "next/error"; import { Stack, VStack, HStack, IconButton } from "@chakra-ui/react"; import { FaExchangeAlt } from "react-icons/fa"; import { Header, Footer, LangSelect, TranslationArea } from "../components"; import { useToastOnLoad } from "../hooks"; import { googleScrape, extractSlug } from "../utils/translate"; import { retrieveFiltered } from "../utils/language"; import langReducer, { Actions, initialState } from "../utils/reducer"; const Page: FC> = ({ translation, statusCode, errorMsg, initial }) => { const [{ source, target, query }, dispatch] = useReducer(langReducer, initialState); const [delayedQuery, setDelayedQuery] = useState(initialState.query); const handleChange = (e: ChangeEvent) => { dispatch({ type: Actions.SET_FIELD, payload: { key: e.target.id, value: e.target.value } }); }; useEffect(() => { initial && dispatch({ type: Actions.SET_ALL, payload: { state: initial }}); }, [initial]); useEffect(() => { const timeout = setTimeout(() => setDelayedQuery(query), 1000); return () => clearTimeout(timeout); }, [query]); useEffect(() => { const queryIsEmpty = !delayedQuery || delayedQuery === initialState.query; const queryIsInitial = delayedQuery === initial?.query; const sourceIsInitial = source === initialState.source || source === initial?.source; const targetIsInitial = target === initialState.target || source === initial?.target; const allAreInitials = queryIsInitial && sourceIsInitial && targetIsInitial; queryIsEmpty || allAreInitials || Router.push(`/${source}/${target}/${encodeURIComponent(delayedQuery)}`); }, [source, target, delayedQuery, initial]); const { sourceLangs, targetLangs } = retrieveFiltered(source, target); console.log(translation) useToastOnLoad({ title: "Unexpected error", description: errorMsg, status: "error", updateDeps: initial }); return statusCode ? ( ) : ( <> Lingva Translate
} colorScheme="lingva" variant="ghost" onClick={() => dispatch({ type: Actions.SWITCH_LANGS })} isDisabled={source === "auto"} />