diff --git a/twake/frontend/src/app/app.tsx b/twake/frontend/src/app/app.tsx index b8b3894bdb..032380e4e1 100755 --- a/twake/frontend/src/app/app.tsx +++ b/twake/frontend/src/app/app.tsx @@ -13,6 +13,7 @@ import useTimeout from 'app/features/global/hooks/use-timeout'; import ApplicationLoader from './components/loader/application-loader'; import 'app/styles/index.less'; +import DebugState from './components/debug/debug-state'; const delayMessage = 5000; @@ -51,6 +52,7 @@ export default () => { return ( + diff --git a/twake/frontend/src/app/components/debug/debug-state.tsx b/twake/frontend/src/app/components/debug/debug-state.tsx new file mode 100644 index 0000000000..0383d9c4b9 --- /dev/null +++ b/twake/frontend/src/app/components/debug/debug-state.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import { useRecoilCallback } from 'recoil'; + +interface TwakeDebugState { + dumpStateSnapshot?(): void; + get?(key: string): void; + getAllAtoms?(): void; +} + +const twakeDebugState: TwakeDebugState = {}; + +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 = { + 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; +}; + + +export default (): React.ReactElement => { + useDebugRecoilState(); + + return <>; +};