diff --git a/app/StudentWeek.js b/app/StudentWeek.js
index e7d3012..2002dcb 100644
--- a/app/StudentWeek.js
+++ b/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,9 +24,29 @@ 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`,{
@@ -44,35 +65,53 @@ class StudentWeek extends React.Component {
return
} else {
const iconURI = this.state.data.icon !== undefined?`data:image/png;charset=utf-8;base64,${this.state.data.icon}`:'';
+ const hobbyText = ({this.state.data.hobbies})
+ const achievementText = ({this.state.data.achievements})
+ const messageText = ({this.state.data.messages})
return (
-
-
-
- {this.state.data.name}
- {'\t'}Grade: {this.state.data.year}
-
-
-
+
+
+
+
+ {this.state.data.name}
+ Grade {this.state.data.year}
+
+
+
+
+
+
+ Hobbies
+
+
+
+ {this.state.hobbyExpanded?hobbyText:<>}
+
+
+
+
+
+ Achievements
+
+
+
+ {this.state.achievementExpanded?achievementText:<>}
+
+
+
+
+
+ Messages
+
+
+
+ {this.state.messageExpanded?messageText:<>}
+
-
-
- {"\n"}Hobbies:
- {'\t'}{this.state.data.hobbies}
-
-
- {"\n"}Achievements:
- {'\t'}{this.state.data.achievements}
-
-
- {"\n"}Messages:
- {'\t'}{this.state.data.messages}
-
-
-
-
+
)
}
}
diff --git a/app/assets/achievements.png b/app/assets/achievements.png
new file mode 100644
index 0000000..7a1afc6
Binary files /dev/null and b/app/assets/achievements.png differ
diff --git a/app/assets/collapse.png b/app/assets/collapse.png
new file mode 100644
index 0000000..484efa9
Binary files /dev/null and b/app/assets/collapse.png differ
diff --git a/app/assets/expand.png b/app/assets/expand.png
new file mode 100644
index 0000000..b539143
Binary files /dev/null and b/app/assets/expand.png differ
diff --git a/app/assets/hobbies.png b/app/assets/hobbies.png
new file mode 100644
index 0000000..07a10e7
Binary files /dev/null and b/app/assets/hobbies.png differ
diff --git a/app/assets/message.png b/app/assets/message.png
new file mode 100644
index 0000000..fd01fa9
Binary files /dev/null and b/app/assets/message.png differ