Fix issue where we ask for name unnecessarily. (#349)

Remove save logic from default page template.

Author: microbit-matt-hillsdon

src/components/DefaultPageLayout.tsx

@@ -14,11 +14,13 @@ import { ReactNode, useCallback, useEffect } from "react";
 import { RiDownload2Line, RiFolderOpenLine, RiHome2Line } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router";
+import { useDeployment } from "../deployment";
 import { flags } from "../flags";
-import { SaveStep, TrainModelDialogStage } from "../model";
+import { useProject } from "../hooks/project-hooks";
+import { TrainModelDialogStage } from "../model";
 import { SessionPageId } from "../pages-config";
 import Tour from "../pages/Tour";
-import { useSettings, useStore } from "../store";
+import { useStore } from "../store";
 import { createHomePageUrl, createSessionPageUrl } from "../urls";
 import ActionBar from "./ActionBar";
 import AppLogo from "./AppLogo";
@@ -33,7 +35,6 @@ import SaveDialogs from "./SaveDialogs";
 import SettingsMenu from "./SettingsMenu";
 import ToolbarMenu from "./ToolbarMenu";
 import TrainModelDialogs from "./TrainModelFlowDialogs";
-import { useDeployment } from "../deployment";
 
 interface DefaultPageLayoutProps {
   titleId?: string;
@@ -59,7 +60,6 @@ const DefaultPageLayout = ({
   const isEditorOpen = useStore((s) => s.isEditorOpen);
   const stage = useStore((s) => s.trainModelDialogStage);
 
-  const [settings] = useSettings();
   const toast = useToast();
   const { appNameFull } = useDeployment();
 
@@ -93,15 +93,10 @@ const DefaultPageLayout = ({
     navigate(createHomePageUrl());
   }, [navigate]);
 
-  const setSave = useStore((s) => s.setSave);
-  const handleSave = useCallback(() => {
-    if (settings.showPreSaveHelp) {
-      setSave({ step: SaveStep.PreSaveHelp });
-    } else {
-      setSave({ step: SaveStep.ProjectName });
-    }
-  }, [setSave, settings.showPreSaveHelp]);
-
+  const { saveHex } = useProject();
+  const handleSave = useCallback(async () => {
+    await saveHex();
+  }, [saveHex]);
   return (
     <>
       {/* Suppress dialogs to prevent overlapping dialogs */}

src/hooks/project-hooks.tsx

@@ -131,42 +131,38 @@ export const ProjectProvider = ({
   const saveHex = useCallback(
     async (hex?: HexData): Promise<void> => {
       const { step } = save;
-      if (hex) {
-        if (settings.showPreSaveHelp && step === SaveStep.None) {
-          // All we do is trigger the help and remember the project.
-          setSave({
-            step: SaveStep.PreSaveHelp,
-            hex: hex,
-          });
-        } else {
-          // We can just go ahead and download. Either the project came from
-          // the editor or via the dialog flow.
-          downloadHex(hex);
-          setSave({
-            step: SaveStep.None,
-          });
-          toast({
-            id: "save-complete",
-            position: "top",
-            duration: 5_000,
-            title: intl.formatMessage({ id: "saving-toast-title" }),
-            status: "info",
-          });
-        }
-      } else {
-        // We need to request something to save.
-        setSave({
-          step: SaveStep.SaveProgress,
-        });
+      if (settings.showPreSaveHelp && step === SaveStep.None) {
+        setSave({ hex, step: SaveStep.PreSaveHelp });
+      } else if (
+        getCurrentProject().header?.name === "Untitled" &&
+        step === SaveStep.None
+      ) {
+        setSave({ hex, step: SaveStep.ProjectName });
+      } else if (!hex) {
+        setSave({ hex, step: SaveStep.SaveProgress });
+        // This will result in a future call to saveHex with a hex.
         await doAfterEditorUpdate(async () => {
           saveNextDownloadRef.current = true;
           await driverRef.current!.compile();
         });
+      } else {
+        downloadHex(hex);
+        setSave({
+          step: SaveStep.None,
+        });
+        toast({
+          id: "save-complete",
+          position: "top",
+          duration: 5_000,
+          title: intl.formatMessage({ id: "saving-toast-title" }),
+          status: "info",
+        });
       }
     },
     [
       doAfterEditorUpdate,
       driverRef,
+      getCurrentProject,
       intl,
       save,
       setSave,