Merge pull request #120 from ctcusc/yq-connect-video-to-questions

Yq connect video to questions

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",

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,
       }
     }
   },
@@ -29,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

src/redux/reducers/index.js

@@ -1,15 +1,66 @@
-const initialState = {
-  videos: []
-}
-
+
+const initialState = 
+  [{
+    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)
-    }
+    return state.map(videoObj => {
+      // found: update video
+      if (videoObj.questionID === action.payload.questionID) {
+        return action.payload
+      }
+      // not the video we are looking for continue
+      return videoObj
+    })
   }
   return state
 }
-  
+
 export default rootReducer

src/screens/Auth/LoginStack/LoginScreen/LoginScreen.tsx

@@ -17,7 +17,6 @@ interface Props {
   navigation: NavigationScreenProp<NavigationState>,
 }
 
-
 export default function LoginScreen(props: Props) {
   const {navigate} = props.navigation
   const [email, setEmail] = useState('')

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

@@ -4,16 +4,13 @@ import {
   Text,
   View,
   FlatList,
-  TouchableOpacity,
   TouchableHighlight,
   Alert,
 } from 'react-native'
 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,
@@ -23,17 +20,17 @@ interface Question {
 
 interface Props {
   navigation: NavigationScreenProp<NavigationState>,
+  videos: Array<Record<string, any>>,
 }
 
 /* AKA: Q&A screen */
-export default function QuestionsScreen(props: Props) {
+function QuestionsScreen(props: Props) {
   const [selected, setSelected] = useState<number | null>(null)
   const [questions, setQuestions] = useState<Array<Question>>([])
   const {push} = props.navigation
   const [modalVisibility, setModalVisibility] = useState(false)
 
   useEffect(() => {
-
     fetch(`${BASE_PATH}/api/user/questions`)
       .then(res => res.json())
       .then(data => {
@@ -77,7 +74,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: props.videos[item.ID-1].questionText, uri: props.videos[item.ID-1].uri})
+                      }
+                    },
                     {text: 'Re-record Answer', 
                       onPress: () => {
                         Alert.alert(
@@ -87,7 +88,7 @@ export default function QuestionsScreen(props: Props) {
                             {text: 'Re-record',
                               onPress: () => {
                                 removeQuestion(item.ID)
-                                push('Record', {question: item.text})
+                                push('Record', {question: item.text, questionID: item.ID})
                               }
                             },
                             {text: 'Cancel', style: 'cancel'}
@@ -98,7 +99,7 @@ export default function QuestionsScreen(props: Props) {
                   ]
                 )
               } else {
-                push('Record', {question: item.text})
+                push('Record', {question: item.text, questionID: item.ID})
               }
               setSelected(item.ID)
             }}
@@ -128,3 +129,11 @@ QuestionsScreen.navigationOptions = {
   ),
   headerStyle: {height: 140},   
 }
+
+const mapStateToProps = (state: any) => {
+  return {
+    videos: state
+  }
+}
+
+export default connect(mapStateToProps)(QuestionsScreen)