Custom error management & some improvements

components/Header.tsx

@@ -21,12 +21,13 @@ const Header: FC<Props> = (props) => (
         <Image
             src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
             alt="Logo"
-            layout="intrinsic"
             width={110}
             height={64}
         />
-        <HStack spacing={4}>
+        <HStack spacing={3}>
-            <ColorModeToggler/>
+            <ColorModeToggler
+                variant={useColorModeValue("outline", "solid")}
+            />
             <IconButton
                 as={Link}
                 href="https://github.com/TheDavidDelta/lingva-translate"
@@ -34,6 +35,7 @@ const Header: FC<Props> = (props) => (
                 aria-label="GitHub"
                 icon={<FaGithub />}
                 colorScheme="lingva"
+                variant={useColorModeValue("outline", "solid")}
             />
         </HStack>
     </Flex>

hooks/index.ts

@@ -0,0 +1 @@
+export { default as useToastOnLoad } from "./useToastOnLoad";

hooks/useToastOnLoad.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from "react";
+import { useToast, ToastId, UseToastOptions } from "@chakra-ui/react";
+
+const useToastOnLoad = ({
+    title,
+    description,
+    status,
+    updateDeps
+}: {
+    title: string,
+    description?: string
+    status: "info" | "warning" | "success" | "error",
+    updateDeps?: any
+}): void => {
+    const toast = useToast();
+    const toastId = useRef<ToastId | null>();
+
+    useEffect(() => {
+        if (!description)
+            return;
+
+        const toastOptions: UseToastOptions = {
+            title,
+            description,
+            status,
+            duration: null,
+            isClosable: true,
+            onCloseComplete: () => {
+                toastId.current = null
+            }
+        };
+
+        if (toastId.current)
+            return toast.update(toastId.current, toastOptions);
+        toastId.current = toast(toastOptions);
+    }, [toast, title, description, status, updateDeps]);
+}
+
+export default useToastOnLoad;

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

@@ -6,6 +6,7 @@ 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";
@@ -45,6 +46,14 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation,
 
     const { sourceLangs, targetLangs } = retrieveFiltered(source, target);
 
+    console.log(translation)
+    useToastOnLoad({
+        title: "Unexpected error",
+        description: errorMsg,
+        status: "error",
+        updateDeps: initial
+    });
+
     return statusCode ? (
         <Error statusCode={statusCode} />
     ) : (
@@ -89,7 +98,7 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation,
                         <TranslationArea
                             id="translation"
                             placeholder="Translation"
-                            value={translation}
+                            value={translation ?? ""}
                             readOnly={true}
                         />
                     </Stack>
@@ -132,13 +141,17 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
             }
         }
 
+    const scrapeRes = await googleScrape(source, target, query);
+
     return {
         props: {
-            ...await googleScrape(source, target, query),
+            ...scrapeRes,
             initial: {
                 source, target, query
             }
         },
-        revalidate: 2 * 30 * 24 * 60 * 60 // 2 months
+        revalidate: !scrapeRes.errorMsg && !scrapeRes.statusCode
+            ? 2 * 30 * 24 * 60 * 60 // 2 months
+            : 1
     };
 }

theme.ts

@@ -18,7 +18,7 @@ export default extendTheme({
     },
     config: {
         initialColorMode: "light",
-        useSystemColorMode: true
+        useSystemColorMode: false
     },
     components: {
         Textarea: {