Skip to content

Commit fafc32e

Browse files
author
Milan Pavlik
committed
Wire up redux, shuffle files around
1 parent 626a64b commit fafc32e

File tree

11 files changed

+318
-105
lines changed

11 files changed

+318
-105
lines changed

‎app/package-lock.json

+71
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@
88
"grpc-web-client": "^0.3.1",
99
"react": "^16.2.0",
1010
"react-dom": "^16.2.0",
11+
"react-redux": "^5.0.6",
1112
"react-scripts-ts": "2.10.0",
12-
"semantic-ui-react": "^0.77.2"
13+
"redux": "^3.7.2",
14+
"semantic-ui-react": "^0.77.2",
15+
"typesafe-actions": "^1.1.2"
1316
},
1417
"scripts": {
1518
"start": "react-scripts-ts start",
@@ -23,6 +26,7 @@
2326
"@types/node": "^9.3.0",
2427
"@types/react": "^16.0.34",
2528
"@types/react-dom": "^16.0.3",
29+
"@types/react-redux": "^5.0.14",
2630
"ts-protoc-gen": "^0.4.0"
2731
}
2832
}

‎app/src/App.tsx

+54-77
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,10 @@ import { grpc } from 'grpc-web-client';
44
import { HackerNewsService } from './proto/hackernews_pb_service';
55
import { ListStoriesRequest, ListStoriesResponse } from './proto/hackernews_pb';
66
import { Button, Container, Divider, Grid, Header, Image, Menu, Segment } from 'semantic-ui-react';
7-
import StoryList from './StoryList';
8-
import StoryView from './StoryView';
97

108
// const logo = require('./logo.svg');
119
const ThemingLayout = () => (
12-
<Container style={{ marginTop: '3em' }}>
13-
<Header as="h1" dividing={true}>Hacker News with gRPC-Web</Header>
14-
15-
<Grid columns={2} stackable={true} divided={'vertically'}>
16-
<Grid.Column width={3}>
17-
<StoryList />
18-
</Grid.Column>
19-
20-
<Grid.Column width={13} stretched={true}>
21-
22-
<Header as="h2">Example body text</Header>
23-
<StoryView />
24-
25-
<p>
26-
Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis
27-
dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
28-
</p>
29-
<p>
30-
<small>This line of text is meant to be treated as fine print.</small>
31-
</p>
32-
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
33-
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
34-
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
35-
</Grid.Column>
36-
</Grid>
10+
<Container style={{marginTop: '3em'}}>
3711

3812
<Grid columns={3} stackable={true}>
3913
<Grid.Column>
@@ -70,22 +44,22 @@ const ThemingLayout = () => (
7044
columns={3}
7145
padded={true}
7246
stackable={true}
73-
style={{ margin: '-1.5em', width: 400 }}
47+
style={{margin: '-1.5em', width: 400}}
7448
textAlign="center"
7549
>
76-
<Grid.Column color="red" style={{ margin: '0.5em', height: 50 }}>Red</Grid.Column>
77-
<Grid.Column color="orange" style={{ margin: '0.5em', height: 50 }}>Orange</Grid.Column>
78-
<Grid.Column color="yellow" style={{ margin: '0.5em', height: 50 }}>Yellow</Grid.Column>
79-
<Grid.Column color="olive" style={{ margin: '0.5em', height: 50 }}>Olive</Grid.Column>
80-
<Grid.Column color="green" style={{ margin: '0.5em', height: 50 }}>Green</Grid.Column>
81-
<Grid.Column color="teal" style={{ margin: '0.5em', height: 50 }}>Teal</Grid.Column>
82-
<Grid.Column color="blue" style={{ margin: '0.5em', height: 50 }}>Blue</Grid.Column>
83-
<Grid.Column color="violet" style={{ margin: '0.5em', height: 50 }}>Violet</Grid.Column>
84-
<Grid.Column color="purple" style={{ margin: '0.5em', height: 50 }}>Purple</Grid.Column>
85-
<Grid.Column color="pink" style={{ margin: '0.5em', height: 50 }}>Pink</Grid.Column>
86-
<Grid.Column color="brown" style={{ margin: '0.5em', height: 50 }}>Brown</Grid.Column>
87-
<Grid.Column color="grey" style={{ margin: '0.5em', height: 50 }}>Grey</Grid.Column>
88-
<Grid.Column color="black" style={{ margin: '0.5em', height: 50 }}>Black</Grid.Column>
50+
<Grid.Column color="red" style={{margin: '0.5em', height: 50}}>Red</Grid.Column>
51+
<Grid.Column color="orange" style={{margin: '0.5em', height: 50}}>Orange</Grid.Column>
52+
<Grid.Column color="yellow" style={{margin: '0.5em', height: 50}}>Yellow</Grid.Column>
53+
<Grid.Column color="olive" style={{margin: '0.5em', height: 50}}>Olive</Grid.Column>
54+
<Grid.Column color="green" style={{margin: '0.5em', height: 50}}>Green</Grid.Column>
55+
<Grid.Column color="teal" style={{margin: '0.5em', height: 50}}>Teal</Grid.Column>
56+
<Grid.Column color="blue" style={{margin: '0.5em', height: 50}}>Blue</Grid.Column>
57+
<Grid.Column color="violet" style={{margin: '0.5em', height: 50}}>Violet</Grid.Column>
58+
<Grid.Column color="purple" style={{margin: '0.5em', height: 50}}>Purple</Grid.Column>
59+
<Grid.Column color="pink" style={{margin: '0.5em', height: 50}}>Pink</Grid.Column>
60+
<Grid.Column color="brown" style={{margin: '0.5em', height: 50}}>Brown</Grid.Column>
61+
<Grid.Column color="grey" style={{margin: '0.5em', height: 50}}>Grey</Grid.Column>
62+
<Grid.Column color="black" style={{margin: '0.5em', height: 50}}>Black</Grid.Column>
8963
</Grid>
9064
</Grid.Column>
9165
</Grid>
@@ -96,9 +70,9 @@ const ThemingLayout = () => (
9670
<Grid.Column>
9771
<Menu
9872
items={[
99-
{ key: '1', name: 'link-1', content: 'Link' },
100-
{ key: '2', name: 'link-2', content: 'Link' },
101-
{ key: '3', name: 'link-3', content: 'Link' },
73+
{key: '1', name: 'link-1', content: 'Link'},
74+
{key: '2', name: 'link-2', content: 'Link'},
75+
{key: '3', name: 'link-3', content: 'Link'},
10276
]}
10377
pointing={true}
10478
secondary={true}
@@ -108,9 +82,9 @@ const ThemingLayout = () => (
10882
<Grid.Column>
10983
<Menu
11084
items={[
111-
{ key: '1', name: 'link-1', content: 'Link' },
112-
{ key: '2', name: 'link-2', content: 'Link' },
113-
{ key: '3', name: 'link-3', content: 'Link' },
85+
{key: '1', name: 'link-1', content: 'Link'},
86+
{key: '2', name: 'link-2', content: 'Link'},
87+
{key: '3', name: 'link-3', content: 'Link'},
11488
]}
11589
pointing={true}
11690
tabular={true}
@@ -120,9 +94,9 @@ const ThemingLayout = () => (
12094
<Grid.Column>
12195
<Menu
12296
items={[
123-
{ key: 'l1', name: 'link-1', content: 'Link' },
124-
{ key: 'l2', name: 'link-2', content: 'Link' },
125-
{ key: 't1', name: 'text-1', content: 'Right text', position: 'right' },
97+
{key: 'l1', name: 'link-1', content: 'Link'},
98+
{key: 'l2', name: 'link-2', content: 'Link'},
99+
{key: 't1', name: 'text-1', content: 'Right text', position: 'right'},
126100
]}
127101
pointing={true}
128102
/>
@@ -139,19 +113,19 @@ const ThemingLayout = () => (
139113
<Button basic={true}>Basic</Button>
140114
<Button compact={true}>Compact</Button>
141115

142-
<Divider />
116+
<Divider/>
143117

144-
<Button icon="heart" />
145-
<Button content="Labeled" icon="heart" labelPosition="left" />
146-
<Button content="Labeled" icon="heart" labelPosition="right" />
118+
<Button icon="heart"/>
119+
<Button content="Labeled" icon="heart" labelPosition="left"/>
120+
<Button content="Labeled" icon="heart" labelPosition="right"/>
147121

148-
<Divider />
122+
<Divider/>
149123

150124
<Button.Group>
151125
<Button>Combo</Button>
152126
</Button.Group>
153127

154-
<Divider />
128+
<Divider/>
155129

156130
<Button animated={true}>
157131
<Button.Content visible={true}>Horizontal</Button.Content>
@@ -166,12 +140,12 @@ const ThemingLayout = () => (
166140
<Button.Content hidden={true}>Hidden</Button.Content>
167141
</Button>
168142

169-
<Divider />
143+
<Divider/>
170144

171145
<Button disabled={true}>Disabled</Button>
172146
<Button loading={true}>Loading</Button>
173147

174-
<Divider />
148+
<Divider/>
175149

176150
<Button.Group>
177151
<Button>1</Button>
@@ -180,26 +154,26 @@ const ThemingLayout = () => (
180154
</Button.Group>
181155

182156
<Button.Group>
183-
<Button icon="align left" />
184-
<Button icon="align center" />
185-
<Button icon="align right" />
186-
<Button icon="align justify" />
157+
<Button icon="align left"/>
158+
<Button icon="align center"/>
159+
<Button icon="align right"/>
160+
<Button icon="align justify"/>
187161
</Button.Group>
188162

189163
<Button.Group>
190164
<Button>1</Button>
191-
<Button.Or />
165+
<Button.Or/>
192166
<Button>2</Button>
193167
</Button.Group>
194168

195-
<Divider />
169+
<Divider/>
196170

197171
<Button.Group attached="top" widths={2}>
198172
<Button>One</Button>
199173
<Button>Two</Button>
200174
</Button.Group>
201175
<Segment attached={true}>
202-
<Image src="/assets/images/wireframe/paragraph.png" />
176+
<Image src="/assets/images/wireframe/paragraph.png"/>
203177
</Segment>
204178
<Button.Group attached="bottom" widths={2}>
205179
<Button>One</Button>
@@ -216,19 +190,19 @@ const ThemingLayout = () => (
216190
<Button size="huge">Huge</Button>
217191
<Button size="massive">Massive</Button>
218192

219-
<Divider />
193+
<Divider/>
220194

221-
<Button color="yellow" style={{ marginBottom: '1em' }}>Yellow</Button>
222-
<Button color="orange" style={{ marginBottom: '1em' }}>Orange</Button>
223-
<Button color="green" style={{ marginBottom: '1em' }}>Green</Button>
224-
<Button color="teal" style={{ marginBottom: '1em' }}>Teal</Button>
225-
<Button color="blue" style={{ marginBottom: '1em' }}>Blue</Button>
226-
<Button color="purple" style={{ marginBottom: '1em' }}>Purple</Button>
227-
<Button color="pink" style={{ marginBottom: '1em' }}>Pink</Button>
228-
<Button color="red" style={{ marginBottom: '1em' }}>Red</Button>
229-
<Button color="black" style={{ marginBottom: '1em' }}>Black</Button>
195+
<Button color="yellow" style={{marginBottom: '1em'}}>Yellow</Button>
196+
<Button color="orange" style={{marginBottom: '1em'}}>Orange</Button>
197+
<Button color="green" style={{marginBottom: '1em'}}>Green</Button>
198+
<Button color="teal" style={{marginBottom: '1em'}}>Teal</Button>
199+
<Button color="blue" style={{marginBottom: '1em'}}>Blue</Button>
200+
<Button color="purple" style={{marginBottom: '1em'}}>Purple</Button>
201+
<Button color="pink" style={{marginBottom: '1em'}}>Pink</Button>
202+
<Button color="red" style={{marginBottom: '1em'}}>Red</Button>
203+
<Button color="black" style={{marginBottom: '1em'}}>Black</Button>
230204

231-
<Divider />
205+
<Divider/>
232206

233207
<Segment inverted={true}>
234208
<Button inverted={true}>Inverted</Button>
@@ -276,7 +250,10 @@ class App extends React.Component {
276250

277251
render() {
278252
return (
279-
<ThemingLayout />
253+
<Container style={{marginTop: '3em'}}>
254+
<ThemingLayout/>
255+
</Container>
256+
280257
);
281258
}
282259
}

‎app/src/Stories.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import * as React from 'react';
2+
import { connect, Dispatch } from 'react-redux';
3+
import { RootState } from './store';
4+
import { Story } from './reducers/stories';
5+
import { Container, Grid, Header } from 'semantic-ui-react';
6+
import StoryList from './StoryList';
7+
import StoryView from './StoryView';
8+
import { RootAction } from './actions';
9+
import { listStoriesInit } from './actions/stories';
10+
11+
type StoriesProps = {
12+
stories: Story[],
13+
loading: boolean,
14+
error: Error | null,
15+
dispatch: Dispatch<RootAction>
16+
};
17+
18+
class Stories extends React.Component<StoriesProps, {}> {
19+
20+
componentDidMount() {
21+
this.props.dispatch(listStoriesInit());
22+
}
23+
24+
render() {
25+
return (
26+
<Container style={{marginTop: '3em'}}>
27+
<Header as="h1" dividing={true}>Hacker News with gRPC-Web</Header>
28+
29+
<Grid columns={2} stackable={true} divided={'vertically'}>
30+
<Grid.Column width={3}>
31+
<StoryList stories={this.props.stories}/>
32+
</Grid.Column>
33+
34+
<Grid.Column width={13} stretched={true}>
35+
36+
<Header as="h2">Example body text</Header>
37+
<StoryView/>
38+
</Grid.Column>
39+
</Grid>
40+
41+
</Container>
42+
);
43+
}
44+
45+
}
46+
47+
export default connect((state: RootState) => ({
48+
stories: Array.from(state.stories.stories.values()),
49+
loading: state.stories.loading,
50+
error: state.stories.error,
51+
}))(Stories);

0 commit comments

Comments
 (0)