Skip to content

Commit

Permalink
Merge pull request #76 from dsc-sookmyung/feature/home
Browse files Browse the repository at this point in the history 
[#3] fix: undefined is not an object
  • Loading branch information
@hee-suh
hee-suh authored May 22, 2022
2 parents afd6359 + 93cd031 commit 2b10d1e
Showing 1 changed file with 40 additions and 43 deletions.
83 changes: 40 additions & 43 deletions react-native/screens/HomeScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,33 @@ import { theme } from '../core/theme';
import type { Navigation, UserData } from '../types';
import { useAuth } from '../contexts/Auth';
import { StackActions } from '@react-navigation/native';
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, color: number, events: {date: '', description: '', eid: '', title: ''}[] }[]}>();
const [events, setEvents] = useState<{event_num: number, children: { cid: number, cname: string, events: string[] }[]}>(
{event_num: 4,
children: [
{
cid: 1,
cname: "Soo",
events: [
"the 17th Graduate Seremony",
"Do-Dream Festival"
]
}, {
cid: 2,
cname: "Hee",
events: []
}
]
}
);
const [nowSelectedChildId, setNowSelectedChildId] = useState<number>(1);
const [user, setUser] = useState<UserData>();
const auth = useAuth();

useEffect(()=> {
setUser(auth?.userData);
// mockup data
// setEvents({
// event_num: 4,
// children: [
// {
// cid: 1,
// cname: "Soo",
// color: 1,
// events: [
// "the 17th Graduate Seremony",
// "Do-Dream Festival"
// ]
// }, {
// cid: 2,
// cname: "Hee",
// color: 1,
// events: [
// // "17th Graduate Seremony",
// // "Do-Dream Festival"
// ]
// }
// ]
// })

if (auth?.authData?.jwt_token) {
fetch('http://localhost:8080/user/children', {
Expand All @@ -51,12 +43,14 @@ export default function HomeScreen({ navigation }: Navigation) {
redirect: 'follow'
})
.then(response => response.json())
.then(data => setEvents(data)) // TODO: console.log(data)
.then(data => {
setEvents(data);
}) // console.log(data)
.catch((error) => {
console.log(error)
if(error?.response?.status==401) {
//redirect to login
Alert.alert(i18n.t('sessionExpired'));
Alert.alert("The session has expired. Please log in again.");
auth.signOut();
navigation.dispatch(StackActions.popToTop())
}
Expand All @@ -65,28 +59,30 @@ export default function HomeScreen({ navigation }: Navigation) {
}, [auth]);

useEffect(() => {
console.log(events);
}, [events])
if (events && events?.children?.length > 0) {
setNowSelectedChildId(events.children[0].cid);
}
}, [events]);

const handleNowSelectedChildId = (cid: number) => {
setNowSelectedChildId(cid);
}

return (
<>{
user && events && (
user && events && events.children?.length > 0 && (
<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">{i18n.t('hello_1') + user.username + i18n.t('hello_2')}</Text>
<Text fontFamily="mono" fontWeight={400} fontStyle="normal" fontSize="sm">{i18n.t('eventCount_1') + events.event_num + i18n.t('eventCount_2')}</Text>
<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 {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">{i18n.t('todayEvent')}</Text>
<Text style={styles.smallTitle} fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize="xl">Today's Events</Text>
<View style={styles.childButtonWrapper}>
{events.children?.map((notice, index) =>
<TouchableOpacity key={'n_'+index} style={[styles.childButton, {
Expand All @@ -99,37 +95,38 @@ export default function HomeScreen({ navigation }: Navigation) {
)}
</View>
<View style={styles.todayNoticeWrapper}>
{events.children?.filter(notice => notice.cid === nowSelectedChildId)[0].events?.length > 0 ? (
events.children?.filter(notice => notice.cid === nowSelectedChildId)[0].events.map((item, index) =>
{events.children.filter(child => child.cid === nowSelectedChildId).length > 0 && events.children.filter(child => child.cid === nowSelectedChildId)[0].events?.length ? (
events.children?.filter(child => child.cid === nowSelectedChildId)[0].events?.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?.title}</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}>{i18n.t('noEvent')}</Text>
<Text fontSize="md" pt={2}>There is no event today!</Text>
</Box>
)
}
</View>
</View>
<View style={styles.functionButtonWrapper}>
<Text style={styles.smallTitle} fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize="xl">{i18n.t('functions')}</Text>
<Text style={styles.smallTitle} fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize="xl">Functions</Text>

<TouchableOpacity onPress={() => navigation.navigate('Translate')}>
<ImageBackground source={require("../assets/images/button-background.png")} style={[styles.bigButton]} imageStyle={{ borderRadius: 12 }}>
<View>
<Text style={[styles.buttonName, styles.deepBlue]} fontWeight={700} fontSize="xl" pb={2}>{i18n.t('translate')}</Text>
<Text style={styles.deepBlue} fontSize="sm">{i18n.t('translateDesc')}</Text>
<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>
</ImageBackground>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('Search')}>
<ImageBackground source={require("../assets/images/button-background.png")} style={[styles.bigButton]} imageStyle={{ borderRadius: 12 }}>
<View>
<Text style={[styles.buttonName, styles.deepBlue]} fontWeight={700} fontSize="xl" pb={2}>{i18n.t('search')}</Text>
<Text style={styles.deepBlue} fontSize="sm">{i18n.t('searchDesc')}</Text>
<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>
</ImageBackground>
</TouchableOpacity>
Expand Down

0 comments on commit 2b10d1e

Please sign in to comment.