From 0d1e240b203f346cd63ce368d38c9f05512e934e Mon Sep 17 00:00:00 2001
From: emilyliublair <67622097+emilyliublair@users.noreply.github.com>
Date: Thu, 29 Jul 2021 11:26:38 -0400
Subject: [PATCH] sotw ui
---
app/StudentWeek.js | 91 +++++++++++++++++++++++++-----------
app/assets/achievements.png | Bin 0 -> 3196 bytes
app/assets/collapse.png | Bin 0 -> 183 bytes
app/assets/expand.png | Bin 0 -> 186 bytes
app/assets/hobbies.png | Bin 0 -> 2332 bytes
app/assets/message.png | Bin 0 -> 2125 bytes
6 files changed, 65 insertions(+), 26 deletions(-)
create mode 100644 app/assets/achievements.png
create mode 100644 app/assets/collapse.png
create mode 100644 app/assets/expand.png
create mode 100644 app/assets/hobbies.png
create mode 100644 app/assets/message.png
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 0000000000000000000000000000000000000000..7a1afc643c8eee90cb17143d122a30d4c11894a8
GIT binary patch
literal 3196
zcmV-?41@EDP)6$cQAG|hlC-R%O>BJP8X8!EH|D9f-(BTb7fTM#4=Bxb8hQmLfYclwW)lvJuJ
z3)}quN$TBm?mgdo@1DCog{veHX$=elZUZ_3ZGdzjq1vPZC;`p_r+`DiE=5t!U#%D}
zTO!g{L>7rij$FP@ipW9{Y4iU9&{ag<5s|CSFYdi-@efjsUf_Mno)E3Sk$Ktyep;prb^b%NI$othAvnJ47Vu
zav>5$VxDfIA&@x-1
z#KrFf?okxQTiaHR5!0%=AS$wQ=rBL~ojTArj0KTI~0PvqW
zPT*o5ri^C94I7CmHJw0SF8(t)Vf6&gp2o3oHU*RJq4=?Bl+2!ibLo75!N3c#;tIbD
zA`|L*z7-#>m;4b~QuuGVy%^JY*~YiYa8CYq&B0v(v^!Tne!)}51qWl=#yq&pDt$ZBM2+MLvd%Tdf`O6LBW
zs-0W0bn8jdqfdrx%$;t=KK_2<`VS>oa1rOiC(+BxFlDwvcNB-!r>3Qc{+ECs-;uxJ
z{`7qSthe?++-}NNE=GyB6aULmBut%AJEUnMa%;^G?UI7|#K>YbvUIzR)P>7&E}2{X
z|1uPdHB_!xtRznV6#(8t2XOxO8N7c#2tF@Le0V$4MoJExKa06@mq;Vg
zDP6V@z0^t4%-NXRcS21~!_>4nzGL44peEHh4vrU*){3H>t9iAi5jzz}$lRfGoe%){
z{l=d&r_d{0SUTSlVG=lZmOx%E3FGf4e)w1vn~mVb3wXcYk89n_C{`Qho4eK3iVEBh
zKfhX28VXUD0(rUkj{O5QE)Gm41El)STKf!)un!jG1E96L3Efpj@e>b$=m03TIFe`0
z#ndFDzGkNaOEnQ`1$4Ml2=BptIF~JeU@+{uUg5&httVP$%WwzL37kJ`1Z~n#6O*xJ
z4Z^c`2gy$@#M=G#&}d)v<>%N242|^`bQY0TDlnwJAjRjUeDz9nrz3`e;Cgcnrqp!O
z|Fn+O>=kG&TZf8OyB+cQLI9OpH&HZmDz10dq9!I`YLN+mrPIv-Xsz0YAY5<1O4&=x
zaW0vM_#$Q|H5#Y_J?evSE}2K=*3WRvpA{9xckCYoemswwl7_i`N31=1BbAi^n3~^!
zXaE1G500sJS9qP6RQVlmc4&gY)Sd-$N?FFL+s-x(cS(=fN|h^==&;(j>_H6byw{oT+E}%n)R5PG!5B!_Uxea_s@m-
zS$p=uKI%Tqoo+#~*+SRF=SBQ}RC~;&M>G{{{Jif}x1vA*RDQ7uQ`6>Hd)$suJUn~0tVkvh^8&nwk!JkYGVRzMNzD*1e4T
zgLg=tH5cpcSutbLFm?dzf3>2ha@%H5RpN#Y4_!;6
z-2UgBqF1_6R1@N@!ajB~ad(YC%WM_dKp=qUz;0acuEV+XSyJXLiI_20%hjOH9!*kJ
zN#V46v2^K1>Y^24WxA^z$DBtA78Q`1y#h>nWR7e3XVljQug99g84rZ
zKl(oGqbH!XZI8KKN3<516g@HtH8qX2C4UO@*BvD||La-YAFW3(FGDXe)-%DPf@sa<
zsKDXILim699{=f+#0|YWW;O$3R8L>|DweL@sd)cwoC{`S>)oHYfp-~G7)`_Si=Oz;
zoB~}B^HtN*vGwYUUS5X#qxDqn+6IbhB!fsDR;nkB=Nbc2zUGfqZuyLiwHq)szoC8y
zUB~^&|4{MX>xkcvt?xkM1`WfM*^2Ttf54w}oMs<>5#7~Y0U`h>nucPFi)PkRQxxUA
zh~!YuRHa7Z^-#6@3oN&GZx{rCs$w5E1zXl2TyMUDXWuS7`*wwj?c-yvup2Tk9#<6Q
zLd`hx9#V%om=tj--YfdF{Ue>ZpM~12-|?6sL82yMk4_~WzT2hJ-815NA^>s
zE&fA&Fv2B!TVX+q$lDkj5s_YgKSd9YL2KEDwB@Vte}BSwZT9XYSX^iX-}x47{fA)d
zJ22YrV2p4C=hFFj5AMT0dID;C6I^e+f~9j8QkTAnVvh3U4ZWc#%EL83YEK&H03(5j
zTj)Ko2fe%u3HT{`WKw7!%G{wd@uMeT%NpE}je50000&IYeHTaHXLCoRH8zaLIXpGb
zPx4nS{i%A=D1DmEY4L=0D$8bXImMmkx&F`8lvf_7n%5n;7Ga-yC)7Pppkc)gamgR%
dGRFf8m}|2X#E-X&Z35cM;OXk;vd$@?2>^f$Llyu4
literal 0
HcmV?d00001
diff --git a/app/assets/expand.png b/app/assets/expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..b53914379aeb2b7ffd0bba66d5fa1596ceefa903
GIT binary patch
literal 186
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