feat: use toasts for dynamic activity editor

front/components/Editor/EditorWrapper.tsx

@@ -3,6 +3,8 @@ import * as Y from "yjs";
 import { WebrtcProvider } from "y-webrtc";
 import Editor from "./Editor";
 import { updateActivity } from "@services/courses/activities";
+import { toast } from "react-hot-toast";
+import Toast from "@components/UI/Toast/Toast";
 
 interface EditorWrapperProps {
   content: string;
@@ -25,18 +27,31 @@ function EditorWrapper(props: EditorWrapperProps) : JSX.Element {
     setIsLoading(false);
   }
 
+
+
   async function setContent(content: any) {
     let activity = props.activity;
     activity.content = content;
-    const res = await updateActivity(activity, activity.activity_id);
+
-    alert(JSON.stringify(res));
+    toast.promise(
+      updateActivity(activity, activity.activity_id),
+      {
+        loading: 'Saving...',
+        success: <b>Activity saved!</b>,
+        error: <b>Could not save.</b>,
+      }
+    );
   }
 
   if (isLoading) {
     createRTCProvider();
     return <div>Loading...</div>;
   } else {
-    return <Editor orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
+    return <>
+      <Toast></Toast>
+      <Editor orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
+
+    </>
   }
 }
 

front/components/UI/Toast/Toast.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Toaster } from 'react-hot-toast';
+
+
+function Toast() {
+    return (
+        <><Toaster /></>
+    )
+}
+
+export default Toast

front/package-lock.json

@@ -31,6 +31,7 @@
         "react": "^18.2.0",
         "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^18.2.0",
+        "react-hot-toast": "^2.4.1",
         "react-katex": "^3.0.1",
         "react-spinners": "^0.13.8",
         "styled-components": "^6.0.0-beta.9",
@@ -6952,6 +6953,21 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13070,6 +13086,14 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "requires": {
+        "goober": "^2.1.10"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

front/package.json

@@ -32,6 +32,7 @@
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-katex": "^3.0.1",
     "react-spinners": "^0.13.8",
     "styled-components": "^6.0.0-beta.9",