Added project load failed custom event (#1201)

Author: loiswells97

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+
+- `editor-projectLoadFailed` custom event that fires when a project completely fails to load (#1201)
+
 ### Fixed
 
 - Bugs in append mode for writing to files in python (#1200)

src/containers/WebComponentLoader.jsx

@@ -26,7 +26,10 @@ import externalStyles from "../assets/stylesheets/ExternalStyles.scss";
 import editorStyles from "../assets/stylesheets/index.scss";
 import "../assets/stylesheets/Notifications.scss";
 import Style from "style-it";
-import { projectOwnerLoadedEvent } from "../events/WebComponentCustomEvents";
+import {
+  projectLoadFailed,
+  projectOwnerLoadedEvent,
+} from "../events/WebComponentCustomEvents";
 
 const WebComponentLoader = (props) => {
   const {
@@ -112,6 +115,12 @@ const WebComponentLoader = (props) => {
     }
   }, [loading, project]);
 
+  useEffect(() => {
+    if (loading === "failed" && !remixLoadFailed) {
+      document.dispatchEvent(projectLoadFailed);
+    }
+  }, [loading, remixLoadFailed]);
+
   useEffect(() => {
     if (justLoaded) {
       document.dispatchEvent(projectOwnerLoadedEvent(projectOwner));

src/containers/WebComponentLoader.test.js

@@ -535,7 +535,7 @@ describe("When user is in state", () => {
       const mockStore = configureStore(middlewares);
       const initialState = {
         editor: {
-          loading: "idle",
+          loading: "failed",
           project: {
             components: [],
           },
@@ -581,11 +581,69 @@ describe("When user is in state", () => {
           reactAppApiEndpoint: "http://localhost:3009",
         });
       });
+
+      test("Does not trigger project load failed event", () => {
+        expect(document.dispatchEvent).not.toHaveBeenCalledWith(
+          new CustomEvent("editor-projectLoadFailed", {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+          }),
+        );
+      });
     });
 
     afterEach(async () => {
       localStorage.clear();
       await act(async () => cookies.remove("theme"));
     });
   });
+
+  describe("when a project fails to load", () => {
+    beforeEach(() => {
+      localStorage.setItem(authKey, JSON.stringify(user));
+      const middlewares = [];
+      const mockStore = configureStore(middlewares);
+      const initialState = {
+        editor: {
+          loading: "failed",
+          project: {
+            components: [],
+          },
+          openFiles: [],
+          focussedFileIndices: [],
+          hasShownSavePrompt: false,
+          remixLoadFailed: false,
+          justLoaded: false,
+          saveTriggered: false,
+        },
+        instructions: {},
+        auth: { user },
+      };
+      store = mockStore(initialState);
+      cookies = new Cookies();
+      render(
+        <Provider store={store}>
+          <CookiesProvider cookies={cookies}>
+            <WebComponentLoader
+              identifier={identifier}
+              instructions={instructions}
+              authKey={authKey}
+              theme="light"
+            />
+          </CookiesProvider>
+        </Provider>,
+      );
+    });
+
+    test("triggers project load failed event", () => {
+      expect(document.dispatchEvent).toHaveBeenCalledWith(
+        new CustomEvent("editor-projectLoadFailed", {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }),
+      );
+    });
+  });
 });

src/events/WebComponentCustomEvents.js

@@ -15,6 +15,10 @@ export const navigateToProjectsPageEvent = webComponentCustomEvent(
 export const projectIdentifierChangedEvent = (detail) =>
   webComponentCustomEvent("editor-projectIdentifierChanged", detail);
 
+export const projectLoadFailed = webComponentCustomEvent(
+  "editor-projectLoadFailed",
+);
+
 export const projectOwnerLoadedEvent = (detail) =>
   webComponentCustomEvent("editor-projectOwnerLoaded", detail);