feat: basic recoil dev tools (#1061)

frontend/src/components/RecoilDevTools/RecoilDevTools.tsx

@@ -0,0 +1,39 @@
+import { useRecoilCallback } from 'recoil';
+import Icon from '../icons/Icon';
+import Button from '../Primitives/Button';
+
+const RecoilDevTools = () => {
+  const getAtomValues = async (snapshot: any) => {
+    // eslint-disable-next-line no-console
+    console.log('Atom Values:');
+    const state: any = {};
+    // eslint-disable-next-line no-restricted-syntax
+    for (const node of snapshot.getNodes_UNSTABLE()) {
+      // eslint-disable-next-line no-await-in-loop
+      const value = await snapshot.getPromise(node);
+      state[node.key] = value;
+    }
+    // eslint-disable-next-line no-console
+    console.log(state);
+  };
+
+  const dumpRecoilState = useRecoilCallback(
+    ({ snapshot }) =>
+      async () =>
+        getAtomValues(snapshot),
+    [],
+  );
+
+  return (
+    <Button
+      isIcon
+      css={{ position: 'fixed', bottom: '$58', left: '$12' }}
+      size="lg"
+      onClick={dumpRecoilState}
+    >
+      <Icon name="settings" css={{ color: '$secondaryDark' }} />
+    </Button>
+  );
+};
+
+export default RecoilDevTools;

frontend/src/pages/_app.tsx

@@ -12,10 +12,11 @@ import globalStyles from '@/styles/globals';
 
 import Sprite from '@/components/icons/Sprite';
 import Toast, { ToastProvider, ToastViewport } from '@/components/Primitives/Toast';
-import { JWT_EXPIRATION_TIME } from '@/utils/constants';
+import { JWT_EXPIRATION_TIME, RECOIL_DEV_TOOLS } from '@/utils/constants';
 import { ROUTES } from '@/utils/routes';
 import { Session } from 'next-auth';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import RecoilDevTools from '@/components/RecoilDevTools/RecoilDevTools';
 
 type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -56,6 +57,7 @@ function Root({
               <RecoilRoot>
                 {getLayout(<Component {...pageProps} />)}
                 <Toast />
+                {RECOIL_DEV_TOOLS && <RecoilDevTools />}
               </RecoilRoot>
               <ToastViewport
                 css={{

frontend/src/utils/constants.ts

@@ -28,6 +28,8 @@ export const REFRESH_TOKEN_ERROR = 'REFRESH_TOKEN_ERROR';
 
 export const MIN_MEMBERS = 4;
 
+export const RECOIL_DEV_TOOLS = true;
+
 // -------------------------------
 
 export const ONE_SECOND = 1000;