redux-connected-devtools 1.0.3 → 1.0.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/DevInspector/DevInspector.js +12 -0
- package/{src/components/DevInspector/DevInspector.style.tsx → dist/components/DevInspector/DevInspector.style.js} +1 -2
- package/dist/components/DevList/DevList.js +24 -0
- package/{src/components/DevList/DevList.style.tsx → dist/components/DevList/DevList.style.js} +2 -4
- package/dist/components/DevMenu/DevMenu.js +25 -0
- package/{src/components/DevMenu/DevMenu.style.tsx → dist/components/DevMenu/DevMenu.style.js} +7 -14
- package/{src/components/DevPanel/DevPanel.tsx → dist/components/DevPanel/DevPanel.js} +7 -27
- package/{src/components/DevPanel/DevPanel.style.tsx → dist/components/DevPanel/DevPanel.style.js} +3 -6
- package/dist/components/DevtoolsApp/DevtoolsApp.js +17 -0
- package/{src/components/DevtoolsApp/DevtoolsApp.style.tsx → dist/components/DevtoolsApp/DevtoolsApp.style.js} +1 -2
- package/dist/components/Icon/AllIcons.js +18 -0
- package/dist/components/Icon/Icon.js +9 -0
- package/{src/components/Icon/Icon.style.tsx → dist/components/Icon/Icon.style.js} +1 -2
- package/{src/components/JourneyRow/JourneyRow.tsx → dist/components/JourneyRow/JourneyRow.js} +7 -32
- package/{src/components/JourneyRow/JourneyRow.style.tsx → dist/components/JourneyRow/JourneyRow.style.js} +5 -10
- package/dist/components/JsonViewer/JsonViewer.js +7 -0
- package/{src/components/JsonViewer/JsonViewer.style.tsx → dist/components/JsonViewer/JsonViewer.style.js} +1 -2
- package/dist/components/Lifecycle/Lifecycle.js +15 -0
- package/{src/components/Lifecycle/Lifecycle.style.tsx → dist/components/Lifecycle/Lifecycle.style.js} +1 -2
- package/dist/components/RequestDetails/RequestDetails.js +10 -0
- package/{src/components/RequestDetails/RequestDetails.style.tsx → dist/components/RequestDetails/RequestDetails.style.js} +4 -8
- package/dist/components/RequestJourney/RequestJourney.js +14 -0
- package/{src/components/RequestJourney/RequestJourney.style.tsx → dist/components/RequestJourney/RequestJourney.style.js} +1 -2
- package/dist/components/RequestRow/RequestRow.js +9 -0
- package/{src/components/RequestRow/RequestRow.style.tsx → dist/components/RequestRow/RequestRow.style.js} +5 -10
- package/dist/components/Size/Size.js +10 -0
- package/{src/components/Size/Size.style.tsx → dist/components/Size/Size.style.js} +1 -2
- package/{src/components/Time/Time.tsx → dist/components/Time/Time.js} +3 -17
- package/{src/components/Time/Time.style.tsx → dist/components/Time/Time.style.js} +3 -6
- package/dist/containers/DevMenuContainer.js +11 -0
- package/dist/containers/DevPanelContainer.js +6 -0
- package/{src/containers/DevtoolsAppContainer.tsx → dist/containers/DevtoolsAppContainer.js} +3 -21
- package/{src/containers/EndpointConfigsContainer.tsx → dist/containers/EndpointConfigsContainer.js} +2 -5
- package/{src/containers/EndpointStatusContainer.tsx → dist/containers/EndpointStatusContainer.js} +2 -5
- package/{src/containers/GlobalSettingsContainer.tsx → dist/containers/GlobalSettingsContainer.js} +2 -5
- package/{src/containers/GlobalStatsContainer.tsx → dist/containers/GlobalStatsContainer.js} +2 -5
- package/{src/containers/LifecycleApiErrorContainer.tsx → dist/containers/LifecycleApiErrorContainer.js} +2 -4
- package/{src/containers/LifecycleFailedContainer.tsx → dist/containers/LifecycleFailedContainer.js} +2 -4
- package/{src/containers/LifecycleGeneralErrorContainer.tsx → dist/containers/LifecycleGeneralErrorContainer.js} +2 -4
- package/{src/containers/LifecycleInQueueContainer.tsx → dist/containers/LifecycleInQueueContainer.js} +2 -4
- package/{src/containers/LifecyclePendingApiContainer.tsx → dist/containers/LifecyclePendingApiContainer.js} +2 -4
- package/{src/containers/LifecyclePostActionContainer.tsx → dist/containers/LifecyclePostActionContainer.js} +2 -4
- package/{src/containers/LifecycleReceivedContainer.tsx → dist/containers/LifecycleReceivedContainer.js} +2 -4
- package/{src/data/devComponents.tsx → dist/data/devComponents.js} +1 -4
- package/{src/data/devRoutes.ts → dist/data/devRoutes.js} +4 -16
- package/dist/dts/components/DevInspector/DevInspector.d.ts +6 -0
- package/dist/dts/components/DevInspector/DevInspector.style.d.ts +1 -0
- package/dist/dts/components/DevList/DevList.d.ts +9 -0
- package/dist/dts/components/DevList/DevList.style.d.ts +2 -0
- package/dist/dts/components/DevMenu/DevMenu.d.ts +11 -0
- package/dist/dts/components/DevMenu/DevMenu.style.d.ts +7 -0
- package/dist/dts/components/DevPanel/DevPanel.d.ts +5 -0
- package/dist/dts/components/DevPanel/DevPanel.style.d.ts +3 -0
- package/dist/dts/components/DevtoolsApp/DevtoolsApp.d.ts +9 -0
- package/dist/dts/components/DevtoolsApp/DevtoolsApp.style.d.ts +1 -0
- package/dist/dts/components/Icon/AllIcons.d.ts +8 -0
- package/dist/dts/components/Icon/Icon.d.ts +9 -0
- package/dist/dts/components/Icon/Icon.style.d.ts +3 -0
- package/dist/dts/components/JourneyRow/JourneyRow.d.ts +6 -0
- package/dist/dts/components/JourneyRow/JourneyRow.style.d.ts +5 -0
- package/dist/dts/components/JsonViewer/JsonViewer.d.ts +6 -0
- package/dist/dts/components/JsonViewer/JsonViewer.style.d.ts +3 -0
- package/dist/dts/components/Lifecycle/Lifecycle.d.ts +6 -0
- package/dist/dts/components/Lifecycle/Lifecycle.style.d.ts +1 -0
- package/dist/dts/components/RequestDetails/RequestDetails.d.ts +6 -0
- package/dist/dts/components/RequestDetails/RequestDetails.style.d.ts +4 -0
- package/dist/dts/components/RequestJourney/RequestJourney.d.ts +6 -0
- package/dist/dts/components/RequestJourney/RequestJourney.style.d.ts +1 -0
- package/dist/dts/components/RequestRow/RequestRow.d.ts +10 -0
- package/dist/dts/components/RequestRow/RequestRow.style.d.ts +6 -0
- package/dist/dts/components/Size/Size.d.ts +5 -0
- package/dist/dts/components/Size/Size.style.d.ts +1 -0
- package/dist/dts/components/Time/Time.d.ts +5 -0
- package/dist/dts/components/Time/Time.style.d.ts +3 -0
- package/dist/dts/containers/DevMenuContainer.d.ts +7 -0
- package/dist/dts/containers/DevPanelContainer.d.ts +5 -0
- package/dist/dts/containers/DevtoolsAppContainer.d.ts +6 -0
- package/dist/dts/containers/EndpointConfigsContainer.d.ts +2 -0
- package/dist/dts/containers/EndpointStatusContainer.d.ts +2 -0
- package/dist/dts/containers/GlobalSettingsContainer.d.ts +2 -0
- package/dist/dts/containers/GlobalStatsContainer.d.ts +2 -0
- package/dist/dts/containers/LifecycleApiErrorContainer.d.ts +2 -0
- package/dist/dts/containers/LifecycleFailedContainer.d.ts +2 -0
- package/dist/dts/containers/LifecycleGeneralErrorContainer.d.ts +2 -0
- package/dist/dts/containers/LifecycleInQueueContainer.d.ts +2 -0
- package/dist/dts/containers/LifecyclePendingApiContainer.d.ts +2 -0
- package/dist/dts/containers/LifecyclePostActionContainer.d.ts +2 -0
- package/dist/dts/containers/LifecycleReceivedContainer.d.ts +2 -0
- package/dist/dts/data/devComponents.d.ts +4 -0
- package/dist/dts/data/devRoutes.d.ts +8 -0
- package/dist/dts/hooks/useStoreSize.d.ts +7 -0
- package/{src/index.ts → dist/dts/index.d.ts} +0 -0
- package/dist/dts/store/selectors.d.ts +2235 -0
- package/dist/dts/types.d.ts +0 -0
- package/dist/dts/utils/date.d.ts +4 -0
- package/dist/dts/utils/download.d.ts +1 -0
- package/{src/hooks/useStoreSize.ts → dist/hooks/useStoreSize.js} +2 -13
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/redux-connected-devtools.es.js +992 -0
- package/dist/redux-connected-devtools.es.js.map +1 -0
- package/dist/redux-connected-devtools.umd.js +247 -0
- package/dist/redux-connected-devtools.umd.js.map +1 -0
- package/dist/store/selectors.js +143 -0
- package/dist/types.js +1 -0
- package/{src/utils/date.ts → dist/utils/date.js} +0 -3
- package/{src/utils/download.ts → dist/utils/download.js} +3 -3
- package/package.json +7 -5
- package/.env +0 -2
- package/.prettierrc.js +0 -10
- package/index.html +0 -58
- package/jest.config.js +0 -8
- package/src/__tests__/sum.ts +0 -9
- package/src/components/DevInspector/DevInspector.scss +0 -2
- package/src/components/DevInspector/DevInspector.tsx +0 -34
- package/src/components/DevList/DevList.scss +0 -2
- package/src/components/DevList/DevList.tsx +0 -65
- package/src/components/DevMenu/DevMenu.scss +0 -2
- package/src/components/DevMenu/DevMenu.tsx +0 -77
- package/src/components/DevPanel/DevPanel.scss +0 -2
- package/src/components/DevtoolsApp/DevtoolsApp.scss +0 -2
- package/src/components/DevtoolsApp/DevtoolsApp.tsx +0 -45
- package/src/components/Icon/AllIcons.tsx +0 -66
- package/src/components/Icon/Icon.scss +0 -2
- package/src/components/Icon/Icon.tsx +0 -28
- package/src/components/JourneyRow/JourneyRow.scss +0 -2
- package/src/components/JsonViewer/JsonViewer.scss +0 -2
- package/src/components/JsonViewer/JsonViewer.tsx +0 -23
- package/src/components/Lifecycle/Lifecycle.scss +0 -2
- package/src/components/Lifecycle/Lifecycle.tsx +0 -36
- package/src/components/LogsViewer/LogsViewer.scss +0 -2
- package/src/components/LogsViewer/LogsViewer.style.tsx +0 -5
- package/src/components/LogsViewer/LogsViewer.tsx +0 -14
- package/src/components/RequestDetails/RequestDetails.scss +0 -2
- package/src/components/RequestDetails/RequestDetails.tsx +0 -60
- package/src/components/RequestJourney/RequestJourney.scss +0 -2
- package/src/components/RequestJourney/RequestJourney.tsx +0 -33
- package/src/components/RequestRow/RequestRow.scss +0 -2
- package/src/components/RequestRow/RequestRow.tsx +0 -37
- package/src/components/Size/Size.scss +0 -2
- package/src/components/Size/Size.tsx +0 -21
- package/src/components/StateViewer/StateViewer.scss +0 -2
- package/src/components/StateViewer/StateViewer.style.tsx +0 -5
- package/src/components/StateViewer/StateViewer.tsx +0 -17
- package/src/components/Time/Time.scss +0 -2
- package/src/containers/DevMenuContainer.tsx +0 -28
- package/src/containers/DevPanelContainer.tsx +0 -12
- package/src/containers/JsonViewerContainer.tsx +0 -8
- package/src/containers/LifecycleContainer.tsx +0 -12
- package/src/containers/LogsViewerContainer.tsx +0 -8
- package/src/containers/StateViewerContainer.tsx +0 -8
- package/src/data/devRouter.ts +0 -107
- package/src/store/initialState.ts +0 -42
- package/src/store/selectors.ts +0 -220
- package/src/types.ts +0 -1
- package/tsconfig.json +0 -18
- package/vite.config.ts +0 -27
@@ -0,0 +1,143 @@
|
|
1
|
+
import { createSelector } from 'reselect';
|
2
|
+
import { connectedSelectors, LifecycleStatus } from 'redux-connected';
|
3
|
+
export const $requests = createSelector(connectedSelectors.$requests, (requests) => {
|
4
|
+
return requests
|
5
|
+
.map((request) => {
|
6
|
+
const { items } = request;
|
7
|
+
const lastPoint = items[items.length - 1] ?? {};
|
8
|
+
const journeyWithDelta = items.map((point, index) => {
|
9
|
+
const nextPoint = items[index + 1] ?? point;
|
10
|
+
const delta = nextPoint.timestamp - point.timestamp;
|
11
|
+
return {
|
12
|
+
...point,
|
13
|
+
delta,
|
14
|
+
};
|
15
|
+
});
|
16
|
+
return {
|
17
|
+
...request,
|
18
|
+
items: journeyWithDelta,
|
19
|
+
lastPointTimestamp: lastPoint.timestamp,
|
20
|
+
lastPointStatus: lastPoint.status,
|
21
|
+
};
|
22
|
+
})
|
23
|
+
.sort((a, b) => {
|
24
|
+
if (a.lastPointTimestamp === b.lastPointTimestamp) {
|
25
|
+
return 0;
|
26
|
+
}
|
27
|
+
return a.lastPointTimestamp > b.lastPointTimestamp ? -1 : 1;
|
28
|
+
});
|
29
|
+
});
|
30
|
+
// 1
|
31
|
+
export const $requestsReceived = createSelector($requests, (requests) => {
|
32
|
+
return requests.filter((request) => {
|
33
|
+
const { items } = request;
|
34
|
+
const lastPoint = items[items.length - 1];
|
35
|
+
return lastPoint && lastPoint.status === LifecycleStatus.RECEIVED;
|
36
|
+
});
|
37
|
+
});
|
38
|
+
export const $requestsReceivedPast = createSelector($requests, (requests) => {
|
39
|
+
return requests.filter((request) => {
|
40
|
+
const { items } = request;
|
41
|
+
return items.find((point) => point.status === LifecycleStatus.RECEIVED);
|
42
|
+
});
|
43
|
+
});
|
44
|
+
// 2
|
45
|
+
export const $requestsInQueue = createSelector($requests, (requests) => {
|
46
|
+
return requests.filter((request) => {
|
47
|
+
const { items } = request;
|
48
|
+
const lastPoint = items[items.length - 1];
|
49
|
+
return lastPoint && lastPoint.status === LifecycleStatus.IN_QUEUE;
|
50
|
+
});
|
51
|
+
});
|
52
|
+
export const $requestsInQueuePast = createSelector($requests, (requests) => {
|
53
|
+
return requests.filter((request) => {
|
54
|
+
const { items } = request;
|
55
|
+
return items.find((point) => point.status === LifecycleStatus.IN_QUEUE);
|
56
|
+
});
|
57
|
+
});
|
58
|
+
// 3
|
59
|
+
export const $requestsPendingApi = createSelector($requests, (requests) => {
|
60
|
+
return requests.filter((request) => {
|
61
|
+
const { items } = request;
|
62
|
+
const lastPoint = items[items.length - 1];
|
63
|
+
return (lastPoint &&
|
64
|
+
lastPoint.status === LifecycleStatus.PENDING_API_RESPONSE);
|
65
|
+
});
|
66
|
+
});
|
67
|
+
export const $requestsPendingApiPast = createSelector($requests, (requests) => {
|
68
|
+
return requests.filter((request) => {
|
69
|
+
const { items } = request;
|
70
|
+
return items.find((point) => point.status === LifecycleStatus.PENDING_API_RESPONSE);
|
71
|
+
});
|
72
|
+
});
|
73
|
+
// 4
|
74
|
+
export const $requestsPostAction = createSelector($requests, (requests) => {
|
75
|
+
return requests.filter((request) => {
|
76
|
+
const { items } = request;
|
77
|
+
const lastPoint = items[items.length - 1];
|
78
|
+
return lastPoint && lastPoint.status === LifecycleStatus.POST_ACTION;
|
79
|
+
});
|
80
|
+
});
|
81
|
+
export const $requestsPostActionPast = createSelector($requests, (requests) => {
|
82
|
+
return requests.filter((request) => {
|
83
|
+
const { items } = request;
|
84
|
+
return items.find((point) => point.status === LifecycleStatus.POST_ACTION);
|
85
|
+
});
|
86
|
+
});
|
87
|
+
// e1
|
88
|
+
export const $requestsGeneralError = createSelector($requests, (requests) => {
|
89
|
+
return requests.filter((request) => {
|
90
|
+
const { items } = request;
|
91
|
+
const lastPoint = items[items.length - 1];
|
92
|
+
return lastPoint && lastPoint.status === LifecycleStatus.GENERAL_ERROR;
|
93
|
+
});
|
94
|
+
});
|
95
|
+
export const $requestsGeneralErrorPast = createSelector($requests, (requests) => {
|
96
|
+
return requests.filter((request) => {
|
97
|
+
const { items } = request;
|
98
|
+
return items.find((point) => point.status === LifecycleStatus.GENERAL_ERROR);
|
99
|
+
});
|
100
|
+
});
|
101
|
+
// e2
|
102
|
+
export const $requestsApiError = createSelector($requests, (requests) => {
|
103
|
+
return requests.filter((request) => {
|
104
|
+
const { items } = request;
|
105
|
+
const lastPoint = items[items.length - 1];
|
106
|
+
return lastPoint && lastPoint.status === LifecycleStatus.API_ERROR;
|
107
|
+
});
|
108
|
+
});
|
109
|
+
// e3
|
110
|
+
export const $requestsFailed = createSelector($requests, (requests) => {
|
111
|
+
return requests.filter((request) => {
|
112
|
+
const { items } = request;
|
113
|
+
return items.find((point) => point.status === LifecycleStatus.FAILED);
|
114
|
+
});
|
115
|
+
});
|
116
|
+
export const $requestsApiErrorPast = createSelector($requests, (requests) => {
|
117
|
+
return requests.filter((request) => {
|
118
|
+
const { items } = request;
|
119
|
+
return items.find((point) => point.status === LifecycleStatus.API_ERROR);
|
120
|
+
});
|
121
|
+
});
|
122
|
+
export const $menuBadges = createSelector($requestsReceived, $requestsInQueue, $requestsGeneralError, $requestsPendingApi, $requestsApiError, $requestsFailed, $requestsPostAction, (requestsReceived, requestsInQueue, requestsGeneralError, requestsPendingApi, requestsApiError, requestsFailed, requestsPostAction) => {
|
123
|
+
return {
|
124
|
+
lifecycleReceived: requestsReceived.length,
|
125
|
+
lifecycleInQueue: requestsInQueue.length,
|
126
|
+
lifecycleGeneralError: requestsGeneralError.length,
|
127
|
+
lifecyclePendingApi: requestsPendingApi.length,
|
128
|
+
lifecycleApiError: requestsApiError.length,
|
129
|
+
lifecycleFailed: requestsFailed.length,
|
130
|
+
lifecyclePostAction: requestsPostAction.length,
|
131
|
+
};
|
132
|
+
});
|
133
|
+
export const $menuBadgesTotal = createSelector($requestsReceivedPast, $requestsInQueuePast, $requestsGeneralErrorPast, $requestsPendingApiPast, $requestsApiErrorPast, $requestsFailed, $requestsPostActionPast, (requestsReceived, requestsInQueue, requestsGeneralError, requestsPendingApi, requestsApiError, requestsFailed, requestsPostAction) => {
|
134
|
+
return {
|
135
|
+
lifecycleReceived: requestsReceived.length,
|
136
|
+
lifecycleInQueue: requestsInQueue.length,
|
137
|
+
lifecycleGeneralError: requestsGeneralError.length,
|
138
|
+
lifecyclePendingApi: requestsPendingApi.length,
|
139
|
+
lifecycleApiError: requestsApiError.length,
|
140
|
+
lifecycleFailed: requestsFailed.length,
|
141
|
+
lifecyclePostAction: requestsPostAction.length,
|
142
|
+
};
|
143
|
+
});
|
package/dist/types.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";
|
@@ -1,12 +1,12 @@
|
|
1
|
-
export const download = (filename
|
1
|
+
export const download = (filename, json) => {
|
2
2
|
const data = JSON.stringify(json, null, 4);
|
3
|
-
|
4
3
|
const blob = new Blob([data], { type: 'text/csv' });
|
5
4
|
// @ts-ignore
|
6
5
|
if (window.navigator.msSaveOrOpenBlob) {
|
7
6
|
// @ts-ignore
|
8
7
|
window.navigator.msSaveBlob(blob, filename);
|
9
|
-
}
|
8
|
+
}
|
9
|
+
else {
|
10
10
|
const elem = window.document.createElement('a');
|
11
11
|
elem.href = window.URL.createObjectURL(blob);
|
12
12
|
elem.download = filename;
|
package/package.json
CHANGED
@@ -1,12 +1,11 @@
|
|
1
1
|
{
|
2
2
|
"name": "redux-connected-devtools",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.5",
|
4
4
|
"description": "redux-connected-devtools",
|
5
5
|
"scripts": {
|
6
6
|
"dev": "vite",
|
7
7
|
"watch": "webpack --config webpack/webpack.dev.js --watch",
|
8
|
-
"build": "vite build
|
9
|
-
"clean": "rimraf dist",
|
8
|
+
"build": "tsc & vite build",
|
10
9
|
"test": "npx jest",
|
11
10
|
"style": "prettier --write \"src/**/*.{ts,tsx}\""
|
12
11
|
},
|
@@ -16,6 +15,9 @@
|
|
16
15
|
"type": "git",
|
17
16
|
"url": "https://github.com/dht/redux-connected-devtools.git"
|
18
17
|
},
|
18
|
+
"files": [
|
19
|
+
"dist"
|
20
|
+
],
|
19
21
|
"dependencies": {
|
20
22
|
"@redux-devtools/extension": "^3.2.2",
|
21
23
|
"bytes": "^3.1.2",
|
@@ -23,11 +25,11 @@
|
|
23
25
|
"dotenv-flow": "^3.2.0",
|
24
26
|
"react-redux": "^7.2.6",
|
25
27
|
"react-window": "^1.8.8",
|
26
|
-
"redux-connected": "^0.0.
|
28
|
+
"redux-connected": "^0.0.105",
|
27
29
|
"redux-store-generator": "^0.9.89",
|
28
30
|
"reselect": "^4.1.5",
|
29
31
|
"rollup-plugin-analyzer": "^4.0.0",
|
30
|
-
"shared-base": "^0.0.
|
32
|
+
"shared-base": "^0.0.32",
|
31
33
|
"styled-components": "^5.3.3",
|
32
34
|
"tslib": "^2.3.1"
|
33
35
|
},
|
package/.env
DELETED
package/.prettierrc.js
DELETED
package/index.html
DELETED
@@ -1,58 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8" />
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
7
|
-
<link
|
8
|
-
rel="stylesheet"
|
9
|
-
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
10
|
-
/>
|
11
|
-
<link
|
12
|
-
rel="stylesheet"
|
13
|
-
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
14
|
-
/>
|
15
|
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
16
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
17
|
-
<link
|
18
|
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;400;500;700&display=swap"
|
19
|
-
rel="stylesheet"
|
20
|
-
/>
|
21
|
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
22
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
23
|
-
<link
|
24
|
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
|
25
|
-
rel="stylesheet"
|
26
|
-
/>
|
27
|
-
|
28
|
-
<title>redux-connected-chrome-extension</title>
|
29
|
-
<style>
|
30
|
-
body {
|
31
|
-
padding: 0;
|
32
|
-
margin: 0;
|
33
|
-
min-height: 100vh;
|
34
|
-
font-family: 'Inter', sans-serif;
|
35
|
-
}
|
36
|
-
|
37
|
-
body,
|
38
|
-
#root {
|
39
|
-
display: flex;
|
40
|
-
flex: 1;
|
41
|
-
}
|
42
|
-
|
43
|
-
input,
|
44
|
-
h1,
|
45
|
-
h2,
|
46
|
-
h3,
|
47
|
-
select,
|
48
|
-
textarea {
|
49
|
-
font-family: 'Inter', sans-serif;
|
50
|
-
}
|
51
|
-
</style>
|
52
|
-
</head>
|
53
|
-
<body>
|
54
|
-
<div id="root"></div>
|
55
|
-
<div id="modal-root"></div>
|
56
|
-
<script type="module" src="/src/panel.tsx"></script>
|
57
|
-
</body>
|
58
|
-
</html>
|
package/jest.config.js
DELETED
package/src/__tests__/sum.ts
DELETED
@@ -1,34 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { Container } from './DevInspector.style';
|
3
|
-
import { ApiRequest } from 'redux-connected';
|
4
|
-
import RequestJourney from '../RequestJourney/RequestJourney';
|
5
|
-
import RequestDetails from '../RequestDetails/RequestDetails';
|
6
|
-
|
7
|
-
export type DevInspectorProps = {
|
8
|
-
item?: ApiRequest;
|
9
|
-
};
|
10
|
-
|
11
|
-
export function DevInspector(props: DevInspectorProps) {
|
12
|
-
const { item } = props;
|
13
|
-
|
14
|
-
if (!item) {
|
15
|
-
return (
|
16
|
-
<Container
|
17
|
-
className='DevInspector-container'
|
18
|
-
data-testid='DevInspector-container'
|
19
|
-
></Container>
|
20
|
-
);
|
21
|
-
}
|
22
|
-
|
23
|
-
return (
|
24
|
-
<Container
|
25
|
-
className='DevInspector-container'
|
26
|
-
data-testid='DevInspector-container'
|
27
|
-
>
|
28
|
-
<RequestDetails item={item} />
|
29
|
-
<RequestJourney item={item} />
|
30
|
-
</Container>
|
31
|
-
);
|
32
|
-
}
|
33
|
-
|
34
|
-
export default DevInspector;
|
@@ -1,65 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { Container, Empty } from './DevList.style';
|
3
|
-
import { FixedSizeList as List } from 'react-window';
|
4
|
-
import classnames from 'classnames';
|
5
|
-
|
6
|
-
export type DevListProps = {
|
7
|
-
items: Json[];
|
8
|
-
row: React.FC<any>;
|
9
|
-
selectedRow: any;
|
10
|
-
onClick: (item: any) => void;
|
11
|
-
};
|
12
|
-
|
13
|
-
export function DevList(props: DevListProps) {
|
14
|
-
const { row: Cmp, items, selectedRow } = props;
|
15
|
-
|
16
|
-
const Item = (rowInfo: any) => {
|
17
|
-
const { index, style } = rowInfo;
|
18
|
-
|
19
|
-
const item = items[index];
|
20
|
-
const className = classnames({ selected: item.id === selectedRow?.id });
|
21
|
-
|
22
|
-
return (
|
23
|
-
<Cmp
|
24
|
-
onClick={props.onClick}
|
25
|
-
className={className}
|
26
|
-
index={index}
|
27
|
-
style={style}
|
28
|
-
item={item}
|
29
|
-
/>
|
30
|
-
);
|
31
|
-
};
|
32
|
-
|
33
|
-
function renderEmpty() {
|
34
|
-
return <Empty>Empty list</Empty>;
|
35
|
-
}
|
36
|
-
|
37
|
-
function renderList() {
|
38
|
-
if (items.length === 0) {
|
39
|
-
return renderEmpty();
|
40
|
-
}
|
41
|
-
|
42
|
-
return (
|
43
|
-
<List
|
44
|
-
height={850}
|
45
|
-
itemCount={items.length}
|
46
|
-
itemSize={68}
|
47
|
-
width={350}
|
48
|
-
className='list'
|
49
|
-
>
|
50
|
-
{Item}
|
51
|
-
</List>
|
52
|
-
);
|
53
|
-
}
|
54
|
-
|
55
|
-
return (
|
56
|
-
<Container
|
57
|
-
className='DevList-container'
|
58
|
-
data-testid='DevList-container'
|
59
|
-
>
|
60
|
-
{renderList()}
|
61
|
-
</Container>
|
62
|
-
);
|
63
|
-
}
|
64
|
-
|
65
|
-
export default DevList;
|
@@ -1,77 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { IDevRoute } from '../../data/devRoutes';
|
3
|
-
import {
|
4
|
-
Container,
|
5
|
-
MenuGroup,
|
6
|
-
MenuGroupTitle,
|
7
|
-
MenuItem,
|
8
|
-
Title,
|
9
|
-
Badge,
|
10
|
-
BadgeTotal,
|
11
|
-
} from './DevMenu.style';
|
12
|
-
import classnames from 'classnames';
|
13
|
-
|
14
|
-
export type DevMenuProps = {
|
15
|
-
groups: string[];
|
16
|
-
items: IDevRoute[];
|
17
|
-
onClick: (route: IDevRoute) => void;
|
18
|
-
selectedId: string;
|
19
|
-
badges: Record<string, number>;
|
20
|
-
badgesTotal: Record<string, number>;
|
21
|
-
};
|
22
|
-
|
23
|
-
export function DevMenu(props: DevMenuProps) {
|
24
|
-
const { groups, items, selectedId, badges, badgesTotal } = props;
|
25
|
-
|
26
|
-
function renderItem(item: IDevRoute) {
|
27
|
-
const { title, id } = item;
|
28
|
-
const selected = id === selectedId;
|
29
|
-
|
30
|
-
const badge = badges[id];
|
31
|
-
const badgeTotal = badgesTotal[id];
|
32
|
-
|
33
|
-
return (
|
34
|
-
<MenuItem
|
35
|
-
key={item.id}
|
36
|
-
className={classnames({ selected })}
|
37
|
-
onClick={() => props.onClick(item)}
|
38
|
-
>
|
39
|
-
<Title>{title}</Title>
|
40
|
-
{badgeTotal > 0 && badgeTotal !== badge && (
|
41
|
-
<BadgeTotal>{badgeTotal}</BadgeTotal>
|
42
|
-
)}
|
43
|
-
{badge > 0 && <Badge>{badge}</Badge>}
|
44
|
-
</MenuItem>
|
45
|
-
);
|
46
|
-
}
|
47
|
-
|
48
|
-
function renderItems(groupItems: IDevRoute[]) {
|
49
|
-
return groupItems.map((item: IDevRoute) => renderItem(item));
|
50
|
-
}
|
51
|
-
|
52
|
-
function renderGroup(group: string) {
|
53
|
-
const groupItems = items.filter((item) => item.group === group);
|
54
|
-
|
55
|
-
return (
|
56
|
-
<MenuGroup key={group}>
|
57
|
-
<MenuGroupTitle>{group}</MenuGroupTitle>
|
58
|
-
{renderItems(groupItems)}
|
59
|
-
</MenuGroup>
|
60
|
-
);
|
61
|
-
}
|
62
|
-
|
63
|
-
function renderGroups() {
|
64
|
-
return groups.map((group: string) => renderGroup(group));
|
65
|
-
}
|
66
|
-
|
67
|
-
return (
|
68
|
-
<Container
|
69
|
-
className='DevMenu-container'
|
70
|
-
data-testid='DevMenu-container'
|
71
|
-
>
|
72
|
-
{renderGroups()}
|
73
|
-
</Container>
|
74
|
-
);
|
75
|
-
}
|
76
|
-
|
77
|
-
export default DevMenu;
|
@@ -1,45 +0,0 @@
|
|
1
|
-
import Icon from '../Icon/Icon';
|
2
|
-
import React, { useRef } from 'react';
|
3
|
-
import { Container } from './DevtoolsApp.style';
|
4
|
-
import { DevPanelContainer } from '../../containers/DevPanelContainer';
|
5
|
-
import { Provider } from 'react-redux';
|
6
|
-
import Size from '../Size/Size';
|
7
|
-
import classnames from 'classnames';
|
8
|
-
|
9
|
-
export type DevtoolsAppProps = {
|
10
|
-
connectedStore: any;
|
11
|
-
clearRequests: () => void;
|
12
|
-
downloadState: () => void;
|
13
|
-
storeSizeInBytes?: number;
|
14
|
-
isDarkMode?: boolean;
|
15
|
-
};
|
16
|
-
|
17
|
-
export function DevtoolsApp(props: DevtoolsAppProps) {
|
18
|
-
const { connectedStore, storeSizeInBytes, isDarkMode } = props;
|
19
|
-
const ref = useRef(null);
|
20
|
-
|
21
|
-
const className = classnames('DevtoolsApp-container', {
|
22
|
-
darkMode: isDarkMode,
|
23
|
-
});
|
24
|
-
|
25
|
-
return (
|
26
|
-
<Container
|
27
|
-
ref={ref}
|
28
|
-
className={className}
|
29
|
-
data-testid='DevtoolsApp-container'
|
30
|
-
>
|
31
|
-
<Provider store={connectedStore}>
|
32
|
-
<DevPanelContainer>
|
33
|
-
<Size size={storeSizeInBytes} />
|
34
|
-
<Icon
|
35
|
-
name='clearAll'
|
36
|
-
onClick={() => props.clearRequests()}
|
37
|
-
/>
|
38
|
-
<Icon name='download' onClick={props.downloadState} />
|
39
|
-
</DevPanelContainer>
|
40
|
-
</Provider>
|
41
|
-
</Container>
|
42
|
-
);
|
43
|
-
}
|
44
|
-
|
45
|
-
export default DevtoolsApp;
|
@@ -1,66 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
|
3
|
-
export type IconName = 'download' | 'close' | 'clearAll';
|
4
|
-
|
5
|
-
type IconProps = {
|
6
|
-
size?: number;
|
7
|
-
};
|
8
|
-
|
9
|
-
const Download = (props: IconProps) => {
|
10
|
-
const { size = 24 } = props;
|
11
|
-
|
12
|
-
return (
|
13
|
-
<svg
|
14
|
-
xmlns='http://www.w3.org/2000/svg'
|
15
|
-
viewBox='0 0 24 24'
|
16
|
-
width={`${size}px`}
|
17
|
-
height={`${size}px`}
|
18
|
-
fill='currentColor'
|
19
|
-
>
|
20
|
-
<path d='M0 0h24v24H0z' fill='none' />
|
21
|
-
<path d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z' />
|
22
|
-
</svg>
|
23
|
-
);
|
24
|
-
};
|
25
|
-
|
26
|
-
const Close = (props: IconProps) => {
|
27
|
-
const { size = 24 } = props;
|
28
|
-
|
29
|
-
return (
|
30
|
-
<svg
|
31
|
-
xmlns='http://www.w3.org/2000/svg'
|
32
|
-
viewBox='0 0 24 24'
|
33
|
-
width={`${size}px`}
|
34
|
-
height={`${size}px`}
|
35
|
-
fill='currentColor'
|
36
|
-
>
|
37
|
-
<path d='M0 0h24v24H0z' fill='none' />
|
38
|
-
<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' />
|
39
|
-
</svg>
|
40
|
-
);
|
41
|
-
};
|
42
|
-
|
43
|
-
const ClearAll = (props: IconProps) => {
|
44
|
-
const { size = 24 } = props;
|
45
|
-
|
46
|
-
return (
|
47
|
-
<svg
|
48
|
-
xmlns='http://www.w3.org/2000/svg'
|
49
|
-
viewBox='0 0 24 24'
|
50
|
-
width={`${size}px`}
|
51
|
-
height={`${size}px`}
|
52
|
-
fill='currentColor'
|
53
|
-
>
|
54
|
-
<path d='M0 0h24v24H0z' fill='none' />
|
55
|
-
<path d='M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z' />
|
56
|
-
</svg>
|
57
|
-
);
|
58
|
-
};
|
59
|
-
|
60
|
-
type Icons = Record<IconName, React.FC<IconProps>>;
|
61
|
-
|
62
|
-
export const allIcons: Icons = {
|
63
|
-
close: Close,
|
64
|
-
clearAll: ClearAll,
|
65
|
-
download: Download,
|
66
|
-
};
|
@@ -1,28 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { allIcons, IconName } from './AllIcons';
|
3
|
-
import { Container } from './Icon.style';
|
4
|
-
|
5
|
-
export type IconProps = {
|
6
|
-
name: IconName;
|
7
|
-
color?: string;
|
8
|
-
size?: number;
|
9
|
-
onClick?: () => void;
|
10
|
-
};
|
11
|
-
|
12
|
-
export function Icon(props: IconProps) {
|
13
|
-
const { name, size = 20, color } = props;
|
14
|
-
const Cmp = allIcons[name];
|
15
|
-
|
16
|
-
return (
|
17
|
-
<Container
|
18
|
-
className='Icon-container'
|
19
|
-
data-testid='Icon-container'
|
20
|
-
color={color}
|
21
|
-
onClick={props.onClick}
|
22
|
-
>
|
23
|
-
<Cmp size={size} />
|
24
|
-
</Container>
|
25
|
-
);
|
26
|
-
}
|
27
|
-
|
28
|
-
export default Icon;
|