From 7b64110e35037af9cde6a4840be1383fda0c0fdb Mon Sep 17 00:00:00 2001 From: Mahmoud Moravej <55846417+mahmoudmoravej@users.noreply.github.com> Date: Mon, 4 Mar 2024 14:06:49 -0500 Subject: [PATCH] =?UTF-8?q?add=20setting=20context=20and=20move=20graphql?= =?UTF-8?q?=20url=20to=20it=20and=20got=20rid=20of=20session=E2=80=A6=20(#?= =?UTF-8?q?60)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add setting context and move graphql url to it and got rid of session storage * temp rename to resolve case sensitivity problem * rename back --- app/contexts/apollo/apolloClientProvider.tsx | 6 +++-- ...r.tsx => authenticationClientProvider.tsx} | 0 ...r.tsx => authenticationServerProvider.tsx} | 0 app/contexts/index.ts | 6 +++-- .../settings/settingsClientProvider.tsx | 24 +++++++++++++++++ app/contexts/settings/settingsContext.ts | 12 +++++++++ .../settings/settingsServerProvider.tsx | 21 +++++++++++++++ app/entry.client.tsx | 22 ++++++++++------ app/entry.server.tsx | 24 +++++++++++++---- app/models/settings.ts | 4 ++- app/routes/_dashboard.tsx | 26 ++----------------- app/routes/_site.tsx | 20 -------------- remix.env.d.ts | 1 + 13 files changed, 104 insertions(+), 62 deletions(-) rename app/contexts/authentication/{AuthenticationClientProvider.tsx => authenticationClientProvider.tsx} (100%) rename app/contexts/authentication/{AuthenticationServerProvider.tsx => authenticationServerProvider.tsx} (100%) create mode 100644 app/contexts/settings/settingsClientProvider.tsx create mode 100644 app/contexts/settings/settingsContext.ts create mode 100644 app/contexts/settings/settingsServerProvider.tsx diff --git a/app/contexts/apollo/apolloClientProvider.tsx b/app/contexts/apollo/apolloClientProvider.tsx index e4f7632..d945b4c 100644 --- a/app/contexts/apollo/apolloClientProvider.tsx +++ b/app/contexts/apollo/apolloClientProvider.tsx @@ -2,6 +2,7 @@ import { getApolloClient } from "~/utils"; import { ApolloProvider } from "@apollo/client"; import { useAuthenticationContext } from "../authentication/authenticationContext"; import { useMemo } from "react"; +import { useSettingsContext } from "../settings/settingsContext"; export const ApolloClientProvider = ({ children, @@ -9,14 +10,15 @@ export const ApolloClientProvider = ({ children: React.ReactNode; }) => { const { user } = useAuthenticationContext(); + const { graphqlUrl } = useSettingsContext(); const client = useMemo(() => { return getApolloClient( - sessionStorage.getItem("graphql_url"), + graphqlUrl, user?.jwt_token, { organization_id: user?.organization_id?.toString() }, window.__APOLLO_STATE__, ); - }, [user?.jwt_token, user?.organization_id]); + }, [user?.jwt_token, user?.organization_id, graphqlUrl]); return {children}; }; diff --git a/app/contexts/authentication/AuthenticationClientProvider.tsx b/app/contexts/authentication/authenticationClientProvider.tsx similarity index 100% rename from app/contexts/authentication/AuthenticationClientProvider.tsx rename to app/contexts/authentication/authenticationClientProvider.tsx diff --git a/app/contexts/authentication/AuthenticationServerProvider.tsx b/app/contexts/authentication/authenticationServerProvider.tsx similarity index 100% rename from app/contexts/authentication/AuthenticationServerProvider.tsx rename to app/contexts/authentication/authenticationServerProvider.tsx diff --git a/app/contexts/index.ts b/app/contexts/index.ts index 9cd1698..fda5a67 100644 --- a/app/contexts/index.ts +++ b/app/contexts/index.ts @@ -1,5 +1,7 @@ export * from "./authentication/authenticationContext"; -export * from "./authentication/AuthenticationClientProvider"; -export * from "./authentication/AuthenticationServerProvider"; +export * from "./authentication/authenticationClientProvider"; +export * from "./authentication/authenticationServerProvider"; export * from "./apollo/apolloClientProvider"; export * from "./apollo/apolloServerProvider"; +export * from "./settings/settingsServerProvider"; +export * from "./settings/settingsClientProvider"; diff --git a/app/contexts/settings/settingsClientProvider.tsx b/app/contexts/settings/settingsClientProvider.tsx new file mode 100644 index 0000000..0c2b76e --- /dev/null +++ b/app/contexts/settings/settingsClientProvider.tsx @@ -0,0 +1,24 @@ +import { useState } from "react"; + +import { SettingsContext } from "./settingsContext"; + +export const SettingsClientProvider = ({ + children, +}: { + children: React.ReactNode; +}) => { + const [graphqlUrl] = useState(window.__GRAPHQLURL__); + const [navBarOpen, setNavBarOpen] = useState(true); + + return ( + + {children} + + ); +}; diff --git a/app/contexts/settings/settingsContext.ts b/app/contexts/settings/settingsContext.ts new file mode 100644 index 0000000..d47bc3a --- /dev/null +++ b/app/contexts/settings/settingsContext.ts @@ -0,0 +1,12 @@ +import React from "react"; +import { Settings } from "~/models/settings"; + +export const SettingsContext = React.createContext({ + graphqlUrl: "", + navBarOpen: false, + setNavBarOpen: () => false, +}); + +export function useSettingsContext() { + return React.useContext(SettingsContext); +} diff --git a/app/contexts/settings/settingsServerProvider.tsx b/app/contexts/settings/settingsServerProvider.tsx new file mode 100644 index 0000000..192ae4e --- /dev/null +++ b/app/contexts/settings/settingsServerProvider.tsx @@ -0,0 +1,21 @@ +import { SettingsContext } from "./settingsContext"; + +export const SettingsServerProvider = ({ + graphqlUrl, + children, +}: { + graphqlUrl: string; + children: React.ReactNode; +}) => { + return ( + {}, + }} + > + {children} + + ); +}; diff --git a/app/entry.client.tsx b/app/entry.client.tsx index e63201e..ca8defd 100644 --- a/app/entry.client.tsx +++ b/app/entry.client.tsx @@ -8,19 +8,25 @@ import { ThemeProvider } from "@material-tailwind/react"; import { RemixBrowser } from "@remix-run/react"; import { startTransition, StrictMode } from "react"; import { hydrateRoot } from "react-dom/client"; -import { ApolloClientProvider, AuthenticationClientProvider } from "./contexts"; +import { + ApolloClientProvider, + AuthenticationClientProvider, + SettingsClientProvider, +} from "./contexts"; startTransition(() => { hydrateRoot( document, - - - - - - - + + + + + + + + + , ); }); diff --git a/app/entry.server.tsx b/app/entry.server.tsx index c241b19..39a2751 100644 --- a/app/entry.server.tsx +++ b/app/entry.server.tsx @@ -17,7 +17,11 @@ import { getDataFromTree } from "@apollo/client/react/ssr"; import { authenticator } from "./services/auth.server"; import type { ReactElement } from "react"; import * as utils from "./utils"; -import { AuthenticationServerProvider, ApolloServerProvider } from "./contexts"; +import { + AuthenticationServerProvider, + ApolloServerProvider, + SettingsServerProvider, +} from "./contexts"; import { User } from "./models/user"; const ABORT_DELAY = 5_000; @@ -169,7 +173,8 @@ async function wrapRemixServerWithApollo( dangerouslySetInnerHTML={{ __html: ` window.__APOLLO_STATE__=${serializeState(initialState)}; - window.__USER_STATE__=${serializeState(user)}`, + window.__USER_STATE__=${serializeState(user)}; + window.__GRAPHQLURL__=${serializeState(process.env.GRAPHQL_SCHEMA_URL)};`, }} /> @@ -195,8 +200,17 @@ function getServerApp( remixServer: ReactElement, ) { return ( - - {remixServer} - + + + + {remixServer} + + + ); } diff --git a/app/models/settings.ts b/app/models/settings.ts index fa063e8..a9e1c83 100644 --- a/app/models/settings.ts +++ b/app/models/settings.ts @@ -1,3 +1,5 @@ export type Settings = { - graphql_url: string; + graphqlUrl: string; + navBarOpen: boolean; + setNavBarOpen: (open: boolean) => void; }; diff --git a/app/routes/_dashboard.tsx b/app/routes/_dashboard.tsx index 3b6f942..97aa6ab 100644 --- a/app/routes/_dashboard.tsx +++ b/app/routes/_dashboard.tsx @@ -1,38 +1,16 @@ -import { Outlet, useLoaderData } from "@remix-run/react"; +import { Outlet } from "@remix-run/react"; import { IconButton } from "@material-tailwind/react"; import { Cog6ToothIcon } from "@heroicons/react/24/solid"; import { Sidenav, DashboardNavbar, Footer } from "~/widgets/layout"; import { getRoutes } from "~/routesData"; -import { authenticator } from "~/services/auth.server"; -import { LoaderFunctionArgs, redirect } from "@remix-run/node"; -import { useEffect } from "react"; -import { Settings } from "~/models/settings"; import { useAuthenticationContext } from "~/contexts/authentication/authenticationContext"; -export async function loader({ request }: LoaderFunctionArgs) { - let user = await authenticator.isAuthenticated(request); - if (!user && request.url.indexOf("/signin") == -1) return redirect("/signin"); //TODO: any danger of infinite loop? - - const settings: Settings = { graphql_url: process.env.GRAPHQL_SCHEMA_URL! }; - return { user, settings }; -} - -function useSettings() { - const data = useLoaderData(); - return data.settings; -} - export default function Dashboard() { - //TODO: change the followings to get value from context + //TODO: change the followings to get value from settings context const sidenavType = getRoutes == null ? "dark" : "white"; // this fake comparison is to avoid TS error only. - const settings = useSettings(); const { user } = useAuthenticationContext(); - useEffect(() => { - sessionStorage.setItem("graphql_url", settings.graphql_url); - }, [settings.graphql_url]); - return (
(); - return data.settings; -} - export default function Site() { - const settings = useSettings(); - - useEffect(() => { - sessionStorage.setItem("graphql_url", settings.graphql_url); - }, [settings.graphql_url]); - return ( <>
diff --git a/remix.env.d.ts b/remix.env.d.ts index 3a15a38..3bd0dd4 100644 --- a/remix.env.d.ts +++ b/remix.env.d.ts @@ -4,4 +4,5 @@ interface Window { __APOLLO_STATE__: any; __USER_STATE__: any; + __GRAPHQLURL__: string; }