190 login to save only logs in (#1152)

Closes
RaspberryPiFoundation/editor-standalone#190

Author: danhalson

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Fixed
+
+- Log in to save and log in now preserve the cache (#1137)
+
 ## [0.28.12] - 2024-12-09
 
 ### Fixed

src/components/SaveButton/SaveButton.test.js

@@ -149,6 +149,7 @@ describe("When project is loaded", () => {
       expect(logInHandler).toHaveBeenCalled();
     });
   });
+
   describe("with webComponent=false", () => {
     let store;
 

src/containers/WebComponentLoader.jsx

@@ -37,6 +37,7 @@ const WebComponentLoader = (props) => {
     hostStyles, // Pass in styles from the host
     identifier,
     instructions,
+    theme,
     loadRemixDisabled = false,
     outputOnly = false,
     outputPanels = ["text", "visual"],
@@ -47,10 +48,10 @@ const WebComponentLoader = (props) => {
     senseHatAlwaysEnabled = false,
     showSavePrompt = false,
     sidebarOptions = [],
-    theme,
     useEditorStyles = false, // If true use the standard editor styling for the web component
     withProjectbar = false,
     withSidebar = false,
+    loadCache = true, // Always use cache unless explicitly disabled
   } = props;
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -60,7 +61,6 @@ const WebComponentLoader = (props) => {
     ? JSON.parse(localStorage.getItem(authKey))
     : null;
   const user = useSelector((state) => state.auth.user || localStorageUser);
-  const [loadCache, setLoadCache] = useState(!!!user);
   const [loadRemix, setLoadRemix] = useState(!!user);
   const project = useSelector((state) => state.editor.project);
   const projectOwner = useSelector((state) => state.editor.project.user_name);
@@ -99,10 +99,8 @@ const WebComponentLoader = (props) => {
 
   useEffect(() => {
     if (remixLoadFailed) {
-      setLoadCache(true);
       setLoadRemix(false);
     } else {
-      setLoadCache(!!!user);
       setLoadRemix(!!user);
     }
   }, [user, project, remixLoadFailed]);

src/containers/WebComponentLoader.test.js

@@ -315,6 +315,7 @@ describe("When no user is in state", () => {
               instructions={instructions}
               authKey={authKey}
               theme="light"
+              loadCache={true}
             />
           </CookiesProvider>
         </Provider>,
@@ -328,7 +329,7 @@ describe("When no user is in state", () => {
         code,
         accessToken: "my_token",
         loadRemix: true,
-        loadCache: false,
+        loadCache: true,
         remixLoadFailed: false,
         reactAppApiEndpoint: "http://localhost:3009",
       });
@@ -456,7 +457,7 @@ describe("When user is in state", () => {
           code: undefined,
           accessToken: "my_token",
           loadRemix: true,
-          loadCache: false,
+          loadCache: true,
           remixLoadFailed: false,
           reactAppApiEndpoint: "http://localhost:3009",
         });
@@ -486,7 +487,7 @@ describe("When user is in state", () => {
             code: undefined,
             accessToken: "my_token",
             loadRemix: false,
-            loadCache: false,
+            loadCache: true,
             remixLoadFailed: false,
             reactAppApiEndpoint: "http://localhost:3009",
           });

src/hooks/useProjectPersistence.js

@@ -38,36 +38,24 @@ export const useProjectPersistence = ({
   useEffect(() => {
     const saveProject = async () => {
       if (Object.keys(project).length !== 0) {
-        if (saveTriggered || (user && localStorage.getItem("awaitingSave"))) {
+        const identifier = project?.identifier;
+        const accessToken = user?.access_token;
+        const params = { reactAppApiEndpoint, accessToken };
+
+        if (saveTriggered) {
           if (isOwner(user, project)) {
-            dispatch(
-              syncProject("save")({
-                reactAppApiEndpoint,
-                project,
-                accessToken: user.access_token,
-                autosave: false,
-              }),
-            );
-          } else if (user && project.identifier) {
             await dispatch(
-              syncProject("remix")({
-                reactAppApiEndpoint,
-                project,
-                accessToken: user.access_token,
-              }),
+              syncProject("save")({ ...params, project, autosave: false }),
             );
-            // Ensure the remixed project is loaded, otherwise we'll get in a mess
+          } else if (user && identifier) {
+            await dispatch(syncProject("remix")({ ...params, project }));
             if (loadRemix) {
-              dispatch(
-                syncProject("loadRemix")({
-                  reactAppApiEndpoint,
-                  identifier: project.identifier,
-                  accessToken: user.access_token,
-                }),
+              // Ensure the remixed project is loaded, otherwise we'll get in a mess
+              await dispatch(
+                syncProject("loadRemix")({ ...params, identifier }),
               );
             }
           }
-          localStorage.removeItem("awaitingSave");
         }
       }
     };

src/hooks/useProjectPersistence.test.js

@@ -195,28 +195,6 @@ describe("When logged in", () => {
       });
     });
 
-    describe("When project has identifier and awaiting save", () => {
-      beforeEach(() => {
-        localStorage.setItem("awaitingSave", "true");
-        syncProject.mockImplementationOnce(jest.fn((_) => remixProject));
-        syncProject.mockImplementationOnce(jest.fn((_) => loadProject));
-        renderHook(() =>
-          useProjectPersistence({
-            user: user2,
-            project: project,
-          }),
-        );
-        jest.runAllTimers();
-      });
-
-      test("Project remixed and saved to database", () => {
-        expect(remixProject).toHaveBeenCalledWith({
-          project,
-          accessToken: user2.access_token,
-        });
-      });
-    });
-
     describe("When project has identifier and save triggered", () => {
       beforeEach(() => {
         syncProject.mockImplementationOnce(jest.fn((_) => remixProject));
@@ -277,28 +255,6 @@ describe("When logged in", () => {
       });
     });
 
-    describe("When project has no identifier and awaiting save", () => {
-      beforeEach(() => {
-        localStorage.setItem("awaitingSave", "true");
-        syncProject.mockImplementationOnce(jest.fn((_) => saveProject));
-        renderHook(() =>
-          useProjectPersistence({
-            user: user2,
-            project: { ...project, identifier: null },
-          }),
-        );
-        jest.runAllTimers();
-      });
-
-      test("Project saved to database", () => {
-        expect(saveProject).toHaveBeenCalledWith({
-          project: { ...project, identifier: null },
-          accessToken: user2.access_token,
-          autosave: false,
-        });
-      });
-    });
-
     describe("When project has no identifier and save triggered", () => {
       beforeEach(() => {
         syncProject.mockImplementationOnce(jest.fn((_) => saveProject));

src/web-component.html

@@ -52,7 +52,6 @@
           "download",
           "settings",
           "info",
-          "use_editor_styles"
         ]),
       );
 

src/web-component.js

@@ -67,6 +67,7 @@ class WebComponent extends HTMLElement {
       "use_editor_styles",
       "with_projectbar",
       "with_sidebar",
+      "load_cache",
     ];
   }
 
@@ -86,6 +87,7 @@ class WebComponent extends HTMLElement {
         "use_editor_styles",
         "with_projectbar",
         "with_sidebar",
+        "load_cache",
       ].includes(name)
     ) {
       value = newVal !== "false";