redux-connected-devtools 0.0.13 → 1.0.2

package/src/containers/DevPanelContainer.tsx

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

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/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/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/content_script.ts

@@ -0,0 +1,19 @@
+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/data/devComponents.tsx

@@ -0,0 +1,25 @@
+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';
+
+type DevComponents = Record<string, React.FC<any>>;
+
+export const devComponents: DevComponents = {
+    LifecycleReceived: LifecycleReceivedContainer,
+    LifecycleInQueue: LifecycleInQueueContainer,
+    LifecycleGeneralError: LifecycleGeneralErrorContainer,
+    LifecyclePendingApi: LifecyclePendingApiContainer,
+    LifecycleApiError: LifecycleApiErrorContainer,
+    LifecyclePostAction: LifecyclePostActionContainer,
+    GlobalSettings: GlobalSettingsContainer,
+    GlobalStats: GlobalStatsContainer,
+    EndpointConfigs: EndpointConfigsContainer,
+    EndpointStatus: EndpointStatusContainer,
+};

package/src/data/devRoutes.ts

@@ -0,0 +1,83 @@
+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: 'lifecycleGeneralError',
+        title: '3. General error',
+        group: 'lifecycle',
+        componentId: 'LifecycleGeneralError',
+    },
+    {
+        id: 'lifecyclePendingApi',
+        title: '4. Pending API',
+        group: 'lifecycle',
+        componentId: 'LifecyclePendingApi',
+    },
+    {
+        id: 'lifecycleApiError',
+        title: '5. API error',
+        group: 'lifecycle',
+        componentId: 'LifecycleApiError',
+    },
+    {
+        id: 'lifecyclePostAction',
+        title: '6. Post action',
+        group: 'lifecycle',
+        componentId: 'LifecyclePostAction',
+    },
+    {
+        id: 'endpointStatus',
+        title: 'Endpoint status',
+        group: 'state',
+        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();

package/src/devtools.tsx

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

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

package/src/injected_script.ts

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

package/src/options.tsx

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

@@ -0,0 +1,30 @@
+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;
+        }
+    }
+});

package/src/popup.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const Popup = () => {
+    const [count, setCount] = useState(0);
+    const [currentURL, setCurrentURL] = useState<string>();
+
+    useEffect(() => {
+        chrome.action.setBadgeText({ text: count.toString() });
+    }, [count]);
+
+    useEffect(() => {
+        chrome.tabs.query(
+            { active: true, currentWindow: true },
+            function (tabs) {
+                setCurrentURL(tabs[0].url);
+            }
+        );
+    }, []);
+
+    const changeBackground = () => {
+        chrome.tabs.query(
+            { active: true, currentWindow: true },
+            function (tabs) {
+                const tab = tabs[0];
+                if (tab.id) {
+                    chrome.tabs.sendMessage(
+                        tab.id,
+                        {
+                            color: '#555555',
+                        },
+                        (msg) => {
+                            console.log('result message:', msg);
+                        }
+                    );
+                }
+            }
+        );
+    };
+
+    return (
+        <>
+            <ul style={{ minWidth: '700px' }}>
+                <li>Current URL: {currentURL}</li>
+                <li>Current Time: {new Date().toLocaleTimeString()}</li>
+            </ul>
+            <button
+                onClick={() => setCount(count + 1)}
+                style={{ marginRight: '5px' }}
+            >
+                count up
+            </button>
+            <button onClick={changeBackground}>change background</button>
+        </>
+    );
+};
+
+ReactDOM.render(
+    <React.StrictMode>
+        <Popup />
+    </React.StrictMode>,
+    document.getElementById('root')
+);

package/src/store/initialState.ts

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