[Week 17] - Creating new stories

antoinejaussoin · May 24, 2018 · a854dd0 · a854dd0
1 parent 65c7caa
commit a854dd0
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^1.0.0",
-    "@material-ui/icons": "^1.0.0-beta.43",
+    "@material-ui/icons": "^1.0.0",
     "@types/core-js": "^0.9.46",
     "@types/express": "^4.11.1",
     "@types/lodash": "^4.14.108",
@@ -38,7 +38,7 @@
   "scripts": {
     "start": "concurrently --kill-others-on-fail \"yarn build-server\" \"yarn server\" \"yarn client\"",
     "client": "react-app-rewired start --scripts-version react-scripts-ts",
-    "server": "nodemon ./server/dist/index.js",
+    "server": "nodemon ./server/dist/server/index.js",
     "build": "npm run build-client && npm run build-server",
     "build-client": "react-app-rewired build --scripts-version react-scripts-ts",
     "build-server": "tsc --p ./server/tsconfig.json",

diff --git a/server/index.ts b/server/index.ts
@@ -73,6 +73,15 @@ const joinHandler = (roomId: string, room: Game, payload, socket: ExtendedSocket
   });
 };
 
+const createStoryHandler = (roomId: string, room: Game, payload, socket: ExtendedSocket) => {
+  room.stories.push({
+    description: payload,
+    flipped: false,
+    votes: [],
+  });
+  sendToAll(socket, roomId, RECEIVE_ALL_GAME_DATA, room);
+};
+
 const receiveVoteHandler = (roomId: string, game: Game, payload: any, socket: ExtendedSocket) => {
   // game.story.votes = payload.map(card => new Vote(card, null));
   sendToAll(socket, roomId, RECEIVE_STORY_UPDATE, payload);
@@ -98,6 +107,7 @@ io.on('connection', (socket: ExtendedSocket) => {
   const actions = [
     { action: JOIN_GAME, handler: joinHandler },
     { action: VOTE, handler: receiveVoteHandler },
+    { action: CREATE_STORY, handler: createStoryHandler },
     { action: RENAME_PLAYER, handler: renamePlayerHandler },
     { action: LEAVE_GAME, handler: leaveGameHandler },
   ];

diff --git a/src/Game/stories.tsx b/src/Game/stories.tsx
@@ -1,8 +1,18 @@
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import { Avatar, List, ListItem, ListItemText } from '@material-ui/core';
+import styled from 'styled-components';
+import { Avatar, List, ListItem, ListItemText, Button } from '@material-ui/core';
+import Input from '../Components/Input';
 import Store from '../store';
 
+const Container = styled.section`
+
+`;
+
+const NewStory = styled.div`
+
+`;
+
 export interface GameProps {
   store?: Store;
 }
@@ -11,21 +21,30 @@ export interface GameProps {
 @observer
 class StoriesList extends React.Component<GameProps> {
   render() {
-    const { game } = this.props.store;
+    const { game, newStoryName } = this.props.store;
     if (!game) {
       return null;
     }
 
     return (
-      <List>
-        {
-          game.stories.map(((story, index) => (
-            <ListItem key={index} dense button>
-              <ListItemText primary={story.description} />
-            </ListItem>
-          )))
-        }
-      </List>
+      <Container>
+        <NewStory>
+          <Input
+            label="Add a story"
+            value={newStoryName}
+            onChange={name => this.props.store.updateNewStoryName(name)} />
+          <Button onClick={() => this.props.store.createStory()}>Add</Button>
+        </NewStory>
+        <List>
+          {
+            game.stories.map(((story, index) => (
+              <ListItem key={index} dense button>
+                <ListItemText primary={story.description} />
+              </ListItem>
+            )))
+          }
+        </List>
+      </Container>
     );
   }
 }

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -1,5 +1,5 @@
 import { observable, action, runInAction } from 'mobx';
-import { RECEIVE_ALL_GAME_DATA, VOTE, RENAME_PLAYER, RECEIVE_PLAYER_LIST } from '../actions';
+import { RECEIVE_ALL_GAME_DATA, VOTE, RENAME_PLAYER, RECEIVE_PLAYER_LIST, CREATE_STORY } from '../actions';
 import { Game, Card, Player } from '../models';
 import { Transport } from './socket';
 import { Api } from './api';
@@ -9,6 +9,7 @@ class Store {
   @observable game: Game ;
   @observable cards: Card[] = [];
   @observable roomId: string = null;
+  @observable newStoryName: string = '';
 
   constructor(public transport: Transport, public api: Api) {
     this.username = 'Unknown Player';
@@ -30,6 +31,7 @@ class Store {
   }
 
   @action.bound receiveGameData(game: Game) {
+    console.log('receive game: ', game);
     this.game = game;
   }
 
@@ -49,10 +51,18 @@ class Store {
     this.transport.send(RENAME_PLAYER, username);
   }
 
-  @action createStory(description: string) {
-    // this.game.stories.push({
+  @action createStory() {
+    this.game.stories.push({
+      description: this.newStoryName,
+      flipped: false,
+      votes: [],
+    });
+    this.transport.send(CREATE_STORY, this.newStoryName);
+    this.newStoryName = '';
+  }
 
-    // });
+  @action updateNewStoryName(name: string) {
+    this.newStoryName = name;
   }
 }
 

diff --git a/src/store/socket.ts b/src/store/socket.ts
@@ -30,6 +30,7 @@ export default class SocketIo implements Transport {
   }
 
   send(action: string, payload: any) {
+    console.log(action, this.roomId, payload);
     this.socket.emit(action, {
       roomId: this.roomId,
       payload,