redux-connected-devtools 0.0.15 → 1.0.0

package/src/components/DevPanel/DevPanel.tsx

@@ -0,0 +1,58 @@
+import DevMenu from '../../containers/DevMenuContainer';
+import React, { useState } from 'react';
+import { Actions, Container, Content } from './DevPanel.style';
+import { devComponents } from '../../data/devComponents';
+import { devRoutes, IDevRoute } from '../../data/devRoutes';
+
+export type DevPanelProps = {
+    children: JSX.Element | JSX.Element[];
+};
+
+export function DevPanel(props: DevPanelProps) {
+    const [route, setRoute] = useState<IDevRoute>(devRoutes[0]);
+
+    function renderRoute() {
+        const Cmp = devComponents[route.componentId];
+        return <Cmp key={route.id} />;
+    }
+
+    return (
+        <Container
+            className='DevPanel-container'
+            data-testid='DevPanel-container'
+        >
+            <DevMenu
+                selectedId={route.id}
+                onClick={(item: IDevRoute) => setRoute(item)}
+            />
+            <Actions>{props.children}</Actions>
+            <Content>{renderRoute()}</Content>
+        </Container>
+    );
+}
+
+/*
+    for the chrome extension devtools panel
+    TODO: find another way to encapsulate this
+
+let bgConnection;
+
+function init(id: string) {
+    bgConnection = chrome.runtime?.connect({
+        name: id,
+    });
+
+    if (bgConnection) {
+        bgConnection.onMessage.addListener((message: Json) => {
+            console.log('message ->', message);
+        });
+    }
+}
+
+if (chrome) {
+    const tabId = String(chrome.devtools?.inspectedWindow.tabId ?? '');
+    init(tabId);
+}
+*/
+
+export default DevPanel;

package/src/components/DevtoolsApp/DevtoolsApp.scss

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

package/src/components/DevtoolsApp/DevtoolsApp.style.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+    background-color: #223;
+    z-index: 3;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+    min-width: 880px;
+    min-height: 880px;
+`;

package/src/components/DevtoolsApp/DevtoolsApp.tsx

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

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

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

package/src/components/Icon/Icon.style.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Container = styled.div<{ color?: string }>`
+    margin: 0 3px;
+    color: ${(props) => props.color ?? 'inherit'};
+    cursor: pointer;
+
+    &:hover {
+        color: gold;
+    }
+`;

package/src/components/Icon/Icon.tsx

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

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

package/src/components/JourneyRow/JourneyRow.style.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 20px;
+
+    &:nth-child(2n-1) {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+    }
+`;
+
+export const Status = styled.div`
+    color: #aaa;
+`;
+
+export const DataIcon = styled.div`
+    background-color: #000;
+    padding: 3px 7px;
+    font-size: 13px;
+    font-weight: bold;
+    color: purple;
+    border-radius: 5px;
+    ${(props) => props.theme.marginLeft('10px')}
+`;
+
+export const Delta = styled.div`
+    font-size: 13px;
+    width: 60px;
+    font-weight: bold;
+    color: olive;
+    ${(props) => props.theme.marginRight('10px')}
+    text-align: center;
+    font-family: monospace;
+`;
+
+export const Flex = styled.div`
+    flex: 1;
+`;

package/src/components/JourneyRow/JourneyRow.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import Time from '../Time/Time';
+import { Container, Status, DataIcon, Delta, Flex } from './JourneyRow.style';
+import { JourneyPoint, LifecycleStatus } from 'redux-connected';
+
+export type JourneyRowProps = {
+    point: JourneyPoint;
+};
+
+const statusMap: Record<LifecycleStatus, string> = {
+    [LifecycleStatus.RECEIVED]: 'Received',
+    [LifecycleStatus.POST_ACTION_OPTIMISTIC]: 'Post action (optimistic)',
+    [LifecycleStatus.IN_QUEUE]: 'In queue',
+    [LifecycleStatus.GENERAL_ERROR]: 'General error',
+    [LifecycleStatus.PENDING_API_RESPONSE]: 'Pending API',
+    [LifecycleStatus.API_ERROR]: 'API error',
+    [LifecycleStatus.POST_ACTION]: 'Post action',
+    [LifecycleStatus.FAILED]: 'Failed',
+};
+
+export function JourneyRow(props: JourneyRowProps) {
+    const { point } = props;
+    const { status, timestamp, data, delta = '' } = point;
+
+    function printPoint() {
+        console.log(data);
+    }
+
+    function renderDataIcon() {
+        if (!data) {
+            return null;
+        }
+
+        return <DataIcon>D</DataIcon>;
+    }
+
+    function renderDelta() {
+        if (!delta) {
+            return null;
+        }
+
+        return <Delta>+{delta.toLocaleString()}</Delta>;
+    }
+
+    return (
+        <Container
+            className='JourneyRow-container'
+            data-testid='JourneyRow-container'
+            onClick={printPoint}
+        >
+            <Status>{statusMap[status]}</Status>
+            {renderDataIcon()}
+            <Flex />
+            {renderDelta()}
+            <Time value={timestamp} />
+        </Container>
+    );
+}
+
+export default JourneyRow;

package/src/components/JsonViewer/JsonViewer.scss

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

package/src/components/JsonViewer/JsonViewer.style.tsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const Container = styled.div<{ width?: number }>`
+    flex: 1;
+    max-height: 850px;
+    overflow: auto;
+    padding: 0 25px;
+    max-width: ${(props) => (props.width ? props.width + 'px' : '680px')};
+    color: #ccc;
+    line-height: 26px;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 7px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #333;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: #555;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: #666;
+    }
+`;

package/src/components/JsonViewer/JsonViewer.tsx

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

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

package/src/components/Lifecycle/Lifecycle.style.tsx

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

package/src/components/Lifecycle/Lifecycle.tsx

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

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

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

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

package/src/components/LogsViewer/LogsViewer.tsx

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

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

package/src/components/RequestDetails/RequestDetails.style.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+    padding: 20px;
+`;
+
+export const Table = styled.table``;
+
+export const Tr = styled.tr``;
+
+export const Td = styled.td`
+    color: goldenrod;
+
+    &:first-child {
+        color: #778;
+        text-align: right;
+        ${(props) => props.theme.paddingRight('10px')}
+    }
+`;

package/src/components/RequestDetails/RequestDetails.tsx

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

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

package/src/components/RequestJourney/RequestJourney.style.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+    border-top: 1px solid #333;
+    max-height: 380px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #333;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: #555;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: #666;
+    }
+`;

package/src/components/RequestJourney/RequestJourney.tsx

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

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

package/src/components/RequestRow/RequestRow.style.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const Container = styled.div<{ index: number }>`
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+    max-width: 90%;
+    background-color: ${(props) =>
+        props.index % 2 === 1 ? 'rgba(0, 0, 0, 0.2)' : 'transparent'};
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.7);
+        cursor: pointer;
+    }
+`;
+
+export const Col = styled.div`
+    &:first-child {
+        flex: 1;
+    }
+`;
+
+export const Id = styled.div`
+    color: goldenrod;
+    font-size: 16px;
+`;
+
+export const Type = styled.div`
+    color: brown;
+`;