From a80c177440cf22a58e044ee131439bafefc3d80a Mon Sep 17 00:00:00 2001
From: David <info@thedaviddelta.com>
Date: Thu, 8 Apr 2021 22:28:45 +0200
Subject: [PATCH] Added translator cleanup on logo click (#11)

---
 components/Header.tsx           | 17 +++++++++++------
 cypress/integration/app.spec.ts |  7 +++++++
 pages/[[...slug]].tsx           |  2 +-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 06f7892..98930f8 100644
--- a/components/Header.tsx
+++ b/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")}
diff --git a/cypress/integration/app.spec.ts b/cypress/integration/app.spec.ts
index 421a0f3..616d933 100644
--- a/cypress/integration/app.spec.ts
+++ b/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", () => {
diff --git a/pages/[[...slug]].tsx b/pages/[[...slug]].tsx
index 45cb5db..ddf716a 100644
--- a/pages/[[...slug]].tsx
+++ b/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);
     }, []);