Added translator cleanup on logo click (#11)

components/Header.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import NextLink from "next/link";
 import { Flex, HStack, IconButton, Link, useColorModeValue } from "@chakra-ui/react";
 import { FaGithub } from "react-icons/fa";
 import Image from "next/image";
@@ -19,12 +20,16 @@ const Header: FC<Props> = (props) => (
         w="full"
         {...props}
     >
-        <Image
-            src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
-            alt="Logo"
-            width={110}
-            height={64}
-        />
+        <NextLink href="/" passHref={true}>
+            <Link display="flex">
+                <Image
+                    src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
+                    alt="Logo"
+                    width={110}
+                    height={64}
+                />
+            </Link>
+        </NextLink>
         <HStack spacing={3}>
             <ColorModeToggler
                 variant={useColorModeValue("outline", "solid")}

cypress/integration/app.spec.ts

@@ -72,6 +72,7 @@ it("switches first loaded page and back and forth on language change", () => {
     cy.visit(`/auto/en/${query}`);
 
     cy.findByRole("textbox", { name: /translation query/i })
+        .as("query")
         .should("have.value", query);
     cy.findByRole("combobox", { name: /source language/i })
         .as("source")
@@ -82,6 +83,12 @@ it("switches first loaded page and back and forth on language change", () => {
         .select("auto")
         .url()
         .should("include", `/auto/en/${encodeURIComponent(query)}`);
+    cy.findByRole("link", { name: /logo/i })
+        .click()
+        .url()
+        .should("not.include", "/auto/en")
+        .get("@query")
+        .should("be.empty");
 });
 
 it("language switching button is disabled on 'auto', but enables when other", () => {

pages/[[...slug]].tsx

@@ -56,7 +56,7 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
     }, [source, target, delayedQuery, initial, home, isLoading]);
 
     useEffect(() => {
-        const handler = () => dispatch({ type: Actions.SET_FIELD, payload: { key: "isLoading", value: true }});
+        const handler = (url: string) => url === Router.asPath || dispatch({ type: Actions.SET_FIELD, payload: { key: "isLoading", value: true }});
         Router.events.on("beforeHistoryChange", handler);
         return () => Router.events.off("beforeHistoryChange", handler);
     }, []);