wip

Signed-off-by: David Edler <david.edler@canonical.com>
canonical · Dec 1, 2023 · ed6057e · ed6057e
1 parent 2c26f31
commit ed6057e
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "react": "18.2.0",
     "react-cytoscapejs": "2.0.0",
     "react-dom": "18.2.0",
+    "react-hot-toast": "2.4.0",
     "react-router-dom": "6.17.0",
     "react-scripts": "5.0.1",
     "react-useportal": "^1.0.18",

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
@@ -1,7 +1,98 @@
 import React, { FC } from "react";
-import { NotificationConsumer, Row } from "@canonical/react-components";
+import {
+  Row,
+  NotificationConsumer,
+  Notification as NotificationComponent,
+  Button,
+  useNotify,
+} from "@canonical/react-components";
+import toast, { Toaster } from "react-hot-toast";
+
+const makeToast = () =>
+  toast.custom(
+    <NotificationComponent
+      severity="positive"
+      onDismiss={() => toast.remove()}
+      style={{ maxWidth: "40rem", marginRight: "1.4rem", marginTop: "3rem" }}
+      title="New instance created"
+    >
+      You have successfully launched <a href="/">lunar-lobster</a>
+    </NotificationComponent>,
+    {
+      duration: 30000,
+      position: "top-right",
+    },
+  );
+
+const makeToastError = () =>
+  toast.custom(
+    <NotificationComponent
+      severity="negative"
+      onDismiss={() => toast.remove()}
+      style={{ maxWidth: "40rem", marginRight: "1.4rem", marginTop: "3rem" }}
+      title="Instance creation failed"
+    >
+      We were not able to create the requested instance.
+      <hr />
+      <Button appearance="link" className="u-float-right">
+        Try again
+      </Button>
+    </NotificationComponent>,
+    {
+      duration: Infinity,
+      position: "top-right",
+    },
+  );
+
+const makeToastCenter = () =>
+  toast.custom(
+    <NotificationComponent
+      severity="positive"
+      onDismiss={() => toast.remove()}
+      style={{ maxWidth: "40rem" }}
+      title="New instance created"
+    >
+      You have successfully launched <a href="/">lunar-lobster</a>
+    </NotificationComponent>,
+    {
+      duration: 2000,
+    },
+  );
+
+const makeToastErrorCenter = () =>
+  toast.custom(
+    <NotificationComponent
+      severity="negative"
+      onDismiss={() => toast.remove()}
+      style={{ maxWidth: "40rem" }}
+      title="Instance creation failed"
+    >
+      We were not able to create the requested instance.
+      <hr />
+      <Button appearance="link" className="u-float-right">
+        Try again
+      </Button>
+    </NotificationComponent>,
+    {
+      duration: Infinity,
+    },
+  );
 
 const NotificationRow: FC = () => {
+  const notify = useNotify();
+
+  if (!notify.notification) {
+    return (
+      <div>
+        <button onClick={makeToast}>Make me a toast</button>
+        <button onClick={makeToastError}>Make me an error</button>
+        <button onClick={makeToastCenter}>Make me an toast center</button>
+        <button onClick={makeToastErrorCenter}>Make me an error center</button>
+        <Toaster />
+      </div>
+    );
+  }
+
   return (
     <Row>
       <NotificationConsumer />

diff --git a/yarn.lock b/yarn.lock
@@ -6923,6 +6923,11 @@ globrex@^0.1.2:
   resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
   integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
 
+goober@^2.1.10:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.12.tgz#6c1645314ac9a68fe76408e1f502c63df8a39042"
+  integrity sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -10229,6 +10234,13 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-hot-toast@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.0.tgz#b91e7a4c1b6e3068fc599d3d83b4fb48668ae51d"
+  integrity sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==
+  dependencies:
+    goober "^2.1.10"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"