redux-connected-devtools 0.0.15 → 1.0.0

package/src/components/RequestRow/RequestRow.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Container, Col, Id, Type } from './RequestRow.style';
+import Time from '../Time/Time';
+import { ApiRequest } from 'redux-connected';
+
+export type RequestRowProps = {
+    style: Json;
+    item: ApiRequest;
+    index: number;
+    className?: string;
+    onClick: (item: ApiRequest) => void;
+};
+
+export function RequestRow(props: RequestRowProps) {
+    const { index, style, item, className } = props;
+    const { sequence, createdTS } = item;
+
+    return (
+        <Container
+            className={`DevListRow-container ${className}`}
+            data-testid='DevListRow-container'
+            style={style}
+            index={index}
+            onClick={() => props.onClick(item)}
+        >
+            <Col>
+                <Id>{sequence}</Id>
+                <Type>{item.originalAction?.type}</Type>
+            </Col>
+            <Col>
+                <Time value={createdTS} />
+            </Col>
+        </Container>
+    );
+}
+
+export default RequestRow;

package/src/components/Size/Size.scss

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

package/src/components/Size/Size.style.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    color: olive;
+    margin: 0 5px;
+`;

package/src/components/Size/Size.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Container } from './Size.style';
+import bytes from 'bytes';
+import { useMemo } from 'react';
+
+export type SizeProps = {
+    size?: number;
+};
+
+export function Size(props: SizeProps) {
+    const { size = 0 } = props;
+    const sizeText = useMemo(() => bytes(size), [size]);
+
+    return (
+        <Container className='Size-container' data-testid='Size-container'>
+            {!size ? '-' : sizeText}
+        </Container>
+    );
+}
+
+export default Size;

package/src/components/StateViewer/StateViewer.scss

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

package/src/components/StateViewer/StateViewer.style.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+`;

package/src/components/StateViewer/StateViewer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Container } from './StateViewer.style';
+
+export type StateViewerProps = {};
+
+export function StateViewer(_props: StateViewerProps) {
+    return (
+        <Container
+            className='StateViewer-container'
+            data-testid='StateViewer-container'
+        >
+            StateViewer
+        </Container>
+    );
+}
+
+export default StateViewer;

package/src/components/Time/Time.scss

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

package/src/components/Time/Time.style.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    font-family: monospace;
+    color: #99a;
+`;
+
+export const Full = styled.div`
+    font-size: 24px;
+`;
+
+export const Fraction = styled.div`
+    font-size: 12px;
+`;

package/src/components/Time/Time.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { startOfTime } from '../../utils/date';
+import { Container, Full, Fraction } from './Time.style';
+
+export type TimeProps = {
+    value: number;
+};
+
+export function Time(props: TimeProps) {
+    const { value } = props;
+
+    const relativeValue = (value - startOfTime) / 1000;
+
+    const full = Math.floor(relativeValue);
+    const fraction = (relativeValue - full).toFixed(3).split('.').pop();
+
+    return (
+        <Container className='Time-container' data-testid='Time-container'>
+            <Full>{full}</Full>
+            <Fraction>{fraction}</Fraction>
+        </Container>
+    );
+}
+
+export default Time;

package/src/containers/DevMenuContainer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import DevMenu from '../components/DevMenu/DevMenu';
+import { devGroups, devRoutes, IDevRoute } from '../data/devRoutes';
+import { $menuBadges, $menuBadgesTotal } from '../store/selectors';
+
+type DevPanelProps = {
+    selectedId: string;
+    onClick: (route: IDevRoute) => void;
+};
+
+export function DevMenuContainer(props: DevPanelProps) {
+    const badges = useSelector($menuBadges);
+    const badgesTotal = useSelector($menuBadgesTotal);
+
+    return (
+        <DevMenu
+            groups={devGroups}
+            items={devRoutes}
+            badges={badges}
+            badgesTotal={badgesTotal}
+            selectedId={props.selectedId}
+            onClick={props.onClick}
+        />
+    );
+}
+
+export default DevMenuContainer;

package/src/containers/DevPanelContainer.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import DevPanel from '../components/DevPanel/DevPanel';
+
+type DevPanelProps = {
+    children: JSX.Element | JSX.Element[];
+};
+
+export function DevPanelContainer(props: DevPanelProps) {
+    return <DevPanel>{props.children}</DevPanel>;
+}
+
+export default DevPanelContainer;

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/EndpointConfigsContainer.tsx

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

package/src/containers/EndpointStatusContainer.tsx

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

package/src/containers/GlobalSettingsContainer.tsx

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

package/src/containers/GlobalStatsContainer.tsx

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

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/LifecycleApiErrorContainer.tsx

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

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/LifecycleGeneralErrorContainer.tsx

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

package/src/containers/LifecycleInQueueContainer.tsx

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

package/src/containers/LifecyclePendingApiContainer.tsx

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

package/src/containers/LifecyclePostActionContainer.tsx

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

package/src/containers/LifecycleReceivedContainer.tsx

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

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

@@ -0,0 +1,27 @@
+import LifecycleReceivedContainer from '../containers/LifecycleReceivedContainer';
+import GlobalStatsContainer from '../containers/GlobalStatsContainer';
+import EndpointConfigsContainer from '../containers/EndpointConfigsContainer';
+import GlobalSettingsContainer from '../containers/GlobalSettingsContainer';
+import EndpointStatusContainer from '../containers/EndpointStatusContainer';
+import LifecycleInQueueContainer from '../containers/LifecycleInQueueContainer';
+import LifecycleGeneralErrorContainer from '../containers/LifecycleGeneralErrorContainer';
+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>>;
+
+export const devComponents: DevComponents = {
+    LifecycleReceived: LifecycleReceivedContainer,
+    LifecycleInQueue: LifecycleInQueueContainer,
+    LifecycleGeneralError: LifecycleGeneralErrorContainer,
+    LifecyclePendingApi: LifecyclePendingApiContainer,
+    LifecycleApiError: LifecycleApiErrorContainer,
+    LifecycleFailed: LifecycleFailedContainer,
+    LifecyclePostAction: LifecyclePostActionContainer,
+    GlobalSettings: GlobalSettingsContainer,
+    GlobalStats: GlobalStatsContainer,
+    EndpointConfigs: EndpointConfigsContainer,
+    EndpointStatus: EndpointStatusContainer,
+};

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

@@ -0,0 +1,90 @@
+export type IDevRoute = {
+    id: string;
+    title: string;
+    group: string;
+    componentId: string;
+};
+
+export const devRoutes: IDevRoute[] = [
+    {
+        id: 'lifecycleReceived',
+        title: '1. Received',
+        group: 'lifecycle',
+        componentId: 'LifecycleReceived',
+    },
+    {
+        id: 'lifecycleInQueue',
+        title: '2. In queue',
+        group: 'lifecycle',
+        componentId: 'LifecycleInQueue',
+    },
+
+    {
+        id: 'lifecyclePendingApi',
+        title: '3. Pending API',
+        group: 'lifecycle',
+        componentId: 'LifecyclePendingApi',
+    },
+    {
+        id: 'lifecyclePostAction',
+        title: '4. Post action',
+        group: 'lifecycle',
+        componentId: 'LifecyclePostAction',
+    },
+    {
+        id: 'lifecycleGeneralError',
+        title: 'e1. General errors',
+        group: 'errors',
+        componentId: 'LifecycleGeneralError',
+    },
+    {
+        id: 'lifecycleApiError',
+        title: 'e2. API errors',
+        group: 'errors',
+        componentId: 'LifecycleApiError',
+    },
+    {
+        id: 'lifecycleFailed',
+        title: 'e3. Failed requests (after retries)',
+        group: 'errors',
+        componentId: 'LifecycleFailed',
+    },
+    {
+        id: 'endpointStatus',
+        title: 'Endpoint status',
+        group: 'settings & stats',
+        componentId: 'EndpointStatus',
+    },
+    {
+        id: 'settingsGlobal',
+        title: 'Global settings',
+        group: 'settings & stats',
+        componentId: 'GlobalSettings',
+    },
+    {
+        id: 'settingsEndpoints',
+        title: 'Endpoints configs',
+        group: 'settings & stats',
+        componentId: 'EndpointConfigs',
+    },
+    {
+        id: 'statsGlobal',
+        title: 'Global stats',
+        group: 'settings & stats',
+        componentId: 'GlobalStats',
+    },
+];
+
+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();