some ui changes

frontend/src/component/memory/MainButton.js

@@ -4,7 +4,7 @@ import Colors from '../../constants/Colors'
 
 const MainButton = (props) => {
     return(
-        <TouchableOpacity onPress={props.onPress}>
+        <TouchableOpacity disabled={props.disabled} onPress={props.onPress}>
             <View style={{...styles.button, ...props.styles}}>
                 <Text style={styles.buttonText}>{props.children}</Text>
             </View>

frontend/src/screen/memory/GameLevel.js

@@ -2,10 +2,26 @@ import { Center, Column, Row } from 'native-base';
 import React, {useState} from 'react';
 import {Text, View, StyleSheet, Button, ScrollView, Image,ImageBackground, TouchableOpacity, Modal, Alert, Pressable} from 'react-native';
 import MainButton from '../../component/memory/MainButton';
+import { useDispatch, useSelector } from 'react-redux'; 
+import { Icon } from 'react-native-elements';
 
 const GameLevel = ({navigation}) => {
     const [modalVisible, setModalVisible] = useState(false);
     const [mediumModalVisible, setMediumModalVisible] = useState(false);
+
+    const status = useSelector(state=>state.memory.is_passed.status);
+    const level = useSelector(state=>state.memory.is_passed.level);
+
+    console.log(status);
+    console.log(level);
+
+    React.useEffect(() => {
+      const unsubscribe = navigation.addListener('focus', () => {
+
+      });
+      return unsubscribe;
+    }, [navigation]);
+
     return (
         <ScrollView>
       <Modal
@@ -81,15 +97,15 @@ const GameLevel = ({navigation}) => {
                     </View>
             </View>
             <View style={styles.screen} >
-                <MainButton styles={styles.elementryBtn} onPress={() => setModalVisible(true)}>
-                    Elementry 
+                <MainButton disabled={false} styles={styles.elementryBtn} onPress={() => setModalVisible(true)}>
+                <Icon name="unlock-alt" type="font-awesome" size={36} color="white" />     Elementry 
                 </MainButton>
-                <MainButton styles={styles.mediumBtn} onPress={()=>{setMediumModalVisible(true)}}>
+                <MainButton disabled={!status ? true : false} styles={styles.mediumBtn} onPress={()=>{setMediumModalVisible(true)}}>
                 {/* navigation.navigate('MediumLevelStart') */}
-                    Medium
+                <Icon name={ status ? 'unlock-alt' : 'lock'} type="font-awesome" size={36} color="white" />     Medium
                 </MainButton>
-                <MainButton styles={styles.advanceBtn} onPress={()=>{navigation.navigate('AdvanceLevelStart')}}>
-                    Advance
+                <MainButton disabled={true} styles={styles.advanceBtn} onPress={()=>{navigation.navigate('AdvanceLevelStart')}}>
+                <Icon name="lock" type="font-awesome" size={36} color="white" />     Advance
                 </MainButton>
             </View>
         </ScrollView>

frontend/src/screen/memory/GameOverScreen.js

@@ -88,6 +88,7 @@ const GameOverScreen = ({navigation}) => {
 
     if(!loading){
         insertData();
+        dispatch(memoryActions.levelPassed({level: disorderLevel, status: true}));
         resultText=(
         // <Text style={styles.resultText}>
         //     <Text>Child's disorder level is </Text> <Text style={styles.highlight}>{disorderLevel}</Text>

frontend/src/store/actions/memory.js

@@ -2,6 +2,7 @@ export const SET_ANSWERS = 'SET_ANSWERS';
 export const SET_TIME = 'SET_TIME';
 export const CLEAR_DATA = 'CLEAR_DATA';
 export const SET_GAME_LEVEL = 'SET_GAME_LEVEL';
+export const PASS = 'PASS';
 
 export const setGameLevel = (level) => {
     return {type: SET_GAME_LEVEL, level: level}
@@ -17,4 +18,8 @@ export const setTime = (time) => {
 
 export const clearData = () => {
     return {type: CLEAR_DATA}
+}
+
+export const levelPassed = (status) => {
+    return {type: PASS, status: status}
 }
\ No newline at end of file

frontend/src/store/reducers/memory.js

-import { CLEAR_DATA, SET_ANSWERS, SET_GAME_LEVEL, SET_TIME } from "../actions/memory";
+import { CLEAR_DATA, SET_ANSWERS, SET_GAME_LEVEL, SET_TIME, PASS } from "../actions/memory";
 
 const initialState = {
     gameLevel: null,
     memoryData: {},
-    screenTime: {}
+    screenTime: {},
+    is_passed: {
+        level: null,
+        status: false
+    }
 }
 
 const memoryReducer = (state=initialState, action) => {
@@ -44,6 +48,19 @@ const memoryReducer = (state=initialState, action) => {
                 gameLevel: null
             }
 
+        case PASS:
+
+            const levelPassed = action.level;
+            const PassedStatus = action.status;
+
+            return{
+                ...state,
+                is_passed: {
+                    level: levelPassed,
+                    status: PassedStatus
+                }
+            }
+
         default: 
             return state
     }