Skip to content

Commit

Permalink
Merge pull request #3 from radenkovic/feature/v1.3
Browse files Browse the repository at this point in the history
Feature/v1.3
  • Loading branch information
radenkovic authored Aug 29, 2020
2 parents 4431ae8 + ef6cda4 commit ff49f1b
Show file tree
Hide file tree
Showing 20 changed files with 1,180 additions and 304 deletions.
1 change: 1 addition & 0 deletions .depcheckrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
ignores: ["@svgr/parcel-plugin-svgr", "parcel-*"]
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,6 @@ module.exports = {
'react/jsx-curly-newline': 0,
'no-param-reassign': 0,
camelcase: 0,
'no-underscore-dangle': 0,
},
};
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
{
"name": "feathers-debugger",
"version": "1.2.0",
"version": "1.3.0",
"description": "FeathersJS Debugger Chrome Extension",
"main": "src/index.html",
"scripts": {
"dev": "parcel src/devtools.html --out-dir build/output --cache-dir build/cache src/popup.html --port 3000",
"build": "export NODE_ENV=production && parcel --cache-dir build/cache --no-source-maps build src/devtools.html src/popup.html"
"build": "export NODE_ENV=production && parcel --cache-dir build/cache --no-source-maps build src/devtools.html src/popup.html -d dist",
"lint": "eslint ./src",
"depcheck": "depcheck"
},
"keywords": [
"feathers",
Expand Down Expand Up @@ -35,10 +37,10 @@
"devDependencies": {
"@svgr/parcel-plugin-svgr": "^5.4.0",
"babel-eslint": "^10.1.0",
"depcheck": "^1.2.0",
"eslint": "^7.7.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^23.20.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
Expand Down
1 change: 1 addition & 0 deletions src/assets/check.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import Trash from './trash.svg';
import ErrorTriangle from './error.svg';
import ErrorColor from './error-color.svg';
import Condensed from './condensed.svg';
import Settings from './settings.svg';
import Check from './check.svg';

export {
ZoomIn,
Expand All @@ -18,4 +20,6 @@ export {
ErrorTriangle,
ErrorColor,
Condensed,
Settings,
Check,
};
1 change: 1 addition & 0 deletions src/assets/settings.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Root = styled.div`
}
`;

export default function NoData({ error, port }) {
export default function NoData({ error, url, protocol }) {
return (
<Root>
<div>
Expand All @@ -32,8 +32,12 @@ export default function NoData({ error, port }) {
{error === 'Failed to fetch' && (
<p>
Feathers debugger <strong>not found</strong> on{' '}
<a href={`http://localhost:${port}/feathers-debugger`}>
http://localhost:{port}/feathers-debugger
<a
href={`${protocol}://${url}/feathers-debugger`}
target="_blank"
rel="noreferrer"
>
{protocol}://{url}/feathers-debugger
</a>
</p>
)}
Expand All @@ -46,8 +50,15 @@ export default function NoData({ error, port }) {
</p>
)}
<p>
Make sure you installed Feathers Debugger hook in{' '}
<code>app.hooks</code>.
Make sure you installed and configured{' '}
<a
href="https://www.npmjs.com/package/feathers-debugger-service"
target="_blank"
rel="noreferrer"
>
Debugger Service
</a>{' '}
on your server.
<br />
Read documentation{' '}
<a
Expand All @@ -57,7 +68,7 @@ export default function NoData({ error, port }) {
>
here
</a>{' '}
on how to configure FeathersJS Debugger.
on how to configure Feathers debugger.
</p>
</div>
</Root>
Expand Down
155 changes: 155 additions & 0 deletions src/components/Settings/Settings.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
import React, { useEffect, useState } from 'react';
import ms from 'ms';
import ReactTooltip from 'react-tooltip';
import packageJson from '../../../package.json';
import {
Settings as SettingsIcon,
Check,
ErrorTriangle,
Sync,
} from '../../assets';

import {
Root,
Overlay,
Modal,
ModalHeader,
Title,
ModalBody,
Close,
UrlInput,
Label,
Protocol,
UrlInputContainer,
Group,
Btn,
BtnGroup,
Footer,
ConnectionState,
} from './SettingsStyles';

let settingsDebounce;

export default function Settings({ close, ctx, fetchData }) {
const { url, protocol, pollInterval, pollIntervals, fetchError } = ctx;
const [loading, setLoading] = useState(0);

// Refetch on settings change
useEffect(() => {
clearTimeout(settingsDebounce);
setLoading(1);
settingsDebounce = setTimeout(() => {
// Sanitize fields
let sanitizedUrl = url;
let sanitizedProtocol = protocol;
if (sanitizedUrl && sanitizedUrl.endsWith('/')) {
sanitizedUrl = url.slice(0, -1);
}
if (sanitizedUrl && sanitizedUrl.endsWith('/feathers-debugger')) {
sanitizedUrl = url.slice(0, -18);
}
if (sanitizedUrl && sanitizedUrl.startsWith('http://')) {
sanitizedUrl = url.slice(7);
sanitizedProtocol = 'http';
}
if (sanitizedUrl && sanitizedUrl.startsWith('https://')) {
sanitizedUrl = url.slice(8);
sanitizedProtocol = 'https';
}
ctx.update({ url: sanitizedUrl, protocol: sanitizedProtocol }, fetchData);
setLoading(0);
}, 500);
return () => clearTimeout(settingsDebounce);
}, [url, protocol, pollInterval]);

const changeProtocol = () => {
ctx.update({ protocol: protocol === 'http' ? 'https' : 'http' });
};

const changePollInterval = val => () => {
ctx.update({ pollInterval: val });
};

return (
<Root>
<ReactTooltip
delayShow={550}
place="bottom"
type="dark"
effect="solid"
id="settings-tooltip"
/>
<Overlay onClick={close} />
<Modal>
<ModalHeader>
<Title>
<SettingsIcon />
Settings
</Title>
<Close onClick={close}>&times;</Close>
</ModalHeader>
<ModalBody>
<Group>
<Label>Server URL:</Label>
<UrlInputContainer>
<Protocol
data-for="settings-tooltip"
data-tip="Protocol (http or https)"
onClick={changeProtocol}
>
{protocol}
</Protocol>
<UrlInput
data-multiline
data-for="settings-tooltip"
data-tip="Feathers Server URL <br/> Without trailing slash and /feathers-debugger"
type="url"
onChange={e => ctx.update({ url: e.target.value })}
value={url}
/>
<ConnectionState
error={fetchError || 0}
loading={loading}
data-for="settings-tooltip"
data-tip="Connnection state"
>
{fetchError && !loading && <ErrorTriangle />}
{!fetchError && !loading && <Check />}
{loading === 1 && <Sync />}
</ConnectionState>
</UrlInputContainer>
</Group>

<Group>
<Label>Poll Interval:</Label>
<BtnGroup
style={{ margin: 0 }}
data-for="settings-tooltip"
data-tip="How often to refresh data, only used in watch mode."
>
{pollIntervals.map(int => (
<Btn
key={int}
onClick={changePollInterval(int)}
active={pollInterval === int}
>
{ms(int)}
</Btn>
))}
</BtnGroup>
</Group>
</ModalBody>
<Footer>
<a
href="https://github.com/radenkovic/feathers-debugger"
target="_blank"
rel="noreferrer"
>
Feathers Debugger
</a>{' '}
v{packageJson.version}
</Footer>
</Modal>
</Root>
);
}
Loading

0 comments on commit ff49f1b

Please sign in to comment.