frontend: add ParamContext

twenty-frontend/src/js/Context.ts

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const ParamContext = createContext<Record<string, string>>({});

twenty-frontend/src/js/components/App.tsx

@@ -1,14 +1,21 @@
 import React, { PropsWithChildren } from "react";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+import { ParamContext } from "/Context";
 
-export function App({children}: PropsWithChildren<{}>) {
+export function App({ children }: PropsWithChildren<{}>) {
   const client = new ApolloClient({
     uri: "/graphql",
     cache: new InMemoryCache(),
   });
+  const params = Object.fromEntries(
+    location.hash
+      .substring(1, location.hash.length)
+      .split(",")
+      .map(e => e.split("=")),
+  );
   return (
-    <ApolloProvider client={client}>
+    <ParamContext.Provider value={params}>
-      {children}
+      <ApolloProvider client={client}>{children}</ApolloProvider>
-    </ApolloProvider>
+    </ParamContext.Provider>
-  )
+  );
 }

twenty-frontend/src/js/components/Task.tsx

@@ -9,8 +9,6 @@ import { rendermd } from "/lib/markdown-utils";
 import { NavBar } from "/components/NavBar";
 import { Tabs, Tab } from "/components/Tabs";
 
-import classnames from "classnames";
-
 const DEFAULT_TASK_CONTENT = [
   "## Subtasks",
   "",

twenty-frontend/src/js/main/task/edit.tsx

@@ -1,16 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ParamContext } from "/Context";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Task } from "/components/Task";
 
 (function () {
-  const params = Object.fromEntries(
-    location.hash
-      .substring(1, location.hash.length)
-      .split(",")
-      .map(e => e.split("=")),
-  );
   const root = document.querySelector(".react-root")!;
+  const params = useContext(ParamContext);
   ReactDOM.createRoot(root).render(
     <App>
       <Task taskId={Number(params.id)} />