add toast messages

package.json

@@ -17,6 +17,7 @@
     "next-transpile-modules": "^9.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",
     "react-json-editor-ajrm": "^2.5.13",
     "react-split-pane": "^0.1.92",

src/containers/LiveEditor/index.tsx

@@ -19,6 +19,7 @@ import {
   AiFillSave,
 } from "react-icons/ai";
 import { useLoading } from "src/hooks/useLoading";
+import toast from "react-hot-toast";
 
 const StyledLiveEditor = styled.div`
   position: relative;
@@ -90,6 +91,11 @@ export const LiveEditor: React.FC<{
     }
   };
 
+  const handleSave = () => {
+    localStorage.setItem("json", json);
+    toast.success("Saved JSON successfully!");
+  };
+
   if (pageLoaded)
     return (
       <StyledLiveEditor>
@@ -135,7 +141,7 @@ export const LiveEditor: React.FC<{
             <Button onClick={() => wrapperRef.current?.resetTransform()}>
               <AiOutlineFullscreen size={24} />
             </Button>
-            <Button onClick={() => localStorage.setItem("json", json)}>
+            <Button onClick={handleSave}>
               <AiFillSave size={24} />
             </Button>
           </StyledControls>

src/pages/_app.tsx

@@ -7,9 +7,9 @@ import { ThemeProvider } from "styled-components";
 import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme } from "src/constants/theme";
 import { Loading } from "src/components/Loading";
-import { useLoading } from "src/hooks/useLoading";
+import { Toaster } from "react-hot-toast";
 
-function AykutSarac({ Component, pageProps }: AppProps) {
+function JsonVisio({ Component, pageProps }: AppProps) {
   const router = useRouter();
 
   const [pageLoading, setPageLoading] = React.useState<boolean>(false);
@@ -41,8 +41,17 @@ function AykutSarac({ Component, pageProps }: AppProps) {
     <ThemeProvider theme={darkTheme}>
       <GlobalStyle />
       <Component {...pageProps} />
+      <Toaster
+        position="top-right"
+        toastOptions={{
+          style: {
+            background: "#4D4D4D",
+            color: "#B9BBBE",
+          },
+        }}
+      />
     </ThemeProvider>
   );
 }
 
-export default AykutSarac;
+export default JsonVisio;

src/utils/json-editor-parser.ts

@@ -1,3 +1,5 @@
+import toast from "react-hot-toast";
+
 export const parser = (input: string | string[]) => {
   try {
     if (typeof input !== "object") input = JSON.parse(input);
@@ -49,7 +51,7 @@ export const parser = (input: string | string[]) => {
 
     return [...flatten(res), ...relationships(res)];
   } catch (error) {
-    console.error("An error occured while parsin JSON data!");
+    toast.error("An error occured while parsin JSON data!");
     return [];
   }
 };

yarn.lock

@@ -2635,6 +2635,11 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+goober@^2.1.1:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.8.tgz#e592c04d093cb38f77b38cfcb012b7811c85765e"
+  integrity sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==
+
 graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.9"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
@@ -4170,6 +4175,13 @@ react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-hot-toast@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"
+  integrity sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==
+  dependencies:
+    goober "^2.1.1"
+
 react-icons@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"