useProject.js

/* eslint-disable react-hooks/exhaustive-deps */
import { useRef, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { syncProject, setProject } from "../redux/EditorSlice";
import { createDefaultPythonProject } from "../utils/defaultProjects";
import { useTranslation } from "react-i18next";

export const useProject = ({
  reactAppApiEndpoint = null,
  assetsIdentifier = null,
  projectIdentifier = null,
  initialProject = null,
  code = null,
  accessToken = null,
  loadRemix = false,
  loadCache = true,
  remixLoadFailed = false,
  locale = null,
}) => {
  const loading = useSelector((state) => state.editor.loading);
  const isEmbedded = useSelector((state) => state.editor.isEmbedded);
  const isBrowserPreview = useSelector((state) => state.editor.browserPreview);
  const project = useSelector((state) => state.editor.project);
  const loadDispatched = useRef(false);

  const getCachedProject = (id) =>
    isEmbedded && !isBrowserPreview
      ? null
      : JSON.parse(localStorage.getItem(id || "project"));
  const [cachedProject, setCachedProject] = useState(
    getCachedProject(projectIdentifier),
  );
  const { i18n } = useTranslation();
  const dispatch = useDispatch();
  const effectiveLocale = locale ?? i18n.language;

  const loadCachedProject = () => {
    dispatch(setProject(cachedProject));
  };

  useEffect(() => {
    setCachedProject(getCachedProject(projectIdentifier));
  }, [projectIdentifier]);

  useEffect(() => {
    let didUnmount = false;

    const loadProjectData = async () => {
      if (loadRemix) {
        return;
      }

      const is_cached_saved_project =
        projectIdentifier &&
        cachedProject &&
        cachedProject.identifier === projectIdentifier;
      const is_cached_unsaved_project =
        !projectIdentifier && cachedProject && !initialProject;

      // At the moment this will never match because the cachedProject doesn't have a locale attribute (yet),
      // so this will always be false, which effectively disables the whole caching mechanism
      const cachedLocaleMatches = cachedProject?.locale === effectiveLocale;

      if (
        loadCache &&
        (is_cached_saved_project || is_cached_unsaved_project) &&
        cachedLocaleMatches
      ) {
        loadCachedProject();
        return;
      }

      if (assetsIdentifier) {
        dispatch(
          syncProject("load")({
            reactAppApiEndpoint,
            identifier: assetsIdentifier,
            locale: effectiveLocale,
            accessToken,
            assetsOnly: true,
          }),
        );
        return;
      }

      if (projectIdentifier) {
        dispatch(
          syncProject("load")({
            reactAppApiEndpoint,
            identifier: projectIdentifier,
            locale: effectiveLocale,
            accessToken: accessToken,
          }),
        );
        return;
      }

      if (initialProject) {
        const project = JSON.parse(initialProject);
        dispatch(setProject(project));
        return;
      }

      if (code) {
        const project = {
          name: "Blank project",
          project_type: "python",
          components: [{ name: "main", extension: "py", content: code }],
        };
        dispatch(setProject(project));
        return;
      }

      const data = await createDefaultPythonProject(effectiveLocale);

      if (didUnmount) {
        return;
      }

      dispatch(setProject(data));
    };

    void loadProjectData();

    return () => {
      didUnmount = true;
    };
  }, [
    code,
    projectIdentifier,
    cachedProject,
    effectiveLocale,
    accessToken,
    loadRemix,
    initialProject,
  ]);

  // Try to load the remix, if it fails set `remixLoadFailed` true, and load the project in the next useEffect
  useEffect(() => {
    if (!projectIdentifier || !accessToken || !loadRemix) return;

    if (!remixLoadFailed && !loadDispatched.current) {
      dispatch(
        syncProject("loadRemix")({
          reactAppApiEndpoint,
          identifier: projectIdentifier,
          accessToken: accessToken,
        }),
      );

      // Prevents a failure on the initial render (using a ref to avoid triggering a render)
      loadDispatched.current = true;
    }
  }, [projectIdentifier, accessToken, project, loadRemix, remixLoadFailed]);

  useEffect(() => {
    if (!projectIdentifier || !loadRemix) return;

    if (remixLoadFailed && !loadDispatched.current) {
      dispatch(
        syncProject("load")({
          reactAppApiEndpoint,
          identifier: projectIdentifier,
          locale: effectiveLocale,
          accessToken: accessToken,
        }),
      );

      loadDispatched.current = true;
    }
  }, [projectIdentifier, effectiveLocale, accessToken, remixLoadFailed]);

  useEffect(() => {
    if (code && loading === "success") {
      const defaultName = project.project_type === "html" ? "index" : "main";
      const defaultExtension = project.project_type === "html" ? "html" : "py";

      const mainComponent = project.components?.find(
        (component) =>
          component.name === defaultName &&
          component.extension === defaultExtension,
      ) || { name: defaultName, extension: defaultExtension, content: "" };

      const otherComponents =
        project.components?.filter(
          (component) =>
            !(
              component.name === defaultName &&
              component.extension === defaultExtension
            ),
        ) || [];

      const updatedProject = {
        ...project,
        project_type: project.project_type || "python",
        components: [
          ...otherComponents,
          {
            ...mainComponent,
            content: code,
          },
        ],
      };
      dispatch(setProject(updatedProject));
    }
  }, [code, loading]);
};