Fix initial value of user in WebComponentLoader

CHANGELOG.md

@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Improvements to Cypress specs in CI (#1017)
 - Fix warnings and verbose output when starting Webpack Dev Server (#1018)
 - Add e2e spec for project remix behaviour in web component (#1020)
+- Fix initial value of `user` in `WebComponentLoader` (#1021)
 
 ## [0.23.0] - 2024-05-09
 

cypress/e2e/spec-wc.cy.js

@@ -98,23 +98,23 @@ describe("when load_remix_disabled is true, e.g. in editor-standalone", () => {
   const user = { access_token: "dummy-access-token" };
   const originalIdentifier = "blank-python-starter";
 
-  let baseUrl;
-
-  beforeEach(() => {
+  const urlFor = (identifier) => {
     const params = new URLSearchParams();
     params.set("auth_key", authKey);
-    params.set("identifier", originalIdentifier);
+    params.set("identifier", identifier);
     params.set("load_remix_disabled", "true");
-    baseUrl = `${origin}?${params.toString()}`;
+    return `${origin}?${params.toString()}`;
+  };
 
+  beforeEach(() => {
     cy.on('window:before:load', (win) => {
       win.localStorage.setItem(authKey, JSON.stringify(user));
     });
   });
 
   it("loads the original project in preference to the remixed version", () => {
-    // Visit the original project URL
-    cy.visit(baseUrl);
+    // View the original project
+    cy.visit(urlFor(originalIdentifier));
     cy.get("#project-identifier").should("have.text", originalIdentifier);
 
     // Edit code
@@ -125,14 +125,21 @@ describe("when load_remix_disabled is true, e.g. in editor-standalone", () => {
 
     // Check receipt of an event to trigger a redirect to the remixed project URL
     cy.get("#project-identifier").should("not.have.text", originalIdentifier);
+    cy.get("#project-identifier").invoke("text").then((remixIdentifier) => {
+      // Check we're still seeing the changed code
+      cy.get("editor-wc").shadow().find("[contenteditable]").should("have.text", "# remixed!");
 
-    // Check we're still seeing the changed code
-    cy.get("editor-wc").shadow().find("[contenteditable]").should("have.text", "# remixed!");
+      // Visit the original project again
+      cy.visit(urlFor(originalIdentifier));
 
-    // Visit the original project URL
-    cy.visit(baseUrl);
+      // Check we no longer see the changed code, i.e. `load_remix_disabled=true` is respected
+      cy.get("editor-wc").shadow().find("[contenteditable]").should("not.have.text", "# remixed!");
 
-    // Check we no longer see the changed code, i.e. `load_remix_disabled=true` is respected
-    cy.get("editor-wc").shadow().find("[contenteditable]").should("not.have.text", "# remixed!");
+      // View the remixed project
+      cy.visit(urlFor(remixIdentifier));
+
+      // Check we're still seeing the changed code
+      cy.get("editor-wc").shadow().find("[contenteditable]").should("have.text", "# remixed!");
+    });
   });
 });

src/containers/WebComponentLoader.jsx

@@ -46,7 +46,10 @@ const WebComponentLoader = (props) => {
   const { t } = useTranslation();
   const [projectIdentifier, setProjectIdentifier] = useState(identifier);
   localStorage.setItem("authKey", authKey);
-  const user = useSelector((state) => state.auth.user);
+  const localStorageUser = authKey
+    ? 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);

src/containers/WebComponentLoader.test.js

@@ -88,7 +88,7 @@ describe("When no user is in state", () => {
         },
         hasShownSavePrompt: true,
         justLoaded: false,
-        user: undefined,
+        user: null,
         saveTriggered: false,
       });
     });
@@ -146,16 +146,16 @@ describe("When no user is in state", () => {
       expect(useProject).toHaveBeenCalledWith({
         projectIdentifier: identifier,
         code,
-        accessToken: undefined,
-        loadRemix: false,
-        loadCache: true,
+        accessToken: "my_token",
+        loadRemix: true,
+        loadCache: false,
         remixLoadFailed: false,
       });
     });
 
     test("Calls useProjectPersistence hook with correct attributes", () => {
       expect(useProjectPersistence).toHaveBeenCalledWith({
-        user: undefined,
+        user,
         project: { components: [] },
         hasShownSavePrompt: true,
         justLoaded: false,