Complete the FE implementation

Author: Milan Pavlik

Diff for: app/src/App.test.tsx

@@ -1,41 +1,53 @@
 import * as React from 'react';
 import { connect, Dispatch } from 'react-redux';
 import { RootState } from './store';
-import { Story } from './reducers/stories';
 import { Container, Grid, Header } from 'semantic-ui-react';
 import StoryList from './StoryList';
 import StoryView from './StoryView';
 import { RootAction } from './actions';
-import { listStories } from './actions/stories';
+import { listStories, selectStory } from './actions/stories';
+import { Item } from './proto/hackernews_pb';
 
 type StoriesProps = {
-  stories: Story[],
+  stories: Item.AsObject[],
   loading: boolean,
   error: Error | null,
-  dispatch: Dispatch<RootAction>
+  dispatch: Dispatch<RootAction>,
+  selected: Item.AsObject | null,
 };
 
 class Stories extends React.Component<StoriesProps, {}> {
 
+  constructor(props: StoriesProps) {
+    super(props);
+    this.state = {
+      selected: null,
+    };
+  }
+
   componentDidMount() {
     this.props.dispatch(listStories());
   }
 
   render() {
-    console.log(this.props.stories)
+    console.log(this.props.stories);
     return (
       <Container style={{padding: '1em'}} fluid={true}>
         <Header as="h1" dividing={true}>Hacker News with gRPC-Web</Header>
 
         <Grid columns={2} stackable={true} divided={'vertically'}>
           <Grid.Column width={4}>
-            <StoryList stories={this.props.stories}/>
+            <StoryList
+              stories={this.props.stories}
+              onStorySelect={(id: number) => this.props.dispatch(selectStory(id))}
+            />
           </Grid.Column>
 
           <Grid.Column width={12} stretched={true}>
-
-            <Header as="h2">Example body text</Header>
-            <StoryView/>
+            { this.props.selected
+              ? <StoryView story={this.props.selected} />
+              : null
+            }
           </Grid.Column>
         </Grid>
 
@@ -45,8 +57,13 @@ class Stories extends React.Component<StoriesProps, {}> {
 
 }
 
-export default connect((state: RootState) => ({
-  stories: Object.keys(state.stories.stories).map(key => state.stories.stories[key]),
-  loading: state.stories.loading,
-  error: state.stories.error,
-}))(Stories);
+function mapStateToProps(state: RootState) {
+  return {
+    stories: Object.keys(state.stories.stories).map(key => state.stories.stories[key]),
+    loading: state.stories.loading,
+    error: state.stories.error,
+    selected: state.stories.selected,
+  };
+}
+
+export default connect(mapStateToProps)(Stories);

Diff for: app/src/App.tsx

@@ -1,16 +1,24 @@
 import * as React from 'react';
 import { Item } from 'semantic-ui-react';
-import { Story } from './reducers/stories';
+import {Item as Story } from './proto/hackernews_pb';
 
 type StoryListProps = {
-  stories: Story[],
+  stories: Story.AsObject[],
+  onStorySelect: (id: number) => void
 };
 
 const StoryList: React.SFC<StoryListProps> = (props) => {
   return (
     <Item.Group>
       {props.stories.map((story, i) =>
-        <Item key={i}>
+        <Item
+          key={i}
+          onClick={() => {
+            if (story.id && story.id.id) {
+              props.onStorySelect(story.id.id);
+            }
+          }}
+        >
           <Item.Content>
             <Item.Header as="a">{story.title}</Item.Header>
             <Item.Meta>By: {story.by}</Item.Meta>

Diff for: app/src/Stories.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
+import { Item } from './proto/hackernews_pb';
 
-const StoryView: React.SFC<{}> = (props) => {
-  const url = 'http://localhost:8900/article-proxy?q=' +
-    'https%3A%2F%2Fstackshare.io%2Fstream%2Fstream-and-go-news-feeds-for-over-300-million-end-users';
+type StoryViewProps = {
+  story: Item.AsObject,
+};
+
+const StoryView: React.SFC<StoryViewProps> = (props) => {
   return (
     <iframe
       frameBorder="0"
       style={{
         height: '100vh',
         width: '100%',
       }}
-      src={url}
+      src={props.story.url}
     />
   );
 };