Web component toasts

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Styling for the instructions code snippets (#795)
 - Styling for the instructions code blocks (#794, #808)
 - quizReady custom event (#812)
+- Toast save reminder to web component (#822)
 
 ### Changed
 

src/assets/stylesheets/InternalStyles.scss

@@ -1,3 +1,5 @@
+@use "../../../node_modules/react-toastify/scss/main.scss" as *;
+
 @use "./rpf_design_system/colours" as *;
 @use "./rpf_design_system/font-size" as *;
 @use "./rpf_design_system/font-weight" as *;
@@ -6,6 +8,7 @@
 @use "./App" as *;
 @use "./WebComponent" as *;
 @use "./Tabs" as *;
+@use "./Notifications.scss" as *;
 @use "./Project" as *;
 @use "./MobileProject" as *;
 @use "./DraggableTabs" as *;

src/assets/stylesheets/Notifications.scss

@@ -3,7 +3,7 @@
 @use "./rpf_design_system/font-weight" as *;
 @use "./rpf_design_system/colours" as *;
 
-#app {
+#app, #wc {
   .toast--bottom-center__message,
   .toast--top-center__message {
     min-block-size: fit-content;
@@ -35,13 +35,15 @@
     inline-size: 100%;
     font-weight: $font-weight-bold;
     inset-block-start: 20%;
+    z-index: 1;
 
     .Toastify__toast-icon {
       inline-size: fit-content;
     }
   }
 
   .toast--top-center__message {
+    background-color: $rpf-white;
     border-radius: 25px;
   }
 

src/components/WebComponentProject/WebComponentProject.jsx

@@ -1,10 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useCookies } from "react-cookie";
 import { useMediaQuery } from "react-responsive";
-import Style from "style-it";
-import internalStyles from "../../assets/stylesheets/InternalStyles.scss";
-import externalStyles from "../../assets/stylesheets/ExternalStyles.scss";
 
 import Project from "../Editor/Project/Project";
 import MobileProject from "../Mobile/MobileProject/MobileProject";
@@ -23,7 +19,6 @@ const WebComponentProject = ({
   withProjectbar = false,
   withSidebar = false,
   sidebarOptions = [],
-  hostStyles = [],
 }) => {
   const project = useSelector((state) => state.editor.project);
   const codeRunTriggered = useSelector(
@@ -34,10 +29,6 @@ const WebComponentProject = ({
   const currentStepPosition = useSelector(
     (state) => state.instructions.currentStepPosition,
   );
-  const [cookies] = useCookies(["theme", "fontSize"]);
-  const defaultTheme = window.matchMedia("(prefers-color-scheme:dark)").matches
-    ? "dark"
-    : "light";
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const [codeHasRun, setCodeHasRun] = useState(codeHasBeenRun);
   const dispatch = useDispatch();
@@ -78,26 +69,19 @@ const WebComponentProject = ({
 
   return (
     <>
-      <style>{externalStyles.toString()}</style>
-      <style>{hostStyles}</style>
-      <Style>
-        {internalStyles.toString()}
-        <div id="wc" className={`--${cookies.theme || defaultTheme}`}>
-          {isMobile ? (
-            <MobileProject
-              withSidebar={withSidebar}
-              sidebarOptions={sidebarOptions}
-            />
-          ) : (
-            <Project
-              forWebComponent={true}
-              withProjectbar={withProjectbar}
-              withSidebar={withSidebar}
-              sidebarOptions={sidebarOptions}
-            />
-          )}
-        </div>
-      </Style>
+      {isMobile ? (
+        <MobileProject
+          withSidebar={withSidebar}
+          sidebarOptions={sidebarOptions}
+        />
+      ) : (
+        <Project
+          forWebComponent={true}
+          withProjectbar={withProjectbar}
+          withSidebar={withSidebar}
+          sidebarOptions={sidebarOptions}
+        />
+      )}
     </>
   );
 };

src/containers/WebComponentLoader.jsx

@@ -20,6 +20,13 @@ import RenameFileModal from "../components/Modals/RenameFileModal";
 import NotFoundModal from "../components/Modals/NotFoundModal";
 import AccessDeniedNoAuthModal from "../components/Modals/AccessDeniedNoAuthModal";
 import AccessDeniedWithAuthModal from "../components/Modals/AccessDeniedWithAuthModal";
+import { ToastContainer } from "react-toastify";
+import ToastCloseButton from "../utils/ToastCloseButton";
+
+import internalStyles from "../assets/stylesheets/InternalStyles.scss";
+import externalStyles from "../assets/stylesheets/ExternalStyles.scss";
+import "../assets/stylesheets/Notifications.scss";
+import Style from "style-it";
 
 const WebComponentLoader = (props) => {
   const loading = useSelector((state) => state.editor.loading);
@@ -131,18 +138,31 @@ const WebComponentLoader = (props) => {
           fontSize: cookies.fontSize || "small",
         }}
       >
-        <WebComponentProject
-          withProjectbar={withProjectbar}
-          withSidebar={withSidebar}
-          sidebarOptions={sidebarOptions}
-          hostStyles={hostStyles}
-        />
-        {errorModalShowing && <ErrorModal />}
-        {newFileModalShowing && <NewFileModal />}
-        {renameFileModalShowing && modals.renameFile && <RenameFileModal />}
-        {notFoundModalShowing && <NotFoundModal />}
-        {accessDeniedNoAuthModalShowing && <AccessDeniedNoAuthModal />}
-        {accessDeniedWithAuthModalShowing && <AccessDeniedWithAuthModal />}
+        <style>{externalStyles.toString()}</style>
+        <style>{hostStyles}</style>
+        <Style>
+          {internalStyles.toString()}
+          <div id="wc" className={`--${cookies.theme || themeDefault}`}>
+            <ToastContainer
+              enableMultiContainer
+              containerId="top-center"
+              position="top-center"
+              className="toast--top-center"
+              closeButton={ToastCloseButton}
+            />
+            <WebComponentProject
+              withProjectbar={withProjectbar}
+              withSidebar={withSidebar}
+              sidebarOptions={sidebarOptions}
+            />
+            {errorModalShowing && <ErrorModal />}
+            {newFileModalShowing && <NewFileModal />}
+            {renameFileModalShowing && modals.renameFile && <RenameFileModal />}
+            {notFoundModalShowing && <NotFoundModal />}
+            {accessDeniedNoAuthModalShowing && <AccessDeniedNoAuthModal />}
+            {accessDeniedWithAuthModalShowing && <AccessDeniedWithAuthModal />}
+          </div>
+        </Style>
       </SettingsContext.Provider>
     </>
   ) : (

src/hooks/useProjectPersistence.js

@@ -85,5 +85,7 @@ export const useProjectPersistence = ({
     }, 2000);
 
     return () => clearTimeout(debouncer);
-  }, [dispatch, project, user, hasShownSavePrompt, justLoaded]);
+  }, [dispatch, project, user, hasShownSavePrompt]); // eslint-disable-line react-hooks/exhaustive-deps
+  // Disabling exhasutive dependencies linting rule because adding justLoaded to the dependency array
+  // triggers the save/login prompt too early
 };

src/utils/Notifications.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { toast } from "react-toastify";
 import InfoIcon from "../assets/icons/info.svg";
 import TickIcon from "../assets/icons/tick.svg";