redux-connected-devtools 0.0.15 → 1.0.0

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

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

package/src/store/initialState.ts

@@ -0,0 +1,42 @@
+import {
+    generateConnectedStoreEmpty,
+    IReduxConnectedConfig,
+    ConnectionType,
+    RetryStrategy,
+} from 'redux-connected';
+
+type IAppState = {
+    name: string;
+    email: string;
+};
+
+export type MyStore = {
+    appState: IAppState;
+};
+
+export const initialState: MyStore = {
+    appState: {
+        name: 'User2',
+        email: 'user@example.com',
+    },
+};
+
+const config: IReduxConnectedConfig = {
+    defaultEndpointsConfig: {
+        id: 'default',
+        connectionType: ConnectionType.REST,
+        retryStrategy: RetryStrategy.X2_TIMES,
+    },
+    endpointsConfigOverrides: {
+        appState: {
+            connectionType: ConnectionType.NONE,
+        },
+        logs: {
+            connectionType: ConnectionType.NONE,
+        },
+    },
+    adapters: {},
+};
+
+export const store = generateConnectedStoreEmpty(initialState, config);
+(window as any).store = store;

package/src/store/selectors.ts

@@ -0,0 +1,220 @@
+import { createSelector } from 'reselect';
+import { connectedSelectors, LifecycleStatus } from 'redux-connected';
+
+export const $requests = createSelector(
+    connectedSelectors.$requests,
+    (requests) => {
+        return requests
+            .map((request) => {
+                const { items } = request;
+
+                const lastPoint = items[items.length - 1] ?? {};
+
+                const journeyWithDelta = items.map((point, index) => {
+                    const nextPoint = items[index + 1] ?? point;
+                    const delta = nextPoint.timestamp - point.timestamp;
+
+                    return {
+                        ...point,
+                        delta,
+                    };
+                });
+
+                return {
+                    ...request,
+                    items: journeyWithDelta,
+                    lastPointTimestamp: lastPoint.timestamp,
+                    lastPointStatus: lastPoint.status,
+                };
+            })
+            .sort((a: any, b: any) => {
+                if (a.lastPointTimestamp === b.lastPointTimestamp) {
+                    return 0;
+                }
+
+                return a.lastPointTimestamp > b.lastPointTimestamp ? -1 : 1;
+            });
+    }
+);
+
+// 1
+export const $requestsReceived = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return lastPoint && lastPoint.status === LifecycleStatus.RECEIVED;
+    });
+});
+
+export const $requestsReceivedPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+
+        return items.find((point) => point.status === LifecycleStatus.RECEIVED);
+    });
+});
+
+// 2
+export const $requestsInQueue = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return lastPoint && lastPoint.status === LifecycleStatus.IN_QUEUE;
+    });
+});
+
+export const $requestsInQueuePast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        return items.find((point) => point.status === LifecycleStatus.IN_QUEUE);
+    });
+});
+
+// 3
+export const $requestsPendingApi = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return (
+            lastPoint &&
+            lastPoint.status === LifecycleStatus.PENDING_API_RESPONSE
+        );
+    });
+});
+
+export const $requestsPendingApiPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+
+        return items.find(
+            (point) => point.status === LifecycleStatus.PENDING_API_RESPONSE
+        );
+    });
+});
+
+// 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.POST_ACTION;
+    });
+});
+
+export const $requestsPostActionPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+
+        return items.find(
+            (point) => point.status === LifecycleStatus.POST_ACTION
+        );
+    });
+});
+
+// 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.GENERAL_ERROR;
+    });
+});
+
+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.API_ERROR
+        );
+    });
+});
+
+export const $menuBadges = createSelector(
+    $requestsReceived,
+    $requestsInQueue,
+    $requestsGeneralError,
+    $requestsPendingApi,
+    $requestsApiError,
+    $requestsFailed,
+    $requestsPostAction,
+    (
+        requestsReceived,
+        requestsInQueue,
+        requestsGeneralError,
+        requestsPendingApi,
+        requestsApiError,
+        requestsFailed,
+        requestsPostAction
+    ) => {
+        return {
+            lifecycleReceived: requestsReceived.length,
+            lifecycleInQueue: requestsInQueue.length,
+            lifecycleGeneralError: requestsGeneralError.length,
+            lifecyclePendingApi: requestsPendingApi.length,
+            lifecycleApiError: requestsApiError.length,
+            lifecycleFailed: requestsFailed.length,
+            lifecyclePostAction: requestsPostAction.length,
+        };
+    }
+);
+
+export const $menuBadgesTotal = createSelector(
+    $requestsReceivedPast,
+    $requestsInQueuePast,
+    $requestsGeneralErrorPast,
+    $requestsPendingApiPast,
+    $requestsApiErrorPast,
+    $requestsFailed,
+    $requestsPostActionPast,
+    (
+        requestsReceived,
+        requestsInQueue,
+        requestsGeneralError,
+        requestsPendingApi,
+        requestsApiError,
+        requestsFailed,
+        requestsPostAction
+    ) => {
+        return {
+            lifecycleReceived: requestsReceived.length,
+            lifecycleInQueue: requestsInQueue.length,
+            lifecycleGeneralError: requestsGeneralError.length,
+            lifecyclePendingApi: requestsPendingApi.length,
+            lifecycleApiError: requestsApiError.length,
+            lifecycleFailed: requestsFailed.length,
+            lifecyclePostAction: requestsPostAction.length,
+        };
+    }
+);

package/src/types.ts

@@ -0,0 +1 @@
+

package/src/utils/date.ts

@@ -0,0 +1,11 @@
+export const timestamp = () => new Date().getTime();
+
+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

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "dist",
+        "target": "ES2020",
+        "module": "ES2022",
+        "lib": ["ES2020", "dom"],
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "declaration": true,
+        "declarationDir": "dist/dts",
+        "jsx": "react-jsx",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "types": ["types-base", "@types/jest"]
+    },
+    "include": ["src/*.ts", "test/*.ts", "src/context.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { externals } from 'shared-base';
+import analyze from 'rollup-plugin-analyzer';
+import p from './package.json';
+
+export default defineConfig({
+    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,
+            }),
+        },
+    },
+});

package/esm/components/Config/Config.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface ConfigProps {
-    isWide: boolean;
-}
-export declare function Config(props: ConfigProps): JSX.Element;
-export default Config;

package/esm/components/Config/Config.js

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Json from '../Json/Json';
-import * as selectors from '../../selectors/selectors';
-import { useSelector } from 'react-redux';
-export function Config(props) {
-    var isWide = props.isWide;
-    var configs = useSelector(selectors.$endpointsConfig);
-    var className = classnames('__devtools__Config-container', {
-        wide: isWide,
-    });
-    return (React.createElement("div", { className: className },
-        React.createElement(Json, { value: configs })));
-}
-export default Config;

package/esm/components/DevTools/DevTools.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-declare type DevToolsProps = {};
-export declare function DevTools(_props: DevToolsProps): JSX.Element;
-export default DevTools;

package/esm/components/DevTools/DevTools.js

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { Grid } from 'igrid';
-import { panels } from '../../data/panels';
-import { widgets } from '../../data/widgets';
-import cssPrefix from '../prefix';
-import classnames from 'classnames';
-import * as sockets from '../../utils/sockets';
-import { useMount } from 'react-use';
-export function DevTools(_props) {
-    var className = classnames(cssPrefix + "DevTools-container", {});
-    useMount(function () {
-        sockets.on('devtools', function (data) {
-            console.log('data ->', data);
-        });
-    });
-    return (React.createElement("div", { className: className },
-        React.createElement(Grid, { defaultPanels: panels, widgets: widgets })));
-}
-export default DevTools;

package/esm/components/DevToolsLocal/DevToolsLocal.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-declare type DevToolsLocalProps = {};
-export declare function DevToolsLocal(_props: DevToolsLocalProps): JSX.Element;
-export default DevToolsLocal;

package/esm/components/DevToolsLocal/DevToolsLocal.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { Grid } from 'igrid';
-import { panels } from '../../data/panelsLocal';
-import { widgets } from '../../data/widgetsLocal';
-import cssPrefix from '../prefix';
-import classnames from 'classnames';
-export function DevToolsLocal(_props) {
-    var className = classnames(cssPrefix + "DevToolsLocal-container", {});
-    return (React.createElement("div", { className: className },
-        React.createElement(Grid, { defaultPanels: panels, widgets: widgets })));
-}
-export default DevToolsLocal;

package/esm/components/Dispatcher/Dispatcher.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare type DispatcherProps = {
-    storeState: any;
-    isWide?: boolean;
-    onClose?: () => void;
-};
-export declare function Dispatcher(props: DispatcherProps): JSX.Element;
-export default Dispatcher;

package/esm/components/Dispatcher/Dispatcher.js

@@ -1,61 +0,0 @@
-import { __awaiter, __generator } from "tslib";
-import * as React from 'react';
-import Group from '../Group/Group';
-import classnames from 'classnames';
-import { generateActionsForStore, analyzeStructure, } from 'redux-store-generator';
-import * as dispatcherActions from '../../data/dispatcherActions';
-import { useSetState } from 'react-use';
-import Panel from '../Panel/Panel';
-import { useDispatch } from 'react-redux';
-import cssPrefix from '../prefix';
-export function Dispatcher(props) {
-    var dispatch = useDispatch();
-    var _a = useSetState({}), requests = _a[0], setRequests = _a[1];
-    var _b = props.isWide, isWide = _b === void 0 ? false : _b, storeState = props.storeState;
-    var actions = generateActionsForStore(storeState);
-    var nodeTypes = analyzeStructure(storeState);
-    function dispatchAction(nodeName, verbType, actionParams) {
-        return __awaiter(this, void 0, void 0, function () {
-            var node, actionCreator, action;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        node = actions[nodeName];
-                        actionCreator = node[verbType];
-                        action = actionCreator.apply(null, actionParams);
-                        setRequests((_a = {},
-                            _a[nodeName + "_" + verbType] = true,
-                            _a));
-                        return [4 /*yield*/, dispatch(action)];
-                    case 1:
-                        _c.sent();
-                        setRequests((_b = {},
-                            _b[nodeName + "_" + verbType] = false,
-                            _b));
-                        return [2 /*return*/];
-                }
-            });
-        });
-    }
-    function renderAction(nodeName, verbType, actionParams) {
-        var disabled = requests[nodeName + "_" + verbType];
-        return (React.createElement("button", { onClick: function () { return dispatchAction(nodeName, verbType, actionParams); }, key: verbType, disabled: disabled }, verbType));
-    }
-    function renderActions(nodeName) {
-        var nodeType = nodeTypes[nodeName];
-        var actions = dispatcherActions[nodeType];
-        var buttons = Object.keys(actions).map(function (verbType) {
-            var actionParams = actions[verbType];
-            return renderAction(nodeName, verbType, actionParams);
-        });
-        return buttons;
-    }
-    var className = classnames(cssPrefix + "Dispatcher-container", {
-        wide: isWide,
-    });
-    return (React.createElement(Panel, { id: "dispatcher", zIndex: 999, onClose: props.onClose },
-        React.createElement("div", { className: className }, Object.keys(nodeTypes).map(function (nodeName) { return (React.createElement(Group, { key: nodeName, title: nodeName, isWide: isWide, fluid: true },
-            React.createElement(React.Fragment, null, renderActions(nodeName)))); }))));
-}
-export default Dispatcher;

package/esm/components/GlobalSettings/GlobalSettings.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare type GlobalSettingsProps = {
-    isWide: boolean;
-};
-export declare function GlobalSettings(props: GlobalSettingsProps): JSX.Element;
-export default GlobalSettings;

package/esm/components/GlobalSettings/GlobalSettings.js

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Json from '../Json/Json';
-import * as selectors from '../../selectors/selectors';
-import { useSelector } from 'react-redux';
-import cssPrefix from '../prefix';
-export function GlobalSettings(props) {
-    var isWide = props.isWide;
-    var settingsAndStats = useSelector(selectors.$settingsAndStats);
-    var className = classnames(cssPrefix + "GlobalSettings-container", {
-        wide: isWide,
-    });
-    return (React.createElement("div", { className: className },
-        React.createElement(Json, { value: settingsAndStats })));
-}
-export default GlobalSettings;

package/esm/components/Group/Group.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare type GroupProps = {
-    title: string;
-    isWide?: boolean;
-    fluid?: boolean;
-    children: JSX.Element;
-};
-export declare function Group(props: GroupProps): JSX.Element;
-export default Group;

package/esm/components/Group/Group.js

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import cssPrefix from '../prefix';
-export function Group(props) {
-    var title = props.title, isWide = props.isWide, fluid = props.fluid;
-    var className = classnames(cssPrefix + "Group-container", {
-        wide: isWide,
-        fluid: fluid,
-    });
-    return (React.createElement("div", { className: className },
-        React.createElement("div", { className: "title" }, title),
-        React.createElement("div", { className: "items" }, props.children)));
-}
-export default Group;

package/esm/components/Json/Json.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare type JsonProps = {
-    value: any;
-    collapsed?: boolean;
-};
-export declare function Json(props: JsonProps): JSX.Element;
-export default Json;

package/esm/components/Json/Json.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import ReactJson from 'react-json-view';
-import cssPrefix from '../prefix';
-export function Json(props) {
-    var value = props.value, collapsed = props.collapsed;
-    return (React.createElement("div", { className: cssPrefix + "Json-container" },
-        React.createElement(ReactJson, { src: value, collapsed: collapsed, enableClipboard: false, displayObjectSize: false, displayDataTypes: false, theme: 'monokai' })));
-}
-export default Json;

package/esm/components/Logs/Logs.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare type LogsProps = {
-    isWide: boolean;
-};
-export declare function Logs(props: LogsProps): JSX.Element;
-export default Logs;

package/esm/components/Logs/Logs.js

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { useMonitor, clearMeta } from 'redux-connected';
-import VirtualList from '../VirtualList/VirtualList';
-import classnames from 'classnames';
-import { useDispatch } from 'react-redux';
-import { preview } from '../Preview/Preview';
-import cssPrefix from '../prefix';
-var now = new Date().getTime();
-export function Logs(props) {
-    var dispatch = useDispatch();
-    var readings = useMonitor({}, function (action) { return action.type === 'LOG'; })[0];
-    function onClick(reading) {
-        var action = reading.action;
-        var log = action.payload;
-        dispatch(preview(log, 'log'));
-    }
-    var isWide = props.isWide;
-    var className = classnames(cssPrefix + "Logs-container", cssPrefix + "Rows-container", {
-        wide: isWide,
-    });
-    var height = isWide ? 735 : 395;
-    return (React.createElement("div", { className: className },
-        React.createElement(VirtualList, { className: className, items: readings, height: height, onClick: onClick }, LowRow)));
-}
-var LowRow = function (props) {
-    var index = props.index;
-    var listItem = props.data[index];
-    var reading = listItem.item;
-    var action = reading.action;
-    var payload = action.payload;
-    var _a = payload || {}, meta = _a.meta, message = _a.message;
-    var shortId = meta.shortId, createdTS = meta.createdTS, sequence = meta.sequence;
-    var className = classnames(cssPrefix + "Reading-container", {});
-    var delta = ((createdTS - now) / 1000).toFixed(2);
-    var data = clearMeta(payload || {});
-    delete data['message'];
-    return (React.createElement("div", { className: className, style: props.style, onClick: listItem.onClick },
-        React.createElement("div", { className: "col" },
-            React.createElement("div", { className: "row" },
-                React.createElement("div", { className: "sequence" }, sequence),
-                React.createElement("div", { className: "message" }, message)),
-            React.createElement("div", { className: "description" }, JSON.stringify(data))),
-        React.createElement("div", { className: "col" },
-            React.createElement("div", { className: "timestamp" },
-                "+",
-                delta),
-            React.createElement("div", { className: "id" }, shortId))));
-};
-export default Logs;

package/esm/components/Monitor/Monitor.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare type MonitorProps = {
-    isWide: boolean;
-};
-export declare function Monitor(props: MonitorProps): JSX.Element;
-export default Monitor;