[Syncing] Toastr

[yedhink]

Points to note

• Component in action - Toastr.js
• Github Urls to this component:
  • neeto-ui/Toastr.js
  • NitroUI/Toastr.js
• :green_circle: Green color signifies how that particular line is written in neeto-ui package
• :red_circle: Red color signifies how that particular line is written in NitroUI internals

Sync Required or Not

• Are there significant changes for Toastr.js that needs to be synced to neeto-ui package from NitroUI? - No
• The neetoui version looks better to me. NitroUi internal version even uses dangerouslySetInnerHTML={{ __html: message }}, which seems like an anti-pattern. Therefore in my opinion no sync is required.
• @edwinbbu What do you think?

Diff

--- NitroUI/Toastr.js   2020-11-28 16:54:24.192069500 +0530
+++ neetoui-official/Toastr.js  2020-11-28 16:49:18.763059200 +0530
@@ -1,8 +1,7 @@
 import React from "react";
-import Button from "./Button";
-import classnames from "classnames";
+import { toast, Slide } from "react-toastify";

-const Toastr = ({ type, message, buttonProps }) => {
+const ToastrComponent = ({ type, message }) => {
   let icon;
   switch (type) {
     case "success":
@@ -20,25 +19,33 @@
   }

   return (
-    <div className="flex flex-col items-start justify-center">
-      <div className="flex flex-row justify-start items-start">
-        <i className={classnames([icon, "text-lg"])}></i>
-        <p
-          className="mx-3 font-medium leading-snug text-white"
-          dangerouslySetInnerHTML={{ __html: message }}
-        />
-      </div>
-      {buttonProps && (
-        <div className="pl-8 mt-1">
-          <Button
-            style="link"
-            className="font-semibold text-white underline"
-            {...buttonProps}
-          />
-        </div>
-      )}
+    <div className="flex flex-row items-start justify-start">
+      <i className={icon}></i>
+      <p className="mx-4 font-medium leading-5 text-white">{message}</p>
     </div>
   );
 };

-export default Toastr;
+const showToastr = message => {
+  toast.success(<ToastrComponent type="success" message={message} />, {
+    position: toast.POSITION.BOTTOM_CENTER,
+    transition: Slide,
+  });
+};
+
+const isError = e => e && e.stack && e.message;
+
+const showErrorToastr = error => {
+  const errorMessage = isError(error) ? error.message : error;
+  toast.error(<ToastrComponent type="error" message={errorMessage} />, {
+    position: toast.POSITION.BOTTOM_CENTER,
+    transition: Slide,
+  });
+};
+
+export const Toastr = {
+  success: showToastr,
+  error: showErrorToastr,
+};
+
+export default Toastr;

[edwinbbu]

@yedhink Toastr implementation is better in neetoui and hence changes are required in neetohelp. I have created a separate issue for the same https://github.com/bigbinary/neeto-ui/issues/29

[edwinbbu]

@edwinbbu _a

[edwinbbu]

Closing in favour of #29 .