warn unsaved changes

src/components/MonacoEditor/index.tsx

@@ -34,6 +34,7 @@ export const MonacoEditor = () => {
   const [value, setValue] = React.useState<string | undefined>(json);
 
   const hasError = useJson(state => state.hasError);
+  const getHasChanges = useJson(state => state.getHasChanges);
   const lightmode = useStored(state => (state.lightmode ? "light" : "vs-dark"));
 
   const handleEditorWillMount = React.useCallback(
@@ -68,6 +69,24 @@ export const MonacoEditor = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedSetJson, hasError, value]);
 
+  React.useEffect(() => {
+    const beforeunload = (e: BeforeUnloadEvent) => {
+      if (getHasChanges()) {
+        const confirmationMessage =
+          "Unsaved changes, if you leave before saving  your changes will be lost";
+
+        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
+        return confirmationMessage;
+      }
+    };
+
+    window.addEventListener("beforeunload", beforeunload);
+
+    return () => {
+      window.removeEventListener("beforeunload", beforeunload);
+    };
+  }, [getHasChanges]);
+
   return (
     <StyledWrapper>
       <Editor

src/components/Sidebar/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from "next/link";
 import toast from "react-hot-toast";
 import { AiOutlineDelete, AiOutlineSave, AiOutlineFileAdd, AiOutlineEdit } from "react-icons/ai";
 import { CgArrowsMergeAltH, CgArrowsShrinkH } from "react-icons/cg";
@@ -190,12 +189,10 @@ export const Sidebar: React.FC = () => {
   return (
     <StyledSidebar>
       <StyledTopWrapper>
-        <Link passHref href="/">
-          <StyledElement as={StyledLogo}>
-            <StyledText>J</StyledText>
-            <StyledText secondary>C</StyledText>
-          </StyledElement>
-        </Link>
+        <StyledElement href="/" as={StyledLogo}>
+          <StyledText>J</StyledText>
+          <StyledText secondary>C</StyledText>
+        </StyledElement>
 
         <SidebarButton
           title="Edit JSON"

src/containers/Home/index.tsx

@@ -37,7 +37,7 @@ const Navbar = () => (
       GitHub
     </Styles.StyledNavLink>
     <Link href="docs" passHref>
-      <Styles.StyledNavLink>Docs</Styles.StyledNavLink>
+      <Styles.StyledNavLink>Documentation</Styles.StyledNavLink>
     </Link>
   </Styles.StyledNavbar>
 );

src/store/useJson.tsx

@@ -17,6 +17,7 @@ interface Json {
 interface JsonActions {
   setJson: (json: string) => void;
   getJson: () => string;
+  getHasChanges: () => boolean;
   fetchJson: (jsonId: string | string[] | undefined) => void;
   setError: (hasError: boolean) => void;
   setHasChanges: (hasChanges: boolean) => void;
@@ -35,6 +36,7 @@ export type JsonStates = typeof initialStates;
 const useJson = create<JsonStates & JsonActions>()((set, get) => ({
   ...initialStates,
   getJson: () => get().json,
+  getHasChanges: () => get().hasChanges,
   fetchJson: async jsonId => {
     const isURL = new RegExp(
       /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/