Skip to content

Commit 9704d5f

Browse files
orarorar
authored
Requests cache (#20)
* add tests * readme edits * readme edits#1 * readme edits * 2.0.0 * readme edits#3 * readme edits#4 * readme edits#5 * readme edits#6 * Requests cache and refactorings * eslint fix errors
1 parent 4c7384f commit 9704d5f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+937
-664
lines changed

‎examples/.storybook/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { configure } from '@storybook/react';
22
import '@storybook/addon-console';
33

44
function loadStories() {
5-
require('../stories/index.js');
5+
require('../stories/index.jsx');
66
// You can require as many stories as you need.
77
}
88

‎examples/src/app.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import ReactDom from 'react-dom';
3-
import App from './context/App';
3+
import App from './todo/App';
44
import 'semantic-ui-css/semantic.css';
55

66
/* eslint-disable no-undef */

‎examples/src/buttons/App.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// @flow
2+
import React from 'react';
3+
import { Provider as RequestStateProvider } from 'questrar';
4+
import createStateProvider from 'questrar/store';
5+
import ButtonsWithRequests from './ButtonsWithRequests';
6+
7+
8+
const stateProvider = createStateProvider();
9+
10+
export const App = () => (
11+
<RequestStateProvider stateProvider={stateProvider}>
12+
<ButtonsWithRequests />
13+
</RequestStateProvider>
14+
);
15+
export default App;

‎examples/src/buttons/ButtonBar.jsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// @flow
2+
import React from 'react';
3+
import { Button, Icon, ButtonGroup } from 'semantic-ui-react';
4+
import type { RequestProp } from '../../../src';
5+
import './Buttons.scss';
6+
7+
8+
type Props = {
9+
position: number,
10+
request?: RequestProp,
11+
}
12+
13+
const ButtonBar = ({ request, position }: Props) => {
14+
if (!request) return null;
15+
16+
const id = request.data.id;
17+
const { data } = request;
18+
// console.log(request)
19+
20+
return (
21+
<div className="buttonContainer">
22+
<span className="position">{position}</span>
23+
<div className="buttons-left">
24+
<div className="topLeft">
25+
<span>Success: {data.successCount}</span>
26+
<span>Failure: {data.failureCount}</span>
27+
</div>
28+
<div className="bottomLeft">
29+
{data.success && <Icon style={{ color: 'green'}} name="checkmark" />}
30+
{data.failed && <Icon style={{ color: 'red'}} name="close" />}
31+
{data.pending && <Icon style={{ color: 'yellow'}} loading name="circle notch" />}
32+
</div>
33+
</div>
34+
<div className="buttons-group-right">
35+
<ButtonGroup basic size="mini">
36+
<Button onClick={() => request.actions.failed(id)} basic>Fail</Button>
37+
<Button onClick={() => request.actions.pending(id)} basic>Pend</Button>
38+
<Button onClick={() => request.actions.success(id)} basic>Success</Button>
39+
</ButtonGroup>
40+
</div>
41+
</div>
42+
);
43+
};
44+
45+
export default ButtonBar;

‎examples/src/buttons/Buttons.scss

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
2+
$bodyWidth: 450px;
3+
4+
.buttonsLongListContainer {
5+
display: flex;
6+
flex-flow: column nowrap;
7+
justify-content: center;
8+
align-items: center;
9+
width: 100%;
10+
padding-top: 5vmin;
11+
12+
.buttonsToolbar {
13+
width: $bodyWidth;
14+
display: flex;
15+
justify-content: space-evenly;
16+
align-items: center;
17+
margin-bottom: 20px;
18+
19+
.skipRadio {
20+
flex: 1 1 0;
21+
padding-left: 10px;
22+
}
23+
.sizeInput {
24+
flex: 1 1 0;
25+
26+
}
27+
}
28+
}
29+
30+
.buttonContainer {
31+
display: flex;
32+
flex-flow: row nowrap;
33+
justify-content: center;
34+
align-items: center;
35+
width: $bodyWidth;
36+
height: 40px;
37+
border: 1px solid #eee;
38+
margin: 5px;
39+
position: relative;
40+
41+
.position {
42+
font-size: 10px;
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
width: 40px;
47+
padding-left: 3px;
48+
color: #aaaaaa;
49+
}
50+
51+
.buttons-left {
52+
flex: 1 1 0;
53+
display: flex;
54+
flex-flow: column;
55+
justify-content: flex-start;
56+
align-items: center;
57+
58+
59+
.topLeft {
60+
width: 100%;
61+
height: 16px;
62+
display: flex;
63+
justify-content: space-evenly;
64+
align-items: center;
65+
text-align: center;
66+
font-size: 12px;
67+
}
68+
69+
.bottomLeft {
70+
width: 100%;
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
}
75+
}
76+
77+
.buttons-group-right {
78+
flex: 1 1 0;
79+
display: flex;
80+
justify-content: center;
81+
align-items: center;
82+
}
83+
}
84+

‎examples/src/buttons/ButtonsWithRequest.jsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// @flow
2+
import React from 'react';
3+
import { Request } from 'questrar';
4+
import { Input } from 'semantic-ui-react';
5+
import ButtonBar from './ButtonBar';
6+
import { randomId } from '../helper';
7+
import './Buttons.scss';
8+
9+
10+
type Props = {
11+
size?: number,
12+
}
13+
14+
type State = {
15+
size: number,
16+
}
17+
18+
class Buttons extends React.Component<Props, State> {
19+
props: Props;
20+
21+
state: State = { size: 2 };
22+
23+
24+
componentDidMount() {
25+
this.setState({ size: this.props.size });
26+
}
27+
28+
29+
setListSize = (evt: Object) => {
30+
const size = +evt.target.value;
31+
if (size >= 1) {
32+
this.setState({ size });
33+
}
34+
};
35+
36+
render() {
37+
const { size } = this.state;
38+
39+
const idList = Array(size).fill(1)
40+
.map((_, index) => {
41+
const idr = randomId();
42+
return `${index + 1}_${idr}`;
43+
});
44+
45+
return (
46+
<div className="buttonsLongListContainer">
47+
<div className="buttonsToolbar">
48+
<div className="sizeInput">
49+
<span>List Length: </span>
50+
<Input defaultValue={size} size="mini" onChange={this.setListSize} />
51+
</div>
52+
</div>
53+
{idList.map((id, idx) => (
54+
<Request id={id} key={id} inject>
55+
<ButtonBar position={idx + 1} />
56+
</Request>
57+
))}
58+
</div>
59+
);
60+
}
61+
}
62+
63+
64+
export default Buttons;

‎examples/src/buttons/ButtonsWithRequests.jsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// @flow
2+
import React from 'react';
3+
import { Requests } from 'questrar';
4+
import { Input, Radio } from 'semantic-ui-react';
5+
import ButtonBar from './ButtonBar';
6+
import { randomId } from '../helper';
7+
import './Buttons.scss';
8+
9+
10+
type Props = {
11+
size?: number,
12+
}
13+
14+
type State = {
15+
size: number,
16+
skip: boolean
17+
}
18+
19+
class ButtonsWithRequests extends React.Component<Props, State> {
20+
props: Props;
21+
22+
state: State = { size: 2, skip: true };
23+
24+
25+
componentDidMount() {
26+
this.setState({ size: this.props.size });
27+
}
28+
29+
30+
setListSize = (evt: Object) => {
31+
const size = +evt.target.value;
32+
if (size >= 1) {
33+
this.setState({ size });
34+
}
35+
};
36+
37+
toggleSkip = (e, { checked }) => {
38+
this.setState({ skip: checked });
39+
};
40+
41+
render() {
42+
const { size, skip } = this.state;
43+
44+
const idList = Array(size).fill(1)
45+
.map((_, index) => {
46+
const idr = randomId();
47+
return `${index + 1}_${idr}`;
48+
});
49+
50+
return (
51+
<div className="buttonsLongListContainer">
52+
<div className="buttonsToolbar">
53+
<div className="skipRadio">
54+
<Radio
55+
slider
56+
defaultChecked={skip}
57+
onChange={this.toggleSkip}
58+
label={skip ? 'Skip Old Trees' : 'Re-render Always'}
59+
/>
60+
</div>
61+
<div className="sizeInput">
62+
<span>List Length: </span>
63+
<Input defaultValue={size} size="mini" onChange={this.setListSize} />
64+
</div>
65+
</div>
66+
<Requests skipOldTrees={skip} inject>
67+
{idList.map((id, idx) => (
68+
<ButtonBar position={idx + 1} key={id} id={id} />
69+
))}
70+
</Requests>
71+
</div>
72+
);
73+
}
74+
}
75+
76+
77+
export default ButtonsWithRequests;

‎examples/src/context/PostPage.jsx

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,25 @@ class Post extends React.Component<Props, State> {
6666
}
6767
};
6868

69-
onRequestSuccess = (request, buttonEl) => (
70-
<React.Fragment>
71-
{buttonEl}
72-
<Popup
73-
onClick={() => request.actions.remove(request.data.id)}
74-
context={buttonEl.ref}
75-
open
76-
header={request.data.message.title}
77-
content={request.data.message.body}
78-
placement="right center"
79-
/>
80-
</React.Fragment>
81-
);
69+
onRequestSuccess (request, buttonEl) {
70+
this.setState({ });
71+
// console.log('Setting state');
72+
73+
return (
74+
<React.Fragment>
75+
{buttonEl}
76+
<Popup
77+
onClick={() => request.actions.remove(request.data.id)}
78+
context={buttonEl.ref}
79+
open
80+
header={request.data.message.title}
81+
content={request.data.message.body}
82+
placement="right center"
83+
/>
84+
</React.Fragment>
85+
);
86+
}
87+
onRequestSuccess = this.onRequestSuccess.bind(this);
8288

8389
render() {
8490
const { request } = this.props;
@@ -92,6 +98,7 @@ class Post extends React.Component<Props, State> {
9298
<div className="postActions">
9399
<TextArea
94100
className="textArea"
101+
value={this.state.text}
95102
onChange={(evt, text) => this.setState({ text: text.value })}
96103
placeholder="Say something about the discussion"
97104
/>

‎examples/stories/ButtonsWithRequest.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// @flow
2+
import React from 'react';
3+
import { Provider as RequestStateProvider } from 'questrar';
4+
import createStateProvider from 'questrar/store';
5+
import ButtonsWithRequest from '../src/buttons/ButtonsWithRequest';
6+
7+
8+
const stateProvider = createStateProvider();
9+
10+
export const App = () => (
11+
<RequestStateProvider stateProvider={stateProvider}>
12+
<ButtonsWithRequest />
13+
</RequestStateProvider>
14+
);
15+
export default App;

‎examples/stories/ButtonsWithRequests.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// @flow
2+
import React from 'react';
3+
import { Provider as RequestStateProvider } from 'questrar';
4+
import createStateProvider from 'questrar/store';
5+
import ButtonsWithRequests from '../src/buttons/ButtonsWithRequests';
6+
7+
8+
const stateProvider = createStateProvider();
9+
10+
export const App = () => (
11+
<RequestStateProvider stateProvider={stateProvider}>
12+
<ButtonsWithRequests />
13+
</RequestStateProvider>
14+
);
15+
export default App;

0 commit comments

Comments
 (0)