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

[#3] Feature/home

react-native/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
+import { Image } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NativeBaseProvider } from 'native-base';
 import { nativeBaseTheme } from './core/theme';
@@ -57,9 +58,18 @@ export default function App() {
             name="Home"
             component={HomeScreen}
             options={{
+              headerStyle: { backgroundColor: '#333D79' },
               title: "NotiNote",
               headerBackVisible: false,
-              headerRight: () => <LogoutButton/>
+              headerRight: () => <LogoutButton/>,
+
+              headerTitle: (props) => ( // App Logo
+                <Image
+                  style={{ width: 90, height: 50 }}
+                  source={require('./assets/images/notinote-icon-white.png')}
+                  resizeMode='contain'
+                />
+              ),
             }}
           />
           <Stack.Screen

react-native/components/LogoutButton.tsx

@@ -31,7 +31,7 @@ const LogoutButton = () => {
     <TouchableOpacity
       style={{ width: 24, height: 18 }}
       onPress={LogoutConfirm}>
-      <AntDesign name="logout" color="#000" size={18}/>
+      <AntDesign name="logout" color="#fff" size={18}/>
     </TouchableOpacity>
   );
 };

react-native/screens/HomeScreen.tsx

@@ -1,57 +1,111 @@
-import React from 'react';
-import { StyleSheet, Text, View, SafeAreaView, TouchableHighlight, Image, Button } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View, SafeAreaView, TouchableHighlight, Image, ImageBackground, GestureResponderEvent } from 'react-native';
+import { Text } from 'native-base'
 import { theme } from '../core/theme';
-import type { Navigation } from '../types';
+import type { Navigation, UserProfile, Notice } from '../types';
 import AppLoading from 'expo-app-loading';
 import useFonts from '../hooks/useFonts'
 
 
 export default function HomeScreen({ navigation }: Navigation) {
-    const [fontsLoaded, SetFontsLoaded] = React.useState<boolean>(false);
-    const LoadFontsAndRestoreToken = async () => {
-        await useFonts();
-    };
+    const [fontsLoaded, SetFontsLoaded] = useState<boolean>(false);
+    const [userProfile, setUserProfile] = useState<UserProfile>({userId: 0, username: "", gmail: "", profileImageType: 0, language: "", children: []});
+    const [events, setEvents] = useState<{childId: number, childName: string, events: {time: string, content: string}[]}[]>();
+    const [totalEventsCount, setTotalEventsCount] = useState<number>(4);
+    const [nowSelectedChildId, setNowSelectedChildId] = useState<number>(1);
 
-    if (!fontsLoaded) {
-        return (
-          <AppLoading
-            startAsync={LoadFontsAndRestoreToken}
-            onFinish={() => SetFontsLoaded(true)}
-            onError={() => {}}
-          />
-        );
-    } 
+    useEffect(()=> {
+        setUserProfile({
+            userId: 1,
+            username: "Suyeon",
+            gmail: "[email protected]",
+            profileImageType: 1,
+            language: "english",
+            children: [{childName: "Soo", childId: 1}, {childName: "Hee", childId: 2}]
+        })
+
+        setEvents([{
+            childId: 1,
+            childName: "Soo",
+            events: [{
+                time: "10:00",
+                content: "the 17th Graduate Seremony"
+            }, {
+                time: "13:00",
+                content: "Do-Dream Festival"
+            }]
+        }, {
+            childId: 2,
+            childName: "Hee",
+            events: [{
+                time: "11:00",
+                content: "the 18th Matriculation"
+            }, {
+                time: "13:00",
+                content: "Do-Dream Festival"
+            }]
+        }])
+        // TODO: fetch API
+        // .then => set nowSelectedChild 
+    }, [])
+
+    const handleNowSelectedChildId = (childId: number) => {
+        setNowSelectedChildId(childId);
+    }
 
     return (
-        <SafeAreaView style={styles.container}>
-            <TouchableHighlight onPress={() => navigation.navigate('Translate')} style={[styles.bigButton, styles.deepBlue]}>
-                <View>
-                    <Text style={[styles.buttonName, styles.deepBlue]}>Translate</Text>
-                    <Image
-                        style={styles.buttonImage}
-                        source={require('../assets/images/translate.png')}
-                    />
+        <>{
+            userProfile && events && (
+            <SafeAreaView style={styles.container}>
+                <View style={styles.profile}>
+                    <ImageBackground style={styles.backgroundImage} source={require("../assets/images/pink-background-cropped.png")} resizeMode="cover" imageStyle={{ borderRadius: 12 }}>
+                        <Image style={styles.profileImage} source={require(`../assets/images/profile-images/profile-1.png`)} />
+                        <View style={styles.profielTextWrapper}>
+                            <Text fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize="xl">{"Hi, " + userProfile.username + "!"}</Text>
+                            <Text fontFamily="mono" fontWeight={400} fontStyle="normal" fontSize="sm">You've got {totalEventsCount} events today.</Text>
+                        </View>
+                    </ImageBackground>
                 </View>
-            </TouchableHighlight>
-            <TouchableHighlight onPress={() => navigation.navigate('Login')} style={[styles.bigButton, styles.lightPink, {margin: 20}]}>
-                <View>
-                    <Text style={[styles.buttonName, styles.lightPink]}>Calendar</Text>
-                    <Image
-                        style={styles.buttonImage}
-                        source={require('../assets/images/calendar.png')}
-                    />
+                <View style={styles.noticeWrapper}>
+                    <Text style={styles.smallTitle} fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize="xl">Today's Events</Text>
+                    <View style={styles.childButtonWrapper}>
+                        {events?.map(notice =>
+                            <TouchableHighlight style={[styles.childButton, {
+                                backgroundColor: nowSelectedChildId === notice.childId ? theme.colors.primary : "#ffffff",
+                            }]} onPress={() => handleNowSelectedChildId(notice.childId)}>
+                                <Text fontWeight={500} style={[{
+                                    color: nowSelectedChildId !== notice.childId ? theme.colors.primary : "#ffffff",
+                                }]}>{notice.childName}</Text>
+                            </TouchableHighlight>
+                        )}
+                    </View>
+                    <View style={styles.todayNoticeWrapper}>
+                        {events.filter(notice => notice.childId == nowSelectedChildId)[0].events.map(event =>
+                            <View style={{flexDirection: "row"}}>
+                                <Text fontWeight={500} fontSize="md" lineHeight={28} pr={4} style={{color: theme.colors.primary}}>{event.time}</Text>
+                                <Text fontSize="md" lineHeight={28}>{event.content}</Text>
+                            </View>
+
+                        )}
+                    </View>
                 </View>
-            </TouchableHighlight>
-            <TouchableHighlight onPress={() => navigation.navigate('Search')} style={[styles.bigButton, styles.deepBlue]}>
-                <View>
-                    <Text style={[styles.buttonName, styles.deepBlue]}>Search</Text>
-                    <Image
-                        style={styles.buttonImage}
-                        source={require('../assets/images/database.png')}
-                    />
+                <View style={styles.functionButtonWrapper}>
+                    <Text style={styles.smallTitle} fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize="xl">Functions</Text>
+                    <TouchableHighlight onPress={() => navigation.navigate('Translate')} style={[styles.bigButton, styles.deepBlue]}>
+                        <View>
+                            <Text style={[styles.buttonName, styles.deepBlue]} fontWeight={700} fontSize="xl" pb={2}>Translate</Text>
+                            <Text style={styles.deepBlue} fontSize="sm">Translation, summarization, and calendar registration are all possible just by taking a picture of the notice.</Text>
+                        </View>
+                    </TouchableHighlight>
+                    <TouchableHighlight onPress={() => navigation.navigate('Search')} style={[styles.bigButton, styles.deepBlue]}>
+                        <View>
+                            <Text style={[styles.buttonName, styles.deepBlue]} fontWeight={700} fontSize="xl" pb={2}>Search</Text>
+                            <Text style={styles.deepBlue} fontSize="sm">You can find notices you have translated.</Text>
+                        </View>
+                    </TouchableHighlight>
                 </View>
-            </TouchableHighlight>
-        </SafeAreaView>
+            </SafeAreaView> )}
+        </>
     )
 }
 
@@ -65,21 +119,76 @@ const styles = StyleSheet.create({
         alignSelf: 'flex-end'
     },
     container: {
+        backgroundColor: "#ffffff",
         padding: 20,
         flex: 1,
         flexDirection: 'column',
         justifyContent: 'space-around',
         alignItems: 'center',
     },
+    profile: {
+        height: 92,
+        width: "90%",
+        margin: 22,
+        backgroundColor: "#1134a1",
+        borderRadius: 20,
+    },
+    backgroundImage: {
+        width: "100%",
+        height: "100%",
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-evenly"
+    },
+    noticeWrapper: {
+        width: "88%",
+        flex: 1,
+        marginBottom: 18
+    },
+    childButtonWrapper: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+    },
+    childButton: {
+        borderWidth: 1,
+        borderColor: theme.colors.primary,
+        height: 30,
+        borderRadius: 16,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        alignSelf: 'flex-start',
+        marginRight: 8,
+    },
+    todayNoticeWrapper: {
+        alignSelf: "flex-start",
+        marginTop: 18,
+        marginLeft: 12,
+        overflow: "scroll",
+        flex: 1,
+    },
+    profileImage: {
+        width: 60,
+        height: 60,
+    },
+    profielTextWrapper: {
+        paddingRight: 30,
+    },
+    functionButtonWrapper: {
+        flex: 1.5,
+        width: '88%',
+        paddingBottom: 30,
+    },
+    smallTitle: {
+        marginBottom: 8,
+    },
     buttonName: {
-        fontFamily: 'Lora_700Bold',
-        fontSize: 28,
+        fontSize: 24,
     },
     bigButton: {
-        flex: 1,
-        width: '90%',
-        height: 120,
         padding: 26,
+        marginBottom: 18,
         borderRadius: 16,
         shadowColor: "#999999",
         shadowOpacity: 0.5,

react-native/screens/SearchResultScreen.tsx

@@ -22,7 +22,7 @@ interface SearchResultScreenProps {
 
 export default function SearchResultScreen(props: SearchResultScreenProps) {
     const [imageUri, setImageUri] = useState("../assets/images/calendar.png");
-	const [notice, setNotice] = useState<Notice>({userId: 1, childId: 1, date: "", notices: {total_results: [], notice_body: []}});
+	const [notice, setNotice] = useState<Notice>({userId: 1, childId: 2, date: "", notices: {total_results: [], notice_body: []}});
 	const [showFullText, setShowFullText] = useState<boolean>(false);
 	const [isFullDrawer, setFullDrawer] = useState<boolean>(false);
 

react-native/types.ts

@@ -37,11 +37,20 @@ interface Notice {
 			id: number,
 			summary: {id: number, content: string, highlight: boolean, registered: boolean}[],
 			fullText: string,
-			korean: string
+			korean: string,
 		}[]
 	}
 }
 
+export interface UserProfile {
+	userId: number;
+	username: string;
+	gmail: string;
+	profileImageType: number; // 1 or 2
+	language: string; // 'english', 'japanese', 'chinese', ...
+	children: {childName: string, childId: number}[];
+}
+
 interface BottomDrawerProps {
 	results: Result,
 	showFullText?: boolean,
@@ -55,4 +64,4 @@ interface BottomDrawerProps {
 
 export type {
 	Result, Notice, BottomDrawerProps
-}
+}