From a2a5f94dc6c9a0a06a1ca26060c9fc6ecf4039e1 Mon Sep 17 00:00:00 2001 From: "create-issue-branch[bot]" <53036503+create-issue-branch[bot]@users.noreply.github.com> Date: Tue, 12 Dec 2023 14:42:58 +0000 Subject: [PATCH 1/5] Create draft PR for #813 From fdbf89ebeeb33e371609ac3696c8e83ab1f6da7f Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Wed, 13 Dec 2023 09:51:30 +0000 Subject: [PATCH 2/5] slight refactor and adding notifications to web component --- src/assets/stylesheets/InternalStyles.scss | 3 + src/assets/stylesheets/Notifications.scss | 4 +- .../WebComponentProject.jsx | 60 +++++++++++-------- src/containers/WebComponentLoader.jsx | 45 ++++++++++---- src/hooks/useProjectPersistence.js | 3 +- src/utils/Notifications.js | 1 + 6 files changed, 77 insertions(+), 39 deletions(-) diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss index 073976948..8d82c3aae 100644 --- a/src/assets/stylesheets/InternalStyles.scss +++ b/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 *; diff --git a/src/assets/stylesheets/Notifications.scss b/src/assets/stylesheets/Notifications.scss index fda471757..d3eb9c518 100644 --- a/src/assets/stylesheets/Notifications.scss +++ b/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-height: fit-content; @@ -35,6 +35,7 @@ width: 100%; font-weight: $font-weight-bold; inset-block-start: 20%; + z-index: 1; .Toastify__toast-icon { width: fit-content; @@ -42,6 +43,7 @@ } .toast--top-center__message { + background-color: $rpf-white; border-radius: 25px; } diff --git a/src/components/WebComponentProject/WebComponentProject.jsx b/src/components/WebComponentProject/WebComponentProject.jsx index 8ba920ae2..aef6cf7e2 100644 --- a/src/components/WebComponentProject/WebComponentProject.jsx +++ b/src/components/WebComponentProject/WebComponentProject.jsx @@ -1,10 +1,10 @@ import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { useCookies } from "react-cookie"; +// 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 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"; @@ -18,12 +18,15 @@ import { runStartedEvent, stepChangedEvent, } from "../../events/WebComponentCustomEvents"; +import "../../assets/stylesheets/Notifications.scss"; +// import { ToastContainer } from "react-toastify"; +// import ToastCloseButton from "../../utils/ToastCloseButton"; const WebComponentProject = ({ withProjectbar = false, withSidebar = false, sidebarOptions = [], - hostStyles = [], + // hostStyles = [], }) => { const project = useSelector((state) => state.editor.project); const codeRunTriggered = useSelector( @@ -34,10 +37,10 @@ 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 [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 +81,33 @@ const WebComponentProject = ({ return ( <> - + {/* + */} + {isMobile ? ( + + ) : ( + + )} + {/* + */} ); }; diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx index 30e855acc..61ac5a2bb 100644 --- a/src/containers/WebComponentLoader.jsx +++ b/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,32 @@ const WebComponentLoader = (props) => { fontSize: cookies.fontSize || "small", }} > - - {errorModalShowing && } - {newFileModalShowing && } - {renameFileModalShowing && modals.renameFile && } - {notFoundModalShowing && } - {accessDeniedNoAuthModalShowing && } - {accessDeniedWithAuthModalShowing && } + + + ) : ( diff --git a/src/hooks/useProjectPersistence.js b/src/hooks/useProjectPersistence.js index c26a3136d..46c19d383 100644 --- a/src/hooks/useProjectPersistence.js +++ b/src/hooks/useProjectPersistence.js @@ -39,6 +39,7 @@ export const useProjectPersistence = ({ }, [saveTriggered, project, user, dispatch]); useEffect(() => { + console.log(project, user, justLoaded, hasShownSavePrompt); if (user && localStorage.getItem("awaitingSave")) { if (isOwner(user, project)) { dispatch( @@ -85,5 +86,5 @@ export const useProjectPersistence = ({ }, 2000); return () => clearTimeout(debouncer); - }, [dispatch, project, user, hasShownSavePrompt, justLoaded]); + }, [dispatch, project, user, hasShownSavePrompt]); }; diff --git a/src/utils/Notifications.js b/src/utils/Notifications.js index 613177a8d..61c014453 100644 --- a/src/utils/Notifications.js +++ b/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"; From 96af68e8e1ef2e5e821d2176ab3570399e186c12 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Wed, 13 Dec 2023 10:46:35 +0000 Subject: [PATCH 3/5] tidying --- .../WebComponentProject.jsx | 25 ------------------- src/containers/WebComponentLoader.jsx | 1 - 2 files changed, 26 deletions(-) diff --git a/src/components/WebComponentProject/WebComponentProject.jsx b/src/components/WebComponentProject/WebComponentProject.jsx index aef6cf7e2..b92506ba3 100644 --- a/src/components/WebComponentProject/WebComponentProject.jsx +++ b/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"; @@ -19,14 +15,11 @@ import { stepChangedEvent, } from "../../events/WebComponentCustomEvents"; import "../../assets/stylesheets/Notifications.scss"; -// import { ToastContainer } from "react-toastify"; -// import ToastCloseButton from "../../utils/ToastCloseButton"; const WebComponentProject = ({ withProjectbar = false, withSidebar = false, sidebarOptions = [], - // hostStyles = [], }) => { const project = useSelector((state) => state.editor.project); const codeRunTriggered = useSelector( @@ -37,10 +30,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(); @@ -81,18 +70,6 @@ const WebComponentProject = ({ return ( <> - {/* - - */} ); }; diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx index 61ac5a2bb..32dd22a67 100644 --- a/src/containers/WebComponentLoader.jsx +++ b/src/containers/WebComponentLoader.jsx @@ -154,7 +154,6 @@ const WebComponentLoader = (props) => { withProjectbar={withProjectbar} withSidebar={withSidebar} sidebarOptions={sidebarOptions} - hostStyles={hostStyles} /> {errorModalShowing && } {newFileModalShowing && } From 5fc594d1c9039c0cb8c3656e148877102c923feb Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Wed, 13 Dec 2023 13:33:39 +0000 Subject: [PATCH 4/5] disable lint rule, tidy and changelog --- CHANGELOG.md | 1 + src/components/WebComponentProject/WebComponentProject.jsx | 1 - src/hooks/useProjectPersistence.js | 4 +++- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a68115e0..98ad8554b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Output styles for Instructions (#790, #807) - Styling for the instructions code snippets (#795) - Styling for the instructions code blocks (#794, #808) +- Toast save reminder to web component (#822) ### Changed diff --git a/src/components/WebComponentProject/WebComponentProject.jsx b/src/components/WebComponentProject/WebComponentProject.jsx index b92506ba3..b608d66bb 100644 --- a/src/components/WebComponentProject/WebComponentProject.jsx +++ b/src/components/WebComponentProject/WebComponentProject.jsx @@ -14,7 +14,6 @@ import { runStartedEvent, stepChangedEvent, } from "../../events/WebComponentCustomEvents"; -import "../../assets/stylesheets/Notifications.scss"; const WebComponentProject = ({ withProjectbar = false, diff --git a/src/hooks/useProjectPersistence.js b/src/hooks/useProjectPersistence.js index 46c19d383..d23a00e6f 100644 --- a/src/hooks/useProjectPersistence.js +++ b/src/hooks/useProjectPersistence.js @@ -86,5 +86,7 @@ export const useProjectPersistence = ({ }, 2000); return () => clearTimeout(debouncer); - }, [dispatch, project, user, hasShownSavePrompt]); + }, [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 }; From 76aa15411a8628cfe18902ac3e1f09ac8f2a4dc2 Mon Sep 17 00:00:00 2001 From: Lois Wells <88904316+loiswells97@users.noreply.github.com> Date: Fri, 15 Dec 2023 15:32:03 +0000 Subject: [PATCH 5/5] Update useProjectPersistence.js --- src/hooks/useProjectPersistence.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useProjectPersistence.js b/src/hooks/useProjectPersistence.js index d23a00e6f..6c5ff22e1 100644 --- a/src/hooks/useProjectPersistence.js +++ b/src/hooks/useProjectPersistence.js @@ -39,7 +39,6 @@ export const useProjectPersistence = ({ }, [saveTriggered, project, user, dispatch]); useEffect(() => { - console.log(project, user, justLoaded, hasShownSavePrompt); if (user && localStorage.getItem("awaitingSave")) { if (isOwner(user, project)) { dispatch(