Fix project.slug re-render on /projects

src/components/ProjectEditor.tsx

@@ -7,7 +7,6 @@ import {
   useState
 } from "react";
 
-
 import {
   useUnsavedProjectStore
 } from "@/stores/unsaved_project";

src/components/ProjectPlay.tsx

@@ -12,10 +12,7 @@ import {
 } from "@/stores/current_project";
 
 export default function ProjectPlay () {
-  const projectRef = useRef(useCurrentProjectStore.getState().data);
-  useEffect(() => useCurrentProjectStore.subscribe(
-    state => (projectRef.current = state.data)
-  ), []);
+  const project = useCurrentProjectStore(state => state.data);
 
   const handlePadDown: ClickEventFunctionProps = (padId, launchpadId, padElement) => {
     padElement.style.backgroundColor = getHexFromVelocity(3);
@@ -30,7 +27,7 @@ export default function ProjectPlay () {
     console.log(event.currentTarget);
   };
 
-  if (!projectRef.current) return (
+  if (!project) return (
     <p>Loading project data...</p>
   );
 
@@ -45,7 +42,7 @@ export default function ProjectPlay () {
         flex justify-start items-center 
         w-fit h-full gap-2
       ">
-        {projectRef.current.launchpads.map((_, launchpadId) =>
+        {project.launchpads.map((_, launchpadId) =>
           <div
             key={launchpadId}
             className="flex gap-2 items-start flex-row h-full"

src/pages/projects/index.tsx

@@ -57,7 +57,6 @@ export default function Projects () {
   }), shallow);
 
   const project = useCurrentProjectStore(state => ({
-    slug: state.slug,
     setSlug: state.setSlug,
     isGloballySaved: state.isGloballySaved,
     setIsGloballySaved: state.setIsGloballySaved,
@@ -74,8 +73,8 @@ export default function Projects () {
     const navigate = useNavigate();
 
     const handleProjectUpdate = () => {
-      if (project.slug === slug) return;
-      console.info("[handleProjectUpdate] Switching from", project.slug, "to", slug);
+      if (project_slug.current === slug) return;
+      console.info("[handleProjectUpdate] Switching from", project_slug.current, "to", slug);
 
       // We remove any currently opened project.
       project.setIsGloballySaved(true);
@@ -124,7 +123,7 @@ export default function Projects () {
                 // If the current project was removed, we redirect
                 // to root because project will be inexistant.
                 // Also remove the useless components.
-                if (project.slug === slug) {
+                if (project_slug.current === slug) {
                   navigate("/projects");
 
                   // We remove any currently opened project.
@@ -207,6 +206,13 @@ export default function Projects () {
     })();
   }, []);
 
+  const project_slug = useRef(useCurrentProjectStore.getState().slug);
+
+  // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
+  useEffect(() => useCurrentProjectStore.subscribe(
+    state => (project_slug.current = state.slug)
+  ), []);
+
   /** Setup configuration for CTRL+S shortcut. */
   useEffect(() => {
     const platform = navigator.userAgentData?.platform || navigator.platform;
@@ -216,7 +222,7 @@ export default function Projects () {
       if (e.key === "s" && (platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
         e.preventDefault();
 
-        console.info(`[CTRL+S] Save for ${project.slug}.`);
+        console.info(`[CTRL+S] Save for ${project_slug.current}.`);
         syncDataGlobally();
       }
     };
@@ -229,7 +235,7 @@ export default function Projects () {
       document.removeEventListener("keydown", saveShortcut);
       console.info("[CTRL+S] Unconfigured shortcut.");
     };
-  }, [project.slug]);
+  }, [project_slug.current]);
 
   const default_lpadderWrongVersionModalData: LpadderWrongVersionModalData = {
     requiredVersion: APP_VERSION,
@@ -333,15 +339,15 @@ export default function Projects () {
             </button>
           </div>
 
-          {project.slug &&
+          {project_slug.current &&
             <ul className="flex flex-row-reverse gap-4">
               <HeaderItem>
                 <DropdownButton
                   buttonClassName="p-2 transition-colors hover:bg-pink-800 hover:bg-opacity-20 text-gray-400 hover:text-pink-400 rounded cursor-pointer"
                   items={[
                     {
                       name: "Export to .zip",
-                      action: async () => project.slug ? await exportCoverToZip(project.slug) : null
+                      action: async () => project_slug.current ? await exportCoverToZip(project_slug.current) : null
                     },
                     {
                       name: "Collaborate online",
@@ -385,7 +391,7 @@ export default function Projects () {
                     key={local_project.slug}
                     slug={local_project.slug}
                     name={local_project.metadata.name}
-                    selected={local_project.slug === project.slug}
+                    selected={local_project.slug === project_slug.current}
                   />
                 )}
               </Fragment>

src/pages/projects/slug/index.tsx

@@ -20,8 +20,6 @@ export default function ProjectOverview () {
   const navigate = useNavigate();
   const params = useParams();
 
-  const unsaved_project = useUnsavedProjectStore();
-
   const project = useCurrentProjectStore(state => ({
     metadata: state.metadata,
     setData: state.setData,
@@ -52,7 +50,7 @@ export default function ProjectOverview () {
 
       // Sync with local stores.
       project.setData(projectData.data);
-      unsaved_project.setData(projectData.data);
+      useUnsavedProjectStore.getState().setData(projectData.data);
       project.setMetadata(projectLoadedMetadata.metadata);
 
       // On the first load, the project is already saved

src/stores/unsaved_project.ts

@@ -1,6 +1,8 @@
 import type { ProjectData } from "@/types/Project";
 import create from "zustand";
 
+import { useCurrentProjectStore } from "./current_project";
+
 interface UnsavedProjectStore {
   data: ProjectData | null;
   setData: (data: ProjectData | null) => void;
@@ -12,5 +14,11 @@ interface UnsavedProjectStore {
  */
 export const useUnsavedProjectStore = create<UnsavedProjectStore>((set) => ({
   data: null,
-  setData: (data) => set({ data })
+  setData: (data) => {
+    // When data is modified, we set the project as not globally saved.
+    if (useCurrentProjectStore.getState().isGloballySaved !== false)
+      useCurrentProjectStore.getState().setIsGloballySaved(false);
+
+    set({ data });
+  }
 }));