redux-connected-devtools 1.0.3 → 1.0.4

package/dist/store/selectors.js

@@ -0,0 +1,143 @@
+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, b) => {
+        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/dist/types.js

@@ -0,0 +1 @@
+"use strict";

package/{src/utils/date.ts → dist/utils/date.js}

@@ -1,11 +1,8 @@
 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 → dist/utils/download.js}

@@ -1,12 +1,12 @@
-export const download = (filename: string, json: Json) => {
+export const download = (filename, 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 {
+    }
+    else {
         const elem = window.document.createElement('a');
         elem.href = window.URL.createObjectURL(blob);
         elem.download = filename;

package/package.json

@@ -1,12 +1,11 @@
 {
     "name": "redux-connected-devtools",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "redux-connected-devtools",
     "scripts": {
         "dev": "vite",
         "watch": "webpack --config webpack/webpack.dev.js --watch",
-        "build": "vite build & tsc",
-        "clean": "rimraf dist",
+        "build": "tsc & vite build",
         "test": "npx jest",
         "style": "prettier --write \"src/**/*.{ts,tsx}\""
     },
@@ -16,6 +15,9 @@
         "type": "git",
         "url": "https://github.com/dht/redux-connected-devtools.git"
     },
+    "files": [
+        "dist"
+    ],
     "dependencies": {
         "@redux-devtools/extension": "^3.2.2",
         "bytes": "^3.1.2",

package/.env

@@ -1,2 +0,0 @@
-VITE_SERVER_DOMAIN=http://localhost
-VITE_BASE_PORT_GLI=3100

package/.prettierrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-    trailingComma: 'es5',
-    tabWidth: 4,
-    semi: true,
-    singleQuote: true,
-    jsxSingleQuote: true,
-    endOfLine: 'auto',
-    // printWidth: 120,
-    useTabs: false,
-};

package/index.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/icon?family=Material+Icons"
-        />
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-        />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;400;500;700&display=swap"
-            rel="stylesheet"
-        />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-            rel="stylesheet"
-        />
-
-        <title>redux-connected-chrome-extension</title>
-        <style>
-            body {
-                padding: 0;
-                margin: 0;
-                min-height: 100vh;
-                font-family: 'Inter', sans-serif;
-            }
-
-            body,
-            #root {
-                display: flex;
-                flex: 1;
-            }
-
-            input,
-            h1,
-            h2,
-            h3,
-            select,
-            textarea {
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="root"></div>
-        <div id="modal-root"></div>
-        <script type="module" src="/src/panel.tsx"></script>
-    </body>
-</html>

package/jest.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-    "roots": [
-        "src"
-    ],
-    "transform": {
-        "^.+\\.ts$": "ts-jest"
-    },
-}; 

package/src/__tests__/sum.ts

@@ -1,9 +0,0 @@
-import { sum } from "../sum";
-
-test("1 + 1 = 2", () => {
-  expect(sum(1, 1)).toBe(2);
-});
-
-test("1 + 2 != 2", () => {
-  expect(sum(1, 2)).not.toBe(2);
-});

package/src/components/DevInspector/DevInspector.scss

@@ -1,2 +0,0 @@
-.DevInspector-container {
-}

package/src/components/DevInspector/DevInspector.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Container } from './DevInspector.style';
-import { ApiRequest } from 'redux-connected';
-import RequestJourney from '../RequestJourney/RequestJourney';
-import RequestDetails from '../RequestDetails/RequestDetails';
-
-export type DevInspectorProps = {
-    item?: ApiRequest;
-};
-
-export function DevInspector(props: DevInspectorProps) {
-    const { item } = props;
-
-    if (!item) {
-        return (
-            <Container
-                className='DevInspector-container'
-                data-testid='DevInspector-container'
-            ></Container>
-        );
-    }
-
-    return (
-        <Container
-            className='DevInspector-container'
-            data-testid='DevInspector-container'
-        >
-            <RequestDetails item={item} />
-            <RequestJourney item={item} />
-        </Container>
-    );
-}
-
-export default DevInspector;

package/src/components/DevList/DevList.scss

@@ -1,2 +0,0 @@
-.DevList-container {
-}

package/src/components/DevList/DevList.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { Container, Empty } from './DevList.style';
-import { FixedSizeList as List } from 'react-window';
-import classnames from 'classnames';
-
-export type DevListProps = {
-    items: Json[];
-    row: React.FC<any>;
-    selectedRow: any;
-    onClick: (item: any) => void;
-};
-
-export function DevList(props: DevListProps) {
-    const { row: Cmp, items, selectedRow } = props;
-
-    const Item = (rowInfo: any) => {
-        const { index, style } = rowInfo;
-
-        const item = items[index];
-        const className = classnames({ selected: item.id === selectedRow?.id });
-
-        return (
-            <Cmp
-                onClick={props.onClick}
-                className={className}
-                index={index}
-                style={style}
-                item={item}
-            />
-        );
-    };
-
-    function renderEmpty() {
-        return <Empty>Empty list</Empty>;
-    }
-
-    function renderList() {
-        if (items.length === 0) {
-            return renderEmpty();
-        }
-
-        return (
-            <List
-                height={850}
-                itemCount={items.length}
-                itemSize={68}
-                width={350}
-                className='list'
-            >
-                {Item}
-            </List>
-        );
-    }
-
-    return (
-        <Container
-            className='DevList-container'
-            data-testid='DevList-container'
-        >
-            {renderList()}
-        </Container>
-    );
-}
-
-export default DevList;

package/src/components/DevMenu/DevMenu.scss

@@ -1,2 +0,0 @@
-.DevMenu-container {
-}

package/src/components/DevMenu/DevMenu.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { IDevRoute } from '../../data/devRoutes';
-import {
-    Container,
-    MenuGroup,
-    MenuGroupTitle,
-    MenuItem,
-    Title,
-    Badge,
-    BadgeTotal,
-} from './DevMenu.style';
-import classnames from 'classnames';
-
-export type DevMenuProps = {
-    groups: string[];
-    items: IDevRoute[];
-    onClick: (route: IDevRoute) => void;
-    selectedId: string;
-    badges: Record<string, number>;
-    badgesTotal: Record<string, number>;
-};
-
-export function DevMenu(props: DevMenuProps) {
-    const { groups, items, selectedId, badges, badgesTotal } = props;
-
-    function renderItem(item: IDevRoute) {
-        const { title, id } = item;
-        const selected = id === selectedId;
-
-        const badge = badges[id];
-        const badgeTotal = badgesTotal[id];
-
-        return (
-            <MenuItem
-                key={item.id}
-                className={classnames({ selected })}
-                onClick={() => props.onClick(item)}
-            >
-                <Title>{title}</Title>
-                {badgeTotal > 0 && badgeTotal !== badge && (
-                    <BadgeTotal>{badgeTotal}</BadgeTotal>
-                )}
-                {badge > 0 && <Badge>{badge}</Badge>}
-            </MenuItem>
-        );
-    }
-
-    function renderItems(groupItems: IDevRoute[]) {
-        return groupItems.map((item: IDevRoute) => renderItem(item));
-    }
-
-    function renderGroup(group: string) {
-        const groupItems = items.filter((item) => item.group === group);
-
-        return (
-            <MenuGroup key={group}>
-                <MenuGroupTitle>{group}</MenuGroupTitle>
-                {renderItems(groupItems)}
-            </MenuGroup>
-        );
-    }
-
-    function renderGroups() {
-        return groups.map((group: string) => renderGroup(group));
-    }
-
-    return (
-        <Container
-            className='DevMenu-container'
-            data-testid='DevMenu-container'
-        >
-            {renderGroups()}
-        </Container>
-    );
-}
-
-export default DevMenu;

package/src/components/DevPanel/DevPanel.scss

@@ -1,2 +0,0 @@
-.DevPanel-container {
-}

package/src/components/DevtoolsApp/DevtoolsApp.scss

@@ -1,2 +0,0 @@
-.DevtoolsApp-container {
-}

package/src/components/DevtoolsApp/DevtoolsApp.tsx

@@ -1,45 +0,0 @@
-import Icon from '../Icon/Icon';
-import React, { useRef } from 'react';
-import { Container } from './DevtoolsApp.style';
-import { DevPanelContainer } from '../../containers/DevPanelContainer';
-import { Provider } from 'react-redux';
-import Size from '../Size/Size';
-import classnames from 'classnames';
-
-export type DevtoolsAppProps = {
-    connectedStore: any;
-    clearRequests: () => void;
-    downloadState: () => void;
-    storeSizeInBytes?: number;
-    isDarkMode?: boolean;
-};
-
-export function DevtoolsApp(props: DevtoolsAppProps) {
-    const { connectedStore, storeSizeInBytes, isDarkMode } = props;
-    const ref = useRef(null);
-
-    const className = classnames('DevtoolsApp-container', {
-        darkMode: isDarkMode,
-    });
-
-    return (
-        <Container
-            ref={ref}
-            className={className}
-            data-testid='DevtoolsApp-container'
-        >
-            <Provider store={connectedStore}>
-                <DevPanelContainer>
-                    <Size size={storeSizeInBytes} />
-                    <Icon
-                        name='clearAll'
-                        onClick={() => props.clearRequests()}
-                    />
-                    <Icon name='download' onClick={props.downloadState} />
-                </DevPanelContainer>
-            </Provider>
-        </Container>
-    );
-}
-
-export default DevtoolsApp;

package/src/components/Icon/AllIcons.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-
-export type IconName = 'download' | 'close' | 'clearAll';
-
-type IconProps = {
-    size?: number;
-};
-
-const Download = (props: IconProps) => {
-    const { size = 24 } = props;
-
-    return (
-        <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            width={`${size}px`}
-            height={`${size}px`}
-            fill='currentColor'
-        >
-            <path d='M0 0h24v24H0z' fill='none' />
-            <path d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z' />
-        </svg>
-    );
-};
-
-const Close = (props: IconProps) => {
-    const { size = 24 } = props;
-
-    return (
-        <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            width={`${size}px`}
-            height={`${size}px`}
-            fill='currentColor'
-        >
-            <path d='M0 0h24v24H0z' fill='none' />
-            <path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' />
-        </svg>
-    );
-};
-
-const ClearAll = (props: IconProps) => {
-    const { size = 24 } = props;
-
-    return (
-        <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            width={`${size}px`}
-            height={`${size}px`}
-            fill='currentColor'
-        >
-            <path d='M0 0h24v24H0z' fill='none' />
-            <path d='M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z' />
-        </svg>
-    );
-};
-
-type Icons = Record<IconName, React.FC<IconProps>>;
-
-export const allIcons: Icons = {
-    close: Close,
-    clearAll: ClearAll,
-    download: Download,
-};

package/src/components/Icon/Icon.scss

@@ -1,2 +0,0 @@
-.Icon-container {
-}

package/src/components/Icon/Icon.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { allIcons, IconName } from './AllIcons';
-import { Container } from './Icon.style';
-
-export type IconProps = {
-    name: IconName;
-    color?: string;
-    size?: number;
-    onClick?: () => void;
-};
-
-export function Icon(props: IconProps) {
-    const { name, size = 20, color } = props;
-    const Cmp = allIcons[name];
-
-    return (
-        <Container
-            className='Icon-container'
-            data-testid='Icon-container'
-            color={color}
-            onClick={props.onClick}
-        >
-            <Cmp size={size} />
-        </Container>
-    );
-}
-
-export default Icon;

package/src/components/JourneyRow/JourneyRow.scss

@@ -1,2 +0,0 @@
-.JourneyRow-container {
-}

package/src/components/JsonViewer/JsonViewer.scss

@@ -1,2 +0,0 @@
-.JsonViewer-container {
-}

package/src/components/JsonViewer/JsonViewer.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Container } from './JsonViewer.style';
-
-export type JsonViewerProps = {
-    json: Json | undefined;
-    width?: number;
-};
-
-export function JsonViewer(props: JsonViewerProps) {
-    const { json, width } = props;
-
-    return (
-        <Container
-            className='JsonViewer-container'
-            data-testid='JsonViewer-container'
-            width={width}
-        >
-            <pre>{JSON.stringify(json, null, 4)}</pre>
-        </Container>
-    );
-}
-
-export default JsonViewer;

package/src/components/Lifecycle/Lifecycle.scss

@@ -1,2 +0,0 @@
-.Lifecycle-container {
-}