frontend: replace 'constants.ts' with 'App.tsx'

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

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from "react";
+import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+
+export function App({children}: PropsWithChildren<{}>) {
+  const client = new ApolloClient({
+    uri: "/graphql",
+    cache: new InMemoryCache(),
+  });
+  return (
+    <ApolloProvider client={client}>
+      {children}
+    </ApolloProvider>
+  )
+}

twenty-frontend/src/js/constants.ts

@@ -1,5 +0,0 @@
-import { InMemoryCache } from "@apollo/client";
-export const CLIENT_OPTIONS = {
-  uri: "/graphql",
-  cache: new InMemoryCache(),
-}

twenty-frontend/src/js/main/projects.tsx

@@ -1,15 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { App } from "/components/App";
 import { Projects } from "/components/Projects";
-import { CLIENT_OPTIONS } from "/constants";
-import { ApolloProvider, ApolloClient } from "@apollo/client";
 
 (function () {
   const root = document.querySelector(".react-root")!;
-  const client = new ApolloClient(CLIENT_OPTIONS);
   ReactDOM.createRoot(root).render(
-    <ApolloProvider client={client}>
+    <App>
       <Projects />
-    </ApolloProvider>,
+    </App>,
   );
 })();

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

@@ -1,8 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { ApolloProvider, ApolloClient } from "@apollo/client";
+import { App } from "/components/App";
-import { CLIENT_OPTIONS } from "/constants";
+import { Task } from "/components/Task";
-import { Task as Component } from "/components/Task";
 
 (function () {
   const params = Object.fromEntries(
@@ -11,11 +10,10 @@ import { Task as Component } from "/components/Task";
       .split(",")
       .map(e => e.split("=")),
   );
-  const client = new ApolloClient(CLIENT_OPTIONS);
   const root = document.querySelector(".react-root")!;
   ReactDOM.createRoot(root).render(
-    <ApolloProvider client={client}>
+    <App>
-      <Component taskId={Number(params.id)} />
+      <Task taskId={Number(params.id)} />
-    </ApolloProvider>,
+    </App>,
   );
 })();

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

@@ -1,15 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { CLIENT_OPTIONS } from "/constants";
+import { App } from "/components/App";
-import { ApolloClient, ApolloProvider } from "@apollo/client";
 import { Task } from "/components/Task";
 
 (function () {
   const root = document.querySelector(".react-root")!;
-  const client = new ApolloClient(CLIENT_OPTIONS);
   ReactDOM.createRoot(root).render(
-    <ApolloProvider client={client}>
+    <App>
       <Task />
-    </ApolloProvider>,
+    </App>,
   );
 })();

twenty-frontend/src/js/main/tasks.tsx

@@ -1,15 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { CLIENT_OPTIONS } from "/constants";
+import { App } from "/components/App";
-import { ApolloClient, ApolloProvider } from "@apollo/client";
 import { Tasks } from "/components/Tasks";
 
 (function () {
   const root = document.querySelector(".react-root")!;
-  const client = new ApolloClient(CLIENT_OPTIONS);
   ReactDOM.createRoot(root).render(
-    <ApolloProvider client={client}>
+    <App>
       <Tasks />
-    </ApolloProvider>,
+    </App>,
   );
 })();