Keep SaveButton generic while preserving the Scratch save path

Author: abcampo-iry

src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx

@@ -15,12 +15,14 @@ import {
 } from "../../../../events/WebComponentCustomEvents";
 import "../../../../assets/stylesheets/DownloadPanel.scss";
 import UploadButton from "../../../UploadButton/UploadButton";
+import { useScratchSaveButtonProps } from "../../../../hooks/useScratchSave";
 
 export const DownloadPanel = () => {
   const { t } = useTranslation();
   const user = useSelector((state) => state.auth.user);
   const project = useSelector((state) => state.editor.project);
   const projectOwner = isOwner(user, project);
+  const scratchSaveButtonProps = useScratchSaveButtonProps();
 
   const handleLogIn = () => {
     if (window.plausible) {
@@ -81,7 +83,7 @@ export const DownloadPanel = () => {
           )}
         </div>
       </div>
-      {user && !projectOwner && <SaveButton fill />}
+      {user && !projectOwner && <SaveButton fill {...scratchSaveButtonProps} />}
     </SidebarPanel>
   );
 };

src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx

@@ -14,18 +14,25 @@ import { useMediaQuery } from "react-responsive";
 import SaveStatus from "../../../SaveStatus/SaveStatus";
 import { navigateToProjectsPageEvent } from "../../../../events/WebComponentCustomEvents";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
+import { useScratchSaveButtonProps } from "../../../../hooks/useScratchSave";
 
 const ProjectsPanel = () => {
   const { t } = useTranslation();
 
   const isLoggedIn = useSelector((state) => state?.auth?.user);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const readOnly = useSelector((state) => state.editor.readOnly);
+  const scratchSaveButtonProps = useScratchSaveButtonProps({
+    enabled: !readOnly,
+  });
 
   const saveOptions = (
     <>
       <div className="projects-panel__save">
-        <SaveButton className="projects-panel__save-button" />
+        <SaveButton
+          className="projects-panel__save-button"
+          {...scratchSaveButtonProps}
+        />
       </div>
       <div className="projects-panel__save-status">
         <SaveStatus isMobile={isMobile} />

src/components/ProjectBar/ProjectBar.jsx

@@ -9,6 +9,7 @@ import SaveButton from "../SaveButton/SaveButton";
 
 import "../../assets/stylesheets/ProjectBar.scss";
 import { isOwner } from "../../utils/projectHelpers";
+import { useScratchSaveButtonProps } from "../../hooks/useScratchSave";
 
 const ProjectBar = ({ nameEditable = true }) => {
   const { t } = useTranslation();
@@ -19,6 +20,9 @@ const ProjectBar = ({ nameEditable = true }) => {
   const lastSavedTime = useSelector((state) => state.editor.lastSavedTime);
   const projectOwner = isOwner(user, project);
   const readOnly = useSelector((state) => state.editor.readOnly);
+  const scratchSaveButtonProps = useScratchSaveButtonProps({
+    enabled: !readOnly,
+  });
 
   if (loading !== "success") {
     return null;
@@ -38,7 +42,10 @@ const ProjectBar = ({ nameEditable = true }) => {
         </div>
         {!projectOwner && !readOnly && (
           <div className="project-bar__btn-wrapper">
-            <SaveButton className="project-bar__btn btn--save" />
+            <SaveButton
+              className="project-bar__btn btn--save"
+              {...scratchSaveButtonProps}
+            />
           </div>
         )}
         {lastSavedTime && user && !readOnly && (

src/components/SaveButton/SaveButton.jsx

@@ -2,30 +2,32 @@ import React, { useEffect, useState, useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
+import { isOwner } from "../../utils/projectHelpers";
 
 import { logInEvent } from "../../events/WebComponentCustomEvents";
 
 import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
 import SaveIcon from "../../assets/icons/save.svg";
 import { triggerSave } from "../../redux/EditorSlice";
-import { useScratchSave } from "../../hooks/useScratchSave";
 
-const SaveButton = ({ className, type, fill = false }) => {
+const SaveButton = ({
+  className,
+  type,
+  fill = false,
+  onSave = null,
+  isSaving = false,
+  saveLabelKey = null,
+}) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
   const [buttonType, setButtonType] = useState(type);
   const webComponent = useSelector((state) => state.editor.webComponent);
-  const {
-    enableScratchSaveState,
-    isScratchSaving,
-    loading,
-    projectOwner,
-    saveScratchProject,
-    scratchSaveLabelKey,
-    shouldRemixOnSave,
-    user,
-  } = useScratchSave();
+  const loading = useSelector((state) => state.editor.loading);
+  const user = useSelector((state) => state.auth.user);
+  const project = useSelector((state) => state.editor.project);
+  const projectOwner = isOwner(user, project);
+  const usesCustomSave = Boolean(onSave);
 
   useEffect(() => {
     if (!type) {
@@ -38,19 +40,15 @@ const SaveButton = ({ className, type, fill = false }) => {
       window.plausible("Save button");
     }
     document.dispatchEvent(logInEvent);
-    if (enableScratchSaveState) {
-      saveScratchProject({ shouldRemixOnSave });
+    if (usesCustomSave) {
+      onSave();
       return;
     }
     dispatch(triggerSave());
-  }, [dispatch, enableScratchSaveState, saveScratchProject, shouldRemixOnSave]);
+  }, [dispatch, onSave, usesCustomSave]);
 
   const buttonText = t(
-    enableScratchSaveState
-      ? scratchSaveLabelKey
-      : user
-        ? "header.save"
-        : "header.loginToSave",
+    usesCustomSave ? saveLabelKey : user ? "header.save" : "header.loginToSave",
   );
 
   return (
@@ -69,7 +67,7 @@ const SaveButton = ({ className, type, fill = false }) => {
         icon={<SaveIcon />}
         type={buttonType}
         fill={fill}
-        disabled={isScratchSaving}
+        disabled={isSaving}
       />
     )
   );

src/components/SaveButton/SaveButton.test.js

@@ -85,11 +85,9 @@ describe("When project is loaded", () => {
           editor: {
             loading: "success",
             webComponent: true,
-            scratchIframeProjectIdentifier: "teacher-project",
             project: {
               identifier: "teacher-project",
               user_id: "teacher-id",
-              project_type: "code_editor_scratch",
             },
           },
           auth: {
@@ -103,7 +101,15 @@ describe("When project is loaded", () => {
 
         render(
           <Provider store={scratchStore}>
-            <SaveButton />
+            <SaveButton
+              isSaving={false}
+              saveLabelKey="header.save"
+              onSave={() =>
+                postMessageToScratchIframe({
+                  type: "scratch-gui-remix",
+                })
+              }
+            />
           </Provider>,
         );
 

src/hooks/useScratchSave.js

@@ -4,11 +4,11 @@ import { shouldRemixScratchProjectOnSave } from "../utils/scratchIframe";
 import { useScratchSaveState } from "./useScratchSaveState";
 
 export const useScratchSave = ({ enabled = true } = {}) => {
-  const loading = useSelector((state) => state.editor.loading);
-  const user = useSelector((state) => state.auth.user);
-  const project = useSelector((state) => state.editor.project);
+  const loading = useSelector((state) => state.editor?.loading);
+  const user = useSelector((state) => state.auth?.user);
+  const project = useSelector((state) => state.editor?.project);
   const scratchIframeProjectIdentifier = useSelector(
-    (state) => state.editor.scratchIframeProjectIdentifier,
+    (state) => state.editor?.scratchIframeProjectIdentifier,
   );
 
   const projectOwner = isOwner(user, project);
@@ -38,3 +38,23 @@ export const useScratchSave = ({ enabled = true } = {}) => {
     user,
   };
 };
+
+export const useScratchSaveButtonProps = ({ enabled = true } = {}) => {
+  const {
+    enableScratchSaveState,
+    isScratchSaving,
+    saveScratchProject,
+    scratchSaveLabelKey,
+    shouldRemixOnSave,
+  } = useScratchSave({ enabled });
+
+  if (!enableScratchSaveState) {
+    return {};
+  }
+
+  return {
+    isSaving: isScratchSaving,
+    saveLabelKey: scratchSaveLabelKey,
+    onSave: () => saveScratchProject({ shouldRemixOnSave }),
+  };
+};