redux-connected-devtools 1.0.2 → 1.0.4

package/src/components/DevMenu/DevMenu.tsx

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

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

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

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

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

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

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

package/src/components/Lifecycle/Lifecycle.tsx

@@ -1,31 +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} />
-            <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.style.tsx

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

@@ -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.style.tsx

@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-    flex: 1;
-    border-top: 1px solid #333;
-`;

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

@@ -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,10 +0,0 @@
-import React from 'react';
-import DevPanel from '../components/DevPanel/DevPanel';
-
-type DevPanelProps = {};
-
-export function DevPanelContainer(_props: DevPanelProps) {
-    return <DevPanel />;
-}
-
-export default DevPanelContainer;

package/src/content_script.ts

@@ -1,19 +0,0 @@
-window.addEventListener('message', function (event) {
-    // Only accept messages from the same frame
-    if (event.source !== window) {
-        return;
-    }
-
-    const message = event.data as any;
-
-    // Only accept messages that we know are ours
-    if (
-        typeof message !== 'object' ||
-        message === null ||
-        message.source !== 'devtools-page'
-    ) {
-        return;
-    }
-
-    chrome.runtime.sendMessage(message);
-});

package/src/devtools.tsx

@@ -1,29 +0,0 @@
-// devtools.js
-const backgroundPageConnection = chrome.runtime.connect({
-    name: 'devtools-page',
-});
-
-let panel: any;
-
-chrome.devtools.panels.create(
-    'Redux connected',
-    '',
-    'panel.html',
-    function (_panel) {
-        panel = _panel;
-
-        backgroundPageConnection.postMessage({
-            name: 'init',
-            tabId: chrome.devtools.inspectedWindow.tabId,
-        });
-
-        backgroundPageConnection.postMessage({
-            tabId: chrome.devtools.inspectedWindow.tabId,
-            scriptToInject: 'injected_script.js',
-        });
-
-        backgroundPageConnection.onMessage.addListener(function (message: any) {
-            // Handle responses from the background page, if any
-        });
-    }
-);

package/src/index.ts

@@ -1 +0,0 @@
-export { DevPanelContainer } from './containers/DevPanelContainer';

package/src/injected_script.ts

@@ -1,9 +0,0 @@
-// injected-script.js
-
-window.postMessage(
-    {
-        greeting: 'hello there!',
-        source: 'devtools-page',
-    },
-    '*'
-);

package/src/options.tsx

@@ -1,77 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-
-const Options = () => {
-    const [color, setColor] = useState<string>('');
-    const [status, setStatus] = useState<string>('');
-    const [like, setLike] = useState<boolean>(false);
-
-    useEffect(() => {
-        // Restores select box and checkbox state using the preferences
-        // stored in chrome.storage.
-        chrome.storage.sync.get(
-            {
-                favoriteColor: 'red',
-                likesColor: true,
-            },
-            (items) => {
-                setColor(items.favoriteColor);
-                setLike(items.likesColor);
-            }
-        );
-    }, []);
-
-    const saveOptions = () => {
-        // Saves options to chrome.storage.sync.
-        chrome.storage.sync.set(
-            {
-                favoriteColor: color,
-                likesColor: like,
-            },
-            () => {
-                // Update status to let user know options were saved.
-                setStatus('Options saved.');
-                const id = setTimeout(() => {
-                    setStatus('');
-                }, 1000);
-                return () => clearTimeout(id);
-            }
-        );
-    };
-
-    return (
-        <>
-            <div>
-                Favorite color:{' '}
-                <select
-                    value={color}
-                    onChange={(event) => setColor(event.target.value)}
-                >
-                    <option value='red'>red</option>
-                    <option value='green'>green</option>
-                    <option value='blue'>blue</option>
-                    <option value='yellow'>yellow</option>
-                </select>
-            </div>
-            <div>
-                <label>
-                    <input
-                        type='checkbox'
-                        checked={like}
-                        onChange={(event) => setLike(event.target.checked)}
-                    />
-                    I like colors.
-                </label>
-            </div>
-            <div>{status}</div>
-            <button onClick={saveOptions}>Save</button>
-        </>
-    );
-};
-
-ReactDOM.render(
-    <React.StrictMode>
-        <Options />
-    </React.StrictMode>,
-    document.getElementById('root')
-);

package/src/panel.tsx

@@ -1,30 +0,0 @@
-import DevPanel from './containers/DevPanelContainer';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { store } from './store/initialState';
-
-ReactDOM.render(
-    <React.StrictMode>
-        <Provider store={store}>
-            <DevPanel />
-        </Provider>
-    </React.StrictMode>,
-    document.getElementById('root')
-);
-
-chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
-    if (sender.origin?.indexOf('http://localhost') === 0) {
-        const store = (window as any).store;
-
-        switch (request.type) {
-            case 'CONNECTED_STATE':
-                break;
-            case 'CONNECTED_ACTION':
-                const { payload } = request;
-                const { action } = payload;
-                store.dispatch(action);
-                break;
-        }
-    }
-});