Merge pull request #88 from dsc-sookmyung/feature/home

[#3] fix: add missing parts
dsc-sookmyung · May 29, 2022 · fe13017 · fe13017
2 parents 5084893 + 3258068
commit fe13017
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/react-native/components/Home/NoEventBox.tsx b/react-native/components/Home/NoEventBox.tsx
@@ -1,12 +1,15 @@
 import React from "react";
 import { View, Image, StyleSheet } from "react-native";
-import { Text } from 'native-base'
+import { Text } from 'native-base';
+import i18n from 'i18n-js'
+import '../../locales/i18n';
+
 
 export default function NoEventBox() {
   return (
     <View style={[styles.container]}>
         <Image source={require("../../assets/images/no-event.png")} style={styles.imageStyle} />
-        <Text color="#666" fontSize="md">There's no events today!</Text>
+        <Text color="#666" fontSize="md">{i18n.t('noEvent')}</Text>
     </View>
   );
 }

diff --git a/react-native/screens/HomeScreen.tsx b/react-native/screens/HomeScreen.tsx
@@ -1,13 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, View, SafeAreaView, TouchableOpacity, Image, ImageBackground, Alert } from 'react-native';
+import { StyleSheet, View, SafeAreaView, TouchableOpacity, ImageBackground, Alert } from 'react-native';
 import { Text } from 'native-base'
 import { theme } from '../core/theme';
 import type { Navigation, UserData } from '../types';
 import { useAuth } from '../contexts/Auth';
 import { StackActions } from '@react-navigation/native';
-import { MaterialIcons, FontAwesome } from '@expo/vector-icons';
+import { MaterialIcons } from '@expo/vector-icons';
 import HomeMenu from '../components/Home/HomeMenu';
 import NoEventBox from '../components/Home/NoEventBox';
+import i18n from 'i18n-js'
+import '../locales/i18n';
 
 export default function HomeScreen({ navigation }: Navigation) {
     const [events, setEvents] = useState<{event_num: number, children: { cid: number, cname: string, events: string[] }[]}>(
@@ -30,20 +32,21 @@ export default function HomeScreen({ navigation }: Navigation) {
     );
     const SHOW_ALL = -1;
     const [nowSelectedChildId, setNowSelectedChildId] = useState<number>(SHOW_ALL);
-    const [user, setUser] = useState<UserData>();
+    const [user, setUser] = useState<UserData>({
+        uid: 1,
+        username: "Soo",
+        uemail: "kaithape@gmail.com",
+        uprofileImg: 1,
+        ulanguage: "english",
+        uchildren:[{ cid: 1, cname:"Soo", cprofileImg: 1 }, { cid: 2, cname:"Hee", cprofileImg: 4 }]
+    });
     const auth = useAuth();
 
 
     useEffect(()=> {
-        // setUser(auth?.userData);
-        setUser({
-            uid: 1,
-            username: "Soo",
-            uemail: "kaithape@gmail.com",
-            uprofileImg: 1,
-            ulanguage: "english",
-            uchildren:[{cid: 1, cname:"Soo"}, {cid: 2, cname:"Hee"}]
-        })
+        if (auth?.userData) {
+            setUser(auth?.userData);
+        }
 
         navigation.setOptions({
             headerRight: () => (
@@ -62,19 +65,26 @@ export default function HomeScreen({ navigation }: Navigation) {
             .then(response => response.json())
             .then(data => {
                 setEvents(data);
-            }) // console.log(data)
+                // console.log(data);
+            }) 
             .catch((error) => {
                 console.log(error)
                 if (error?.response?.status==401) {
                     //redirect to login
-                    Alert.alert("The session has expired. Please log in again.");
+                    Alert.alert(i18n.t('sessionExpired'));
                     auth.signOut();
                     navigation.dispatch(StackActions.popToTop())
                 }
             });
         }
     }, [auth]);
 
+    useEffect(() => {
+        if (events && events?.children?.length > 0) {
+            setNowSelectedChildId(events.children[0].cid);
+        }
+    }, [events]);
+
     const handleNowSelectedChildId = (cid: number) => {
         setNowSelectedChildId(cid);
     }
@@ -88,23 +98,23 @@ export default function HomeScreen({ navigation }: Navigation) {
                         <TouchableOpacity onPress={() => navigation.navigate('Translate')}>
                             <ImageBackground source={require("../assets/images/pink-background-cropped.png")} style={[styles.bigButton]} imageStyle={{ borderRadius: 12 }}>
                                 <View style={[styles.bigButtonContentWrapper]}>
-                                    <Text style={[styles.buttonName, styles.deepBlue]} fontWeight={700} fontSize="xl" pb={2}>Translate</Text>
+                                    <Text style={[styles.buttonName, styles.deepBlue]} fontWeight={700} fontSize="xl" pb={2}>{i18n.t('translate')}</Text>
                                     <MaterialIcons name="g-translate" size={32} color="#333"/>
                                 </View>
                             </ImageBackground>
                         </TouchableOpacity>
                         <TouchableOpacity onPress={() => navigation.navigate('Search')}>
                             <ImageBackground source={require("../assets/images/pink-background-cropped.png")} style={[styles.bigButton]} imageStyle={{ borderRadius: 12 }}>
                                 <View style={[styles.bigButtonContentWrapper]}>
-                                    <Text style={[styles.buttonName, styles.deepBlue]} fontWeight={700} fontSize="xl" pb={2}>Search</Text>
+                                    <Text style={[styles.buttonName, styles.deepBlue]} fontWeight={700} fontSize="xl" pb={2}>{i18n.t('search')}</Text>
                                     <MaterialIcons name="search" size={32} color="#333"/>
                                 </View>
                             </ImageBackground>
                         </TouchableOpacity>
                     </View>
                 </ImageBackground>
                 <View style={styles.noticeWrapper}>
-                    <Text style={styles.smallTitle} fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize="2xl" lineHeight={60}>Today's Events</Text>
+                    <Text style={styles.smallTitle} fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize="2xl" lineHeight={60}>{i18n.t('todayEvent')}</Text>
                     <View style={styles.childButtonWrapper}>
                         <TouchableOpacity key={'n_all'} style={[styles.childButton, {
                             backgroundColor: nowSelectedChildId === SHOW_ALL ? theme.colors.primary : "#ffffff",
@@ -130,7 +140,7 @@ export default function HomeScreen({ navigation }: Navigation) {
                                 <View key={'n_'+index}>
                                     {notice.events.map((event, index) => {
                                         return (
-                                            <Text fontWeight={400} fontStyle="normal" fontSize="md" lineHeight={28}>{`[${notice.cname}] ` + event}</Text>
+                                            <Text key={'t_'+index} fontWeight={400} fontStyle="normal" fontSize="md" lineHeight={28}>{`[${notice.cname}] ` + event}</Text>
                                         )
                                     })}
                                 </View>))
@@ -257,3 +267,4 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     }
 })
+
diff --git a/react-native/screens/IntroductionScreen.tsx b/react-native/screens/IntroductionScreen.tsx
@@ -32,9 +32,9 @@ export default function HomeScreen({ navigation }: Navigation) {
   });
   const auth = useAuth();
 
-  useEffect(() => {
-      navigation.navigate("Home");
-  })
+  // useEffect(() => {
+  //     navigation.navigate("Home");
+  // })
 
   useEffect(() => {
     if (response?.type === "success") {