feat(context): implement new context and hooks for state management

- Refactored context management by introducing a new context provider
  and hooks for better state handling.
- Removed old context implementation and replaced it with a more
  efficient structure using refs and subscriptions.
- Added selectors for accessing authentication and resource states.

Author: trae-op

package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-gp",
   "private": true,
-  "version": "0.2.23",
+  "version": "0.3.24",
   "type": "module",
   "main": "dist-main/app.js",
   "author": "traeop",

src/renderer/conceptions/Sync/components/Provider.tsx

@@ -1,37 +1,6 @@
-import { useState, useMemo } from "react";
 import type { TPropsProvider } from "./types";
-import { Context, ContextActions } from "../context";
+import { Provider as SyncProvider } from "../context/Context";
 
 export const Provider = ({ children }: TPropsProvider) => {
-  const [isUser, setUser] = useState<boolean | undefined>(undefined);
-  const [isAuthenticated, setAuthenticated] = useState<boolean | undefined>(
-    undefined
-  );
-  const [isResources, setResources] = useState<boolean | undefined>(undefined);
-
-  const value = useMemo(
-    () => ({
-      isUser,
-      isAuthenticated,
-      isResources,
-    }),
-    [isUser, isAuthenticated, isResources]
-  );
-
-  const actions = useMemo(
-    () => ({
-      setUser,
-      setResources,
-      setAuthenticated,
-    }),
-    [setUser, setAuthenticated, setResources]
-  );
-
-  return (
-    <Context.Provider value={value}>
-      <ContextActions.Provider value={actions}>
-        {children}
-      </ContextActions.Provider>
-    </Context.Provider>
-  );
+  return <SyncProvider>{children}</SyncProvider>;
 };

src/renderer/conceptions/Sync/context/Context.tsx

@@ -0,0 +1,88 @@
+import { createContext, useCallback, useRef } from "react";
+
+import type { TContext, TProviderProps, TSubscriberCallback } from "./types";
+
+export const Context = createContext<TContext | null>(null);
+
+export function Provider({ children }: TProviderProps) {
+  const isAuthenticated = useRef<boolean | undefined>(undefined);
+  const isResources = useRef<boolean | undefined>(undefined);
+  const isUser = useRef<boolean | undefined>(undefined);
+  const subscribers = useRef<Set<TSubscriberCallback>>(new Set());
+
+  const notify = useCallback(() => {
+    subscribers.current.forEach((callback) => callback());
+  }, []);
+
+  const getIsAuthenticated = useCallback((): boolean | undefined => {
+    return isAuthenticated.current;
+  }, []);
+
+  const getIsResources = useCallback((): boolean | undefined => {
+    return isResources.current;
+  }, []);
+
+  const getIsUser = useCallback((): boolean | undefined => {
+    return isUser.current;
+  }, []);
+
+  const setAuthenticated = useCallback(
+    (value: boolean | undefined): void => {
+      if (isAuthenticated.current === value) {
+        return;
+      }
+
+      isAuthenticated.current = value;
+      notify();
+    },
+    [notify],
+  );
+
+  const setResources = useCallback(
+    (value: boolean | undefined): void => {
+      if (isResources.current === value) {
+        return;
+      }
+
+      isResources.current = value;
+      notify();
+    },
+    [notify],
+  );
+
+  const setUser = useCallback(
+    (value: boolean | undefined): void => {
+      if (isUser.current === value) {
+        return;
+      }
+
+      isUser.current = value;
+      notify();
+    },
+    [notify],
+  );
+
+  const subscribe = useCallback((callback: TSubscriberCallback) => {
+    subscribers.current.add(callback);
+
+    return (): void => {
+      subscribers.current.delete(callback);
+    };
+  }, []);
+
+  return (
+    <Context.Provider
+      value={{
+        getIsAuthenticated,
+        getIsResources,
+        getIsUser,
+        setAuthenticated,
+        setResources,
+        setUser,
+        subscribe,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+}

src/renderer/conceptions/Sync/context/context.ts

@@ -1 +1,11 @@
-export * from "./Context";
+export { Context } from "./Context";
+export { useSyncContext } from "./useContext";
+export {
+  useSyncIsAuthenticatedSelector,
+  useSyncIsResourcesSelector,
+  useSyncIsUserSelector,
+  useSetSyncIsAuthenticatedDispatch,
+  useSetSyncIsResourcesDispatch,
+  useSetSyncIsUserDispatch,
+} from "./useSelectors";
+export type { TContext, TProviderProps } from "./types";

src/renderer/conceptions/Sync/context/index.ts

@@ -1,7 +1,15 @@
-export type TContext = TSync;
+import type { PropsWithChildren } from "react";
 
-export type TContextActions = {
-  setAuthenticated: React.Dispatch<React.SetStateAction<boolean | undefined>>;
-  setUser: React.Dispatch<React.SetStateAction<boolean | undefined>>;
-  setResources: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+export type TProviderProps = PropsWithChildren;
+
+export type TSubscriberCallback = () => void;
+
+export type TContext = {
+  getIsAuthenticated: () => boolean | undefined;
+  getIsResources: () => boolean | undefined;
+  getIsUser: () => boolean | undefined;
+  setAuthenticated: (value: boolean | undefined) => void;
+  setResources: (value: boolean | undefined) => void;
+  setUser: (value: boolean | undefined) => void;
+  subscribe: (callback: TSubscriberCallback) => () => void;
 };

src/renderer/conceptions/Sync/context/types.ts

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+
+import { Context } from "./Context";
+import type { TContext } from "./types";
+
+export const useSyncContext = (): TContext => {
+  const context = useContext(Context);
+
+  if (context === null) {
+    throw new Error("Sync context is not available");
+  }
+
+  return context;
+};

src/renderer/conceptions/Sync/context/useContext.ts

@@ -0,0 +1,37 @@
+import { useSyncExternalStore } from "react";
+
+import { useSyncContext } from "./useContext";
+
+export const useSyncIsAuthenticatedSelector = (): boolean | undefined => {
+  const { getIsAuthenticated, subscribe } = useSyncContext();
+
+  return useSyncExternalStore(
+    subscribe,
+    getIsAuthenticated,
+    getIsAuthenticated,
+  );
+};
+
+export const useSyncIsResourcesSelector = (): boolean | undefined => {
+  const { getIsResources, subscribe } = useSyncContext();
+
+  return useSyncExternalStore(subscribe, getIsResources, getIsResources);
+};
+
+export const useSyncIsUserSelector = (): boolean | undefined => {
+  const { getIsUser, subscribe } = useSyncContext();
+
+  return useSyncExternalStore(subscribe, getIsUser, getIsUser);
+};
+
+export const useSetSyncIsAuthenticatedDispatch = () => {
+  return useSyncContext().setAuthenticated;
+};
+
+export const useSetSyncIsResourcesDispatch = () => {
+  return useSyncContext().setResources;
+};
+
+export const useSetSyncIsUserDispatch = () => {
+  return useSyncContext().setUser;
+};

src/renderer/conceptions/Sync/context/useSelectors.ts

@@ -1,20 +1,28 @@
-import { useContext } from "react";
-import { Context, ContextActions } from "../context";
+import {
+  useSyncIsAuthenticatedSelector,
+  useSyncIsResourcesSelector,
+  useSyncIsUserSelector,
+} from "../context/useSelectors";
+import { useSyncContext } from "../context/useContext";
 
 export const useControlContext = () => {
-  const context = useContext(Context);
+  const isAuthenticated = useSyncIsAuthenticatedSelector();
+  const isResources = useSyncIsResourcesSelector();
+  const isUser = useSyncIsUserSelector();
 
-  if (!context) {
-    throw new Error("useControlContext must be used inside Provider");
-  }
-  return context;
+  return {
+    isAuthenticated,
+    isResources,
+    isUser,
+  };
 };
 
 export const useControlContextActions = () => {
-  const context = useContext(ContextActions);
+  const { setAuthenticated, setResources, setUser } = useSyncContext();
 
-  if (!context) {
-    throw new Error("useControlContextActions must be used inside Provider");
-  }
-  return context;
+  return {
+    setAuthenticated,
+    setResources,
+    setUser,
+  };
 };

src/renderer/conceptions/Sync/hooks/useControlContext.ts

@@ -1,58 +1,34 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useControlContextActions } from "./useControlContext";
 
 export const useIpc = () => {
   const { setUser, setAuthenticated, setResources } =
     useControlContextActions();
 
+  const subscribeSync = useCallback(() => {
+    return window.electron.receive.subscribeSync(
+      ({ isAuthenticated, isResources, isUser }) => {
+        if (isAuthenticated !== undefined) {
+          setAuthenticated(isAuthenticated);
+        }
+
+        if (isUser !== undefined) {
+          setUser(isUser);
+        }
+
+        if (isResources !== undefined) {
+          setResources(isResources);
+        }
+      },
+    );
+  }, []);
+
   useEffect(() => {
     window.electron.send.sync();
   }, []);
 
   useEffect(() => {
-    const unSub = window.electron.receive.subscribeSync(
-      ({ isAuthenticated, isResources, isUser }) => {
-        setAuthenticated((prevValue) => {
-          if (prevValue === undefined) {
-            return isAuthenticated;
-          }
-
-          if (prevValue !== undefined && isAuthenticated === undefined) {
-            return prevValue;
-          }
-
-          if (isAuthenticated !== undefined && prevValue !== undefined) {
-            return isAuthenticated;
-          }
-        });
-        setUser((prevValue) => {
-          if (prevValue === undefined) {
-            return isUser;
-          }
-
-          if (prevValue !== undefined && isUser === undefined) {
-            return prevValue;
-          }
-
-          if (isUser !== undefined && prevValue !== undefined) {
-            return isUser;
-          }
-        });
-        setResources((prevValue) => {
-          if (prevValue === undefined) {
-            return isResources;
-          }
-
-          if (prevValue !== undefined && isResources === undefined) {
-            return prevValue;
-          }
-
-          if (isResources !== undefined && prevValue !== undefined) {
-            return isResources;
-          }
-        });
-      }
-    );
+    const unSub = subscribeSync();
 
     return unSub;
   }, []);