Merge pull request #109 from ctcusc/jf-alert-modal

Jf alert modal
ctcusc · Apr 6, 2020 · 0129a82 · 0129a82
2 parents 22efd12 + f5afbbf
commit 0129a82
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 56 deletions.
diff --git a/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx b/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

diff --git a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx b/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>
   )
 }