# This is a combination of 3 commits.

# This is the 1st commit message:
Completed survey component

# This is the commit message #2:

populated answers on question view

# This is the commit message #3:

added styling to Surveys question header

# This is the commit message #4:

added radio button component

# This is the commit message #5:

added radio buttons and functionality for answer choice

# This is the commit message #6:

added progress bar base files

# This is the commit message #7:

initial progress bar

# This is the commit message #8:

styles on progressbar

# This is the commit message #9:

finished progress bar component

# This is the commit message #10:

refactored progress bar to track progress dynamically

# This is the commit message #1:

created progress bar container with arrows

# This is the commit message #2:

implemented dynamic rendering of survey questions

# This is the commit message #3:

fixed survey question layout

js/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import PropTypes from 'prop-types';
+import { styles } from './styles';
+
+const ProgressBar = ({ overlayText, completePerc, totalSteps }) => {
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.complete, { flex: completePerc }]} />
+      <View style={styles.textContainer}>
+        <Text style={styles.overlay}>
+          {overlayText}
+        </Text>
+      </View>
+      <View style={[styles.incomplete, { flex: Math.abs(completePerc - totalSteps) }]} />
+    </View>
+  );
+}
+
+export default ProgressBar;
+
+ProgressBar.propTypes = {
+
+}

js/components/ProgressBar/index.js

@@ -0,0 +1,3 @@
+import Progressbar from './ProgressBar';
+
+export default Progressbar;

js/components/ProgressBar/styles.js

@@ -0,0 +1,36 @@
+import { Dimensions, StyleSheet } from 'react-native'
+import { colors, typography } from '../../config/styles';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    width: Dimensions.get('window').width / 1.75,
+    height: 22.5,
+    borderRadius: 20,
+    borderWidth: 3,
+    borderColor: colors.black,
+    backgroundColor: colors.taxiYellow,
+    marginBottom: 3,
+    alignSelf: 'center'
+  },
+  textContainer: {
+    position: 'absolute',
+    width: Dimensions.get('window').width / 1.75,
+    zIndex: 2,
+    backgroundColor: 'transparent',
+    alignSelf: 'center'
+  },
+  overlay: {
+    textAlign: 'center',
+    fontFamily: typography.fontMainRegular,
+    fontSize: typography.norwester10,
+    color: colors.lightGrey
+  },
+  complete: {
+  },
+  incomplete: {
+    backgroundColor: colors.white,
+    borderTopRightRadius: 20,
+    borderBottomRightRadius: 20
+  }
+});

js/components/RadioButton/RadioButton.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableWithoutFeedback
+} from 'react-native';
+import { styles } from './styles';
+
+const RadioButton = ({ isSelected, children, onPress }) => {
+  return (
+    <View>
+      <TouchableWithoutFeedback
+        onPress={onPress}
+      >
+        <View style={styles.buttonContainer}>
+          <View style={[styles.radio, styles.outerStyle]}>
+            {(isSelected)
+              ? <View style={styles.innerStyle} />
+              : null
+            }
+          </View>
+          <View style={styles.buttonLabel}>
+            {children}
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  )
+}
+
+export default RadioButton;

js/components/RadioButton/index.js

@@ -0,0 +1,3 @@
+import RadioButton from './RadioButton';
+
+export default RadioButton;

js/components/RadioButton/styles.js

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native'
+import { colors } from '../../config/styles';
+
+const defaultProps = {
+  size: 20,
+  borderWidth: 4,
+  selectedColor: colors.taxiYellow,
+  unselectedColor: colors.lightestGrey,
+  borderColor: colors.black
+};
+
+const {
+  size,
+  borderWidth,
+  borderColor,
+  selectedColor,
+  unselectedColor
+} = defaultProps;
+
+export const styles = StyleSheet.create({
+  radio: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  innerStyle: {
+    width: size - borderWidth,
+    height: size - borderWidth,
+    borderRadius: size / 2,
+    backgroundColor: selectedColor
+  },
+  outerStyle: {
+    borderColor: borderColor,
+    backgroundColor: unselectedColor,
+    width: size + borderWidth,
+    height: size + borderWidth,
+    borderRadius: size * 2,
+    borderWidth: borderWidth
+  },
+  buttonLabel: {
+    marginLeft: 10,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    padding: 10
+  }
+});

js/scenes/Home/Home.js

@@ -17,7 +17,7 @@ import { logout } from '../../config/helpers';
 import OutlinedButton from '../../components/OutlinedButton';
 
 
-<<<<<<< HEAD
+
 const Home = ({ nextEvent }) => (
   <View style={styles.sceneContainer}>
     <LinearGradient
@@ -31,77 +31,6 @@ const Home = ({ nextEvent }) => (
           <View style={styles.dateContainer}>
             <DateHolder cStyles={styles} nextEvent={nextEvent} />
             <EventInfo cStyles={styles} nextEvent={nextEvent} />
-=======
-const Home = ({ nextEvent }) => {
-
-  if (nextEvent.location) {
-    var { 
-      streetNumber,
-      streetName, 
-      name, 
-      city, 
-      province,
-      unitNumber,
-      postCode 
-    } = nextEvent.location;
-  }
-
-  return (
-    <View style={styles.sceneContainer}>
-      <LinearGradient
-        style={{ height: Dimensions.get('window').height }}
-        colors={[colors.lightGrey, colors.darkGrey]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 0, y: 0.8 }}
-      >
-        <View style={styles.contentContainer}>
-          <View style={styles.eventHeaderBar}>
-            <View style={styles.dateContainer}>
-              <View style={styles.dateHolder}>
-                <Text style={styles.eventDay}>{Moment.unix(nextEvent.date).format('D')}</Text>
-                <Text style={styles.eventMonth}>{(Moment.unix(nextEvent.date).format('MMM')).toUpperCase()}</Text>
-              </View>
-              <View style={styles.eventInfo}>
-                <Text style={styles.nextEvent}>Next Event:</Text>
-                <Text style={styles.eventDate}>
-                  {Moment.unix(nextEvent.date).format('MMMM Do YYYY')}
-                </Text>
-                <Text style={styles.eventDate}>
-                  {Moment.unix(nextEvent.startTime).format('hh:mm a')} - {Moment.unix(nextEvent.endTime).format('hh:mm a')}
-                </Text>
-              </View>
-            </View>
-          </View>
-          <View style={styles.attendContainer}>
-            <Text style={styles.attendHeader}>Attending</Text>
-            <ScrollView contentContainerStyle={styles.attendeeScrollView}>
-              {(nextEvent.attendees)
-                ? nextEvent.attendees.map((attendee) => (
-                  <View key={attendee.email} style={styles.attendeeContainer}>
-                    <Image
-                      style={styles.attendeePhoto}
-                      source={require('../../assets/images/glenn.png')}
-                    />
-                    <Text style={styles.attendeeName}>{attendee.fullName}</Text>
-                  </View>
-                ))
-                : null}
-            </ScrollView>
-          </View>
-          <View style={styles.locationContainer}>
-            <Text style={styles.locationText}>
-              {(nextEvent.location)
-                ? name
-                : null
-              }
-            </Text>
-            <Text style={styles.locationText}>
-              {(nextEvent.location)
-                ? `${streetNumber} ${streetName} ${unitNumber}, ${city}, ${province}, ${postCode}`
-                : null
-              }
-            </Text>
->>>>>>> finished styling on home screen to scale to different screen sizes
           </View>
         </View>
         <AttendeeList cStyles={styles} attendees={nextEvent.attendees} />

js/scenes/Home/HomeContainer.js

@@ -16,37 +16,7 @@ class HomeContainer extends Component {
       title: 'HOME',
     }
   }
-
-<<<<<<< HEAD
-=======
-  constructor(props) {
-    super(props);
-    this.state = {
-      nextEvent: {}
-    };
-  }
-
-  componentDidMount() {
-    fetch("https://betatalks-7fc6d.firebaseio.com/events.json")
-      .then(response => response.json())
-      .then(data => {
-        const nextEvent = data[0];
-        console.log(nextEvent);
-        fetch("https://betatalks-7fc6d.firebaseio.com/users.json")
-          .then(res => res.json())
-          .then(users => {
-            const attendeesWithData = nextEvent.attendees.reduce((acc, val) => {
-              acc.push(users[val]);
-              return acc;
-            }, []);
-            nextEvent.attendees = attendeesWithData;
-            this.setState({ nextEvent });
-          })
-      }).catch(err => `Error fetching JSON: ${err}`)
-      .catch(error => `Error fetching JSON: ${error}`);
-  }
-
->>>>>>> finished styling on home screen to scale to different screen sizes
+
   render() {
     const { events, users } = this.props;
     if (events.loading || users.loading) return <Loader />;

js/scenes/Home/styles.js

@@ -68,10 +68,7 @@ export const styles = StyleSheet.create({
     alignSelf: 'center',
     width: Dimensions.get('window').width / 1.55,
     height: Dimensions.get('window').height / 3.15,
-<<<<<<< HEAD
-=======
     marginTop: -10
->>>>>>> finished styling on home screen to scale to different screen sizes
   },
   attendHeader: {
     color: colors.white,
@@ -81,10 +78,7 @@ export const styles = StyleSheet.create({
     fontSize: typography.norwester16,
     fontWeight: 'bold',
     marginLeft: 3,
-<<<<<<< HEAD
-=======
     marginBottom: 8
->>>>>>> finished styling on home screen to scale to different screen sizes
   },
   attendeeScrollView: {
     flexDirection: 'row',

js/scenes/Surveys/Surveys.js

@@ -1,15 +1,74 @@
 import React from 'react';
 import {
+  Image,
   View,
+  ScrollView,
   Text
 } from 'react-native';
+import RadioButton from '../../components/RadioButton';
+import ProgressBar from '../../components/ProgressBar';
+import LeftNavArrow from '../../components/LeftNavArrow';
+import RightNavArrow from '../../components/RightNavArrow';
 import { styles } from './styles';
 
-const Surveys = () => {
+const Surveys = ({
+  n, 
+  dispatchAnswer, 
+  finishPopUp,
+  question, 
+  questions, 
+  nextQuestion,
+  previousQuestion,
+  selectedValue 
+}) => {
   return (
-    <View>
-      <Text>This is the surveys scene.</Text>
-    </View>
+    <ScrollView style={styles.sceneContain}>
+      <View style={styles.background}>
+        {(question) ?
+          <View>
+            <Image
+              style={styles.targetIcon}
+              source={require('../../assets/icons/target.png')}
+            />
+            <Text style={styles.titleQuestion}>
+              {questions.indexOf(question) + 1}. {question.question}
+            </Text>
+            <View style={styles.questionsContainer}>
+              {question.answers.map(answer => (
+                <View key={answer.answer}>
+                  <RadioButton
+                    isSelected={answer.value === selectedValue}
+                    onPress={() => dispatchAnswer(question.question, question.quality, answer)}
+                    value={answer.value}
+                  >
+                    <View>
+                      <Text style={(answer.subtext) ? styles.questionsTextWSub : styles.questionsText}>{answer.answer}</Text>
+                      {(answer.subtext) && <Text style={styles.questionSubtext}>{answer.subtext}</Text>}
+                    </View>
+                  </RadioButton>
+                </View>
+              ))}
+            </View>
+          </View>
+          : null}
+        <View style={styles.progressContainer}>
+          {(questions.indexOf(question) === 0)
+            ? null
+            : <LeftNavArrow navAction={() => previousQuestion()} />}
+          <ProgressBar
+            overlayText={`${questions.indexOf(question) + 1}/${questions.length}`}
+            completePerc={questions.indexOf(question) + 1}
+            totalSteps={questions.length}
+          />
+          <RightNavArrow
+            navAction={(questions.indexOf(question) >= questions.length - 1)
+              ? () => finishPopUp()
+              : () => nextQuestion()
+            } 
+          />
+        </View>
+      </View>
+    </ScrollView>
   )
 }