Skip to content

Commit

Permalink
add setting context and move graphql url to it and got rid of session…
Browse files Browse the repository at this point in the history
… storage
  • Loading branch information
mahmoudmoravej committed Mar 4, 2024
1 parent 6cc5c19 commit 02716c5
Show file tree
Hide file tree
Showing 11 changed files with 104 additions and 62 deletions.
6 changes: 4 additions & 2 deletions app/contexts/apollo/apolloClientProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,23 @@ 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,
}: {
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 <ApolloProvider client={client}>{children}</ApolloProvider>;
};
6 changes: 4 additions & 2 deletions app/contexts/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
export * from "./authentication/authenticationContext";
export * from "./authentication/AuthenticationClientProvider";
export * from "./authentication/AuthenticationServerProvider";
export * from "./authentication/authenticationClientProvider";

Check failure on line 2 in app/contexts/index.ts

View workflow job for this annotation

GitHub Actions / run

Cannot find module './authentication/authenticationClientProvider' or its corresponding type declarations.
export * from "./authentication/authenticationServerProvider";

Check failure on line 3 in app/contexts/index.ts

View workflow job for this annotation

GitHub Actions / run

Cannot find module './authentication/authenticationServerProvider' or its corresponding type declarations.
export * from "./apollo/apolloClientProvider";
export * from "./apollo/apolloServerProvider";
export * from "./settings/settingsServerProvider";
export * from "./settings/settingsClientProvider";
24 changes: 24 additions & 0 deletions app/contexts/settings/settingsClientProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useState } from "react";

import { SettingsContext } from "./settingsContext";

export const SettingsClientProvider = ({
children,
}: {
children: React.ReactNode;
}) => {
const [graphqlUrl] = useState<string>(window.__GRAPHQLURL__);
const [navBarOpen, setNavBarOpen] = useState<boolean>(true);

return (
<SettingsContext.Provider
value={{
graphqlUrl,
navBarOpen,
setNavBarOpen,
}}
>
{children}
</SettingsContext.Provider>
);
};
12 changes: 12 additions & 0 deletions app/contexts/settings/settingsContext.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";
import { Settings } from "~/models/settings";

export const SettingsContext = React.createContext<Settings>({
graphqlUrl: "",
navBarOpen: false,
setNavBarOpen: () => false,
});

export function useSettingsContext() {
return React.useContext(SettingsContext);
}
21 changes: 21 additions & 0 deletions app/contexts/settings/settingsServerProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { SettingsContext } from "./settingsContext";

export const SettingsServerProvider = ({
graphqlUrl,
children,
}: {
graphqlUrl: string;
children: React.ReactNode;
}) => {
return (
<SettingsContext.Provider
value={{
graphqlUrl,
navBarOpen: false,
setNavBarOpen: () => {},
}}
>
{children}
</SettingsContext.Provider>
);
};
22 changes: 14 additions & 8 deletions app/entry.client.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,

Check failure on line 13 in app/entry.client.tsx

View workflow job for this annotation

GitHub Actions / run

Module '"./contexts"' has no exported member 'AuthenticationClientProvider'.
SettingsClientProvider,
} from "./contexts";

startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<AuthenticationClientProvider>
<ApolloClientProvider>
<ThemeProvider>
<RemixBrowser />
</ThemeProvider>
</ApolloClientProvider>
</AuthenticationClientProvider>
<SettingsClientProvider>
<AuthenticationClientProvider>
<ApolloClientProvider>
<ThemeProvider>
<RemixBrowser />
</ThemeProvider>
</ApolloClientProvider>
</AuthenticationClientProvider>
</SettingsClientProvider>
</StrictMode>,
);
});
24 changes: 19 additions & 5 deletions app/entry.server.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,

Check failure on line 21 in app/entry.server.tsx

View workflow job for this annotation

GitHub Actions / run

Module '"./contexts"' has no exported member 'AuthenticationServerProvider'.
ApolloServerProvider,
SettingsServerProvider,
} from "./contexts";
import { User } from "./models/user";

const ABORT_DELAY = 5_000;
Expand Down Expand Up @@ -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)};`,
}}
/>
</>
Expand All @@ -195,8 +200,17 @@ function getServerApp(
remixServer: ReactElement,
) {
return (
<AuthenticationServerProvider user={user}>
<ApolloServerProvider client={client}>{remixServer}</ApolloServerProvider>
</AuthenticationServerProvider>
<SettingsServerProvider
graphqlUrl={
process.env.GRAPHQL_SCHEMA_URL ??
"process.env.GRAPHQL_SCHEMA_URL is not present"
}
>
<AuthenticationServerProvider user={user}>
<ApolloServerProvider client={client}>
{remixServer}
</ApolloServerProvider>
</AuthenticationServerProvider>
</SettingsServerProvider>
);
}
4 changes: 3 additions & 1 deletion app/models/settings.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export type Settings = {
graphql_url: string;
graphqlUrl: string;
navBarOpen: boolean;
setNavBarOpen: (open: boolean) => void;
};
26 changes: 2 additions & 24 deletions app/routes/_dashboard.tsx
Original file line number Diff line number Diff line change
@@ -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<typeof loader>();
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 (
<div className="min-h-screen bg-blue-gray-50/50">
<Sidenav
Expand Down
20 changes: 0 additions & 20 deletions app/routes/_site.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,8 @@
import { LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { useEffect } from "react";
import { Outlet } from "react-router-dom";
import { Settings } from "~/models/settings";
import { siteRoutes } from "~/routesData";
import { SiteNavbar } from "~/widgets/layout";

export async function loader({ request }: LoaderFunctionArgs) {
const settings: Settings = { graphql_url: process.env.GRAPHQL_SCHEMA_URL! };
return { settings };
}

function useSettings() {
const data = useLoaderData<{ settings: Settings }>();
return data.settings;
}

export default function Site() {
const settings = useSettings();

useEffect(() => {
sessionStorage.setItem("graphql_url", settings.graphql_url);
}, [settings.graphql_url]);

return (
<>
<div className="container absolute left-2/4 z-10 mx-auto -translate-x-2/4 p-4">
Expand Down
1 change: 1 addition & 0 deletions remix.env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@
interface Window {
__APOLLO_STATE__: any;
__USER_STATE__: any;
__GRAPHQLURL__: string;
}

0 comments on commit 02716c5

Please sign in to comment.