Merge branch 'master' into yq-record-save-video

src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx

@@ -4,7 +4,8 @@ import {
   View,
   FlatList,
   TouchableHighlight,
-  TouchableOpacity
+  TouchableOpacity,
+  Alert
 } from 'react-native'
 import { BASE_PATH } from 'react-native-dotenv'
 import styles from './styles'
@@ -24,7 +25,7 @@ interface Props {
 export default function SnippetSelectionScreen(props: Props) {
   const [text, setText] = useState('A great video requires at least 3 - 4 clips')
   const [snippetState, setSnippetState] = useState<Array<Snippet>>([])
-  const [selectedSnippetCount, setSelectedSnippetCount] = useState<number>(1)
+  const [nextSnippetIndex, setNextSnippetIndex] = useState<number>(2)
 
   useEffect(() => {
     fetch(`${BASE_PATH}/api/user/questions`)
@@ -39,6 +40,10 @@ export default function SnippetSelectionScreen(props: Props) {
               orderInList: 0,
               text: data[i]['text']
             }
+            if (i == 0) {
+              item.isSelected = true
+              item.orderInList = 1
+            }
             initialSnippetState.push(item)
           }
         }
@@ -52,8 +57,18 @@ export default function SnippetSelectionScreen(props: Props) {
 
   function updateSnippetState(item: Snippet) {
     const modifiedQuestionState = snippetState
+    // if question is the intro, don't let the user deselect it.
+    if (item.id == 1) {
+      Alert.alert(
+        'Warning',
+        'You must include your introduction as the first snippet',
+        [
+          {text: 'Okay', style: 'cancel'}
+        ]
+      )
+    }
     // the question is selected previously, remove it from the list and update the order of other items
-    if(modifiedQuestionState[item.id-1].isSelected){
+    else if(modifiedQuestionState[item.id-1].isSelected){
       const preOrder = item.orderInList
       for(let i = 0; i < modifiedQuestionState.length; i++){
         // move up question in list
@@ -67,38 +82,38 @@ export default function SnippetSelectionScreen(props: Props) {
         }
         // snippet is newly selected, add to list
         setSnippetState(modifiedQuestionState)
-        setSelectedSnippetCount(selectedSnippetCount-1)
+        setNextSnippetIndex(nextSnippetIndex-1)
       }
     } 
     // newly selected question
     else{
       for(let i = 0; i < modifiedQuestionState.length; i++){
         if(i == (item.id-1)){
           modifiedQuestionState[i].isSelected = true
-          modifiedQuestionState[i].orderInList = selectedSnippetCount
+          modifiedQuestionState[i].orderInList = nextSnippetIndex
         }
         setSnippetState(modifiedQuestionState)
-        setSelectedSnippetCount(selectedSnippetCount+1)
+        setNextSnippetIndex(nextSnippetIndex+1)
       }
     }
   }
 
   function updateBottomText(item: Snippet){
     if(item.isSelected){
-      if(selectedSnippetCount == 0){
+      if(nextSnippetIndex == 0){
         setText('A great video requires at least 3 - 4 clips')
-      } else if(selectedSnippetCount == 1){
-        setText((selectedSnippetCount) + ' snippet selected')
+      } else if(nextSnippetIndex == 1){
+        setText((nextSnippetIndex) + ' snippet selected')
       } else{
-        setText((selectedSnippetCount) + ' snippets selected')
+        setText((nextSnippetIndex) + ' snippets selected')
       }
     } else{
-      if(selectedSnippetCount == 2){
+      if(nextSnippetIndex == 2){
         setText('A great video requires at least 3 - 4 clips')
-      } else if(selectedSnippetCount == 3){
-        setText(selectedSnippetCount-2 + ' snippet selected')
+      } else if(nextSnippetIndex == 3){
+        setText(nextSnippetIndex-2 + ' snippet selected')
       } else{
-        setText(selectedSnippetCount-2 + ' snippets selected')
+        setText(nextSnippetIndex-2 + ' snippets selected')
       }
     }
   }
@@ -135,8 +150,18 @@ export default function SnippetSelectionScreen(props: Props) {
       <View style={styles.createVideo}>
         <Text>{text}</Text>
         <TouchableOpacity
-          disabled={selectedSnippetCount > 3 ? false : true}
-          style={selectedSnippetCount > 3 ? styles.pinkButtonAbled : styles.pinkButton}
+          onPress={ () => {
+            if(nextSnippetIndex < 4) {
+              Alert.alert(
+                'Warning',
+                'You should select at least 3 snippets before creating your video',
+                [
+                  {text: 'Okay', style: 'cancel'}
+                ]
+              )
+            }
+          }}
+          style={nextSnippetIndex > 3 ? styles.pinkButtonAbled : styles.pinkButton}
         >
           <Text style={styles.buttontext}>
             CREATE VIDEO

src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx

@@ -6,8 +6,8 @@ import {
   FlatList,
   TouchableOpacity,
   TouchableHighlight,
+  Alert,
 } from 'react-native'
-import Modal from 'react-native-modal'
 import styles from './styles'
 import { NavigationScreenProp, NavigationState } from 'react-navigation'
 import { BASE_PATH } from 'react-native-dotenv'
@@ -49,7 +49,29 @@ export default function QuestionsScreen(props: Props) {
           <TouchableHighlight
             onPress={() => {
               if(item.Answered) {
-                setModalVisibility(true)
+                Alert.alert(
+                  'Edit your Answer clip',
+                  'If you want to change your clip, do it here!',
+                  [
+                    {text: 'View Answer'},
+                    {text: 'Re-record Answer', 
+                      onPress: () => {
+                        Alert.alert(
+                          'Are you sure you want to re-record your clip?',
+                          'You\'ll lose your old clip',
+                          [
+                            {text: 'Re-record',
+                              onPress: () => {
+                                push('Record', {question: item.text})
+                              }
+                            },
+                            {text: 'Cancel', style: 'cancel'}
+                          ]
+                        )
+                      }},
+                    {text: 'Cancel', style: 'cancel'}
+                  ]
+                )
               } else {
                 push('Record', {question: item.text})
               }
@@ -67,44 +89,6 @@ export default function QuestionsScreen(props: Props) {
         extraData={selected}
         showsVerticalScrollIndicator={false}
       />
-
-      <Modal
-        isVisible={modalVisibility}
-        onRequestClose={() => {
-          setModalVisibility(false)
-        } }
-        backdropOpacity={0.2}
-
-        animationIn="zoomIn"
-        animationOut="zoomOut"
-        animationInTiming={600}
-        animationOutTiming={600}
-        backdropTransitionInTiming={600}
-        backdropTransitionOutTiming={600}>
-        <View style={styles.modalLayout}>
-          <View style={styles.topModalBorder}>
-            <TouchableOpacity style={styles.topModal}>
-              <Text style={styles.modalContent}>view question</Text>
-            </TouchableOpacity>
-          </View>
-
-          <View style={styles.middleModalBorder}>
-            <TouchableOpacity style={styles.middleModal}>
-              <Text style={styles.modalContent}>re-record question</Text>
-            </TouchableOpacity>
-          </View>
-
-
-          <View style={styles.bottomModalBorder}>
-            <TouchableOpacity style={styles.bottomModal}
-              onPress={() => {
-                setModalVisibility(false)
-              }}>
-              <Text style={styles.closeTitle}>close</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </Modal>
     </View>
   )
 }

src/screens/Onboarding/FinalStepScreen/FinalStepScreen.tsx

@@ -23,6 +23,8 @@ export default function FinalStepScreen(props: Props) {
         <Text style={styles.content}>
             Explain what you do in one minute or less
         </Text>
+      </View>
+      <View style={styles.header}>
         <Image resizeMode='contain' source={require('../../../../assets/images/finalscreen.png')} />
       </View>
       <View style={styles.footer}>

src/screens/Onboarding/FinalStepScreen/styles.tsx

@@ -4,17 +4,16 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#FFFFFF',
+    justifyContent: 'center'
   },
 
   header: {
-    flex: 2,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
   },
 
   footer: {
-    flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
@@ -29,7 +28,6 @@ const styles = StyleSheet.create({
     width: 301,
     height: 71,
     textAlign: 'center',
-    marginTop: '40%'
   },
 
   content: {
@@ -41,7 +39,6 @@ const styles = StyleSheet.create({
     color: 'black',
     height: 111,
     width: 281,
-    marginBottom: '10%',
   }, 
 
   button: {

src/screens/Onboarding/StepScreens/StepScreens.tsx

@@ -14,38 +14,36 @@ import styles from './styles'
 export default function StepScreens(props: Props) {
   const {navigate} = props.navigation
   const [step, setStep] = useState(2)
-  const [text, setText] = useState('Select questions to answer')
+  const [text, setText] = useState('Select questions to answer\n')
   const [title, setTitle] = useState('Step 1')
-  const [textStyle, setTextStyle] = useState(styles.textOne)
   const [imageSource, setImageSource] = useState(require('../../../../assets/images/step1.png'))
   const [imageSource2, setImageSource2] = useState(require('../../../../assets/images/ellipses1.png'))
 
   return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <Text style={[styles.text, textStyle]}>{text}</Text>
-        <Image resizeMode='contain' source={imageSource} />
+        <Text style={styles.text}>{text}</Text>
+      </View>
+      <View style={styles.header}>
+        <Image resizeMode='contain' source={imageSource}/>
       </View>
       <View style={styles.footer}>
         <TouchableOpacity 
           onPress={() => {
             setStep(step + 1)
             if(step == 2) {
-              setTextStyle(styles.textTwo)
               setText('Record your responses as video snippets')
               setTitle('Step 2')
               setImageSource(require('../../../../assets/images/step2.png'))
               setImageSource2(require('../../../../assets/images/ellipses2.png'))
             }
             if(step == 3) {
-              setTextStyle(styles.textThree)
               setText('Choose snippets to include in your video')
               setTitle('Step 3')
               setImageSource(require('../../../../assets/images/step3.png'))
               setImageSource2(require('../../../../assets/images/ellipses3.png'))
             }
             if(step == 4) {
-              setTextStyle(styles.textFour)
               setText('Create + publish your video to Gladeo\'s Youtube')
               setTitle('Step 4')
               setImageSource(require('../../../../assets/images/step4.png'))

src/screens/Onboarding/StepScreens/styles.tsx

@@ -4,19 +4,21 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: 'white',
+    justifyContent: 'space-evenly',
+    paddingTop: '20%'
   },
 
   header: {
-    flex: 2,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center'
+
   },
 
   footer: {
-    flex: 1,
     flexDirection: 'column',
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center',
   },
   text: {
@@ -27,33 +29,9 @@ const styles = StyleSheet.create({
     lineHeight: 37,
     textAlign: 'center',
     color: 'black',
-    marginTop: '40%',
+    width: 300
   },
 
-  textOne: {
-    marginBottom: '17%',
-    height: 74,
-    width: 256,
-  }, 
-
-  textTwo: {
-    marginBottom: '13%',
-    height: 111,
-    width: 256,
-  }, 
-
-  textThree: {
-    marginBottom: '12%',
-    height: 111,
-    width: 270,
-  }, 
-
-  textFour: {
-    marginBottom: '10%',
-    height: 111,
-    width: 307,
-  }, 
-
   button: {
     width: 179,
     height: 50,
@@ -68,7 +46,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: '#E5186E',
     textAlign: 'center',
-  }
+  },
 })
 
 export default styles

src/shared_components/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {
+  Text,
+  View,
+} from 'react-native'
+import styles from './styles'
+
+interface Props {
+  message: string,
+  visible: boolean,
+}
+
+export default function PinkButton (props: Props) {
+  if(props.visible) {
+    return (
+      <View>
+        <Text
+          style={styles.text}>
+                      Error: {props.message}
+        </Text>
+      </View>
+    )
+  }
+  return null
+}