🌟 Added custom hook to debug recoil state

twake/frontend/src/app/components/debug/debug-state.tsx

@@ -1,97 +1,9 @@
 import React from 'react';
-import { useRecoilCallback } from 'recoil';
-import EnvironmentService from '../../features/global/framework/environment-service';
+import { useDebugRecoilState } from 'app/features/debug/hooks/use-debug-recoil-state';
 
-interface TwakeDebugState {
-  dumpStateSnapshot?(): void;
-  get?(key: string): void;
-  getAllAtoms?(): void;
-}
-
-const twakeDebugState: TwakeDebugState = {};
 
 export default (): React.ReactElement => {
-  if (EnvironmentService.isProduction()) return <></>;
-
-  /**
-   * lists the value of all atoms
-   *
-   * @memberof TwakeDebugState
-   * @returns {void}
-   */
-  twakeDebugState.getAllAtoms = useRecoilCallback(
-    ({ snapshot }) =>
-      async () => {
-        console.debug('Atom values:');
-        for (const node of snapshot.getNodes_UNSTABLE()) {
-          const value = await snapshot.getPromise(node);
-
-          console.debug(node.key, value);
-        }
-      },
-    [],
-  );
-
-  /**
-   * Get the value of an atom by key
-   *
-   * @param {string} key - The key of the atom
-   * @memberof TwakeDebugState
-   * @returns {void}
-   */
-  twakeDebugState.get = useRecoilCallback(
-    ({ snapshot }) =>
-      async (key: string) => {
-        const allNodes = Array.from(snapshot.getNodes_UNSTABLE());
-        const node = allNodes.find(node => node.key === key);
-
-        if (node) {
-          const value = await snapshot.getPromise(node);
-
-          console.debug(key, value);
-        }
-      },
-    [],
-  );
-
-  /**
-   * Dump the current state of the application to a json file
-   *
-   * @memberof TwakeDebugState
-   * @returns {void}
-   */
-  twakeDebugState.dumpStateSnapshot = useRecoilCallback(
-    ({ snapshot }) =>
-      async () => {
-        const result: Record<string, any> = {
-          localStorage: {},
-        };
-
-        for (const node of snapshot.getNodes_UNSTABLE()) {
-          const value = await snapshot.getPromise(node);
-
-          result[node.key] = value;
-        }
-
-        for (const key of Object.keys(window.localStorage)) {
-          result.localStorage[key] = window.localStorage.getItem(key);
-        }
-
-        const json = JSON.stringify(result, null, 2);
-        const blob = new Blob([json], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-
-        link.href = url;
-        link.download = `twake-state-${new Date().toISOString()}.json`;
-
-        link.click();
-        URL.revokeObjectURL(url);
-      },
-    [],
-  );
-
-  (window as any).twakeDebugState = twakeDebugState;
+  useDebugRecoilState();
 
   return <></>;
 };

twake/frontend/src/app/features/debug/hooks/use-debug-recoil-state.ts

@@ -0,0 +1,81 @@
+import { useRecoilCallback } from 'recoil';
+import { TwakeDebugState } from '../types/debug-recoil-state-types';
+
+const twakeDebugState: TwakeDebugState = {};
+
+export const useDebugRecoilState = () => {
+
+  /**
+   * Get the value of an atom by key
+   *
+   * @param {string} key - The key of the atom
+   * @returns {void}
+   */
+  twakeDebugState.get = useRecoilCallback(
+    ({ snapshot }) =>
+      async (key: string) => {
+        const allNodes = Array.from(snapshot.getNodes_UNSTABLE());
+        const node = allNodes.find(node => node.key === key);
+
+        if (node) {
+          console.debug(key, await snapshot.getPromise(node));
+        }
+      },
+    [],
+  );
+
+  /**
+   * Dump the current state of the application to a json file
+   *
+   * @returns {void}
+   */
+  twakeDebugState.dumpStateSnapshot = useRecoilCallback(
+    ({ snapshot }) =>
+      async () => {
+        const result: Record<string, any> = {
+          localStorage: {},
+        };
+
+        for (const node of snapshot.getNodes_UNSTABLE()) {
+          const value = await snapshot.getPromise(node);
+
+          result[node.key] = value;
+        }
+
+        for (const key of Object.keys(window.localStorage)) {
+          result.localStorage[key] = window.localStorage.getItem(key);
+        }
+
+        const json = JSON.stringify(result, null, 2);
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+
+        link.href = url;
+        link.download = `twake-state-${new Date().toISOString()}.json`;
+
+        link.click();
+        URL.revokeObjectURL(url);
+      },
+    [],
+  );
+
+  /**
+   * lists the value of all atoms
+   *
+   * @returns {void}
+   */
+  twakeDebugState.getAllAtoms = useRecoilCallback(
+    ({ snapshot }) =>
+      async () => {
+        for (const node of snapshot.getNodes_UNSTABLE()) {
+          const value = await snapshot.getPromise(node);
+
+          console.debug(node.key, value);
+        }
+      },
+    [],
+  );
+
+  (window as any).twakeDebugState = twakeDebugState;
+};

twake/frontend/src/app/features/debug/types/debug-recoil-state-types.ts

@@ -0,0 +1,5 @@
+export interface TwakeDebugState {
+  dumpStateSnapshot?(): void;
+  get?(key: string): void;
+  getAllAtoms?(): void;
+}