redux-connected-devtools 0.0.15 → 1.0.2

package/src/components/DevMenu/DevMenu.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { IDevRoute } from '../../data/devRoutes';
+import {
+    Container,
+    MenuGroup,
+    MenuGroupTitle,
+    MenuItem,
+    Title,
+    Badge,
+    BadgeTotal,
+} from './DevMenu.style';
+
+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
+                selected={selected}
+                key={item.id}
+                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

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

package/src/components/DevPanel/DevPanel.style.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+    color: #eee;
+    background-color: #232332;
+    display: flex;
+    flex-direction: row;
+`;
+
+export const Content = styled.div`
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+`;

package/src/components/DevPanel/DevPanel.tsx

@@ -0,0 +1,51 @@
+import DevMenu from '../../containers/DevMenuContainer';
+import React, { useState } from 'react';
+import { Container, Content } from './DevPanel.style';
+import { devComponents } from '../../data/devComponents';
+import { devGroups, devRoutes, IDevRoute } from '../../data/devRoutes';
+import { Json } from '../../types';
+
+export type DevPanelProps = {};
+
+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)}
+            />
+            <Content>{renderRoute()}</Content>
+        </Container>
+    );
+}
+
+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/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;
+    margin-left: 10px;
+`;
+
+export const Delta = styled.div`
+    font-size: 13px;
+    width: 60px;
+    font-weight: bold;
+    color: olive;
+    margin-right: 10px;
+    text-align: center;
+    font-family: monospace;
+`;
+
+export const Flex = styled.div`
+    flex: 1;
+`;

package/src/components/JourneyRow/JourneyRow.tsx

@@ -0,0 +1,58 @@
+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.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',
+};
+
+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,24 @@
+import React from 'react';
+import { Json } from '../../types';
+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,31 @@
+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} />
+            <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;
+        padding-right: 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,6 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+    border-top: 1px solid #333;
+`;

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,31 @@
+import styled from 'styled-components';
+
+export const Container = styled.div<{ index: number }>`
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+    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;
+`;

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 { Json } from '../../types';
+import { ApiRequest } from 'redux-connected';
+
+export type RequestRowProps = {
+    style: Json;
+    item: ApiRequest;
+    index: number;
+    onClick: (item: ApiRequest) => void;
+};
+
+export function RequestRow(props: RequestRowProps) {
+    const { index, style, item } = props;
+    const { sequence, createdTS } = item;
+
+    return (
+        <Container
+            className='DevListRow-container'
+            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/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`
+    color: yellowgreen;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    font-family: monospace;
+`;
+
+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;