redux-connected-devtools 1.0.2 → 1.0.3

package/src/containers/DevtoolsAppContainer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import DevtoolsApp from '../components/DevtoolsApp/DevtoolsApp';
+import { clearCompletedRequests, clearFailedRequests } from 'redux-connected';
+import { getMinutes, resetStartOfTime } from '../utils/date';
+import { download } from '../utils/download';
+import { useStoreSize } from '../hooks/useStoreSize';
+
+export type DevtoolsAppProps = {
+    connectedStore: any;
+    isDarkMode?: boolean;
+};
+
+export function DevtoolsAppContainer(props: DevtoolsAppProps) {
+    const { connectedStore, isDarkMode } = props;
+    const storeSizeInBytes = useStoreSize(connectedStore);
+
+    function clearRequests() {
+        connectedStore.dispatch(clearCompletedRequests());
+        connectedStore.dispatch(clearFailedRequests());
+        // also resets time
+        resetStartOfTime();
+    }
+
+    function downloadState() {
+        const state = connectedStore.getState();
+        const minutes = getMinutes();
+        const filename = `state_${minutes}.json`;
+        download(filename, state);
+    }
+
+    return (
+        <DevtoolsApp
+            connectedStore={connectedStore}
+            clearRequests={clearRequests}
+            downloadState={downloadState}
+            storeSizeInBytes={storeSizeInBytes}
+            isDarkMode={isDarkMode}
+        />
+    );
+}
+
+export default DevtoolsAppContainer;

package/src/containers/JsonViewerContainer.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import JsonViewer from '../components/JsonViewer/JsonViewer';
+
+export function JsonViewerContainer() {
+    return <JsonViewer />;
+}
+
+export default JsonViewerContainer;

package/src/containers/LifecycleContainer.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { connectedSelectors } from 'redux-connected';
+import Lifecycle from '../components/Lifecycle/Lifecycle';
+
+export function LifecycleContainer() {
+    const actionLogs = useSelector(connectedSelectors.$actionLogsByLifecycle);
+
+    return <Lifecycle />;
+}
+
+export default LifecycleContainer;

package/src/containers/LifecycleFailedContainer.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Lifecycle from '../components/Lifecycle/Lifecycle';
+import { $requestsFailed } from '../store/selectors';
+
+export function LifecycleFailedContainer() {
+    const requests = useSelector($requestsFailed);
+    return <Lifecycle requests={requests} />;
+}
+
+export default LifecycleFailedContainer;

package/src/containers/LogsViewerContainer.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import LogsViewer from '../components/LogsViewer/LogsViewer';
+
+export function LogsViewerContainer() {
+    return <LogsViewer />;
+}
+
+export default LogsViewerContainer;

package/src/containers/StateViewerContainer.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import StateViewer from '../components/StateViewer/StateViewer';
+
+export function StateViewerContainer() {
+    return <StateViewer />;
+}
+
+export default StateViewerContainer;

package/src/data/devComponents.tsx

@@ -8,6 +8,7 @@ import LifecycleGeneralErrorContainer from '../containers/LifecycleGeneralErrorC
 import LifecyclePendingApiContainer from '../containers/LifecyclePendingApiContainer';
 import LifecycleApiErrorContainer from '../containers/LifecycleApiErrorContainer';
 import LifecyclePostActionContainer from '../containers/LifecyclePostActionContainer';
+import LifecycleFailedContainer from '../containers/LifecycleFailedContainer';
 
 type DevComponents = Record<string, React.FC<any>>;
 
@@ -17,6 +18,7 @@ export const devComponents: DevComponents = {
     LifecycleGeneralError: LifecycleGeneralErrorContainer,
     LifecyclePendingApi: LifecyclePendingApiContainer,
     LifecycleApiError: LifecycleApiErrorContainer,
+    LifecycleFailed: LifecycleFailedContainer,
     LifecyclePostAction: LifecyclePostActionContainer,
     GlobalSettings: GlobalSettingsContainer,
     GlobalStats: GlobalStatsContainer,

package/src/data/devRouter.ts

@@ -0,0 +1,107 @@
+export type IDevRoute = {
+    id: string;
+    title: string;
+    group: string;
+    componentId: string;
+};
+
+export const devRoutes: IDevRoute[] = [
+    {
+        id: '/lifecycle/original',
+        title: '1. Original',
+        group: 'lifecycle',
+        componentId: 'Lifecycle',
+    },
+    {
+        id: '/lifecycle/gatekeeper',
+        title: '2. Gatekeeper',
+        group: 'lifecycle',
+        componentId: 'Lifecycle',
+    },
+    {
+        id: '/lifecycle/incoming',
+        title: '3. Incoming',
+        group: 'lifecycle',
+        componentId: 'Lifecycle',
+    },
+    {
+        id: '/lifecycle/queue',
+        title: '4. Queue',
+        group: 'lifecycle',
+        componentId: 'Lifecycle',
+    },
+    {
+        id: '/lifecycle/firing',
+        title: '5. Firing',
+        group: 'lifecycle',
+        componentId: 'Lifecycle',
+    },
+    {
+        id: '/lifecycle/api',
+        title: '6. API',
+        group: 'lifecycle',
+        componentId: 'Lifecycle',
+    },
+    {
+        id: '/lifecycle/error',
+        title: '7. Error',
+        group: 'lifecycle',
+        componentId: 'Lifecycle',
+    },
+    {
+        id: '/lifecycle/postAction',
+        title: '8. Post-action',
+        group: 'lifecycle',
+        componentId: 'Lifecycle',
+    },
+    {
+        id: '/logs',
+        title: 'Logs',
+        group: 'state',
+        componentId: 'LogsViewer',
+    },
+    {
+        id: '/state',
+        title: 'State',
+        group: 'state',
+        componentId: 'StateViewer',
+    },
+    {
+        id: '/sagas',
+        title: 'Sagas',
+        group: 'state',
+        componentId: 'SagaViewer',
+    },
+    {
+        id: '/settings/global',
+        title: 'Global settings',
+        group: 'settings & stats',
+        componentId: 'JsonViewer',
+    },
+    {
+        id: '/settings/endpoints',
+        title: 'Endpoints configs',
+        group: 'settings & stats',
+        componentId: 'JsonViewer',
+    },
+    {
+        id: '/stats/global',
+        title: 'Global stats',
+        group: 'settings & stats',
+        componentId: 'JsonViewer',
+    },
+];
+
+const getGroups = (): string[] => {
+    const output: string[] = [];
+
+    devRoutes.forEach((group) => {
+        if (!output.includes(group.group)) {
+            output.push(group.group);
+        }
+    });
+
+    return output;
+};
+
+export const devGroups: string[] = getGroups();

package/src/data/devRoutes.ts

@@ -18,34 +18,41 @@ export const devRoutes: IDevRoute[] = [
         group: 'lifecycle',
         componentId: 'LifecycleInQueue',
     },
+
     {
-        id: 'lifecycleGeneralError',
-        title: '3. General error',
+        id: 'lifecyclePendingApi',
+        title: '3. Pending API',
         group: 'lifecycle',
-        componentId: 'LifecycleGeneralError',
+        componentId: 'LifecyclePendingApi',
     },
     {
-        id: 'lifecyclePendingApi',
-        title: '4. Pending API',
+        id: 'lifecyclePostAction',
+        title: '4. Post action',
         group: 'lifecycle',
-        componentId: 'LifecyclePendingApi',
+        componentId: 'LifecyclePostAction',
+    },
+    {
+        id: 'lifecycleGeneralError',
+        title: 'e1. General errors',
+        group: 'errors',
+        componentId: 'LifecycleGeneralError',
     },
     {
         id: 'lifecycleApiError',
-        title: '5. API error',
-        group: 'lifecycle',
+        title: 'e2. API errors',
+        group: 'errors',
         componentId: 'LifecycleApiError',
     },
     {
-        id: 'lifecyclePostAction',
-        title: '6. Post action',
-        group: 'lifecycle',
-        componentId: 'LifecyclePostAction',
+        id: 'lifecycleFailed',
+        title: 'e3. Failed requests (after retries)',
+        group: 'errors',
+        componentId: 'LifecycleFailed',
     },
     {
         id: 'endpointStatus',
         title: 'Endpoint status',
-        group: 'state',
+        group: 'settings & stats',
         componentId: 'EndpointStatus',
     },
     {

package/src/hooks/useStoreSize.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { debounce } from 'shared-base';
+
+type Callback = () => void;
+
+interface ReduxStore {
+    getState: () => Json;
+    subscribe: (callback: Callback) => void;
+}
+
+export const useStoreSize = (store: ReduxStore) => {
+    const [storeSize, setStoreSize] = useState<number>();
+
+    const calculateSize = debounce(() => {
+        const state = store.getState();
+        const size = JSON.stringify(state).length;
+        setStoreSize(size);
+    }, 500);
+
+    useEffect(() => {
+        store.subscribe(() => {
+            calculateSize();
+        });
+    }, [store]);
+
+    return storeSize;
+};

package/src/index.ts

@@ -1 +1 @@
-export { DevPanelContainer } from './containers/DevPanelContainer';
+export { DevtoolsAppContainer as DevtoolsApp } from './containers/DevtoolsAppContainer';

package/src/store/selectors.ts

@@ -8,10 +8,10 @@ export const $requests = createSelector(
             .map((request) => {
                 const { items } = request;
 
-                const lastPoint = items[items.length - 1];
+                const lastPoint = items[items.length - 1] ?? {};
 
                 const journeyWithDelta = items.map((point, index) => {
-                    const nextPoint = items[index + 1] || point;
+                    const nextPoint = items[index + 1] ?? point;
                     const delta = nextPoint.timestamp - point.timestamp;
 
                     return {
@@ -71,28 +71,6 @@ export const $requestsInQueuePast = createSelector($requests, (requests) => {
 });
 
 // 3
-export const $requestsGeneralError = createSelector($requests, (requests) => {
-    return requests.filter((request) => {
-        const { items } = request;
-        const lastPoint = items[items.length - 1];
-        return lastPoint && lastPoint.status === LifecycleStatus.GENERAL_ERROR;
-    });
-});
-
-export const $requestsGeneralErrorPast = createSelector(
-    $requests,
-    (requests) => {
-        return requests.filter((request) => {
-            const { items } = request;
-
-            return items.find(
-                (point) => point.status === LifecycleStatus.GENERAL_ERROR
-            );
-        });
-    }
-);
-
-// 4
 export const $requestsPendingApi = createSelector($requests, (requests) => {
     return requests.filter((request) => {
         const { items } = request;
@@ -114,40 +92,71 @@ export const $requestsPendingApiPast = createSelector($requests, (requests) => {
     });
 });
 
-// 5
-export const $requestsApiError = createSelector($requests, (requests) => {
+// 4
+export const $requestsPostAction = createSelector($requests, (requests) => {
     return requests.filter((request) => {
         const { items } = request;
         const lastPoint = items[items.length - 1];
-        return lastPoint && lastPoint.status === LifecycleStatus.API_ERROR;
+        return lastPoint && lastPoint.status === LifecycleStatus.POST_ACTION;
     });
 });
 
-export const $requestsApiErrorPast = createSelector($requests, (requests) => {
+export const $requestsPostActionPast = createSelector($requests, (requests) => {
     return requests.filter((request) => {
         const { items } = request;
 
         return items.find(
-            (point) => point.status === LifecycleStatus.API_ERROR
+            (point) => point.status === LifecycleStatus.POST_ACTION
         );
     });
 });
 
-// 6
-export const $requestsPostAction = createSelector($requests, (requests) => {
+// e1
+export const $requestsGeneralError = createSelector($requests, (requests) => {
     return requests.filter((request) => {
         const { items } = request;
         const lastPoint = items[items.length - 1];
-        return lastPoint && lastPoint.status === LifecycleStatus.POST_ACTION;
+        return lastPoint && lastPoint.status === LifecycleStatus.GENERAL_ERROR;
     });
 });
 
-export const $requestsPostActionPast = createSelector($requests, (requests) => {
+export const $requestsGeneralErrorPast = createSelector(
+    $requests,
+    (requests) => {
+        return requests.filter((request) => {
+            const { items } = request;
+
+            return items.find(
+                (point) => point.status === LifecycleStatus.GENERAL_ERROR
+            );
+        });
+    }
+);
+
+// e2
+export const $requestsApiError = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return lastPoint && lastPoint.status === LifecycleStatus.API_ERROR;
+    });
+});
+
+// e3
+export const $requestsFailed = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+
+        return items.find((point) => point.status === LifecycleStatus.FAILED);
+    });
+});
+
+export const $requestsApiErrorPast = createSelector($requests, (requests) => {
     return requests.filter((request) => {
         const { items } = request;
 
         return items.find(
-            (point) => point.status === LifecycleStatus.POST_ACTION
+            (point) => point.status === LifecycleStatus.API_ERROR
         );
     });
 });
@@ -158,6 +167,7 @@ export const $menuBadges = createSelector(
     $requestsGeneralError,
     $requestsPendingApi,
     $requestsApiError,
+    $requestsFailed,
     $requestsPostAction,
     (
         requestsReceived,
@@ -165,6 +175,7 @@ export const $menuBadges = createSelector(
         requestsGeneralError,
         requestsPendingApi,
         requestsApiError,
+        requestsFailed,
         requestsPostAction
     ) => {
         return {
@@ -173,6 +184,7 @@ export const $menuBadges = createSelector(
             lifecycleGeneralError: requestsGeneralError.length,
             lifecyclePendingApi: requestsPendingApi.length,
             lifecycleApiError: requestsApiError.length,
+            lifecycleFailed: requestsFailed.length,
             lifecyclePostAction: requestsPostAction.length,
         };
     }
@@ -184,6 +196,7 @@ export const $menuBadgesTotal = createSelector(
     $requestsGeneralErrorPast,
     $requestsPendingApiPast,
     $requestsApiErrorPast,
+    $requestsFailed,
     $requestsPostActionPast,
     (
         requestsReceived,
@@ -191,6 +204,7 @@ export const $menuBadgesTotal = createSelector(
         requestsGeneralError,
         requestsPendingApi,
         requestsApiError,
+        requestsFailed,
         requestsPostAction
     ) => {
         return {
@@ -199,6 +213,7 @@ export const $menuBadgesTotal = createSelector(
             lifecycleGeneralError: requestsGeneralError.length,
             lifecyclePendingApi: requestsPendingApi.length,
             lifecycleApiError: requestsApiError.length,
+            lifecycleFailed: requestsFailed.length,
             lifecyclePostAction: requestsPostAction.length,
         };
     }

package/src/types.ts

@@ -1 +1 @@
-export type Json = Record<string, any>;
+

package/src/utils/date.ts

@@ -1,3 +1,11 @@
 export const timestamp = () => new Date().getTime();
 
-export const startOfTime = timestamp();
+export let startOfTime = timestamp();
+
+export const resetStartOfTime = () => {
+    startOfTime = timestamp();
+};
+
+export const getMinutes = () => {
+    return new Date().getMinutes();
+};

package/src/utils/download.ts

@@ -0,0 +1,17 @@
+export const download = (filename: string, json: Json) => {
+    const data = JSON.stringify(json, null, 4);
+
+    const blob = new Blob([data], { type: 'text/csv' });
+    // @ts-ignore
+    if (window.navigator.msSaveOrOpenBlob) {
+        // @ts-ignore
+        window.navigator.msSaveBlob(blob, filename);
+    } else {
+        const elem = window.document.createElement('a');
+        elem.href = window.URL.createObjectURL(blob);
+        elem.download = filename;
+        document.body.appendChild(elem);
+        elem.click();
+        document.body.removeChild(elem);
+    }
+};

package/tsconfig.json

@@ -1,24 +1,18 @@
 {
     "compilerOptions": {
-        "strict": true,
-        "module": "commonjs",
-        "target": "es6",
+        "outDir": "dist",
+        "target": "ES2020",
+        "module": "ES2022",
+        "lib": ["ES2020", "dom"],
+        "moduleResolution": "node",
         "esModuleInterop": true,
-        "sourceMap": false,
-        "rootDir": "src",
-        "outDir": "dist/js",
-        "noEmitOnError": true,
-        "jsx": "react",
-        "typeRoots": [ "node_modules/@types" ],
-        "baseUrl": "../",
-        "paths": {
-            "redux-connected": [
-                "redux-connected"
-            ],
-        }
+        "declaration": true,
+        "declarationDir": "dist/dts",
+        "jsx": "react-jsx",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "types": ["types-base", "@types/jest"]
     },
-    "exclude": [
-        "node_modules",
-        "vite.config.ts",
-    ]
+    "include": ["src/*.ts", "test/*.ts", "src/context.tsx"]
 }

package/vite.config.ts

@@ -1,45 +1,27 @@
+import path from 'path';
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import tsconfigPaths from 'vite-tsconfig-paths';
-const svgLoader = require('vite-plugin-react-svg');
-const path = require('path');
-require('dotenv-flow').config();
+import dts from 'vite-plugin-dts';
+import { externals } from 'shared-base';
+import analyze from 'rollup-plugin-analyzer';
+import p from './package.json';
 
-const cwd = path.resolve(process.cwd(), '../../');
-const host = (process.env.VITE_SERVER_DOMAIN||'').replace(/https?:\/\//, '');
-
-// https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [
-        tsconfigPaths({
-            loose: true,
-        }),
-        react(),
-        svgLoader(),
-    ],
-    define: {
-        'process.env.MONO': process.env.MONO,
-    },
-    resolve: {
-        alias: {
-            '@payem/forms': `${cwd}/packages/web-forms/src`,
-            '@payem/tables': `${cwd}/packages/web-tables/src`,
-            '@payem/details': `${cwd}/packages/web-details/src`,
-            '@payem/devtools': `${cwd}/packages/web-devtools/src`,
-            '@payem/router': `${cwd}/packages/web-router/src`,
-            '@payem/ui': `${cwd}/packages/web-ui/src`,
-            '@payem/base-ui': `${cwd}/packages/web-base-ui/src`,
-            '@payem/testing-base': `${cwd}/packages/web-testing-base/src`,
-            '@payem/hooks': `${cwd}/packages/hooks/src`,
-            '@payem/root-types': `${cwd}/packages/root-types/src`,
-            '@payem/themes': `${cwd}/packages/web-themes/src`,
-            '@minimal/widgets': `${cwd}/packages/minimal`,
-            '@payem/platformer': `${cwd}/packages/platformer`,
-            '@payem/app-home': `${cwd}/apps/home`,
+    plugins: [dts({})],
+    build: {
+        sourcemap: true,
+        lib: {
+            entry: path.resolve(__dirname, 'src/index.ts'),
+            name: 'ReduxConnectedDevtools',
+            formats: ['es', 'umd'],
+            fileName: (format) => `redux-connected-devtools.${format}.js`,
+        },
+        rollupOptions: {
+            plugins: [analyze()],
+            ...externals({
+                react: '',
+                'react/jsx-runtime': '',
+                ...p.dependencies,
+            }),
         },
-    },
-    server: {
-        host,
-        port: 3001,
     },
 });

package/.vscode/settings.json

@@ -1,12 +0,0 @@
-{
-    "typescript.tsdk": "./node_modules/typescript/lib",
-    "files.eol": "\n",
-    "json.schemas": [
-        {
-            "fileMatch": [
-                "/manifest.json"
-            ],
-            "url": "http://json.schemastore.org/chrome-manifest"
-        }
-    ]
-}

package/.vscode/tasks.json

@@ -1,33 +0,0 @@
-{
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "command": "npm",
-    "tasks": [
-        {
-            "label": "install",
-            "type": "shell",
-            "command": "npm",
-            "args": ["install"]
-        },
-        {
-            "label": "update",
-            "type": "shell",
-            "command": "npm",
-            "args": ["update"]
-        },
-        {
-            "label": "test",
-            "type": "shell",
-            "command": "npm",
-            "args": ["run", "test"]
-        },
-        {
-            "label": "build",
-            "type": "shell",
-            "group": "build",
-            "command": "npm",
-            "args": ["run", "watch"]
-        }
-    ]
-}