feat: show notification for errors

amirhhashemi · Jul 21, 2022 · de61c28 · de61c28
1 parent 4365a65
commit de61c28
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "prosemirror-state": "^1.4.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-hot-toast": "^2.3.0",
     "react-icons": "^4.4.0",
     "zustand": "^4.0.0-rc.1"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,16 @@
 import { RichTextEditor } from "./components/editor/RichTextEditor";
+import { Toaster } from "react-hot-toast";
 
 function App() {
   return (
     <div dir="rtl">
       <RichTextEditor />
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          className: "bg-black text-white text-bold",
+        }}
+      />
     </div>
   );
 }

diff --git a/src/components/editor/Toolbar.tsx b/src/components/editor/Toolbar.tsx
@@ -1,4 +1,4 @@
-import Compressor from "compressorjs";
+import toast from "react-hot-toast";
 
 import { useState, useRef } from "react";
 import { Editor } from "@tiptap/react";
@@ -56,7 +56,7 @@ export const Toolbar = ({ editor }: ToolbarProps) => {
     const file: File = e.target.files[0];
 
     if (file.size > maxImageSize) {
-      console.error(
+      toast.error(
         `حجم تصاویر حداکثر میتواند ${maxImageSize / 1000000} مگابایت باشد`
       );
       return;

diff --git a/src/components/editor/extensions/RichText.tsx b/src/components/editor/extensions/RichText.tsx
@@ -1,3 +1,4 @@
+import toast from "react-hot-toast";
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import Underline from "@tiptap/extension-underline";
@@ -21,7 +22,9 @@ export const RichText = Extension.create({
       CodeBlock,
       Heading,
       Underline,
-      Figure,
+      Figure.configure({
+        onError: (e) => toast.error(e.message),
+      }),
       SmilieReplacer,
       TextDirection.configure({
         types: ["paragraph", "heading", "blockquote", "listItem"],

diff --git a/yarn.lock b/yarn.lock
@@ -1005,6 +1005,11 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
+goober@^2.1.10:
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.10.tgz#058def43ba1e3b06f973dbb372a4978aa42f1049"
+  integrity sha512-7PpuQMH10jaTWm33sQgBQvz45pHR8N4l3Cu3WMGEWmHShAcTuuP7I+5/DwKo39fwti5A80WAjvqgz6SSlgWmGA==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -1357,6 +1362,13 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hot-toast@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.3.0.tgz#70b3d183ac2a4afb6b17cda4a7f4cfe02e730415"
+  integrity sha512-/RxV+bfjld7tSJR1SCLzMAXgFuNW7fCpK6+vbYqfmbGSWcqTMz2rizrvfWKvtcPH5HK0NqxmBaC5SrAy1F42zA==
+  dependencies:
+    goober "^2.1.10"
+
 react-icons@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"