lint and remove final env vars from build files

.eslintrc.json

@@ -37,7 +37,7 @@
       {
         "singleQuote": false,
         "jsxSingleQuote": false,
-        "trailingComma": "es5",
+        "trailingComma": "all",
         "semi": true,
         "bracketSpacing": true,
         "arrowParens": "always"

.github/workflows/ci-cd.yml

@@ -96,7 +96,6 @@ jobs:
           wait-on: "http://localhost:3011"
           quiet: true
         env:
-          REACT_APP_API_ENDPOINT: "https://test-editor-api.raspberrypi.org"
           PUBLIC_URL: "http://localhost:3011"
           ASSETS_URL: "http://localhost:3011"
           REACT_APP_PLAUSIBLE_SOURCE: ""
@@ -117,7 +116,6 @@ jobs:
       assets_url: https://editor-static.raspberrypi.org
       environment: production
       prefix: releases
-      react_app_api_endpoint: https://editor-api.raspberrypi.org
       react_app_authentication_url: https://auth-v1.raspberrypi.org
       react_app_base_url: ""
       react_app_google_tag_manager_id: GTM-5FWFWFJ

.github/workflows/deploy.yml

@@ -18,10 +18,6 @@ on:
         required: false
         default: "https://staging-editor-static.raspberrypi.org"
         type: string
-      react_app_api_endpoint:
-        required: false
-        default: "https://staging-editor-api.raspberrypi.org"
-        type: string
       react_app_authentication_client_id:
         required: false
         default: editor-api
@@ -132,7 +128,6 @@ jobs:
         env:
           PUBLIC_URL: ${{ needs.setup-environment.outputs.public_url }}
           ASSETS_URL: ${{ needs.setup-environment.outputs.assets_url }}
-          REACT_APP_API_ENDPOINT: ${{ inputs.react_app_api_endpoint }}
           REACT_APP_AUTHENTICATION_CLIENT_ID: ${{ inputs.react_app_authentication_client_id }}
           REACT_APP_AUTHENTICATION_URL: ${{ inputs.react_app_authentication_url }}
           REACT_APP_BASE_URL: ${{ needs.setup-environment.outputs.react_app_base_url }}

cypress.config.mjs

@@ -23,7 +23,4 @@ export default defineConfig({
       openMode: 0,
     },
   },
-  env: {
-    REACT_APP_API_ENDPOINT: process.env.REACT_APP_API_ENDPOINT,
-  },
 });

cypress/e2e/spec-html.cy.js

@@ -35,9 +35,7 @@ beforeEach(() => {
   // intercept request to editor api
   cy.intercept(
     "GET",
-    `${Cypress.env(
-      "REACT_APP_API_ENDPOINT",
-    )}/api/projects/blank-html-starter?locale=en`,
+    "https://test-editor-api.raspberrypi.org/api/projects/blank-html-starter?locale=en",
     defaultHtmlProject,
   );
 });

src/components/DownloadButton/DownloadButton.jsx

@@ -54,8 +54,8 @@ const DownloadButton = (props) => {
         project.name ||
           t("header.downloadFileNameDefault", {
             project_type: project.project_type,
-          })
-      )}`
+          }),
+      )}`,
     );
   };
 

src/components/Editor/ImageUploadButton/ImageUploadButton.jsx

@@ -36,7 +36,7 @@ const ImageUploadButton = ({ reactAppApiEndpoint }) => {
   const dispatch = useDispatch();
   const projectType = useSelector((state) => state.editor.project.project_type);
   const projectIdentifier = useSelector(
-    (state) => state.editor.project.identifier
+    (state) => state.editor.project.identifier,
   );
   const projectImages = useSelector((state) => state.editor.project.image_list);
   const imageNames = projectImages.map((image) => `${image.filename}`);
@@ -69,8 +69,8 @@ const ImageUploadButton = ({ reactAppApiEndpoint }) => {
       } else if (!allowedExtensions[projectType].includes(extension)) {
         dispatch(
           setNameError(
-            `Image names must end in ${allowedExtensionsString(projectType)}.`
-          )
+            `Image names must end in ${allowedExtensionsString(projectType)}.`,
+          ),
         );
         return false;
       } else {
@@ -82,7 +82,7 @@ const ImageUploadButton = ({ reactAppApiEndpoint }) => {
       const response = await uploadImages(
         projectIdentifier,
         user.access_token,
-        files
+        files,
       );
       dispatch(updateImages(response.data.image_list));
       closeModal();

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx

@@ -84,7 +84,7 @@ const PyodideRunner = (props) => {
               data.line,
               data.mistake,
               data.type,
-              data.info
+              data.info,
             );
             break;
           case "handleVisual":
@@ -210,8 +210,8 @@ const PyodideRunner = (props) => {
       projectImages.map(({ filename, url }) =>
         fetch(url)
           .then((response) => response.arrayBuffer())
-          .then((buffer) => writeFile(filename, buffer))
-      )
+          .then((buffer) => writeFile(filename, buffer)),
+      ),
     );
 
     for (const { name, extension, content } of projectCode) {
@@ -220,7 +220,7 @@ const PyodideRunner = (props) => {
 
     // program is the content of the component with name main and extension py
     const program = projectCode.find(
-      (component) => component.name === "main" && component.extension === "py"
+      (component) => component.name === "main" && component.extension === "py",
     ).content;
 
     if (interruptBuffer.current) {

src/components/Editor/Runners/PythonRunner/PythonRunner.jsx

@@ -16,10 +16,10 @@ const SKULPT_ONLY_MODULES = [
 const PythonRunner = () => {
   const project = useSelector((state) => state.editor.project);
   const codeRunTriggered = useSelector(
-    (state) => state.editor.codeRunTriggered
+    (state) => state.editor.codeRunTriggered,
   );
   const senseHatAlwaysEnabled = useSelector(
-    (state) => state.editor.senseHatAlwaysEnabled
+    (state) => state.editor.senseHatAlwaysEnabled,
   );
   const [usePyodide, setUsePyodide] = useState(true);
   const { t } = useTranslation();
@@ -32,7 +32,7 @@ const PythonRunner = () => {
     const getImports = (code) => {
       const codeWithoutMultilineStrings = code.replace(
         /'''[\s\S]*?'''|"""[\s\S]*?"""/gm,
-        ""
+        "",
       );
       const importRegex =
         /(?<=^\s*)(from\s+([a-zA-Z0-9_.]+)(\s+import\s+([a-zA-Z0-9_.]+))?)|(?<=^\s*)(import\s+([a-zA-Z0-9_.]+))/gm;
@@ -43,7 +43,7 @@ const PythonRunner = () => {
               match
                 .split(/from|import/)
                 .filter(Boolean)
-                .map((s) => s.trim())[0]
+                .map((s) => s.trim())[0],
           )
         : [];
       if (code.includes(`# ${t("input.comment.py5")}`)) {
@@ -57,7 +57,7 @@ const PythonRunner = () => {
         try {
           const imports = getImports(component.content);
           const hasSkulptOnlyModules = imports.some((name) =>
-            SKULPT_ONLY_MODULES.includes(name)
+            SKULPT_ONLY_MODULES.includes(name),
           );
           if (hasSkulptOnlyModules || senseHatAlwaysEnabled) {
             setUsePyodide(false);

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx

@@ -57,17 +57,17 @@ const externalLibraries = {
 const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const projectCode = useSelector((state) => state.editor.project.components);
   const mainComponent = projectCode?.find(
-    (component) => component.name === "main" && component.extension === "py"
+    (component) => component.name === "main" && component.extension === "py",
   );
   const projectIdentifier = useSelector(
-    (state) => state.editor.project.identifier
+    (state) => state.editor.project.identifier,
   );
   const user = useSelector((state) => state.auth.user);
   const isSplitView = useSelector((state) => state.editor.isSplitView);
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
   const isOutputOnly = useSelector((state) => state.editor.isOutputOnly);
   const codeRunTriggered = useSelector(
-    (state) => state.editor.codeRunTriggered
+    (state) => state.editor.codeRunTriggered,
   );
   const codeRunStopped = useSelector((state) => state.editor.codeRunStopped);
   const drawTriggered = useSelector((state) => state.editor.drawTriggered);
@@ -190,7 +190,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
             .then((code) => {
               if (!code) {
                 throw new Sk.builtin.ImportError(
-                  "Failed to load remote module"
+                  "Failed to load remote module",
                 );
               }
               externalLibraries[library].code = code;
@@ -199,7 +199,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
               function mapUrlToPromise(path) {
                 // If the script is already in the DOM don't add it again.
                 const existingScriptElement = document.querySelector(
-                  `script[src="${path}"]`
+                  `script[src="${path}"]`,
                 );
                 if (!existingScriptElement) {
                   return new Promise(function (resolve, _reject) {
@@ -221,11 +221,11 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                   (p, url) => {
                     return p.then(() => mapUrlToPromise(url));
                   },
-                  Promise.resolve()
+                  Promise.resolve(),
                 ); // initial
               } else {
                 promise = Promise.all(
-                  (externalLibraryInfo.dependencies || []).map(mapUrlToPromise)
+                  (externalLibraryInfo.dependencies || []).map(mapUrlToPromise),
                 );
               }
 
@@ -235,10 +235,10 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                 })
                 .catch(function () {
                   throw new Sk.builtin.ImportError(
-                    "Failed to load dependencies required"
+                    "Failed to load dependencies required",
                   );
                 });
-            })
+            }),
         )
       );
     }
@@ -358,7 +358,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     if (prog.includes(`# ${t("input.comment.py5")}`)) {
       prog = prog.replace(
         `# ${t("input.comment.py5")}`,
-        "from py5_imported_mode import *"
+        "from py5_imported_mode import *",
       );
 
       if (!prog.match(/(\nrun_sketch)/)) {

src/containers/WebComponentLoader.jsx

@@ -68,19 +68,19 @@ const WebComponentLoader = (props) => {
   const justLoaded = useSelector((state) => state.editor.justLoaded);
   const remixLoadFailed = useSelector((state) => state.editor.remixLoadFailed);
   const hasShownSavePrompt = useSelector(
-    (state) => state.editor.hasShownSavePrompt
+    (state) => state.editor.hasShownSavePrompt,
   );
   const saveTriggered = useSelector((state) => state.editor.saveTriggered);
 
   const modals = useSelector((state) => state.editor.modals);
   const errorModalShowing = useSelector(
-    (state) => state.editor.errorModalShowing
+    (state) => state.editor.errorModalShowing,
   );
   const newFileModalShowing = useSelector(
-    (state) => state.editor.newFileModalShowing
+    (state) => state.editor.newFileModalShowing,
   );
   const renameFileModalShowing = useSelector(
-    (state) => state.editor.renameFileModalShowing
+    (state) => state.editor.renameFileModalShowing,
   );
 
   const [cookies, setCookie] = useCookies(["theme", "fontSize"]);

src/hooks/useProject.js

@@ -26,7 +26,7 @@ export const useProject = ({
       ? null
       : JSON.parse(localStorage.getItem(id || "project"));
   const [cachedProject, setCachedProject] = useState(
-    getCachedProject(projectIdentifier)
+    getCachedProject(projectIdentifier),
   );
   const { i18n } = useTranslation();
   const dispatch = useDispatch();
@@ -60,7 +60,7 @@ export const useProject = ({
             locale: i18n.language,
             accessToken,
             assetsOnly: true,
-          })
+          }),
         );
         return;
       }
@@ -72,7 +72,7 @@ export const useProject = ({
             identifier: projectIdentifier,
             locale: i18n.language,
             accessToken: accessToken,
-          })
+          }),
         );
         return;
       }
@@ -109,7 +109,7 @@ export const useProject = ({
           reactAppApiEndpoint,
           identifier: projectIdentifier,
           accessToken: accessToken,
-        })
+        }),
       );
 
       // Prevents a failure on the initial render (using a ref to avoid triggering a render)
@@ -127,7 +127,7 @@ export const useProject = ({
           identifier: projectIdentifier,
           locale: i18n.language,
           accessToken: accessToken,
-        })
+        }),
       );
 
       loadDispatched.current = true;
@@ -142,7 +142,7 @@ export const useProject = ({
       const mainComponent = project.components?.find(
         (component) =>
           component.name === defaultName &&
-          component.extension === defaultExtension
+          component.extension === defaultExtension,
       ) || { name: defaultName, extension: defaultExtension, content: "" };
 
       const otherComponents =
@@ -151,7 +151,7 @@ export const useProject = ({
             !(
               component.name === defaultName &&
               component.extension === defaultExtension
-            )
+            ),
         ) || [];
 
       const updatedProject = {