Added toastr (#24)

Author: sreeram-venkitesh

components/Toastr.jsx

@@ -0,0 +1,29 @@
+
+import { toast } from "react-toastify";
+import { TOASTR_OPTIONS } from "../constants/toastr";
+
+const ToastrComponent = ({ message }) => {
+  return (
+    <div className="flex flex-row items-start justify-start">
+      <p className="text-medium text-black dark:text-white">{message}</p>
+    </div>
+  )
+}
+
+const showToastr = message => {
+  toast( <ToastrComponent message={message}/>, TOASTR_OPTIONS)
+}
+
+const isError = e => e && e.stack && e.message;
+
+const showErrorToastr = error => {
+  const errorMessage = isError(error) ? error.message : error;
+  toast.error( <ToastrComponent message={errorMessage}/>, TOASTR_OPTIONS)
+}
+
+const Toastr = {
+  success: showToastr,
+  error: showErrorToastr
+}
+
+export default Toastr;

constants/toastr.js

@@ -0,0 +1,16 @@
+import { toast, Slide } from "react-toastify";
+
+const TOASTR_OPTIONS = {
+  position: toast.POSITION.TOP_CENTER,
+  transition: Slide,
+  autoClose: 5000,
+  hideProgressBar: false,
+  newestOnTop: false,
+  closeOnClick: true,
+  rtl: false,
+  pauseOnFocusLoss: true,
+  draggable: true,
+  pauseOnHover: true
+};
+
+export { TOASTR_OPTIONS };

package.json

@@ -20,6 +20,7 @@
     "next": "13.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-toastify": "^9.1.1",
     "sass": "^1.57.1"
   },
   "devDependencies": {

pages/index.js

@@ -5,6 +5,7 @@ import { createTheme } from "@uiw/codemirror-themes";
 import { EditorView } from "@codemirror/view";
 
 import Head from "next/head";
+import { ToastContainer } from 'react-toastify';
 import Button from "../components/Button";
 
 import { CODE_EDITOR_THEME } from "../constants/theme";
@@ -31,6 +32,11 @@ export default function Home() {
       </Head>
 
       <main>
+        <ToastContainer 
+          // @Shreya defining this here instead of TOAST_OPTIONS to make implementing dark mode easier
+          // Global state pole vekkam ivide
+          theme="dark" 
+        />
         <p className="text-2xl text-center">JSON STYLE</p>
         <div className="space-y-3 flex-col">
           <div className="flex space-x-3 h-90">

styles/application.scss

@@ -8,3 +8,4 @@
 // components
 @import "./components/button";
 @import "./components/textarea";
+@import "react-toastify/dist/ReactToastify.min.css";

yarn.lock

@@ -689,6 +689,11 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 codemirror@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
@@ -2003,6 +2008,13 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-toastify@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.1.tgz#9280caea4a13dc1739c350d90660a630807bf10b"
+  integrity sha512-pkFCla1z3ve045qvjEmn2xOJOy4ZciwRXm1oMPULVkELi5aJdHCN/FHnuqXq8IwGDLB7PPk2/J6uP9D8ejuiRw==
+  dependencies:
+    clsx "^1.1.1"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"