Upgrade packages and made compatibility to support React v18

.gitpod.yml

@@ -1,3 +1,3 @@
 tasks:
   - init: yarn
-    command: yarn dev
+    command: yarn dev --host

package.json

@@ -11,36 +11,36 @@
   },
   "dependencies": {
     "@fontsource/poppins": "^4.5.0",
-    "@headlessui/react": "^1.4.3",
+    "@headlessui/react": "^0.0.0-insiders.b4a4e0b",
     "@tonejs/midi": "^2.0.28",
     "jszip": "^3.7.1",
     "localforage": "^1.10.0",
     "pako": "^2.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0-rc.3",
+    "react-dom": "^18.0.0-rc.3",
     "react-icons": "^4.3.1",
-    "react-router-dom": "^6.0.2",
-    "webmidi": "^3.0.16",
-    "zustand": "^3.7.0"
+    "react-router-dom": "^6.3.0",
+    "webmidi": "^3.0.19",
+    "zustand": "^4.0.0-rc.0"
   },
   "devDependencies": {
     "@types/pako": "^1.0.3",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
-    "@vitejs/plugin-react": "^1.1.4",
+    "@vitejs/plugin-react": "^1.3.1",
     "autoprefixer": "^10.4.2",
     "dotenv": "^14.2.0",
     "dotenv-cli": "^5.1.0",
     "eslint": "^8.7.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.29.4",
     "postcss": "^8.4.6",
     "release-it": "^14.14.0",
     "tailwindcss": "^3.0.23",
     "typescript": "^4.5.4",
     "user-agent-data-types": "^0.2.0",
-    "vite": "^2.7.13",
+    "vite": "^2.9.5",
     "vite-plugin-pwa": "^0.11.13"
   },
   "author": {

src/components/ProjectPlay.tsx

@@ -1,6 +1,5 @@
 import type {
-  ClickEventFunctionProps,
-  ContextEventFunctionProps
+  ClickEventFunctionProps
 } from "@/components/Launchpad";
 
 import Launchpad from "@/components/Launchpad";
@@ -12,7 +11,6 @@ import {
 
 export default function ProjectPlay () {
   const project = useCurrentProjectStore(state => state.data);
-  console.log(project);
 
   const handlePadDown: ClickEventFunctionProps = (padId, launchpadId, padElement) => {
     padElement.style.backgroundColor = getHexFromVelocity(3);
@@ -23,15 +21,11 @@ export default function ProjectPlay () {
     padElement.removeAttribute("style");
   };
 
-  const handleContextMenu: ContextEventFunctionProps = (padId, launchpadId, event) => {
-    console.log(event.currentTarget);
-  };
-
   if (!project) return (
     <p>Loading project data...</p>
   );
 
-  console.info("[RENDER][/:slug][ProjectPlay]");
+  /** Debug */ console.info("[RENDER][/:slug][ProjectPlay]");
 
   return (
     <div className="
@@ -55,8 +49,6 @@ export default function ProjectPlay () {
                 layout="programmer"
                 onPadDown={handlePadDown}
                 onPadUp={handlePadUp}
-
-                onContextMenu={handleContextMenu}
               />
             </div>
             <button className="rounded-full bg-gray-600 p-2"></button>

src/main.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 
 // Fonts
 import "@fontsource/poppins/latin-300.css";
@@ -28,7 +28,13 @@ import ImportProjectModal from "@/components/ImportProjectModal";
 import CreateProjectModal from "@/components/CreateProjectModal";
 // import LpadderWrongVersionModal from "./components/LpadderWrongVersionModal";
 
-ReactDOM.render(
+/** Mount point of the React app. */
+const container = document.getElementById("root");
+if (!container) throw new Error("Failed to find the root element.");
+
+// Create the root and render the app.
+const root = ReactDOM.createRoot(container);
+root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Routes>
@@ -43,6 +49,5 @@ ReactDOM.render(
     <ReloadPrompt />
     <ImportProjectModal />
     <CreateProjectModal />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+  </React.StrictMode>
+);

src/pages/projects/index.tsx

@@ -249,18 +249,18 @@ export default function Projects () {
     };
 
     const unsubcribe = useCurrentProjectStore.subscribe(state => {
-      project_slug.current = state.slug;
-
-      if (!state.slug) {
-        showMenuBarComponents(false);
-      }
+      if (!state.slug) showMenuBarComponents(false);
       else {
         showMenuBarComponents(true);
 
-        // Configure shortcuts. 
-        document.addEventListener("keydown", saveShortcut);
-        console.info("[/][useEffect][CTRL+S] Configured shortcut.");
+        // Reconfigure shortcuts only when the slug changes. 
+        if (project_slug.current !== state.slug) {
+          document.addEventListener("keydown", saveShortcut);
+          console.info("[/][useEffect][CTRL+S] Configured shortcut.");
+        }
       }
+
+      project_slug.current = state.slug;
 
       /** Show the save button only when project isn't globally saved. */
       if (!projectSaveButtonRef.current) return; 
@@ -277,7 +277,7 @@ export default function Projects () {
       document.removeEventListener("keydown", saveShortcut);
       console.info("[/][useEffect][CTRL+S] Unconfigured shortcut.");
 
-      return unsubcribe();
+      unsubcribe();
     };
   }, []);
 
@@ -372,7 +372,7 @@ export default function Projects () {
       />
 
       <div
-        className="w-screen h-screen"
+        className="h-screen"
         onContextMenu={(e) => /** Prevent context menu. */ e.preventDefault()}
       >
         <header

src/pages/utilities/index.tsx

@@ -77,7 +77,7 @@ const UtilitiesHome = () => {
 // Routes for `/utilities`.
 export default function Utilities () {
   return (
-    <div className="relative w-screen min-h-screen">
+    <div className="relative min-h-screen">
       <UtilitiesHeader />
 
       <main className="relative p-4 h-full">