Merge pull request #19 from sandbox-project/feature/voting-page

issue #9 #7 #17 #18 Create voting page and install socketIO

package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "react": "^16.3.0-alpha.1",
     "react-native": "0.54.1",
-    "react-native-navigation": "^1.1.407"
+    "react-native-navigation": "^1.1.407",
+    "socket.io-client": "^2.0.4"
   },
   "devDependencies": {
     "babel-jest": "22.4.1",

src/screens/index.js

@@ -3,9 +3,11 @@ import { Navigation } from 'react-native-navigation'
 import mainPage from './mainPage/mainPage'
 import createPage from './createPage/createPage'
 import pinCodePage from './pinCodePage/pinCodePage'
+import votingPage from './votingPage/votingPage'
 
 export const registerScreens = () => {
   Navigation.registerComponent('votestMobile.mainPage', () => mainPage )
   Navigation.registerComponent('votestMobile.createPage', () => createPage )
   Navigation.registerComponent('votestMobile.pinCodePage', () => pinCodePage )
+  Navigation.registerComponent('votestMobile.votingPage', () => votingPage )
 }

src/screens/pinCodePage/pinCodePage.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { View, Text, TextInput, Button, Alert} from 'react-native';
+import { View, Text, TextInput, Button} from 'react-native';
 import s from './pinCodePageStyle';
 
 class pinCodePage extends Component {
@@ -9,19 +9,20 @@ class pinCodePage extends Component {
   }
 
   _vote() {
-    return fetch(`http://192.168.1.166:8000/api/v1/poll/${this.state.text}`)
+    return fetch(`https://votest-api.herokuapp.com/api/poll/${this.state.text}`)
       .then(response => response.json())
       .then(data => {
         let poll = data.response;
-        Alert.alert(
-          `Question: ${poll.question}`,
-          `ChartType: ${poll.type}`,
-          [
-            {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
-            {text: 'OK', onPress: () => console.log('OK Pressed')},
-          ],
-          { cancelable: false }
-        )
+        this.props.navigator.push({
+          screen: 'votestMobile.votingPage',
+          passProps: { 
+            poll,
+            id: this.state.text,
+          },
+          navigatorStyle: {
+            navBarHidden: true
+          }
+        });
       })
   }
 

src/screens/votingPage/votingPage.js

@@ -0,0 +1,74 @@
+import React, {Component} from 'react';
+import { View, Text, Button, Alert} from 'react-native';
+import s from './votingPageStyle';
+import IO from 'socket.io-client';
+
+class votingPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {socket: null};
+  }
+
+  initSocket () {
+    const socket = IO('https://votest-api.herokuapp.com/')
+    socket.emit('join', {room: this.props.id});
+    this.setState({socket})
+  }
+
+  componentWillMount() {
+    this.initSocket();
+  }
+
+  _vote (id) {
+    Alert.alert(
+      this.props.poll.question,
+      this.props.poll.answers[id].answer,
+      [
+        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
+        {text: 'OK', onPress: () => {
+          fetch(`https://votest-api.herokuapp.com/api/poll/${this.props.id}/${id}`, {method: 'PUT'})
+            .then(resp => {
+              const {socket} = this.state;
+              socket.emit('vote');
+            })
+        }}
+      ],
+      { cancelable: false }
+    )
+  }
+
+  _renderAnswers () {
+    let answers = [];
+    const obj = this.props.poll.answers;
+
+    for (let ans in obj) {
+      answers.push(
+        <Button
+          key={ans}
+          title={obj[ans].answer}
+          style={s.answersButtons}
+          onPress={() => this._vote(ans)}
+        />
+      )
+    }
+
+    return answers;
+  }
+
+  render() {
+    return (
+      <View style={s.global}>
+        <View style={s.question}>
+          <View>
+            <Text style={s.title}>{this.props.poll.question}</Text>
+          </View>
+        </View>
+        <View style={s.answers}>
+          {this._renderAnswers()}
+        </View>
+      </View>
+    );
+  }
+}
+
+export default votingPage;

src/screens/votingPage/votingPageStyle.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+module.exports = StyleSheet.create({
+
+  global: {
+    backgroundColor: 'black',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+
+  title: {
+    color: 'white',
+    fontSize: 25,
+    textAlign: 'center'
+  },
+
+  question: {
+    height: '50%',
+    flex: 1,
+    justifyContent: 'center'
+  },
+
+  answers: {
+    height: '50%',
+    flex: 1,
+    justifyContent: 'space-around',
+    padding: 20
+  }
+
+});