redux-connected-devtools 1.0.3 → 1.0.5

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 {
-}

package/src/components/Lifecycle/Lifecycle.tsx

@@ -1,36 +0,0 @@
-import DevInspector from '../DevInspector/DevInspector';
-import DevList from '../DevList/DevList';
-import React, { useState } from 'react';
-import RequestRow from '../RequestRow/RequestRow';
-import { ApiRequest } from 'redux-connected';
-import { Container } from './Lifecycle.style';
-
-export type LifecycleProps = {
-    requests: ApiRequest[];
-};
-
-export function Lifecycle(props: LifecycleProps) {
-    const { requests } = props;
-    const [item, setItem] = useState<ApiRequest>();
-
-    function onClick(newItem: ApiRequest) {
-        setItem(newItem);
-    }
-
-    return (
-        <Container
-            className='Lifecycle-container'
-            data-testid='Lifecycle-container'
-        >
-            <DevList
-                items={requests}
-                row={RequestRow}
-                onClick={onClick}
-                selectedRow={item}
-            />
-            <DevInspector item={item} />
-        </Container>
-    );
-}
-
-export default Lifecycle;

package/src/components/LogsViewer/LogsViewer.scss

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

package/src/components/LogsViewer/LogsViewer.style.tsx

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

package/src/components/LogsViewer/LogsViewer.tsx

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

package/src/components/RequestDetails/RequestDetails.scss

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

package/src/components/RequestDetails/RequestDetails.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Container, Table, Tr, Td } from './RequestDetails.style';
-import { ApiRequest } from 'redux-connected';
-import JsonViewer from '../JsonViewer/JsonViewer';
-import bytes from 'bytes';
-
-export type RequestDetailsProps = {
-    item: ApiRequest;
-};
-
-export function RequestDetails(props: RequestDetailsProps) {
-    const { item } = props;
-
-    return (
-        <Container
-            className='RequestDetails-container'
-            data-testid='RequestDetails-container'
-        >
-            <Table>
-                <tbody>
-                    <Tr>
-                        <Td>sequence</Td>
-                        <Td>{item.sequence}</Td>
-                    </Tr>
-                    <Tr>
-                        <Td>id</Td>
-                        <Td>{item.shortId}</Td>
-                    </Tr>
-                    <Tr>
-                        <Td>apiVerb</Td>
-                        <Td>{item.argsApiVerb}</Td>
-                    </Tr>
-                    <Tr>
-                        <Td>connection</Td>
-                        <Td>{item.argsConnectionType}</Td>
-                    </Tr>
-                    <Tr>
-                        <Td>duration</Td>
-                        <Td>{item.apiDuration}</Td>
-                    </Tr>
-                    <Tr>
-                        <Td>nodeName</Td>
-                        <Td>{item.argsNodeName}</Td>
-                    </Tr>
-                    <Tr>
-                        <Td>responseSize</Td>
-                        <Td>
-                            {item.apiResponseSize &&
-                                bytes(item.apiResponseSize)}
-                        </Td>
-                    </Tr>
-                </tbody>
-            </Table>
-
-            <JsonViewer width={290} json={item.originalAction} />
-        </Container>
-    );
-}
-
-export default RequestDetails;

package/src/components/RequestJourney/RequestJourney.scss

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

package/src/components/RequestJourney/RequestJourney.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Container } from './RequestJourney.style';
-import { ApiRequest, JourneyPoint } from 'redux-connected';
-import JourneyRow from '../JourneyRow/JourneyRow';
-
-export type RequestJourneyProps = {
-    item: ApiRequest;
-};
-
-export function RequestJourney(props: RequestJourneyProps) {
-    const { item } = props;
-
-    function renderItem(point: JourneyPoint, index: number) {
-        return <JourneyRow key={index} point={point} />;
-    }
-
-    function renderItems() {
-        return item.items.map((point: JourneyPoint, index: number) =>
-            renderItem(point, index)
-        );
-    }
-
-    return (
-        <Container
-            className='RequestJourney-container'
-            data-testid='RequestJourney-container'
-        >
-            {renderItems()}
-        </Container>
-    );
-}
-
-export default RequestJourney;

package/src/components/RequestRow/RequestRow.scss

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

package/src/components/RequestRow/RequestRow.tsx

@@ -1,37 +0,0 @@
-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

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

package/src/components/Size/Size.tsx

@@ -1,21 +0,0 @@
-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

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

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

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

package/src/components/StateViewer/StateViewer.tsx

@@ -1,17 +0,0 @@
-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

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

package/src/containers/DevMenuContainer.tsx

@@ -1,28 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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/JsonViewerContainer.tsx

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

package/src/containers/LifecycleContainer.tsx

@@ -1,12 +0,0 @@
-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/LogsViewerContainer.tsx

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

package/src/containers/StateViewerContainer.tsx

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

package/src/data/devRouter.ts

@@ -1,107 +0,0 @@
-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/store/initialState.ts

@@ -1,42 +0,0 @@
-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;