From 37622306e1a54016b5f45039738049911aab3e4c Mon Sep 17 00:00:00 2001
From: Xiaoyang Qiao <xiaoyanq@usc.edu>
Date: Mon, 20 Apr 2020 17:25:30 -0700
Subject: [PATCH 1/8] implement redux to help connect videos to questions

---
 package.json                                  |   2 +-
 src/.DS_Store                                 | Bin 6148 -> 6148 bytes
 src/navigation/MainTabNavigator.tsx           |   8 +-
 src/redux/reducers/index.js                   |  74 ++++++-
 .../QuestionsScreen/QuestionsScreen.tsx       |  23 ++-
 .../RecordStack/RecordScreen/RecordScreen.tsx | 180 ++++++++++--------
 .../Main/RecordStack/RecordScreen/styles.tsx  |  19 +-
 .../RecordStack/ViewScreen/ViewScreen.tsx     | 133 +++++++++++++
 .../Main/RecordStack/ViewScreen/styles.tsx    | 134 +++++++++++++
 yarn.lock                                     |   8 +-
 10 files changed, 485 insertions(+), 96 deletions(-)
 create mode 100644 src/screens/Main/RecordStack/ViewScreen/ViewScreen.tsx
 create mode 100644 src/screens/Main/RecordStack/ViewScreen/styles.tsx

diff --git a/package.json b/package.json
index 422f742f..79b7a8b5 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "dotenv": "^8.2.0",
     "expo": "^36.0.0",
     "expo-asset": "~8.0.0",
-    "expo-av": "^8.1.0",
+    "expo-av": "~8.0.0",
     "expo-camera": "~8.0.0",
     "expo-constants": "~8.0.0",
     "expo-font": "~8.0.0",
diff --git a/src/.DS_Store b/src/.DS_Store
index 7f1978eeac178d4f93cb4f7d0c6354a7c5c254a6..888c1f1304d34fcc26afc8c969ae4a398036c9c7 100644
GIT binary patch
delta 18
acmZoMXfc?uY~#i-_K6Mro4GlD@&f=#kOxcv

delta 20
ccmZoMXfc?ujFEBU#xVAY4P2YqIsWnk08YaPNdN!<

diff --git a/src/navigation/MainTabNavigator.tsx b/src/navigation/MainTabNavigator.tsx
index 576e3097..b876ca7b 100644
--- a/src/navigation/MainTabNavigator.tsx
+++ b/src/navigation/MainTabNavigator.tsx
@@ -10,6 +10,7 @@ import UploadingVideoScreen from '../screens/Main/EditStack/UploadingVideoScreen
 import RecordScreen from '../screens/Main/RecordStack/RecordScreen/RecordScreen'
 import SnippetSelectionScreen from '../screens/Main/EditStack/SnippetSelection/SnippetSelection'
 import Colors from '../constants/Colors'
+import ViewScreen from '../screens/Main/RecordStack/ViewScreen/ViewScreen'
 
 // Tab #1 - Question Selection + Recording
 const RecordStack = createStackNavigator(
@@ -19,7 +20,12 @@ const RecordStack = createStackNavigator(
       screen: RecordScreen,
       navigationOptions: {
         headerShown: false,
-        
+      }
+    },
+    View: {
+      screen: ViewScreen,
+      navigationOptions: {
+        headerShown: false,
       }
     }
   },
diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
index c5621db2..4aac2bd1 100644
--- a/src/redux/reducers/index.js
+++ b/src/redux/reducers/index.js
@@ -1,15 +1,75 @@
 const initialState = {
-  videos: []
+  videos: [{
+    questionId: 1,
+    uri: null,
+    questionText: null,
+  },
+  {
+    questionId: 2,
+    uri: null,
+    questionText: null,
+  },
+  {
+    questionId: 3,
+    uri: null,
+    questionText: null,
+  },
+  {
+    questionId: 4,
+    uri: null,
+    questionText: null,
+  },{
+    questionId: 5,
+    uri: null,
+    questionText: null,
+  },
+  {
+    questionId: 6,
+    uri: null,
+    questionText: null,
+  },
+  {
+    questionId: 7,
+    uri: null,
+    questionText: null,
+  },
+  {
+    questionId: 8,
+    uri: null,
+    questionText: null,
+  },{
+    questionId: 9,
+    uri: null,
+    questionText: null,
+  },
+  {
+    questionId: 10,
+    uri: null,
+    questionText: null,
+  }]
 }
-  
+ 
 function rootReducer(state = initialState, action) {
   if (action.type === 'SAVE_VIDEO') {
-    return {
-      ...state,
-      videos: state.videos.concat(action.payload)
-    }
+ 
+    if (state.videos[action.payload.questionId])
+      return {
+        ...state,
+        videos: state.videos.map((videoObj, index) => {
+          // found: update video
+          if (index === action.questionId-1) {
+            return {
+              ...videoObj,
+              ...action.payload // ...action.videoObj
+            }
+          }
+          // not the video we are looking for continue
+          return videoObj
+        })
+      }
   }
+ 
   return state
 }
-  
+ 
 export default rootReducer
\ No newline at end of file
diff --git a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
index 2cc9852e..3d705802 100644
--- a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
+++ b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
@@ -26,7 +26,8 @@ interface Props {
 }
 
 /* AKA: Q&A screen */
-export default function QuestionsScreen(props: Props) {
+function QuestionsScreen(props: Props) {
+  // const [videos, setVideos] = useState(null)
   const [selected, setSelected] = useState<number | null>(null)
   const [questions, setQuestions] = useState<Array<Question>>([])
   const {push} = props.navigation
@@ -34,7 +35,7 @@ export default function QuestionsScreen(props: Props) {
 
   useEffect(() => {
     
-    fetch(`${BASE_PATH}/api/user/questions`)
+    fetch('https://cfa83314.ngrok.io/api/user/questions')
       .then(res => res.json())
       .then(data => {
         setQuestions(data)
@@ -57,7 +58,11 @@ export default function QuestionsScreen(props: Props) {
                   'Edit your Answer clip',
                   'If you want to change your clip, do it here!',
                   [
-                    {text: 'View Answer'},
+                    {text: 'View Answer', 
+                      onPress: () => {
+                        push('View', {question: videos[item.ID].questionText, uri: videos[item.ID].uri})
+                      }
+                    },
                     {text: 'Re-record Answer', 
                       onPress: () => {
                         Alert.alert(
@@ -66,7 +71,7 @@ export default function QuestionsScreen(props: Props) {
                           [
                             {text: 'Re-record',
                               onPress: () => {
-                                push('Record', {question: item.text})
+                                push('Record', {question: item.text, questionID: item.ID})
                               }
                             },
                             {text: 'Cancel', style: 'cancel'}
@@ -77,7 +82,7 @@ export default function QuestionsScreen(props: Props) {
                   ]
                 )
               } else {
-                push('Record', {question: item.text})
+                push('Record', {question: item.text, questionID: item.ID})
               }
               setSelected(item.ID)
             }}
@@ -107,3 +112,11 @@ QuestionsScreen.navigationOptions = {
   ),
   headerStyle: {height: 140},   
 }
+
+const mapStateToProps = state => {
+  return {
+    videos: state.videos
+  }
+}
+
+export default connect(mapStateToProps)(QuestionsScreen)
\ No newline at end of file
diff --git a/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx b/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
index 8db38f10..d0993bf0 100644
--- a/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
+++ b/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
@@ -1,32 +1,43 @@
 import React, { useState, useEffect } from 'react'
 import { Text, View, TouchableOpacity, Image, StatusBar} from 'react-native'
 import { Camera } from 'expo-camera'
-import { Video } from 'expo-av'
-
 import styles from './styles'
 import * as Permissions from 'expo-permissions'
 import * as MediaLibrary from 'expo-media-library'
+import { Video } from 'expo-av'
 import { NavigationScreenProp, NavigationState, NavigationParams } from 'react-navigation'
+import { connect } from 'react-redux'
+import { saveVideo } from '../../../../redux/actions/index'
 
 interface Props {
+  dispatch: any,
+  saveVideo: any,
   question: string,
+  questionID: any,
   navigation: NavigationScreenProp<NavigationState, NavigationParams>,
 }
 
-export default function RecordScreen(props: Props) {
+function RecordScreen(props: Props) {
   const {goBack} = props.navigation
   const question = props.navigation.state.params.question
+  const questionID = props.navigation.state.params.questionID
   const [hasPermission, setHasPermission] = useState(false)
   const [camera, setCamera] = useState()
   const [isRecording, setIsRecording] = useState(false)
   const [cameraDirection, setCameraDirection] = useState(Camera.Constants.Type.front)
   const [video, setVideo] = useState(null)
 
-  async function saveVideo(){
+  async function save(){
+    console.log(video.uri)
     const asset = await MediaLibrary.createAssetAsync(video.uri)
     if (asset) {
       setVideo(null)
     }
+
+    // let key = "video_"
+    // key += questionID
+    props.dispatch(saveVideo({questionID: questionID, uri: video.uri, questionText: question}))
+    goBack()
   }
 
   async function stopRecord(){
@@ -51,10 +62,10 @@ export default function RecordScreen(props: Props) {
   }
 
   useEffect(() => {
-    
     (async () => {
-      const { status } = await Permissions.getAsync(Permissions.CAMERA_ROLL, Permissions.CAMERA, Permissions.AUDIO_RECORDING)
-      setHasPermission(status === 'granted')
+      const { status: cameraPermission } = await Camera.requestPermissionsAsync()
+      const { status: cameraRollPermission } = await Permissions.askAsync(Permissions.CAMERA_ROLL)
+      setHasPermission(cameraPermission === 'granted' && cameraRollPermission === 'granted')
     })()
   }, [])
 
@@ -64,73 +75,92 @@ export default function RecordScreen(props: Props) {
   if (hasPermission === false) {
     return <Text>No access to camera</Text>
   }
-  return (
-  // <Camera 
-  //   style={styles.camera}
-  //   ref={(ref: Camera) => {
-  //     setCamera(ref)
-  //   }}
-  //   type={cameraDirection}
-  // >
-  //   <StatusBar hidden/>
-  //   <View style={styles.bottomSection}>
-  //     {video && (
-  //       <TouchableOpacity
-  //         onPress={()=>saveVideo()}
-  //         style={styles.saveButton}
-  //       >
-  //         <Text style={styles.saveText}>save</Text>
-  //       </TouchableOpacity>
-  //     )}
-  //   </View>
-      
-  //   {!video && (<View style={styles.middleSection}>
-    
-  //     <View style={styles.overlay}>
-  //       <Text style={styles.infoText}>Create a 3-4 Minute Video</Text>
-  //     </View>
-  //     <View style={styles.overlay}>
-  //       <Text style={styles.question}>{question}</Text>
-  //     </View>
 
-  //   </View>)}
-     
-  //   <View style={styles.topSection}>
-  //     {!video && (<TouchableOpacity
-  //       onPress={() => goBack()}
-  //       style={styles.whiteButtonOutline}
-  //     >
-  //       <View style={styles.whiteButton}>
-  //       </View> 
-  //     </TouchableOpacity>)}
-       
-  //     {!video && (<TouchableOpacity
-  //       onPress={()=>toogleRecord()}
-  //       style={styles.recordOutline}
-  //     >
-  //       <View style={isRecording ? styles.isRecordingButton : styles.recordButton}>
-  //       </View>
-  //     </TouchableOpacity>)}
-       
-  //     {!video && (<TouchableOpacity 
-  //       onPress={() => {
-  //         setCameraDirection(cameraDirection === Camera.Constants.Type.front ? Camera.Constants.Type.back : Camera.Constants.Type.front)
-  //       }}
-  //     >
-  //       <Image style={styles.flipCamera} resizeMode='contain' source={require('../../../../../assets/images/flip_camera.png')} />
-  //     </TouchableOpacity>)}
-  //   </View>
+  if(video){
+    return(
+      <View style={styles.videoPlay}>
+        <Video
+          source={{ uri: video.uri }}
+          rate={1.0}
+          volume={1.0}
+          isMuted={false}
+          resizeMode="cover"
+          shouldPlay={true}
+          isLooping={true}
+          style={{ width: '100%', height: '100%' }}
+        />
+        <View style={ styles.videoBottom }>
+          <TouchableOpacity
+            onPress={()=>save()}
+            style={styles.saveButton}
+          >
+            <Text style={styles.saveText}>save</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    )
+  } else if(!video){
+    return (
+      <Camera 
+        style={styles.camera}
+        ref={(ref: Camera) => {
+          setCamera(ref)
+        }}
+        type={cameraDirection}
+      >
+        <StatusBar hidden/>
+        <View style={styles.bottomSection}>
+        </View>
+        
+        <View style={styles.middleSection}>
+          <View style={styles.overlay}>
+            <Text style={styles.infoText}>Create a 3-4 Minute Video</Text>
+          </View>
+          <View style={styles.overlay}>
+            <Text style={styles.question}>{question}</Text>
+          </View>
+        </View>
+      
+        <View style={styles.topSection}>
+          <TouchableOpacity
+            onPress={() => goBack()}
+            style={styles.whiteButtonOutline}
+          >
+            <View style={styles.whiteButton}>
+            </View> 
+          </TouchableOpacity>
+        
+          <TouchableOpacity
+            onPress={()=>toogleRecord()}
+            style={styles.recordOutline}
+          >
+            <View style={isRecording ? styles.isRecordingButton : styles.recordButton}>
+            </View>
+          </TouchableOpacity>
         
-    // </Camera>
-    <Video
-      source={{ uri: 'file:///storage/emulated/0/DCIM/f6337ecd-6286-4fbb-b047-9c368b80b381.mp4' }}
-      rate={1.0}
-      volume={1.0}
-      isMuted={false}
-      resizeMode="cover"
-      shouldPlay
-      isLooping
-      style={{ width: 300, height: 300 }}
-    />
-  )
-}
\ No newline at end of file
+          <TouchableOpacity 
+            onPress={() => {
+              setCameraDirection(cameraDirection === Camera.Constants.Type.front ? Camera.Constants.Type.back : Camera.Constants.Type.front)
+            }}
+          >
+            <Image style={styles.flipCamera} resizeMode='contain' source={require('../../../../../assets/images/flip_camera.png')} />
+          </TouchableOpacity>
+        </View>
+      </Camera>
+    )
+  }
+}
+
+// const mapDispatchToProps = dispatch => {
+//   return {
+//     saveVideo: (uri: string, question: string) => {
+//       dispatch(saveVideo({
+//         questionText: question,
+//         uri: uri
+//       }
+//       ))
+//     }
+//   }
+// }
+
+export default connect()(RecordScreen)
\ No newline at end of file
diff --git a/src/screens/Main/RecordStack/RecordScreen/styles.tsx b/src/screens/Main/RecordStack/RecordScreen/styles.tsx
index 59142103..2ca86b0e 100644
--- a/src/screens/Main/RecordStack/RecordScreen/styles.tsx
+++ b/src/screens/Main/RecordStack/RecordScreen/styles.tsx
@@ -98,14 +98,18 @@ const styles = StyleSheet.create({
   bottomSection: {
     flex: 1,
   },
+  videoBottom: {
+    flex: 1,
+    position: 'absolute',
+  },
   saveButton: {
     backgroundColor: '#E5186E',
     transform: [ { rotateZ: '270deg'}],
     width: 79,
     height: 48,
     justifyContent: 'center',
-    left: '75%',
-    top: '15%',
+    left: '30%',
+    top: '1500%',
     borderRadius: 24,
     right: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.25)
   },
@@ -114,7 +118,16 @@ const styles = StyleSheet.create({
     color: '#fff', 
     fontSize: 18,
     lineHeight: 21,
-    fontFamily: 'roboto-regular'
+    fontFamily: 'roboto-regular',
+    transform: [{
+      rotate: '-180deg'
+    }],
+  },
+  videoPlay: {
+    flex: 1,
+    transform: [{
+      rotate: '-180deg'
+    }],
   }
 })
 
diff --git a/src/screens/Main/RecordStack/ViewScreen/ViewScreen.tsx b/src/screens/Main/RecordStack/ViewScreen/ViewScreen.tsx
new file mode 100644
index 00000000..f58ce0a9
--- /dev/null
+++ b/src/screens/Main/RecordStack/ViewScreen/ViewScreen.tsx
@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from 'react'
+import { Text, View, TouchableOpacity, Image, StatusBar} from 'react-native'
+import { Camera } from 'expo-camera'
+import styles from './styles'
+import * as Permissions from 'expo-permissions'
+import * as MediaLibrary from 'expo-media-library'
+import { Video } from 'expo-av'
+import { NavigationScreenProp, NavigationState, NavigationParams } from 'react-navigation'
+import { connect } from 'react-redux'
+import { saveVideo } from '../../../../redux/actions/index'
+
+interface Props {
+  question: string,
+  uri: string,
+  navigation: NavigationScreenProp<NavigationState, NavigationParams>,
+}
+
+export default function ViewScreen(props: Props) {
+  const {goBack} = props.navigation
+  const question = props.navigation.state.params.question
+  const uri = props.navigation.state.params.uri
+  //   const questionID = props.navigation.state.params.questionID
+  const [hasPermission, setHasPermission] = useState(false)
+  const [camera, setCamera] = useState()
+  const [isRecording, setIsRecording] = useState(false)
+  const [cameraDirection, setCameraDirection] = useState(Camera.Constants.Type.front)
+  const [video, setVideo] = useState(null)
+
+  //   async function save(){
+  //     console.log(video.uri)
+  //     const asset = await MediaLibrary.createAssetAsync(video.uri)
+  //     if (asset) {
+  //       setVideo(null)
+  //     }
+
+  //     let key = "video_"
+  //     key += questionID
+  //     props.dispatch(saveVideo({key: {video: video.uri, question: question, questionID: questionID}}))
+  //     goBack()
+  //   }
+
+  //   async function stopRecord(){
+  //     setIsRecording(false)
+  //     camera.stopRecording()
+  //   }
+
+  //   async function startRecord(){
+  //     if (camera) {
+  //       setIsRecording(true)
+  //       const data = await camera.recordAsync()
+  //       setVideo(data)
+  //     }
+  //   }
+
+  //   async function toogleRecord(){
+  //     if (isRecording) {
+  //       stopRecord()
+  //     } else {
+  //       startRecord()
+  //     }
+  //   }
+
+  //   useEffect(() => {
+  //     (async () => {
+  //       const { status: cameraPermission } = await Camera.requestPermissionsAsync()
+  //       const { status: cameraRollPermission } = await Permissions.askAsync(Permissions.CAMERA_ROLL)
+  //       setHasPermission(cameraPermission === 'granted' && cameraRollPermission === 'granted')
+  //     })()
+  //   }, [])
+
+  //   if (hasPermission === null) {
+  //     return <View />
+  //   }
+  //   if (hasPermission === false) {
+  //     return <Text>No access to camera</Text>
+  //   }
+
+
+  return(
+    <View style={styles.videoPlay}>
+      <Video
+        source={{ uri: uri }}
+        rate={1.0}
+        volume={1.0}
+        isMuted={false}
+        resizeMode="cover"
+        shouldPlay={true}
+        isLooping={true}
+        style={{ width: '100%', height: '100%' }}
+      />
+      <View style={ styles.videoBottom }>
+        {/* <TouchableOpacity
+            onPress={()=>save()}
+            style={styles.saveButton}
+          >
+            <Text style={styles.saveText}>save</Text>
+          </TouchableOpacity> */}
+      </View>
+
+      <View style={styles.middleSection}>
+        {/* <View style={styles.overlay}>
+            <Text style={styles.infoText}>Create a 3-4 Minute Video</Text>
+          </View> */}
+        <View style={styles.overlay}>
+          <Text style={styles.question}>{question}</Text>
+        </View>
+      </View>
+
+      <View style={styles.topSection}>
+        <TouchableOpacity
+          onPress={() => goBack()}
+          style={styles.whiteButtonOutline}
+        >
+          <View style={styles.whiteButton}>
+          </View> 
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+// const mapDispatchToProps = dispatch => {
+//   return {
+//     saveVideo: (uri: string, question: string) => {
+//       dispatch(saveVideo({
+//         questionText: question,
+//         uri: uri
+//       }
+//       ))
+//     }
+//   }
+// }
+
+// export default connect()(ViewScreen)
\ No newline at end of file
diff --git a/src/screens/Main/RecordStack/ViewScreen/styles.tsx b/src/screens/Main/RecordStack/ViewScreen/styles.tsx
new file mode 100644
index 00000000..2ca86b0e
--- /dev/null
+++ b/src/screens/Main/RecordStack/ViewScreen/styles.tsx
@@ -0,0 +1,134 @@
+import { StyleSheet, Dimensions } from 'react-native'
+
+const styles = StyleSheet.create({
+  camera: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    backgroundColor: '#555',
+  },
+  topSection: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: '7%',
+    alignItems: 'center',
+  },
+  recordButton: {
+    backgroundColor: '#FF3B30',
+    width: 40,
+    height: 40,
+    borderRadius: 48,
+    alignSelf: 'center',
+  },
+  isRecordingButton: {
+    backgroundColor: '#FF3B30',
+    width: 16,
+    height: 16,
+    borderRadius: 4,
+    alignSelf: 'center',
+  },
+  recordOutline: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 53,
+    height: 53,
+    borderRadius: 58,
+    borderWidth: 5,
+    borderColor: '#fff',
+  },
+  whiteButton: {
+    backgroundColor: '#fff',
+    width: 30,
+    height: 30,
+    borderRadius: 30,
+    alignSelf: 'center',
+  },
+  whiteButtonOutline: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 44,
+    height: 44,
+    borderRadius: 44,
+    borderWidth: 4,
+    borderColor: '#fff',
+  },
+  middleSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 4,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    alignSelf: 'center',
+  },
+  overlay: {
+    position: 'absolute',
+  },
+  infoText: {
+    backgroundColor: 'rgba(51,51,51,0.4)',
+    color: '#fff',
+    paddingVertical: 7,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+    fontSize: 16,
+    textAlignVertical: 'center',
+    textAlign: 'center',
+    transform: [ { rotateZ: '270deg'}],
+    position: 'absolute',
+    left: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.35),
+  },
+  question: {
+    backgroundColor: 'rgba(51,51,51,0.4)',
+    color: '#fff',
+    paddingVertical: 7,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+    fontSize: 16,
+    textAlignVertical: 'center',
+    textAlign: 'center',
+    transform: [ { rotateZ: '270deg'}],
+    position: 'absolute',
+    right: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.25), // funky but it works
+    fontFamily: 'roboto-regular',
+  },
+  bottomSection: {
+    flex: 1,
+  },
+  videoBottom: {
+    flex: 1,
+    position: 'absolute',
+  },
+  saveButton: {
+    backgroundColor: '#E5186E',
+    transform: [ { rotateZ: '270deg'}],
+    width: 79,
+    height: 48,
+    justifyContent: 'center',
+    left: '30%',
+    top: '1500%',
+    borderRadius: 24,
+    right: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.25)
+  },
+  saveText: {
+    textAlign: 'center', 
+    color: '#fff', 
+    fontSize: 18,
+    lineHeight: 21,
+    fontFamily: 'roboto-regular',
+    transform: [{
+      rotate: '-180deg'
+    }],
+  },
+  videoPlay: {
+    flex: 1,
+    transform: [{
+      rotate: '-180deg'
+    }],
+  }
+})
+
+export default styles
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 0b8b7d7c..73c11273 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4128,10 +4128,10 @@ expo-asset@~8.0.0:
     path-browserify "^1.0.0"
     url-parse "^1.4.4"
 
-expo-av@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-8.1.0.tgz#376e2a821168cd83e997c6dd84350fab6b293f10"
-  integrity sha512-owWxOCyK+dPyT3pF4rDOf2W8Sn8LSEvfw1HvU9xM0wzH7xF0bw3Zs3wcXxvtfhnXAZ5dCDQfvZI5cXk+lml+IQ==
+expo-av@~8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-8.0.0.tgz#fc892a0e4ff7e1eff630002e0652da3125d18113"
+  integrity sha512-n1qOXi0jk6stY4q5RZqmQS90Rg9HDDGWE7EfLABhcyUA1EGJJbrupjpn75sxzNYMksad+oiGp0NULTHlKfa01A==
   dependencies:
     lodash "^4.17.15"
     nullthrows "^1.1.0"

From 28073240f105e81c04ca0e171a4182c91a49ad19 Mon Sep 17 00:00:00 2001
From: Xiaoyang Qiao <xiaoyanq@usc.edu>
Date: Mon, 20 Apr 2020 18:19:47 -0700
Subject: [PATCH 2/8] create ViewScreen

---
 .../QuestionsScreen/QuestionsScreen.tsx       |  4 +-
 .../RecordStack/ViewScreen/ViewScreen.tsx     | 89 +------------------
 .../Main/RecordStack/ViewScreen/styles.tsx    | 75 ++--------------
 3 files changed, 14 insertions(+), 154 deletions(-)

diff --git a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
index 3d705802..bffc1742 100644
--- a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
+++ b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
@@ -26,7 +26,7 @@ interface Props {
 }
 
 /* AKA: Q&A screen */
-function QuestionsScreen(props: Props) {
+function QuestionsScreen(props: Props, videos: Array<Record<string, any>>) {
   // const [videos, setVideos] = useState(null)
   const [selected, setSelected] = useState<number | null>(null)
   const [questions, setQuestions] = useState<Array<Question>>([])
@@ -119,4 +119,4 @@ const mapStateToProps = state => {
   }
 }
 
-export default connect(mapStateToProps)(QuestionsScreen)
\ No newline at end of file
+export default connect(mapStateToProps)(QuestionsScreen)
diff --git a/src/screens/Main/RecordStack/ViewScreen/ViewScreen.tsx b/src/screens/Main/RecordStack/ViewScreen/ViewScreen.tsx
index f58ce0a9..f1cc7d99 100644
--- a/src/screens/Main/RecordStack/ViewScreen/ViewScreen.tsx
+++ b/src/screens/Main/RecordStack/ViewScreen/ViewScreen.tsx
@@ -1,13 +1,8 @@
-import React, { useState, useEffect } from 'react'
-import { Text, View, TouchableOpacity, Image, StatusBar} from 'react-native'
-import { Camera } from 'expo-camera'
+import React from 'react'
+import { Text, View, TouchableOpacity} from 'react-native'
 import styles from './styles'
-import * as Permissions from 'expo-permissions'
-import * as MediaLibrary from 'expo-media-library'
 import { Video } from 'expo-av'
 import { NavigationScreenProp, NavigationState, NavigationParams } from 'react-navigation'
-import { connect } from 'react-redux'
-import { saveVideo } from '../../../../redux/actions/index'
 
 interface Props {
   question: string,
@@ -19,62 +14,6 @@ export default function ViewScreen(props: Props) {
   const {goBack} = props.navigation
   const question = props.navigation.state.params.question
   const uri = props.navigation.state.params.uri
-  //   const questionID = props.navigation.state.params.questionID
-  const [hasPermission, setHasPermission] = useState(false)
-  const [camera, setCamera] = useState()
-  const [isRecording, setIsRecording] = useState(false)
-  const [cameraDirection, setCameraDirection] = useState(Camera.Constants.Type.front)
-  const [video, setVideo] = useState(null)
-
-  //   async function save(){
-  //     console.log(video.uri)
-  //     const asset = await MediaLibrary.createAssetAsync(video.uri)
-  //     if (asset) {
-  //       setVideo(null)
-  //     }
-
-  //     let key = "video_"
-  //     key += questionID
-  //     props.dispatch(saveVideo({key: {video: video.uri, question: question, questionID: questionID}}))
-  //     goBack()
-  //   }
-
-  //   async function stopRecord(){
-  //     setIsRecording(false)
-  //     camera.stopRecording()
-  //   }
-
-  //   async function startRecord(){
-  //     if (camera) {
-  //       setIsRecording(true)
-  //       const data = await camera.recordAsync()
-  //       setVideo(data)
-  //     }
-  //   }
-
-  //   async function toogleRecord(){
-  //     if (isRecording) {
-  //       stopRecord()
-  //     } else {
-  //       startRecord()
-  //     }
-  //   }
-
-  //   useEffect(() => {
-  //     (async () => {
-  //       const { status: cameraPermission } = await Camera.requestPermissionsAsync()
-  //       const { status: cameraRollPermission } = await Permissions.askAsync(Permissions.CAMERA_ROLL)
-  //       setHasPermission(cameraPermission === 'granted' && cameraRollPermission === 'granted')
-  //     })()
-  //   }, [])
-
-  //   if (hasPermission === null) {
-  //     return <View />
-  //   }
-  //   if (hasPermission === false) {
-  //     return <Text>No access to camera</Text>
-  //   }
-
 
   return(
     <View style={styles.videoPlay}>
@@ -89,18 +28,9 @@ export default function ViewScreen(props: Props) {
         style={{ width: '100%', height: '100%' }}
       />
       <View style={ styles.videoBottom }>
-        {/* <TouchableOpacity
-            onPress={()=>save()}
-            style={styles.saveButton}
-          >
-            <Text style={styles.saveText}>save</Text>
-          </TouchableOpacity> */}
       </View>
 
       <View style={styles.middleSection}>
-        {/* <View style={styles.overlay}>
-            <Text style={styles.infoText}>Create a 3-4 Minute Video</Text>
-          </View> */}
         <View style={styles.overlay}>
           <Text style={styles.question}>{question}</Text>
         </View>
@@ -117,17 +47,4 @@ export default function ViewScreen(props: Props) {
       </View>
     </View>
   )
-}
-// const mapDispatchToProps = dispatch => {
-//   return {
-//     saveVideo: (uri: string, question: string) => {
-//       dispatch(saveVideo({
-//         questionText: question,
-//         uri: uri
-//       }
-//       ))
-//     }
-//   }
-// }
-
-// export default connect()(ViewScreen)
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/screens/Main/RecordStack/ViewScreen/styles.tsx b/src/screens/Main/RecordStack/ViewScreen/styles.tsx
index 2ca86b0e..c71120eb 100644
--- a/src/screens/Main/RecordStack/ViewScreen/styles.tsx
+++ b/src/screens/Main/RecordStack/ViewScreen/styles.tsx
@@ -1,13 +1,6 @@
 import { StyleSheet, Dimensions } from 'react-native'
 
 const styles = StyleSheet.create({
-  camera: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    backgroundColor: '#555',
-  },
   topSection: {
     display: 'flex',
     flex: 1,
@@ -15,30 +8,9 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingHorizontal: '7%',
     alignItems: 'center',
-  },
-  recordButton: {
-    backgroundColor: '#FF3B30',
-    width: 40,
-    height: 40,
-    borderRadius: 48,
-    alignSelf: 'center',
-  },
-  isRecordingButton: {
-    backgroundColor: '#FF3B30',
-    width: 16,
-    height: 16,
-    borderRadius: 4,
-    alignSelf: 'center',
-  },
-  recordOutline: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 53,
-    height: 53,
-    borderRadius: 58,
-    borderWidth: 5,
-    borderColor: '#fff',
+    transform: [{
+      rotate: '180deg'
+    }]
   },
   whiteButton: {
     backgroundColor: '#fff',
@@ -53,6 +25,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: 44,
     height: 44,
+    top: Dimensions.get('window').width * 1.95,
     borderRadius: 44,
     borderWidth: 4,
     borderColor: '#fff',
@@ -64,23 +37,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'flex-start',
     alignSelf: 'center',
+    transform: [{
+      rotate: '-180deg'
+    }]
   },
   overlay: {
     position: 'absolute',
   },
-  infoText: {
-    backgroundColor: 'rgba(51,51,51,0.4)',
-    color: '#fff',
-    paddingVertical: 7,
-    paddingHorizontal: 10,
-    borderRadius: 5,
-    fontSize: 16,
-    textAlignVertical: 'center',
-    textAlign: 'center',
-    transform: [ { rotateZ: '270deg'}],
-    position: 'absolute',
-    left: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.35),
-  },
   question: {
     backgroundColor: 'rgba(51,51,51,0.4)',
     color: '#fff',
@@ -92,7 +55,8 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     transform: [ { rotateZ: '270deg'}],
     position: 'absolute',
-    right: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.25), // funky but it works
+    right: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.35), // funky but it works
+    top: Dimensions.get('window').width,
     fontFamily: 'roboto-regular',
   },
   bottomSection: {
@@ -102,27 +66,6 @@ const styles = StyleSheet.create({
     flex: 1,
     position: 'absolute',
   },
-  saveButton: {
-    backgroundColor: '#E5186E',
-    transform: [ { rotateZ: '270deg'}],
-    width: 79,
-    height: 48,
-    justifyContent: 'center',
-    left: '30%',
-    top: '1500%',
-    borderRadius: 24,
-    right: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.25)
-  },
-  saveText: {
-    textAlign: 'center', 
-    color: '#fff', 
-    fontSize: 18,
-    lineHeight: 21,
-    fontFamily: 'roboto-regular',
-    transform: [{
-      rotate: '-180deg'
-    }],
-  },
   videoPlay: {
     flex: 1,
     transform: [{

From f9eb28073497370349c39ee8a3a402c8f4f078ce Mon Sep 17 00:00:00 2001
From: Aliya Petranik <petranik@usc.edu>
Date: Tue, 21 Apr 2020 09:20:53 -1000
Subject: [PATCH 3/8] viewscreen works w/ harcoded URi in redux store

---
 src/redux/reducers/index.js                        |  4 ++--
 .../Auth/LoginStack/LoginScreen/LoginScreen.tsx    |  2 +-
 .../QuestionsScreen/QuestionsScreen.tsx            | 14 ++++++++------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
index 4aac2bd1..c36da682 100644
--- a/src/redux/reducers/index.js
+++ b/src/redux/reducers/index.js
@@ -1,8 +1,8 @@
 const initialState = {
   videos: [{
     questionId: 1,
-    uri: null,
-    questionText: null,
+    uri: 'file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540apetranik%252FGladeo/Camera/a9d0efd7-93eb-41c8-8206-5c3e3b945f26.mp4',
+    questionText: 'Explain what you do in one minute or less',
   },
   {
     questionId: 2,
diff --git a/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx b/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
index 5b9d0ef7..f46ddbca 100644
--- a/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
+++ b/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
@@ -24,7 +24,7 @@ export default function LoginScreen(props: Props) {
   const [password, setPassword] = useState('')
 
   async function handleLogin(){
-    fetch(`${BASE_PATH}/api/auth/login`, {
+    fetch('https://38bae06e.ngrok.io/api/auth/login', {
       method: 'POST',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
index bffc1742..677aeefd 100644
--- a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
+++ b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
@@ -23,19 +23,21 @@ interface Question {
 
 interface Props {
   navigation: NavigationScreenProp<NavigationState>,
+  videos: any,
 }
 
 /* AKA: Q&A screen */
-function QuestionsScreen(props: Props, videos: Array<Record<string, any>>) {
-  // const [videos, setVideos] = useState(null)
+function QuestionsScreen(props: Props) {
+  // const [videos, setVideos] = useState([]])
   const [selected, setSelected] = useState<number | null>(null)
   const [questions, setQuestions] = useState<Array<Question>>([])
   const {push} = props.navigation
   const [modalVisibility, setModalVisibility] = useState(false)
 
   useEffect(() => {
-    
-    fetch('https://cfa83314.ngrok.io/api/user/questions')
+    console.log('VIDEOS in redux: ', props.videos)
+
+    fetch('https://38bae06e.ngrok.io/api/user/questions')
       .then(res => res.json())
       .then(data => {
         setQuestions(data)
@@ -60,7 +62,7 @@ function QuestionsScreen(props: Props, videos: Array<Record<string, any>>) {
                   [
                     {text: 'View Answer', 
                       onPress: () => {
-                        push('View', {question: videos[item.ID].questionText, uri: videos[item.ID].uri})
+                        push('View', {question: props.videos[item.ID-1].questionText, uri: props.videos[item.ID-1].uri})
                       }
                     },
                     {text: 'Re-record Answer', 
@@ -113,7 +115,7 @@ QuestionsScreen.navigationOptions = {
   headerStyle: {height: 140},   
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: any) => {
   return {
     videos: state.videos
   }

From 5e2c143ab1b216bb9a53ee914d183cabad8a599f Mon Sep 17 00:00:00 2001
From: Aliya Petranik <petranik@usc.edu>
Date: Tue, 21 Apr 2020 10:35:18 -1000
Subject: [PATCH 4/8] fixed saveVIdeo() redux saving

---
 src/redux/reducers/index.js                   | 58 +++++++++----------
 .../QuestionsScreen/QuestionsScreen.tsx       |  7 ++-
 .../RecordStack/RecordScreen/RecordScreen.tsx |  9 ++-
 3 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
index c36da682..b5209e9a 100644
--- a/src/redux/reducers/index.js
+++ b/src/redux/reducers/index.js
@@ -1,74 +1,70 @@
-const initialState = {
-  videos: [{
-    questionId: 1,
-    uri: 'file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540apetranik%252FGladeo/Camera/a9d0efd7-93eb-41c8-8206-5c3e3b945f26.mp4',
-    questionText: 'Explain what you do in one minute or less',
+
+const initialState = 
+  [{
+    questionID: 1,
+    uri: null,
+    questionText: null,
   },
   {
-    questionId: 2,
+    questionID: 2,
     uri: null,
     questionText: null,
   },
   {
-    questionId: 3,
+    questionID: 3,
     uri: null,
     questionText: null,
   },
   {
-    questionId: 4,
+    questionID: 4,
     uri: null,
     questionText: null,
   },{
-    questionId: 5,
+    questionID: 5,
     uri: null,
     questionText: null,
   },
   {
-    questionId: 6,
+    questionID: 6,
     uri: null,
     questionText: null,
   },
   {
-    questionId: 7,
+    questionID: 7,
     uri: null,
     questionText: null,
   },
   {
-    questionId: 8,
+    questionID: 8,
     uri: null,
     questionText: null,
   },{
-    questionId: 9,
+    questionID: 9,
     uri: null,
     questionText: null,
   },
   {
-    questionId: 10,
+    questionID: 10,
     uri: null,
     questionText: null,
   }]
-}
+
  
 function rootReducer(state = initialState, action) {
   if (action.type === 'SAVE_VIDEO') {
- 
-    if (state.videos[action.payload.questionId])
-      return {
-        ...state,
-        videos: state.videos.map((videoObj, index) => {
-          // found: update video
-          if (index === action.questionId-1) {
-            return {
-              ...videoObj,
-              ...action.payload // ...action.videoObj
-            }
-          }
-          // not the video we are looking for continue
-          return videoObj
-        })
+    return state.map(videoObj => {
+      // found: update video
+      if (videoObj.questionID === action.payload.questionID) {
+        console.log('located ', state)
+
+        return action.payload
       }
+      // not the video we are looking for continue
+      return videoObj
+
+    })
   }
- 
+  console.log('returning redux state ', state)
   return state
 }
  
diff --git a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
index 677aeefd..1d489a79 100644
--- a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
+++ b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
@@ -56,13 +56,16 @@ function QuestionsScreen(props: Props) {
           <TouchableHighlight
             onPress={() => {
               if(item.Answered) {
+                console.log('VIDEOS in redux alert: ', props.videos)
+
                 Alert.alert(
                   'Edit your Answer clip',
                   'If you want to change your clip, do it here!',
                   [
                     {text: 'View Answer', 
                       onPress: () => {
-                        push('View', {question: props.videos[item.ID-1].questionText, uri: props.videos[item.ID-1].uri})
+
+                        push('View', {question: props.videos[item.ID].questionText, uri: props.videos[item.ID].uri})
                       }
                     },
                     {text: 'Re-record Answer', 
@@ -117,7 +120,7 @@ QuestionsScreen.navigationOptions = {
 
 const mapStateToProps = (state: any) => {
   return {
-    videos: state.videos
+    videos: state
   }
 }
 
diff --git a/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx b/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
index d0993bf0..0a80cf5c 100644
--- a/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
+++ b/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
@@ -18,7 +18,7 @@ interface Props {
 }
 
 function RecordScreen(props: Props) {
-  const {goBack} = props.navigation
+  const {goBack, pop} = props.navigation
   const question = props.navigation.state.params.question
   const questionID = props.navigation.state.params.questionID
   const [hasPermission, setHasPermission] = useState(false)
@@ -36,8 +36,11 @@ function RecordScreen(props: Props) {
 
     // let key = "video_"
     // key += questionID
-    props.dispatch(saveVideo({questionID: questionID, uri: video.uri, questionText: question}))
-    goBack()
+    const payload ={'questionID': questionID, 'uri': video.uri, 'questionText': question}
+
+    console.log('SAVING: ', payload)
+    props.dispatch(saveVideo(payload))
+    pop()
   }
 
   async function stopRecord(){

From 0889133ee45f257becb2746f3b3d7f5a89c6afc2 Mon Sep 17 00:00:00 2001
From: Xiaoyang Qiao <xiaoyanq@usc.edu>
Date: Tue, 21 Apr 2020 13:47:48 -0700
Subject: [PATCH 5/8] to discard

---
 .DS_Store                                        | Bin 0 -> 6148 bytes
 src/navigation/MainTabNavigator.tsx              |   2 +-
 .../Auth/LoginStack/LoginScreen/LoginScreen.tsx  |   2 +-
 .../PasswordResetScreen/PasswordResetScreen.tsx  |   2 +-
 .../CreatePasswordScreen.tsx                     |   2 +-
 .../GetStartedScreen/GetStartedScreen.tsx        |   2 +-
 .../SnippetSelection/SnippetSelection.tsx        |   2 +-
 7 files changed, 6 insertions(+), 6 deletions(-)
 create mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..abc452819afbab83634d7444be5b2aefe4fe1647
GIT binary patch
literal 6148
zcmeHK%}T>S5Z<*_w-vDm!5;VGt%pXXJqe-KgEt|f2bDIl#Rg(hn$(~%lGo5T@(Fw$
zXLh$@u?J5gb_RC8nVp&4%m>*Y#u)ER2Nq*B#+ZPH$Wd7!IK0rcVuBGl&JmBjAo9R^
z^Tx*a*8#u1#9}sKH(vVn`vX5tn$35<QYx>mtqV~V)y?X)Gm26tag%A>aVM8(ow~`$
zGx}K+1)sX>o%_SISKB^{!o>B%;Y20-gCT@mUHIW3N;}as9K>oKM>~Y5h)S<k&oawu
zH{@Q+${R9kx0?-lu;0q_irCq;4o~`b50BYX{`{i(<v_oZErT<71;vzi?@YoV3U6U#
z7Cnn1BnF59Vt^P}DhA9kAU2k&YATi(AO?QI0PYVG8lr8m(5SW!=<xcC{xTv8==hdE
zlm=~sg+}mzaGeUMQ@MF!aGeh0(!|*Y3ynIRakVncV^*F$UbtEv#-$2p+}21vF+dE=
zGf>iI4bT5$_+=J8^5;{?A_j<of5reWcb#qriZW;GxAO3;mC*XoP%y4Q1qAfDO8^+S
hkJOb@`z7iSXB#Xu;w(6>(gEorpa`Lk82AMSJ^*<WPt^bb

literal 0
HcmV?d00001

diff --git a/src/navigation/MainTabNavigator.tsx b/src/navigation/MainTabNavigator.tsx
index b876ca7b..e56b6bfa 100644
--- a/src/navigation/MainTabNavigator.tsx
+++ b/src/navigation/MainTabNavigator.tsx
@@ -35,7 +35,7 @@ RecordStack.navigationOptions = ({ navigation }) => {
   let tabBarVisible
   if (navigation.state.routes.length > 1) {
     navigation.state.routes.map(route => {
-      if (route.routeName === 'Record') {
+      if (route.routeName === 'Record' || route.routeName === 'View') {
         tabBarVisible = false
       } else {
         tabBarVisible = true
diff --git a/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx b/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
index f46ddbca..211224c9 100644
--- a/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
+++ b/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
@@ -24,7 +24,7 @@ export default function LoginScreen(props: Props) {
   const [password, setPassword] = useState('')
 
   async function handleLogin(){
-    fetch('https://38bae06e.ngrok.io/api/auth/login', {
+    fetch('https://cfa83314.ngrok.io/api/auth/login', {
       method: 'POST',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Auth/LoginStack/PasswordResetScreen/PasswordResetScreen.tsx b/src/screens/Auth/LoginStack/PasswordResetScreen/PasswordResetScreen.tsx
index d12702bd..6007889e 100644
--- a/src/screens/Auth/LoginStack/PasswordResetScreen/PasswordResetScreen.tsx
+++ b/src/screens/Auth/LoginStack/PasswordResetScreen/PasswordResetScreen.tsx
@@ -21,7 +21,7 @@ export default function PasswordResetScreen(props: Props) {
   const {navigate} = props.navigation 
 
   async function checkEmail(){
-    fetch(`${BASE_PATH}/api/auth/forgot-password`, {
+    fetch('https://cfa83314.ngrok.io/api/auth/forgot-password', {
       method: 'POST',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Auth/RegisterStack/CreatePasswordScreen/CreatePasswordScreen.tsx b/src/screens/Auth/RegisterStack/CreatePasswordScreen/CreatePasswordScreen.tsx
index a29ef489..c03af40c 100644
--- a/src/screens/Auth/RegisterStack/CreatePasswordScreen/CreatePasswordScreen.tsx
+++ b/src/screens/Auth/RegisterStack/CreatePasswordScreen/CreatePasswordScreen.tsx
@@ -29,7 +29,7 @@ export default function CreatePasswordScreen(props: Props) {
   const [messageStyle, setMessageStyle] = useState(styles.regularText)
 
   async function handleRegister(){
-    fetch(`${BASE_PATH}/api/auth/register`, {
+    fetch('https://cfa83314.ngrok.io/api/auth/register', {
       method: 'POST',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx b/src/screens/Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx
index 6e050f0c..78744cac 100644
--- a/src/screens/Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx
+++ b/src/screens/Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx
@@ -23,7 +23,7 @@ export default function GetStartedScreen(props: Props) {
   const [messageStyle, setMessageStyle] = useState(styles.messageNormal)
 
   async function checkCompanyCode(){
-    fetch(`${BASE_PATH}/api/company/${code}`, {
+    fetch(`https://cfa83314.ngrok.io/api/company/${code}`, {
       method: 'GET',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx b/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx
index 62d61f73..88c625d9 100644
--- a/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx
+++ b/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx
@@ -28,7 +28,7 @@ export default function SnippetSelectionScreen(props: Props) {
   const [nextSnippetIndex, setNextSnippetIndex] = useState<number>(2)
 
   useEffect(() => {
-    fetch(`${BASE_PATH}/api/user/questions`)
+    fetch('https://cfa83314.ngrok.io/api/user/questions')
       .then(res => res.json())
       .then(data => {     
         const initialSnippetState = []

From 51f87734d0a36aaa67324ab8b4eaa2bc53363cda Mon Sep 17 00:00:00 2001
From: Xiaoyang Qiao <xiaoyanq@usc.edu>
Date: Tue, 21 Apr 2020 17:58:44 -0700
Subject: [PATCH 6/8] fixed the item.ID in the QuestionScreen

---
 src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx      | 2 +-
 .../LoginStack/PasswordResetScreen/PasswordResetScreen.tsx   | 2 +-
 .../CreatePasswordScreen/CreatePasswordScreen.tsx            | 2 +-
 .../Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx | 2 +-
 .../Main/EditStack/SnippetSelection/SnippetSelection.tsx     | 2 +-
 .../Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx     | 5 ++---
 6 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx b/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
index 211224c9..2dd625ce 100644
--- a/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
+++ b/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
@@ -24,7 +24,7 @@ export default function LoginScreen(props: Props) {
   const [password, setPassword] = useState('')
 
   async function handleLogin(){
-    fetch('https://cfa83314.ngrok.io/api/auth/login', {
+    fetch('https://d46ef5f4.ngrok.io/api/auth/login', {
       method: 'POST',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Auth/LoginStack/PasswordResetScreen/PasswordResetScreen.tsx b/src/screens/Auth/LoginStack/PasswordResetScreen/PasswordResetScreen.tsx
index 6007889e..d12702bd 100644
--- a/src/screens/Auth/LoginStack/PasswordResetScreen/PasswordResetScreen.tsx
+++ b/src/screens/Auth/LoginStack/PasswordResetScreen/PasswordResetScreen.tsx
@@ -21,7 +21,7 @@ export default function PasswordResetScreen(props: Props) {
   const {navigate} = props.navigation 
 
   async function checkEmail(){
-    fetch('https://cfa83314.ngrok.io/api/auth/forgot-password', {
+    fetch(`${BASE_PATH}/api/auth/forgot-password`, {
       method: 'POST',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Auth/RegisterStack/CreatePasswordScreen/CreatePasswordScreen.tsx b/src/screens/Auth/RegisterStack/CreatePasswordScreen/CreatePasswordScreen.tsx
index c03af40c..a29ef489 100644
--- a/src/screens/Auth/RegisterStack/CreatePasswordScreen/CreatePasswordScreen.tsx
+++ b/src/screens/Auth/RegisterStack/CreatePasswordScreen/CreatePasswordScreen.tsx
@@ -29,7 +29,7 @@ export default function CreatePasswordScreen(props: Props) {
   const [messageStyle, setMessageStyle] = useState(styles.regularText)
 
   async function handleRegister(){
-    fetch('https://cfa83314.ngrok.io/api/auth/register', {
+    fetch(`${BASE_PATH}/api/auth/register`, {
       method: 'POST',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx b/src/screens/Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx
index 78744cac..6e050f0c 100644
--- a/src/screens/Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx
+++ b/src/screens/Auth/RegisterStack/GetStartedScreen/GetStartedScreen.tsx
@@ -23,7 +23,7 @@ export default function GetStartedScreen(props: Props) {
   const [messageStyle, setMessageStyle] = useState(styles.messageNormal)
 
   async function checkCompanyCode(){
-    fetch(`https://cfa83314.ngrok.io/api/company/${code}`, {
+    fetch(`${BASE_PATH}/api/company/${code}`, {
       method: 'GET',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx b/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx
index 88c625d9..62d61f73 100644
--- a/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx
+++ b/src/screens/Main/EditStack/SnippetSelection/SnippetSelection.tsx
@@ -28,7 +28,7 @@ export default function SnippetSelectionScreen(props: Props) {
   const [nextSnippetIndex, setNextSnippetIndex] = useState<number>(2)
 
   useEffect(() => {
-    fetch('https://cfa83314.ngrok.io/api/user/questions')
+    fetch(`${BASE_PATH}/api/user/questions`)
       .then(res => res.json())
       .then(data => {     
         const initialSnippetState = []
diff --git a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
index 1d489a79..c18267f7 100644
--- a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
+++ b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
@@ -37,7 +37,7 @@ function QuestionsScreen(props: Props) {
   useEffect(() => {
     console.log('VIDEOS in redux: ', props.videos)
 
-    fetch('https://38bae06e.ngrok.io/api/user/questions')
+    fetch('https://d46ef5f4.ngrok.io/api/user/questions')
       .then(res => res.json())
       .then(data => {
         setQuestions(data)
@@ -64,8 +64,7 @@ function QuestionsScreen(props: Props) {
                   [
                     {text: 'View Answer', 
                       onPress: () => {
-
-                        push('View', {question: props.videos[item.ID].questionText, uri: props.videos[item.ID].uri})
+                        push('View', {question: props.videos[item.ID-1].questionText, uri: props.videos[item.ID-1].uri})
                       }
                     },
                     {text: 'Re-record Answer', 

From 1bb330ed97219f282b1a03c2ad78c00c1aae4802 Mon Sep 17 00:00:00 2001
From: Xiaoyang Qiao <xiaoyanq@usc.edu>
Date: Tue, 21 Apr 2020 18:27:23 -0700
Subject: [PATCH 7/8] fixed the props and added the answerQuestion route to
 RecordScreen

---
 .../LoginStack/LoginScreen/LoginScreen.tsx    |  3 +-
 .../QuestionsScreen/QuestionsScreen.tsx       |  7 +--
 .../RecordStack/RecordScreen/RecordScreen.tsx | 44 +++++++++++--------
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx b/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
index 2dd625ce..84860ea9 100644
--- a/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
+++ b/src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx
@@ -17,14 +17,13 @@ interface Props {
   navigation: NavigationScreenProp<NavigationState>,
 }
 
-
 export default function LoginScreen(props: Props) {
   const {navigate} = props.navigation
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
 
   async function handleLogin(){
-    fetch('https://d46ef5f4.ngrok.io/api/auth/login', {
+    fetch(`${BASE_PATH}/api/auth/login`, {
       method: 'POST',
       headers: {
         Accept: 'application/json',
diff --git a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
index c18267f7..4426bb1c 100644
--- a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
+++ b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
@@ -4,7 +4,6 @@ import {
   Text,
   View,
   FlatList,
-  TouchableOpacity,
   TouchableHighlight,
   Alert,
 } from 'react-native'
@@ -12,8 +11,6 @@ import styles from './styles'
 import { NavigationScreenProp, NavigationState } from 'react-navigation'
 import { BASE_PATH } from 'react-native-dotenv'
 import { connect } from 'react-redux'
-import { saveVideo } from '../../../../redux/actions'
-import { bindActionCreators } from 'redux'
 
 interface Question {
   ID: number,
@@ -28,7 +25,6 @@ interface Props {
 
 /* AKA: Q&A screen */
 function QuestionsScreen(props: Props) {
-  // const [videos, setVideos] = useState([]])
   const [selected, setSelected] = useState<number | null>(null)
   const [questions, setQuestions] = useState<Array<Question>>([])
   const {push} = props.navigation
@@ -36,8 +32,7 @@ function QuestionsScreen(props: Props) {
 
   useEffect(() => {
     console.log('VIDEOS in redux: ', props.videos)
-
-    fetch('https://d46ef5f4.ngrok.io/api/user/questions')
+    fetch(`${BASE_PATH}/api/user/questions`)
       .then(res => res.json())
       .then(data => {
         setQuestions(data)
diff --git a/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx b/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
index 0a80cf5c..e945e223 100644
--- a/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
+++ b/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
@@ -8,12 +8,13 @@ import { Video } from 'expo-av'
 import { NavigationScreenProp, NavigationState, NavigationParams } from 'react-navigation'
 import { connect } from 'react-redux'
 import { saveVideo } from '../../../../redux/actions/index'
+import { BASE_PATH } from 'react-native-dotenv'
 
 interface Props {
-  dispatch: any,
-  saveVideo: any,
+  dispatch: Function,
+  saveVideo: Function,
   question: string,
-  questionID: any,
+  questionID: number,
   navigation: NavigationScreenProp<NavigationState, NavigationParams>,
 }
 
@@ -27,17 +28,34 @@ function RecordScreen(props: Props) {
   const [cameraDirection, setCameraDirection] = useState(Camera.Constants.Type.front)
   const [video, setVideo] = useState(null)
 
+  async function answerQuestion(){
+    fetch(`${BASE_PATH}/api/user/questions`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        'questionId': questionID,
+      }),
+    })
+      .then(res => res.json())
+      .then(data => {
+        console.log(data)
+      })
+      .catch(error => {
+        console.log('Error: ' + error)
+      })
+  }
+
   async function save(){
     console.log(video.uri)
     const asset = await MediaLibrary.createAssetAsync(video.uri)
     if (asset) {
       setVideo(null)
     }
-
-    // let key = "video_"
-    // key += questionID
+    answerQuestion()
     const payload ={'questionID': questionID, 'uri': video.uri, 'questionText': question}
-
     console.log('SAVING: ', payload)
     props.dispatch(saveVideo(payload))
     pop()
@@ -154,16 +172,4 @@ function RecordScreen(props: Props) {
   }
 }
 
-// const mapDispatchToProps = dispatch => {
-//   return {
-//     saveVideo: (uri: string, question: string) => {
-//       dispatch(saveVideo({
-//         questionText: question,
-//         uri: uri
-//       }
-//       ))
-//     }
-//   }
-// }
-
 export default connect()(RecordScreen)
\ No newline at end of file

From 6ef1d6dc8e8a00d0ebacc45e80df2bf0b64de8ed Mon Sep 17 00:00:00 2001
From: Xiaoyang Qiao <xiaoyanq@usc.edu>
Date: Thu, 23 Apr 2020 10:47:23 -0700
Subject: [PATCH 8/8] fix props type and update questions route

---
 src/redux/reducers/index.js                                | 5 -----
 .../Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx   | 7 ++-----
 src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx | 2 --
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
index b5209e9a..3dea4f15 100644
--- a/src/redux/reducers/index.js
+++ b/src/redux/reducers/index.js
@@ -49,22 +49,17 @@ const initialState =
     questionText: null,
   }]
 
- 
 function rootReducer(state = initialState, action) {
   if (action.type === 'SAVE_VIDEO') {
     return state.map(videoObj => {
       // found: update video
       if (videoObj.questionID === action.payload.questionID) {
-        console.log('located ', state)
-
         return action.payload
       }
       // not the video we are looking for continue
       return videoObj
-
     })
   }
-  console.log('returning redux state ', state)
   return state
 }
  
diff --git a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
index 4426bb1c..9a1744a6 100644
--- a/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
+++ b/src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
@@ -20,7 +20,7 @@ interface Question {
 
 interface Props {
   navigation: NavigationScreenProp<NavigationState>,
-  videos: any,
+  videos: Array<Record<string, any>>,
 }
 
 /* AKA: Q&A screen */
@@ -31,7 +31,6 @@ function QuestionsScreen(props: Props) {
   const [modalVisibility, setModalVisibility] = useState(false)
 
   useEffect(() => {
-    console.log('VIDEOS in redux: ', props.videos)
     fetch(`${BASE_PATH}/api/user/questions`)
       .then(res => res.json())
       .then(data => {
@@ -41,7 +40,7 @@ function QuestionsScreen(props: Props) {
       .catch(error => {
         console.log('Error' + error)
       })
-  }, [])
+  })
 
   return (
     <View style={styles.container}>
@@ -51,8 +50,6 @@ function QuestionsScreen(props: Props) {
           <TouchableHighlight
             onPress={() => {
               if(item.Answered) {
-                console.log('VIDEOS in redux alert: ', props.videos)
-
                 Alert.alert(
                   'Edit your Answer clip',
                   'If you want to change your clip, do it here!',
diff --git a/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx b/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
index e945e223..d9d59406 100644
--- a/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
+++ b/src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
@@ -49,14 +49,12 @@ function RecordScreen(props: Props) {
   }
 
   async function save(){
-    console.log(video.uri)
     const asset = await MediaLibrary.createAssetAsync(video.uri)
     if (asset) {
       setVideo(null)
     }
     answerQuestion()
     const payload ={'questionID': questionID, 'uri': video.uri, 'questionText': question}
-    console.log('SAVING: ', payload)
     props.dispatch(saveVideo(payload))
     pop()
   }