Wire up backend to frontend

Author: Milan Pavlik

app/src/Stories.tsx

@@ -22,16 +22,17 @@ class Stories extends React.Component<StoriesProps, {}> {
   }
 
   render() {
+    console.log(this.props.stories)
     return (
-      <Container style={{marginTop: '3em'}}>
+      <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={3}>
+          <Grid.Column width={4}>
             <StoryList stories={this.props.stories}/>
           </Grid.Column>
 
-          <Grid.Column width={13} stretched={true}>
+          <Grid.Column width={12} stretched={true}>
 
             <Header as="h2">Example body text</Header>
             <StoryView/>
@@ -45,7 +46,7 @@ class Stories extends React.Component<StoriesProps, {}> {
 }
 
 export default connect((state: RootState) => ({
-  stories: Array.from(state.stories.stories.values()),
+  stories: Object.keys(state.stories.stories).map(key => state.stories.stories[key]),
   loading: state.stories.loading,
   error: state.stories.error,
 }))(Stories);

app/src/actions/stories.ts

@@ -1,16 +1,14 @@
 import { Action } from 'redux';
-import { ListStoriesRequest, ListStoriesResponse } from '../proto/hackernews_pb';
+import { Item, ListStoriesRequest, ListStoriesResponse } from '../proto/hackernews_pb';
 import { GrpcAction, grpcRequest } from '../middleware/grpc';
 import { Code, Metadata } from 'grpc-web-client';
 import { HackerNewsService } from '../proto/hackernews_pb_service';
 import { PingRequest, PingResponse } from '../proto/ping_pb';
 import { PingService } from '../proto/ping_pb_service';
 
 export const STORIES_INIT = 'STORIES_INIT';
+export const ADD_STORY = 'ADD_STORY';
 
-type ListStoriesInit = {
-  type: typeof STORIES_INIT,
-};
 
 export const ping = () => {
   return grpcRequest<PingRequest, PingResponse>({
@@ -38,14 +36,28 @@ export const listStories = () => {
     host: 'http://localhost:8900',
     methodDescriptor: HackerNewsService.ListStories,
     onMessage: message => {
-      console.log(message);
+      const story = message.getStory();
+      if (story) {
+        return addStory(story);
+      }
       return;
     },
   });
 };
 
+type ListStoriesInit = {
+  type: typeof STORIES_INIT,
+};
 export const listStoriesInit = (): ListStoriesInit => ({type: STORIES_INIT});
 
+type AddStory = {
+  type: typeof ADD_STORY,
+  payload: Item,
+};
+
+export const addStory = (story: Item) => ({ type: ADD_STORY, payload: story });
+
 export type StoryActionTypes =
   | ListStoriesInit
+  | AddStory
   | GrpcAction<ListStoriesRequest, ListStoriesResponse>;

app/src/reducers/stories.ts

@@ -1,5 +1,6 @@
 import { RootAction } from '../actions';
-import { STORIES_INIT } from '../actions/stories';
+import { ADD_STORY, STORIES_INIT } from '../actions/stories';
+import { Item } from '../proto/hackernews_pb';
 
 export type StoryId = number;
 
@@ -14,23 +15,31 @@ export type Story = {
 };
 
 export type StoryState = {
-  readonly stories: Map<StoryId, Story>,
+  readonly stories: { [storyId: number]: Item.AsObject },
   readonly error: Error | null,
   readonly loading: boolean,
 };
 
 const initialState = {
-  stories: new Map<StoryId, Story>(),
+  stories: {},
   error: null,
   loading: false
 };
 
 export default function (state: StoryState = initialState, action: RootAction): StoryState {
 
   switch (action.type) {
+
     case STORIES_INIT:
       return {...state, loading: true};
 
+    case ADD_STORY:
+      const story: Item.AsObject = action.payload.toObject();
+      if (story.id && story.id.id) {
+        return {...state, loading: false, stories: {...state.stories, [story.id.id]: story}};
+      }
+      return state;
+
     default:
       return state;
   }