Merge pull request #113 from Hexastack/112-issue-decouple-frontend-context-logic-from-hooks-logic

refactor(frontend): decouple contexts logic from hooks logic

frontend/src/contexts/apiClient.context.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import axios from "axios";
+import { createContext, ReactNode, FC } from "react";
+
+import { getApiClientByEntity, useAxiosInstance } from "@/hooks/useApiClient";
+import { ApiClient, EntityApiClient } from "@/services/api.class";
+import { EntityType } from "@/services/types";
+import { IBaseSchema } from "@/types/base.types";
+
+interface ApiClientContextProps {
+  children: ReactNode;
+}
+
+export interface ApiClientContext {
+  apiClient: ApiClient;
+  getApiClientByEntity: <TAttr, TStub extends IBaseSchema, TFull = never>(
+    type: EntityType,
+  ) => EntityApiClient<TAttr, TStub, TFull>;
+}
+
+export const ApiClientContext = createContext<ApiClientContext>({
+  apiClient: new ApiClient(axios.create()),
+  getApiClientByEntity: () => {
+    throw new Error(
+      "getApiClientByEntity must be used within an ApiClientProvider",
+    );
+  },
+});
+
+export const ApiClientProvider: FC<ApiClientContextProps> = ({ children }) => {
+  const axiosInstance = useAxiosInstance();
+  const apiClient = new ApiClient(axiosInstance);
+
+  return (
+    <ApiClientContext.Provider
+      value={{
+        apiClient,
+        getApiClientByEntity: (type) => getApiClientByEntity(type, apiClient),
+      }}
+    >
+      {children}
+    </ApiClientContext.Provider>
+  );
+};

frontend/src/contexts/auth.context.tsx

@@ -8,27 +8,29 @@
 
 import getConfig from "next/config";
 import { useRouter } from "next/router";
-import React, { createContext, ReactNode, useContext, useState } from "react";
+import { useState, useEffect, createContext, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  useQueryClient,
+  useQuery,
   QueryObserverResult,
   RefetchOptions,
   UseMutateFunction,
-  useQuery,
-  useQueryClient,
 } from "react-query";
 
 import { Progress } from "@/app-components/displays/Progress";
+import { useLogout } from "@/hooks/entities/auth-hooks";
+import { useApiClient } from "@/hooks/useApiClient";
+import {
+  useLogoutRedirection,
+  CURRENT_USER_KEY,
+  PUBLIC_PATHS,
+} from "@/hooks/useAuth";
+import { useToast } from "@/hooks/useToast";
 import { RouterType } from "@/services/types";
 import { IUser } from "@/types/user.types";
 import { getFromQuery } from "@/utils/URL";
 
-import { useLogout } from "./entities/auth-hooks";
-import { useApiClient } from "./useApiClient";
-import { useToast } from "./useToast";
-
-const { publicRuntimeConfig } = getConfig();
-
 export interface AuthContextValue {
   user: IUser | undefined;
   isAuthenticated: boolean;
@@ -41,7 +43,7 @@ export interface AuthContextValue {
   error: Error | null;
 }
 
-const AuthContext = createContext<AuthContextValue | null>(null);
+export const AuthContext = createContext<AuthContextValue | null>(null);
 
 AuthContext.displayName = "AuthContext";
 
@@ -49,14 +51,7 @@ export interface AuthProviderProps {
   children: ReactNode;
 }
 
-const PUBLIC_PATHS = [
+const { publicRuntimeConfig } = getConfig();
-  "/login/[[...token]]",
-  "/register/[token]",
-  "/reset/[token]",
-  "/reset",
-];
-
-export const CURRENT_USER_KEY = "current-user";
 
 export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
   const router = useRouter();
@@ -113,7 +108,7 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
   };
   const isAuthenticated = !!user;
 
-  React.useEffect(() => {
+  useEffect(() => {
     const search = location.search;
 
     setSearch(search);
@@ -138,33 +133,3 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
     </AuthContext.Provider>
   );
 };
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-
-  if (!context) {
-    throw new Error(`useAuth must be used within an AuthProvider`);
-  }
-
-  return context;
-};
-
-export const useLogoutRedirection = () => {
-  const router = useRouter();
-  const hasPublicPath = PUBLIC_PATHS.includes(router.pathname);
-  const logoutRedirection = async (fullReload: boolean = false) => {
-    if (!hasPublicPath) {
-      const redirectUrl = `/${RouterType.LOGIN}?redirect=${encodeURIComponent(
-        router.pathname,
-      )}`;
-
-      if (fullReload) {
-        window.location.replace(redirectUrl);
-      } else {
-        await router.replace(redirectUrl);
-      }
-    }
-  };
-
-  return { logoutRedirection };
-};

frontend/src/contexts/config.context.tsx

@@ -1,6 +1,14 @@
-import { createContext, useContext, useEffect, useState } from "react";
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
 
-const ConfigContext = createContext<IConfig | null>(null);
+import { useState, useEffect, createContext } from "react";
+
+export const ConfigContext = createContext<IConfig | null>(null);
 
 export interface IConfig {
   apiUrl: string;
@@ -35,13 +43,3 @@ export const ConfigProvider = ({ children }) => {
     <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
   );
 };
-
-export const useConfig = () => {
-  const context = useContext(ConfigContext);
-
-  if (!context) {
-    throw new Error("useConfig must be used within a ConfigProvider");
-  }
-
-  return context;
-};

frontend/src/contexts/permission.context.tsx

@@ -6,21 +6,14 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import {
+import { createContext, ReactNode, useCallback, useMemo } from "react";
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useMemo,
-} from "react";
 
 import { Progress } from "@/app-components/displays/Progress";
+import { useUserPermissions } from "@/hooks/entities/auth-hooks";
 import { EntityType } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
 
-import { useUserPermissions } from "./entities/auth-hooks";
+export const PermissionContext = createContext<{
-
-const PermissionContext = createContext<{
   getAllowedActions: (_type: EntityType) => undefined | PermissionAction[];
 }>({
   getAllowedActions: (_type: EntityType) => undefined,
@@ -68,17 +61,3 @@ export const PermissionProvider = ({
     </PermissionContext.Provider>
   );
 };
-
-export const useHasPermission = () => {
-  const { getAllowedActions } = useContext(PermissionContext);
-  const hasPermission = useCallback(
-    (type: EntityType, action: PermissionAction) => {
-      const allowedActions = getAllowedActions(type);
-
-      return allowedActions?.includes(action);
-    },
-    [getAllowedActions],
-  );
-
-  return hasPermission;
-};

frontend/src/contexts/setting.context.tsx

@@ -6,14 +6,13 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { createContext, ReactNode, useContext } from "react";
+import { createContext, ReactNode } from "react";
 
 import { Progress } from "@/app-components/displays/Progress";
+import { useLoadSettings } from "@/hooks/entities/auth-hooks";
 import { ISetting } from "@/types/setting.types";
 
-import { useLoadSettings } from "./entities/auth-hooks";
+export const SettingsContext = createContext<{
-
-const SettingsContext = createContext<{
   settings: { [key: string]: ISetting[] } | undefined;
 }>({ settings: undefined });
 
@@ -40,12 +39,3 @@ export const SettingsProvider = ({
     </SettingsContext.Provider>
   );
 };
-
-export const useSetting = (type: string, label: string) => {
-  const { settings } = useContext(SettingsContext);
-  const value = settings?.[type]?.find(
-    (setting) => setting.label === label,
-  )?.value;
-
-  return value;
-};

frontend/src/hooks/useApiClient.ts

@@ -8,9 +8,10 @@
 
 import axios from "axios";
 import { stringify } from "qs";
-import React, { createContext, ReactNode, useContext, useMemo } from "react";
+import { useContext, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
+import { ApiClientContext } from "@/contexts/apiClient.context";
 import { ApiClient, EntityApiClient } from "@/services/api.class";
 import { EntityType } from "@/services/types";
 import { IBaseSchema } from "@/types/base.types";
@@ -65,20 +66,13 @@ export const useAxiosInstance = () => {
   return axiosInstance;
 };
 
-interface ApiClientContextProps {
-  children: ReactNode;
-}
-
 export const entityApiClients = new Map();
 
-interface ApiClientContext {
+export const getApiClientByEntity = <
-  apiClient: ApiClient;
+  TAttr,
-  getApiClientByEntity: <TAttr, TStub extends IBaseSchema, TFull = never>(
+  TStub extends IBaseSchema,
-    type: EntityType,
+  TFull = never,
-  ) => EntityApiClient<TAttr, TStub, TFull>;
+>(
-}
-
-const getApiClientByEntity = <TAttr, TStub extends IBaseSchema, TFull = never>(
   type: EntityType,
   apiClient: ApiClient,
 ) => {
@@ -90,32 +84,6 @@ const getApiClientByEntity = <TAttr, TStub extends IBaseSchema, TFull = never>(
 
   return entityApiClients.get(type) as EntityApiClient<TAttr, TStub, TFull>;
 };
-const ApiClientContext = createContext<ApiClientContext>({
-  apiClient: new ApiClient(axios.create()),
-  getApiClientByEntity: () => {
-    throw new Error(
-      "getApiClientByEntity must be used within an ApiClientProvider",
-    );
-  },
-});
-
-export const ApiClientProvider: React.FC<ApiClientContextProps> = ({
-  children,
-}) => {
-  const axiosInstance = useAxiosInstance();
-  const apiClient = new ApiClient(axiosInstance);
-
-  return (
-    <ApiClientContext.Provider
-      value={{
-        apiClient,
-        getApiClientByEntity: (type) => getApiClientByEntity(type, apiClient),
-      }}
-    >
-      {children}
-    </ApiClientContext.Provider>
-  );
-};
 
 export const useApiClient = (): ApiClientContext => {
   const context = useContext(ApiClientContext);

frontend/src/hooks/useAuth.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { useRouter } from "next/router";
+import { useContext } from "react";
+
+import { AuthContext } from "@/contexts/auth.context";
+import { RouterType } from "@/services/types";
+
+export const CURRENT_USER_KEY = "current-user";
+export const PUBLIC_PATHS = [
+  "/login/[[...token]]",
+  "/register/[token]",
+  "/reset/[token]",
+  "/reset",
+];
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error(`useAuth must be used within an AuthProvider`);
+  }
+
+  return context;
+};
+
+export const useLogoutRedirection = () => {
+  const router = useRouter();
+  const hasPublicPath = PUBLIC_PATHS.includes(router.pathname);
+  const logoutRedirection = async (fullReload: boolean = false) => {
+    if (!hasPublicPath) {
+      const redirectUrl = `/${RouterType.LOGIN}?redirect=${encodeURIComponent(
+        router.pathname,
+      )}`;
+
+      if (fullReload) {
+        window.location.replace(redirectUrl);
+      } else {
+        await router.replace(redirectUrl);
+      }
+    }
+  };
+
+  return { logoutRedirection };
+};

frontend/src/hooks/useConfig.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { useContext } from "react";
+
+import { ConfigContext } from "@/contexts/config.context";
+
+export const useConfig = () => {
+  const context = useContext(ConfigContext);
+
+  if (!context) {
+    throw new Error("useConfig must be used within a ConfigProvider");
+  }
+
+  return context;
+};

frontend/src/hooks/useHasPermission.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { useCallback, useContext } from "react";
+
+import { PermissionContext } from "@/contexts/permission.context";
+import { EntityType } from "@/services/types";
+import { PermissionAction } from "@/types/permission.types";
+
+export const useHasPermission = () => {
+  const { getAllowedActions } = useContext(PermissionContext);
+  const hasPermission = useCallback(
+    (type: EntityType, action: PermissionAction) => {
+      const allowedActions = getAllowedActions(type);
+
+      return allowedActions?.includes(action);
+    },
+    [getAllowedActions],
+  );
+
+  return hasPermission;
+};

frontend/src/hooks/useSetting.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { useContext } from "react";
+
+import { SettingsContext } from "@/contexts/setting.context";
+
+export const useSetting = (type: string, label: string) => {
+  const { settings } = useContext(SettingsContext);
+  const value = settings?.[type]?.find(
+    (setting) => setting.label === label,
+  )?.value;
+
+  return value;
+};

frontend/src/pages/_app.tsx

@@ -17,14 +17,15 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 
 import { SnackbarCloseButton } from "@/app-components/displays/Toast/CloseButton";
-import { ApiClientProvider } from "@/hooks/useApiClient";
+import { ApiClientProvider } from "@/contexts/apiClient.context";
-import { AuthProvider } from "@/hooks/useAuth";
+import { AuthProvider } from "@/contexts/auth.context";
-import { ConfigProvider } from "@/hooks/useConfig";
+import { ConfigProvider } from "@/contexts/config.context";
-import { PermissionProvider } from "@/hooks/useHasPermission";
+import { PermissionProvider } from "@/contexts/permission.context";
-import { SettingsProvider } from "@/hooks/useSetting";
+import { SettingsProvider } from "@/contexts/setting.context";
 import { ToastProvider } from "@/hooks/useToast";
 import { theme } from "@/layout/themes/theme";
 import { SocketProvider } from "@/websocket/socket-hooks";
+
 import "../components/inbox/inbox.css";
 import "../i18n/config";
 import "../styles/globals.css";