Skip to content

Commit

Permalink
Merge pull request #59 from dsc-sookmyung/feature/home
Browse files Browse the repository at this point in the history 
[#3] feat: update api fetch & add empty event UI
  • Loading branch information
@hee-suh
hee-suh authored Mar 24, 2022
2 parents 3efead9 + 0424ed4 commit b306c82
Showing 1 changed file with 74 additions and 35 deletions.
109 changes: 74 additions & 35 deletions react-native/screens/HomeScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableHighlight, Image, ImageBackground } from 'react-native';
import { Text } from 'native-base'
import { StyleSheet, View, SafeAreaView, TouchableHighlight, Image, ImageBackground, Alert } from 'react-native';
import { Text, Box } from 'native-base'
import { Ionicons } from '@expo/vector-icons';
import { theme } from '../core/theme';
import type { Navigation, UserData } from '../types';
import { useAuth } from '../contexts/Auth';
import { StackActions } from '@react-navigation/native';


export default function HomeScreen({ navigation }: Navigation) {
const [events, setEvents] = useState<{cid: number, cname: string, events: {time: string, content: string}[]}[]>();
const [events, setEvents] = useState<{event_num: number, children: { cid: number, cname: string, event: string[] }[]}>();
const [totalEventsCount, setTotalEventsCount] = useState<number>(4);
const [nowSelectedChildId, setNowSelectedChildId] = useState<number>(1);
const [user, setUser] = useState<UserData>();
Expand All @@ -16,27 +19,48 @@ export default function HomeScreen({ navigation }: Navigation) {
setUser(auth?.userData);

// TODO: get events by send header(`auth.AuthData`) to server
setEvents([{
cid: 1,
cname: "Soo",
events: [{
time: "10:00",
content: "the 17th Graduate Seremony"
}, {
time: "13:00",
content: "Do-Dream Festival"
}]
}, {
cid: 2,
cname: "Hee",
events: [{
time: "11:00",
content: "the 18th Matriculation"
}, {
time: "13:00",
content: "Do-Dream Festival"
}]
}])
// mockup data
setEvents({
event_num: 4,
children: [
{
cid: 1,
cname: "Soo",
event: [
"the 17th Graduate Seremony",
"Do-Dream Festival"
]
}, {
cid: 2,
cname: "Hee",
event: [
// "17th Graduate Seremony",
// "Do-Dream Festival"
]
}
]
})

if (auth?.authData?.jwt_token) {
fetch('http://localhost:8080/user/children', {
method: 'GET',
headers: {
'JWT_TOKEN': auth.authData.jwt_token
},
redirect: 'follow'
})
.then(response => response.json())
.then(data => setEvents(data)) // TODO: 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.");
auth.signOut();
navigation.dispatch(StackActions.popToTop())
}
});
}
// TODO: fetch API
// .then => set nowSelectedChild
}, [auth])
Expand All @@ -54,14 +78,14 @@ export default function HomeScreen({ navigation }: Navigation) {
<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, " + user.username + "!"}</Text>
<Text fontFamily="mono" fontWeight={400} fontStyle="normal" fontSize="sm">You've got {totalEventsCount} events today.</Text>
<Text fontFamily="mono" fontWeight={400} fontStyle="normal" fontSize="sm">You've got {events.event_num} events today.</Text>
</View>
</ImageBackground>
</View>
<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, index) =>
{events.children?.map((notice, index) =>
<TouchableHighlight key={'n_'+index} style={[styles.childButton, {
backgroundColor: nowSelectedChildId === notice.cid ? theme.colors.primary : "#ffffff",
}]} onPress={() => handleNowSelectedChildId(notice.cid)}>
Expand All @@ -72,12 +96,20 @@ export default function HomeScreen({ navigation }: Navigation) {
)}
</View>
<View style={styles.todayNoticeWrapper}>
{events.filter(notice => notice.cid == nowSelectedChildId)[0].events.map((event, index) =>
<View key={'e_'+index} 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>
)}
{events.children?.filter(notice => notice.cid === nowSelectedChildId)[0].event?.length ? (
events.children?.filter(notice => notice.cid === nowSelectedChildId)[0].event.map((item, index) =>
<View key={'e_'+index} style={{flexDirection: "row"}}>
{/* <Text fontWeight={500} fontSize="md" lineHeight={28} pr={4} style={{color: theme.colors.primary}}>{item.time}</Text> */}
<Text fontSize="md" lineHeight={28}>{index+1 + '. ' + item}</Text>
</View>
)
) : (
<Box style={styles.emptyBox}>
<Ionicons name="musical-note" size={64} />
<Text fontSize="md" pt={2}>There is no event today!</Text>
</Box>
)
}
</View>
</View>
<View style={styles.functionButtonWrapper}>
Expand Down Expand Up @@ -139,7 +171,7 @@ const styles = StyleSheet.create({
noticeWrapper: {
width: "88%",
flex: 1,
marginBottom: 18
marginBottom: 18,
},
childButtonWrapper: {
flexDirection: "row",
Expand All @@ -158,10 +190,11 @@ const styles = StyleSheet.create({
},
todayNoticeWrapper: {
alignSelf: "flex-start",
marginTop: 18,
marginLeft: 12,
paddingTop: 18,
paddingHorizontal: 12,
overflow: "scroll",
flex: 1,
width: "100%"
},
profileImage: {
width: 60,
Expand Down Expand Up @@ -198,5 +231,11 @@ const styles = StyleSheet.create({
},
lightPink: {
color: theme.colors.primary,
},
emptyBox: {
width: '100%',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}
})

0 comments on commit b306c82

Please sign in to comment.