Skip to content

Commit ff49f1b

Browse files
radenkovicradenkovic
authored
Merge pull request #3 from radenkovic/feature/v1.3
Feature/v1.3
2 parents 4431ae8 + ef6cda4 commit ff49f1b

File tree

20 files changed

+1180
-304
lines changed

20 files changed

+1180
-304
lines changed

‎.depcheckrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ignores: ["@svgr/parcel-plugin-svgr", "parcel-*"]

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,6 @@ module.exports = {
3939
'react/jsx-curly-newline': 0,
4040
'no-param-reassign': 0,
4141
camelcase: 0,
42+
'no-underscore-dangle': 0,
4243
},
4344
};

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
{
22
"name": "feathers-debugger",
3-
"version": "1.2.0",
3+
"version": "1.3.0",
44
"description": "FeathersJS Debugger Chrome Extension",
55
"main": "src/index.html",
66
"scripts": {
77
"dev": "parcel src/devtools.html --out-dir build/output --cache-dir build/cache src/popup.html --port 3000",
8-
"build": "export NODE_ENV=production && parcel --cache-dir build/cache --no-source-maps build src/devtools.html src/popup.html"
8+
"build": "export NODE_ENV=production && parcel --cache-dir build/cache --no-source-maps build src/devtools.html src/popup.html -d dist",
9+
"lint": "eslint ./src",
10+
"depcheck": "depcheck"
911
},
1012
"keywords": [
1113
"feathers",
@@ -35,10 +37,10 @@
3537
"devDependencies": {
3638
"@svgr/parcel-plugin-svgr": "^5.4.0",
3739
"babel-eslint": "^10.1.0",
40+
"depcheck": "^1.2.0",
3841
"eslint": "^7.7.0",
3942
"eslint-config-airbnb": "^18.2.0",
4043
"eslint-config-prettier": "^6.11.0",
41-
"eslint-import-resolver-alias": "^1.1.2",
4244
"eslint-plugin-import": "^2.22.0",
4345
"eslint-plugin-jest": "^23.20.0",
4446
"eslint-plugin-jsx-a11y": "^6.3.1",

‎src/assets/check.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import Trash from './trash.svg';
77
import ErrorTriangle from './error.svg';
88
import ErrorColor from './error-color.svg';
99
import Condensed from './condensed.svg';
10+
import Settings from './settings.svg';
11+
import Check from './check.svg';
1012

1113
export {
1214
ZoomIn,
@@ -18,4 +20,6 @@ export {
1820
ErrorTriangle,
1921
ErrorColor,
2022
Condensed,
23+
Settings,
24+
Check,
2125
};

‎src/assets/settings.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Waterfall/NoData.jsx renamed to ‎src/components/NoData/NoData.jsx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Root = styled.div`
1515
}
1616
`;
1717

18-
export default function NoData({ error, port }) {
18+
export default function NoData({ error, url, protocol }) {
1919
return (
2020
<Root>
2121
<div>
@@ -32,8 +32,12 @@ export default function NoData({ error, port }) {
3232
{error === 'Failed to fetch' && (
3333
<p>
3434
Feathers debugger <strong>not found</strong> on{' '}
35-
<a href={`http://localhost:${port}/feathers-debugger`}>
36-
http://localhost:{port}/feathers-debugger
35+
<a
36+
href={`${protocol}://${url}/feathers-debugger`}
37+
target="_blank"
38+
rel="noreferrer"
39+
>
40+
{protocol}://{url}/feathers-debugger
3741
</a>
3842
</p>
3943
)}
@@ -46,8 +50,15 @@ export default function NoData({ error, port }) {
4650
</p>
4751
)}
4852
<p>
49-
Make sure you installed Feathers Debugger hook in{' '}
50-
<code>app.hooks</code>.
53+
Make sure you installed and configured{' '}
54+
<a
55+
href="https://www.npmjs.com/package/feathers-debugger-service"
56+
target="_blank"
57+
rel="noreferrer"
58+
>
59+
Debugger Service
60+
</a>{' '}
61+
on your server.
5162
<br />
5263
Read documentation{' '}
5364
<a
@@ -57,7 +68,7 @@ export default function NoData({ error, port }) {
5768
>
5869
here
5970
</a>{' '}
60-
on how to configure FeathersJS Debugger.
71+
on how to configure Feathers debugger.
6172
</p>
6273
</div>
6374
</Root>

‎src/components/Settings/Settings.jsx

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import React, { useEffect, useState } from 'react';
2+
import ms from 'ms';
3+
import ReactTooltip from 'react-tooltip';
4+
import packageJson from '../../../package.json';
5+
import {
6+
Settings as SettingsIcon,
7+
Check,
8+
ErrorTriangle,
9+
Sync,
10+
} from '../../assets';
11+
12+
import {
13+
Root,
14+
Overlay,
15+
Modal,
16+
ModalHeader,
17+
Title,
18+
ModalBody,
19+
Close,
20+
UrlInput,
21+
Label,
22+
Protocol,
23+
UrlInputContainer,
24+
Group,
25+
Btn,
26+
BtnGroup,
27+
Footer,
28+
ConnectionState,
29+
} from './SettingsStyles';
30+
31+
let settingsDebounce;
32+
33+
export default function Settings({ close, ctx, fetchData }) {
34+
const { url, protocol, pollInterval, pollIntervals, fetchError } = ctx;
35+
const [loading, setLoading] = useState(0);
36+
37+
// Refetch on settings change
38+
useEffect(() => {
39+
clearTimeout(settingsDebounce);
40+
setLoading(1);
41+
settingsDebounce = setTimeout(() => {
42+
// Sanitize fields
43+
let sanitizedUrl = url;
44+
let sanitizedProtocol = protocol;
45+
if (sanitizedUrl && sanitizedUrl.endsWith('/')) {
46+
sanitizedUrl = url.slice(0, -1);
47+
}
48+
if (sanitizedUrl && sanitizedUrl.endsWith('/feathers-debugger')) {
49+
sanitizedUrl = url.slice(0, -18);
50+
}
51+
if (sanitizedUrl && sanitizedUrl.startsWith('http://')) {
52+
sanitizedUrl = url.slice(7);
53+
sanitizedProtocol = 'http';
54+
}
55+
if (sanitizedUrl && sanitizedUrl.startsWith('https://')) {
56+
sanitizedUrl = url.slice(8);
57+
sanitizedProtocol = 'https';
58+
}
59+
ctx.update({ url: sanitizedUrl, protocol: sanitizedProtocol }, fetchData);
60+
setLoading(0);
61+
}, 500);
62+
return () => clearTimeout(settingsDebounce);
63+
}, [url, protocol, pollInterval]);
64+
65+
const changeProtocol = () => {
66+
ctx.update({ protocol: protocol === 'http' ? 'https' : 'http' });
67+
};
68+
69+
const changePollInterval = val => () => {
70+
ctx.update({ pollInterval: val });
71+
};
72+
73+
return (
74+
<Root>
75+
<ReactTooltip
76+
delayShow={550}
77+
place="bottom"
78+
type="dark"
79+
effect="solid"
80+
id="settings-tooltip"
81+
/>
82+
<Overlay onClick={close} />
83+
<Modal>
84+
<ModalHeader>
85+
<Title>
86+
<SettingsIcon />
87+
Settings
88+
</Title>
89+
<Close onClick={close}>&times;</Close>
90+
</ModalHeader>
91+
<ModalBody>
92+
<Group>
93+
<Label>Server URL:</Label>
94+
<UrlInputContainer>
95+
<Protocol
96+
data-for="settings-tooltip"
97+
data-tip="Protocol (http or https)"
98+
onClick={changeProtocol}
99+
>
100+
{protocol}
101+
</Protocol>
102+
<UrlInput
103+
data-multiline
104+
data-for="settings-tooltip"
105+
data-tip="Feathers Server URL <br/> Without trailing slash and /feathers-debugger"
106+
type="url"
107+
onChange={e => ctx.update({ url: e.target.value })}
108+
value={url}
109+
/>
110+
<ConnectionState
111+
error={fetchError || 0}
112+
loading={loading}
113+
data-for="settings-tooltip"
114+
data-tip="Connnection state"
115+
>
116+
{fetchError && !loading && <ErrorTriangle />}
117+
{!fetchError && !loading && <Check />}
118+
{loading === 1 && <Sync />}
119+
</ConnectionState>
120+
</UrlInputContainer>
121+
</Group>
122+
123+
<Group>
124+
<Label>Poll Interval:</Label>
125+
<BtnGroup
126+
style={{ margin: 0 }}
127+
data-for="settings-tooltip"
128+
data-tip="How often to refresh data, only used in watch mode."
129+
>
130+
{pollIntervals.map(int => (
131+
<Btn
132+
key={int}
133+
onClick={changePollInterval(int)}
134+
active={pollInterval === int}
135+
>
136+
{ms(int)}
137+
</Btn>
138+
))}
139+
</BtnGroup>
140+
</Group>
141+
</ModalBody>
142+
<Footer>
143+
<a
144+
href="https://github.com/radenkovic/feathers-debugger"
145+
target="_blank"
146+
rel="noreferrer"
147+
>
148+
Feathers Debugger
149+
</a>{' '}
150+
v{packageJson.version}
151+
</Footer>
152+
</Modal>
153+
</Root>
154+
);
155+
}

0 commit comments

Comments
 (0)