From 0ec4b78aee7cef905e7e0ca28c6d78daa0b9584a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= <jeremy.magrin@gmail.com>
Date: Tue, 5 Sep 2023 10:00:19 +0200
Subject: [PATCH] feat: add recoil debug observer (#1446)

* feat: add recoil debug observer

* fix: convention
---
 front/src/index.tsx                           |  2 +
 .../debug/components/RecoilDebugObserver.tsx  | 45 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 front/src/modules/debug/components/RecoilDebugObserver.tsx

diff --git a/front/src/index.tsx b/front/src/index.tsx
index d8d247c5c..58282f420 100644
--- a/front/src/index.tsx
+++ b/front/src/index.tsx
@@ -6,6 +6,7 @@ import { RecoilRoot } from 'recoil';
 
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
+import { RecoilDebugObserver } from '@/debug/components/RecoilDebugObserver';
 import { DialogProvider } from '@/ui/dialog/components/DialogProvider';
 import { SnackBarProvider } from '@/ui/snack-bar/components/SnackBarProvider';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
@@ -26,6 +27,7 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <RecoilRoot>
+    <RecoilDebugObserver />
     <BrowserRouter>
       <ApolloProvider>
         <HelmetProvider>
diff --git a/front/src/modules/debug/components/RecoilDebugObserver.tsx b/front/src/modules/debug/components/RecoilDebugObserver.tsx
new file mode 100644
index 000000000..17460c1e0
--- /dev/null
+++ b/front/src/modules/debug/components/RecoilDebugObserver.tsx
@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useRecoilSnapshot, useRecoilValue } from 'recoil';
+
+import { isDebugModeState } from '@/client-config/states/isDebugModeState';
+
+const formatTitle = (stateName: string) => {
+  const headerCss = [
+    'color: gray; font-weight: lighter',
+    'color: black; font-weight: bold;',
+  ];
+
+  const parts = ['%c recoil', `%c${stateName}`];
+
+  return [parts.join(' '), ...headerCss];
+};
+
+export function RecoilDebugObserver() {
+  const snapshot = useRecoilSnapshot();
+
+  const isDebugMode = useRecoilValue(isDebugModeState);
+
+  useEffect(() => {
+    if (!isDebugMode) {
+      return;
+    }
+
+    for (const node of Array.from(
+      snapshot.getNodes_UNSTABLE({ isModified: true }),
+    )) {
+      const loadable = snapshot.getLoadable(node);
+
+      const titleArgs = formatTitle(node.key);
+
+      console.groupCollapsed(...titleArgs);
+
+      console.log('STATE', loadable.state);
+
+      console.log('CONTENTS', loadable.contents);
+
+      console.groupEnd();
+    }
+  }, [isDebugMode, snapshot]);
+
+  return null;
+}