redux-connected-devtools 0.0.13 → 1.0.2

package/src/store/selectors.ts

@@ -0,0 +1,205 @@
+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 $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;
+        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
+        );
+    });
+});
+
+// 5
+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;
+    });
+});
+
+export const $requestsApiErrorPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+
+        return items.find(
+            (point) => point.status === LifecycleStatus.API_ERROR
+        );
+    });
+});
+
+// 6
+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
+        );
+    });
+});
+
+export const $menuBadges = createSelector(
+    $requestsReceived,
+    $requestsInQueue,
+    $requestsGeneralError,
+    $requestsPendingApi,
+    $requestsApiError,
+    $requestsPostAction,
+    (
+        requestsReceived,
+        requestsInQueue,
+        requestsGeneralError,
+        requestsPendingApi,
+        requestsApiError,
+        requestsPostAction
+    ) => {
+        return {
+            lifecycleReceived: requestsReceived.length,
+            lifecycleInQueue: requestsInQueue.length,
+            lifecycleGeneralError: requestsGeneralError.length,
+            lifecyclePendingApi: requestsPendingApi.length,
+            lifecycleApiError: requestsApiError.length,
+            lifecyclePostAction: requestsPostAction.length,
+        };
+    }
+);
+
+export const $menuBadgesTotal = createSelector(
+    $requestsReceivedPast,
+    $requestsInQueuePast,
+    $requestsGeneralErrorPast,
+    $requestsPendingApiPast,
+    $requestsApiErrorPast,
+    $requestsPostActionPast,
+    (
+        requestsReceived,
+        requestsInQueue,
+        requestsGeneralError,
+        requestsPendingApi,
+        requestsApiError,
+        requestsPostAction
+    ) => {
+        return {
+            lifecycleReceived: requestsReceived.length,
+            lifecycleInQueue: requestsInQueue.length,
+            lifecycleGeneralError: requestsGeneralError.length,
+            lifecyclePendingApi: requestsPendingApi.length,
+            lifecycleApiError: requestsApiError.length,
+            lifecyclePostAction: requestsPostAction.length,
+        };
+    }
+);

package/src/sum.ts

@@ -0,0 +1,3 @@
+export function sum(x: number, y: number) {
+    return x + y;
+}

package/src/types.ts

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

package/src/utils/date.ts

@@ -0,0 +1,3 @@
+export const timestamp = () => new Date().getTime();
+
+export const startOfTime = timestamp();

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "module": "commonjs",
+        "target": "es6",
+        "esModuleInterop": true,
+        "sourceMap": false,
+        "rootDir": "src",
+        "outDir": "dist/js",
+        "noEmitOnError": true,
+        "jsx": "react",
+        "typeRoots": [ "node_modules/@types" ],
+        "baseUrl": "../",
+        "paths": {
+            "redux-connected": [
+                "redux-connected"
+            ],
+        }
+    },
+    "exclude": [
+        "node_modules",
+        "vite.config.ts",
+    ]
+}

package/vite.config.ts

@@ -0,0 +1,45 @@
+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();
+
+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`,
+        },
+    },
+    server: {
+        host,
+        port: 3001,
+    },
+});

package/webpack/webpack.common.js

@@ -0,0 +1,46 @@
+const webpack = require('webpack');
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+const srcDir = path.join(__dirname, '..', 'src');
+
+module.exports = {
+    entry: {
+        popup: path.join(srcDir, 'popup.tsx'),
+        options: path.join(srcDir, 'options.tsx'),
+        devtools: path.join(srcDir, 'devtools.tsx'),
+        panel: path.join(srcDir, 'panel.tsx'),
+        background: path.join(srcDir, 'background.ts'),
+        content_script: path.join(srcDir, 'content_script.ts'),
+        injected_script: path.join(srcDir, 'injected_script.ts'),
+    },
+    output: {
+        path: path.join(__dirname, '../dist/js'),
+        filename: '[name].js',
+    },
+    optimization: {
+        splitChunks: {
+            name: 'vendor',
+            chunks(chunk) {
+                return chunk.name !== 'background';
+            },
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js'],
+    },
+    plugins: [
+        new CopyPlugin({
+            patterns: [{ from: '.', to: '../', context: 'public' }],
+            options: {},
+        }),
+    ],
+};

package/webpack/webpack.dev.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    devtool: 'inline-source-map',
+    mode: 'development'
+});

package/webpack/webpack.prod.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production',
+});

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';
-export function DevTools(_props) {
-    function renderPanel(id) {
-        var widget = widgets[id];
-        if (!widget || !widget.component) {
-            return React.createElement("div", null);
-        }
-        return React.createElement("div", { className: "panel" }, widget.component);
-    }
-    function renderInfo(_id) {
-        return (React.createElement("div", { className: "panel" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean emper congue. Mauris eget congue magna. Aliquam aliquam lorem lectus, eget auctor nisl fringilla eu. Donec semper tincidunt nibh, a hendrerit neque posuere in. Ut a augue libero."));
-    }
-    return (React.createElement("div", { className: "ExamplePick-container" },
-        React.createElement(Grid, { defaultPanels: panels, renderPanel: renderPanel, renderInfo: renderInfo, widgets: widgets })));
-}
-export default DevTools;

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,62 +0,0 @@
-import { __awaiter, __generator } from "tslib";
-import * as React from 'react';
-import Group from '../Group/Group';
-import classnames from 'classnames';
-import { generateActionsForStore } from 'redux-store-generator';
-import * as dispatcherActions from '../../data/dispatcherActions';
-import { useSetState } from 'react-use';
-import { analyzeStructure } from 'redux-store-generator';
-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 : 325;
-    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('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;

package/esm/components/Monitor/Monitor.js

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { formatDistance } from 'date-fns';
-import { startSaga, stopSaga } from 'redux-connected';
-import classnames from 'classnames';
-import VirtualList from '../VirtualList/VirtualList';
-import * as selectors from '../../selectors/selectors';
-import { preview } from '../Preview/Preview';
-import cssPrefix from '../prefix';
-import Toggle from '../Toggle/Toggle';
-export function Monitor(props) {
-    var dispatch = useDispatch();
-    var isWide = props.isWide;
-    var sagas = useSelector(selectors.$sagas);
-    function onClick(item) {
-        dispatch(preview(item, 'process'));
-    }
-    var className = classnames(cssPrefix + "Monitor-container", cssPrefix + "Rows-container", {
-        wide: isWide,
-    });
-    var height = isWide ? 735 : 325;
-    return (React.createElement(VirtualList, { className: className, items: sagas, height: height, onClick: onClick }, SagaRow));
-}
-var SagaRow = function (props) {
-    var dispatch = useDispatch();
-    var index = props.index;
-    var listItem = props.data[index];
-    var saga = listItem.item;
-    var distanceStart = formatDistance(new Date(), new Date(saga.startedTS || 0));
-    var distanceStopped = formatDistance(new Date(), new Date(saga.stoppedTS || 0));
-    var distance = saga.isRunning ? distanceStart : distanceStopped;
-    function onChange(_ev, checked) {
-        var sagaId = saga.id;
-        var action = checked ? startSaga({ sagaId: sagaId }) : stopSaga({ sagaId: sagaId });
-        dispatch(action);
-    }
-    var className = classnames(cssPrefix + "Reading-container", {
-        disabled: !saga.isRunning,
-    });
-    return (React.createElement("div", { className: className, key: saga.id, style: props.style, onClick: listItem.onClick },
-        React.createElement("div", { className: "col" },
-            React.createElement("div", { className: "title" },
-                saga.id,
-                " ",
-                React.createElement("span", { className: "timeAgo" },
-                    distance,
-                    " ago")),
-            React.createElement("div", { className: "description", title: saga.description }, saga.description)),
-        React.createElement("div", { className: "col" },
-            React.createElement(Toggle, { defaultChecked: saga.isRunning, onChange: onChange }))));
-};
-export default Monitor;