Skip to content

Commit 594af3d

Browse files
gevgev
committed
refactor actions
1 parent d29c725 commit 594af3d

File tree

12 files changed

+160
-112
lines changed

12 files changed

+160
-112
lines changed

Diff for: ‎index.css

-27
Original file line numberDiff line numberDiff line change
@@ -25,30 +25,3 @@ html, body, #app {
2525
.paper {
2626
padding: 12px;
2727
}
28-
29-
.background {
30-
background-size: cover;
31-
background-position: center;
32-
background-repeat: no-repeat;
33-
}
34-
35-
.toolbar:hover {
36-
position: absolute;
37-
top: 0px;
38-
}
39-
40-
.toolbar {
41-
position: absolute;
42-
width: 100%;
43-
top: 0;
44-
opacity: 0;
45-
transform: translateY(-60px);
46-
transition-property: transform opacity;
47-
transition-duration: 200ms;
48-
will-change: transform opacity;
49-
}
50-
51-
.toolbar:hover {
52-
opacity: 1;
53-
transform: translateY(0);
54-
}

Diff for: ‎src/App.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ConnectedRouter } from 'react-router-redux';
88
import { RMWCProvider } from 'rmwc/Provider';
99
import 'material-components-web/dist/material-components-web.min.css';
1010
import { POOL, FILE } from './constants';
11-
import { Main } from './containers';
11+
import { Webview } from './containers';
1212
import createStore from './store';
1313
import reducer from './reducer';
1414

@@ -24,7 +24,7 @@ export default class extends Component {
2424
<RMWCProvider>
2525
<ConnectedRouter history={history}>
2626
<Switch>
27-
<Route exact path="/" component={Main} />
27+
<Route exact path="/" component={Webview} />
2828
</Switch>
2929
</ConnectedRouter>
3030
</RMWCProvider>

Diff for: ‎src/actions/create.js

+15-45
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,44 @@
11

2-
import { writeFile, rename } from 'fs';
32
import { v4 as uuid } from 'uuid';
43
import { contains } from 'fast-deep-equal';
5-
import debounce from 'debounce';
6-
import { tmp, FILE, POOL, ACTION_SET } from '../constants';
7-
8-
const store = debounce((state) => {
9-
const file = tmp(uuid());
10-
writeFile(file, Buffer.from(JSON.stringify(state[POOL], null, 2)), e1 => {
11-
if (e1) console.error(e1);
12-
rename(file, FILE, e2 => {
13-
if (e2) console.error('error', e2);
14-
});
15-
});
16-
}, 1000, true);
17-
18-
const apply = (action) => (dispatch, getState) => {
19-
dispatch(action);
20-
store(getState());
21-
};
4+
import { POOL } from '../constants';
5+
import u from './util';
226

237
export const add = (id, attribute, value) => (dispatch, getState) => {
248
if (!id) return;
259
const prev = getState()[POOL][id];
2610
if (prev && prev[attribute] && prev[attribute].includes(value)) return;
27-
dispatch(apply({
28-
id,
29-
type: ACTION_SET,
30-
payload: {
31-
[attribute]: prev && prev[attribute] ? [...prev[attribute], value] : [value]
32-
}
33-
}));
11+
dispatch(u.push(id, prev, attribute, value));
12+
};
13+
14+
export const push = (id, attribute, value) => (dispatch, getState) => {
15+
if (!id) return;
16+
const prev = getState()[POOL][id];
17+
dispatch(u.push(id, prev, attribute, value));
3418
};
3519

3620
export const set = (id, payload) => (dispatch, getState) => {
3721
if (!id) return;
3822
const prev = getState()[POOL][id];
3923
if (prev && contains(prev, payload)) return;
40-
dispatch(apply({
41-
type: ACTION_SET, id, payload
42-
}));
24+
dispatch(u.set(id, payload));
4325
};
4426

4527
export const create = (id, attribute, type, value) => (dispatch, getState) => {
4628
if (!id || !attribute) return;
4729
const subject = uuid();
4830
const prev = getState()[POOL][id];
49-
dispatch(apply({
50-
id: subject,
51-
type: ACTION_SET,
52-
payload: value ? { type, [value]: id } : { type }
53-
}));
54-
dispatch(apply({
55-
id,
56-
type: ACTION_SET,
57-
payload: {
58-
[attribute]: prev && prev[attribute] ? [...prev[attribute], subject] : [subject]
59-
}
31+
dispatch(u.set(subject, value ? { type, [value]: id } : { type }));
32+
dispatch(u.push(id, prev, attribute, {
33+
[attribute]: prev && prev[attribute] ? [...prev[attribute], subject] : [subject]
6034
}));
6135
};
6236

6337
export const remove = (id, attribute, value) => (dispatch, getState) => {
6438
if (!id || !attribute || !value) return;
6539
const prev = getState()[POOL][id];
6640
if (!prev || !prev[attribute] || !prev[attribute].includes(value)) return;
67-
dispatch(apply({
68-
id,
69-
type: ACTION_SET,
70-
payload: {
71-
[attribute]: prev[attribute].filter(i => i !== value)
72-
}
41+
dispatch(u.set(id, {
42+
[attribute]: prev[attribute].filter(i => i !== value)
7343
}));
7444
};

Diff for: ‎src/actions/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11

2-
export { set, add, create, remove } from './create';
2+
export { set, push, create, remove } from './create';

Diff for: ‎src/actions/util.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
import { writeFile, rename } from 'fs';
3+
import { v4 as uuid } from 'uuid';
4+
import debounce from 'debounce';
5+
import { tmp, FILE, POOL, ACTION_SET } from '../constants';
6+
7+
const store = debounce((state) => {
8+
const file = tmp(uuid());
9+
writeFile(file, Buffer.from(JSON.stringify(state[POOL], null, 2)), e1 => {
10+
if (e1) console.error(e1);
11+
rename(file, FILE, e2 => {
12+
if (e2) console.error('error', e2);
13+
});
14+
});
15+
}, 1000, true);
16+
17+
const apply = (action) => (dispatch, getState) => {
18+
dispatch(action);
19+
store(getState());
20+
};
21+
22+
const set = (id, payload) => (dispatch) => {
23+
dispatch(apply({
24+
type: ACTION_SET, id, payload
25+
}));
26+
};
27+
28+
const push = (id, prev, attribute, value) => (dispatch) => {
29+
dispatch(set(id, {
30+
[attribute]: prev && prev[attribute] ? [...prev[attribute], value] : [value]
31+
}));
32+
};
33+
34+
export default { set, push };

Diff for: ‎src/containers/Main.js

+1-34
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,10 @@
11

22
import React, { Component } from 'react';
3-
import { TextField } from 'rmwc/TextField';
4-
import {
5-
Toolbar,
6-
ToolbarRow,
7-
ToolbarSection,
8-
ToolbarIcon,
9-
} from 'rmwc/Toolbar';
10-
import 'material-components-web/dist/material-components-web.min.css';
11-
import Webview from './Webview';
123

134
export default class extends Component {
14-
state = {};
15-
16-
go = (event) => {
17-
this.setState({ src: event.target.value });
18-
}
19-
205
render() {
21-
const { src } = this.state;
226
return (
23-
<div className="container">
24-
<div className="toolbar">
25-
<Toolbar>
26-
<ToolbarRow>
27-
<ToolbarSection alignStart>
28-
<ToolbarIcon use="arrow_back" />
29-
</ToolbarSection>
30-
<ToolbarSection shrinkToFit>
31-
<TextField theme="text-primary-on-dark" value={src} onChange={this.go} fullwidth />
32-
</ToolbarSection>
33-
<ToolbarSection alignEnd>
34-
<ToolbarIcon use="menu" />
35-
</ToolbarSection>
36-
</ToolbarRow>
37-
</Toolbar>
38-
</div>
39-
<Webview src={src} />
40-
</div>
7+
<div className="container" />
418
);
429
}
4310
}

Diff for: ‎src/containers/Webview/Toolbar.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
import React, { Component } from 'react';
3+
import { TextField } from 'rmwc/TextField';
4+
import {
5+
Toolbar,
6+
ToolbarRow,
7+
ToolbarSection,
8+
ToolbarIcon,
9+
} from 'rmwc/Toolbar';
10+
import { Elevation } from 'rmwc/Elevation';
11+
import styles from './toolbar.css';
12+
13+
type Props = {
14+
src: ?string;
15+
}
16+
17+
export default class extends Component<Props> {
18+
state = { focussed: false }
19+
20+
focus = () => {
21+
this.setState({ focussed: true });
22+
}
23+
24+
blur = () => {
25+
this.setState({ focussed: false });
26+
}
27+
28+
render() {
29+
const { src } = this.props;
30+
const { focussed } = this.state;
31+
return (
32+
<div className={focussed ? styles.focussed : styles.hidden}>
33+
<Elevation z={6}>
34+
<Toolbar>
35+
<ToolbarRow>
36+
<ToolbarSection alignStart>
37+
<ToolbarIcon use="arrow_back" />
38+
</ToolbarSection>
39+
<ToolbarSection shrinkToFit>
40+
<TextField
41+
theme="text-primary-on-dark"
42+
value={src}
43+
onFocus={this.focus}
44+
onBlur={this.blur}
45+
fullwidth
46+
/>
47+
</ToolbarSection>
48+
<ToolbarSection alignEnd>
49+
<ToolbarIcon use="menu" />
50+
</ToolbarSection>
51+
</ToolbarRow>
52+
</Toolbar>
53+
</Elevation>
54+
</div>
55+
);
56+
}
57+
}

Diff for: ‎src/containers/Webview.js renamed to ‎src/containers/Webview/Webview.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11

2+
23
import React, { Component } from 'react';
34
import styles from './webview.css';
45

@@ -11,7 +12,10 @@ export default class extends Component<Props> {
1112
init = (webview) => {
1213
webview.addEventListener('will-navigate', (event) => {
1314
console.log(event);
14-
// event.
15+
});
16+
webview.addEventListener('new-window', (event) => {
17+
webview.src = event.url;
18+
console.log(event);
1519
});
1620
}
1721

Diff for: ‎src/containers/Webview/index.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
import React, { Component } from 'react';
3+
import Toolbar from './Toolbar';
4+
import Webview from './Webview';
5+
6+
type Props = {
7+
src: ?string
8+
}
9+
10+
export default class extends Component<Props> {
11+
static defaultProps = {
12+
src: 'https://google.com'
13+
}
14+
render() {
15+
const { src } = this.props;
16+
return (
17+
<div className="container">
18+
<Toolbar src={src} />
19+
<Webview src={src} />
20+
</div>
21+
);
22+
}
23+
}

Diff for: ‎src/containers/Webview/toolbar.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
.focussed, .hidden {
3+
position: absolute;
4+
width: 100%;
5+
top: 0;
6+
transition-property: transform opacity;
7+
transition-duration: 200ms;
8+
will-change: transform opacity;
9+
}
10+
11+
.hidden {
12+
opacity: 0;
13+
transform: translateY(-60px);
14+
}
15+
16+
.focussed, .hidden:hover {
17+
opacity: 1;
18+
transform: translateY(0);
19+
}

Diff for: ‎src/containers/webview.css renamed to ‎src/containers/Webview/webview.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
.webview {
33
width: 100%;
44
height: 100%;
5-
}
5+
}

Diff for: ‎src/containers/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11

2-
export { default as Main } from './Main';
2+
export { default as Main } from './Main';
3+
export { default as Webview } from './Webview';

0 commit comments

Comments
 (0)