sotw ui

app/StudentWeek.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -7,6 +7,7 @@ import {
   Text,
   StatusBar,
   Image,
+  TouchableOpacity
 } from 'react-native';
 
 import {
@@ -23,10 +24,30 @@ class StudentWeek extends React.Component {
 	constructor(props) {
 		super(props)
 		this.state = {
-			isLoading: true
+			isLoading: true,
+			hobbyExpanded: false,
+			achievementExpanded: false,
+			messageExpanded: false,
+			hobbyArrow:require('./assets/expand.png'),
+			achievementArrow:require('./assets/expand.png'),
+			messageArrow:require('./assets/expand.png')
 		}
 	}
 
+	clickHobby() {
+		if (!this.state.hobbyExpanded) this.setState({hobbyExpanded:true, hobbyArrow: require('./assets/collapse.png')});
+		else this.setState({hobbyExpanded: false,hobbyArrow:require('./assets/expand.png')});
+	}
+	clickAchievements() {
+		if (!this.state.achievementExpanded) this.setState({achievementExpanded:true, achievementArrow: require('./assets/collapse.png')});
+		else this.setState({achievementExpanded: false, achievementArrow:require('./assets/expand.png')});
+	}
+	clickMessages() {
+		if (!this.state.messageExpanded) this.setState({messageExpanded:true, messageArrow: require('./assets/collapse.png')});
+		else this.setState({messageExpanded: false, messageArrow:require('./assets/expand.png')});
+	}
+	
+	
 	componentDidMount() {
 		fetch(`${url}/api/en/student`,{
 		  headers: {
@@ -44,35 +65,53 @@ class StudentWeek extends React.Component {
 			return <View/>
 		} else {
 			const iconURI = this.state.data.icon !== undefined?`data:image/png;charset=utf-8;base64,${this.state.data.icon}`:'';
+			const hobbyText = (<Text style = {{marginLeft: 50, paddingHorizontal: '2%', paddingBottom: '2%'}}>{this.state.data.hobbies}</Text>)
+			const achievementText = (<Text style = {{marginLeft: 50, paddingHorizontal: '2%', paddingBottom: '2%'}}>{this.state.data.achievements}</Text>)
+			const messageText = (<Text style = {{marginLeft: 50, paddingHorizontal: '2%', paddingBottom: '2%'}}>{this.state.data.messages}</Text>)
 			return (
-				<View style={{paddingTop:'5%',paddingHorizontal:'10%', backgroundColor: 'white', height: '100%'}}>
+				<ScrollView style={{paddingTop:'5%',paddingHorizontal:'10%', backgroundColor: 'white', height: '100%'}}>
-					<View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
+					<View style={{backgroundColor: 'white',borderRadius: 150, height: 300, width: 300, alignSelf: 'center', shadowColor: 'red', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.5, shadowRadius: 7}}>
-						<View>
+						<Image style={{resizeMode: 'cover',borderRadius: 150, height: 300, width: 300, alignSelf: 'center'}} source = {{iconURI}} /> 
-							<Text style={{fontSize:28,marginBottom:'10%',textAlign:'center'}}>{this.state.data.name}</Text>	
-							<Text style={{fontSize:20}}>{'\t'}Grade: {this.state.data.year}</Text>
 					</View>
-						<View style = {{height: 150, width: 150}}>
+					<Text style={{fontSize:28,marginTop:'5%',textAlign:'center'}}>{this.state.data.name}</Text>
-							<Image style = {{height: '100%', width:'100%', borderRadius: 6}}source={{iconURI}} />
+					<Text style={{fontSize:20,textAlign:'center', fontWeight: '200'}}>Grade {this.state.data.year}</Text>
+					<View>
+						<View style={{display: 'flex', padding:'2%', borderRadius: 8, marginTop:'5%'}}>
+							<TouchableOpacity onPress = {this.clickHobby.bind(this)}>
+								<View style={{display:'flex', flexDirection: 'row'}}>
+									<Image source = {require('./assets/hobbies.png')} />
+									<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
+										<Text style={{fontSize: 20,  alignSelf: 'center'}}>Hobbies</Text>
+										<Image source = {this.state.hobbyArrow} style={{alignSelf:'center'}}/>
+									</View>
+								</View>
+								{this.state.hobbyExpanded?hobbyText:<></>}
+							</TouchableOpacity>
+							<TouchableOpacity onPress = {this.clickAchievements.bind(this)}>
+								<View style={{display: 'flex', borderTopWidth: 1, borderTopColor: '#8D8D8D', shadowColor: 'black', flexDirection: 'row'}}>
+									<Image source = {require('./assets/achievements.png')} />
+									<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
+										<Text style={{fontSize: 20, alignSelf: 'center'}}>Achievements</Text>
+										<Image source = {this.state.achievementArrow} style={{alignSelf:'center'}}/>
+									</View>
+								</View>
+								{this.state.achievementExpanded?achievementText:<></>}
+							</TouchableOpacity>
+							<TouchableOpacity onPress = {this.clickMessages.bind(this)}>
+								<View style={{display: 'flex', borderTopWidth: 1, borderTopColor: '#8D8D8D', shadowColor: 'black', flexDirection: 'row'}}>
+									<Image source = {require('./assets/message.png')} />
+									<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
+										<Text style={{fontSize: 20, alignSelf: 'center'}}>Messages</Text>
+										<Image source = {this.state.messageArrow} style={{alignSelf:'center'}}/>
+									</View>
+								</View>
+								{this.state.messageExpanded?messageText:<></>}
+							</TouchableOpacity>
 						</View>
 						
 					</View>
 					
-					<View style = {{paddingTop:'10%', height: '55%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
+				</ScrollView>
-						<View>
-							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Hobbies:</Text>
-							<Text style={{fontSize: 20}}>{'\t'}{this.state.data.hobbies}</Text>
-						</View>
-						<View>
-							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Achievements: </Text>
-							<Text style={{fontSize: 20}}>{'\t'}{this.state.data.achievements}</Text>
-						</View>
-						<View>
-							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Messages:</Text>
-							<Text style={{fontSize: 20}}>{'\t'}{this.state.data.messages}</Text>
-						</View>
-					</View>
-					
-				</View>
 			)
 		}
 	}