keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #5 from lemeow125/initial-frontend

Browse source 
Initial frontend
This commit is contained in:
lemeow125 2023-07-17 14:00:10 +08:00 committed by GitHub
commit 2f96779965
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 500 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
App.tsx
View file

@ -16,6 +16,7 @@ import Register from "./src/routes/Register/Register";
import Onboarding from "./src/routes/Onboarding/Onboarding";
import Revalidation from "./src/routes/Revalidation/Revalidation";
import Activation from "./src/routes/Activation/Activation";
import UserInfo from "./src/routes/UserInfo/UserInfo";
import { useState, useEffect } from "react";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
@ -66,6 +67,7 @@ export default function App() {
<Drawer.Screen name="Onboarding" component={Onboarding} />
<Drawer.Screen name="Revalidation" component={Revalidation} />
<Drawer.Screen name="Activation" component={Activation} />
<Drawer.Screen name="UserInfo" component={UserInfo} />
</Drawer.Navigator>
</NavigationContainer>
</QueryClientProvider>

171
package-lock.json generated
View file

@ -25,11 +25,15 @@
"react-native": "0.71.8",
"react-native-dropdown-picker": "^5.4.6",
"react-native-gesture-handler": "~2.9.0",
"react-native-image-picker": "^5.6.0",
"react-native-maps": "1.3.2",
"react-native-modal": "^13.0.1",
"react-native-reanimated": "~2.14.4",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"react-native-select-dropdown": "^3.3.4",
"react-native-svg": "13.4.0",
"react-query": "^3.39.3",
"react-redux": "^8.1.1",
"redux": "^4.2.1"
},
@ -5207,20 +5211,20 @@
}
},
"node_modules/@tanstack/query-core": {
"version": "4.29.19",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.19.tgz",
"integrity": "sha512-uPe1DukeIpIHpQi6UzIgBcXsjjsDaLnc7hF+zLBKnaUlh7jFE/A+P8t4cU4VzKPMFB/C970n/9SxtpO5hmIRgw==",
"version": "4.29.25",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.25.tgz",
"integrity": "sha512-DI4y4VC6Uw4wlTpOocEXDky69xeOScME1ezLKsj+hOk7DguC9fkqXtp6Hn39BVb9y0b5IBrY67q6kIX623Zj4Q==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/react-query": {
"version": "4.29.19",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.29.19.tgz",
"integrity": "sha512-XiTIOHHQ5Cw1WUlHaD4fmVUMhoWjuNJlAeJGq7eM4BraI5z7y8WkZO+NR8PSuRnQGblpuVdjClQbDFtwxTtTUw==",
"version": "4.29.25",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.29.25.tgz",
"integrity": "sha512-c1+Ezu+XboYrdAMdusK2fTdRqXPMgPAnyoTrzHOZQqr8Hqz6PNvV9DSKl8agUo6nXX4np7fdWabIprt+838dLg==",
"dependencies": {
"@tanstack/query-core": "4.29.19",
"@tanstack/query-core": "4.29.25",
"use-sync-external-store": "^1.2.0"
},
"funding": {
@ -5938,6 +5942,35 @@
"node": ">=8"
}
},
"node_modules/broadcast-channel": {
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
"integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
"dependencies": {
"@babel/runtime": "^7.7.2",
"detect-node": "^2.1.0",
"js-sha3": "0.8.0",
"microseconds": "0.2.0",
"nano-time": "1.0.0",
"oblivious-set": "1.0.0",
"rimraf": "3.0.2",
"unload": "2.2.0"
}
},
"node_modules/broadcast-channel/node_modules/rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
"dependencies": {
"glob": "^7.1.3"
},
"bin": {
"rimraf": "bin.js"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/browserslist": {
"version": "4.21.9",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
@ -6971,6 +7004,11 @@
"npm": "1.2.8000 || >= 1.4.16"
}
},
"node_modules/detect-node": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
},
"node_modules/dir-glob": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -7991,19 +8029,6 @@
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"hasInstallScript": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@ -9402,6 +9427,11 @@
"resolved": "https://registry.npmjs.org/join-component/-/join-component-1.1.0.tgz",
"integrity": "sha512-bF7vcQxbODoGK1imE2P9GS9aw4zD0Sd+Hni68IMZLj7zRnquH7dXUmMw9hDI5S/Jzt7q+IyTXN0rSg2GI0IKhQ=="
},
"node_modules/js-sha3": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
"integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -9884,6 +9914,15 @@
"node": ">=0.10.0"
}
},
"node_modules/match-sorter": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
"integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"remove-accents": "0.4.2"
}
},
"node_modules/md5": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@ -10903,6 +10942,11 @@
"node": ">=8.6"
}
},
"node_modules/microseconds": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
"integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
},
"node_modules/mime": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
@ -11117,6 +11161,14 @@
"thenify-all": "^1.0.0"
}
},
"node_modules/nano-time": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
"integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
"dependencies": {
"big-integer": "^1.6.16"
}
},
"node_modules/nanoid": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@ -11430,6 +11482,11 @@
"node": ">=0.10.0"
}
},
"node_modules/oblivious-set": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
"integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
},
"node_modules/on-finished": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@ -12210,6 +12267,14 @@
"react": "18.2.0"
}
},
"node_modules/react-native-animatable": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz",
"integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==",
"dependencies": {
"prop-types": "^15.7.2"
}
},
"node_modules/react-native-codegen": {
"version": "0.71.5",
"resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.71.5.tgz",
@ -12251,6 +12316,15 @@
"resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz",
"integrity": "sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ=="
},
"node_modules/react-native-image-picker": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-5.6.0.tgz",
"integrity": "sha512-QHHb0qw3VXDedllrfS6SjxNG1SubnjUjIR2OH1HVbjv/IRVa3v4fI1MHbQaSNXlGopT9kL9jcnh7tbcX1z74Vg==",
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-maps": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-1.3.2.tgz",
@ -12269,6 +12343,19 @@
}
}
},
"node_modules/react-native-modal": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-13.0.1.tgz",
"integrity": "sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==",
"dependencies": {
"prop-types": "^15.6.2",
"react-native-animatable": "1.3.3"
},
"peerDependencies": {
"react": "*",
"react-native": ">=0.65.0"
}
},
"node_modules/react-native-reanimated": {
"version": "2.14.4",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz",
@ -12310,6 +12397,11 @@
"react-native": "*"
}
},
"node_modules/react-native-select-dropdown": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/react-native-select-dropdown/-/react-native-select-dropdown-3.3.4.tgz",
"integrity": "sha512-Ld6BGGgCnbiv7uORAP+KnvDQiqeuqdlasKk9woJH9XtFMD44rwjKwelGzsDxFUM9hIAwZdac4UAFmOmXRaMeRg=="
},
"node_modules/react-native-svg": {
"version": "13.4.0",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.4.0.tgz",
@ -12339,6 +12431,31 @@
"async-limiter": "~1.0.0"
}
},
"node_modules/react-query": {
"version": "3.39.3",
"resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
"integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"broadcast-channel": "^3.4.1",
"match-sorter": "^6.0.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/react-redux": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.1.tgz",
@ -12535,6 +12652,11 @@
"jsesc": "bin/jsesc"
}
},
"node_modules/remove-accents": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
"integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
},
"node_modules/remove-trailing-slash": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/remove-trailing-slash/-/remove-trailing-slash-0.1.1.tgz",
@ -14115,6 +14237,15 @@
"node": ">= 4.0.0"
}
},
"node_modules/unload": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
"integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
"dependencies": {
"@babel/runtime": "^7.6.2",
"detect-node": "^2.0.4"
}
},
"node_modules/unpipe": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

6
package.json
View file

@ -17,8 +17,8 @@
"@tanstack/react-query": "^4.29.19",
"axios": "^1.4.0",
"expo": "~48.0.18",
"expo-intent-launcher": "~10.5.2",
"expo-linking": "~4.0.1",
"expo-intent-launcher": "~10.5.2",
"expo-location": "~15.1.1",
"expo-status-bar": "~1.4.4",
"moti": "^0.25.3",
@ -26,10 +26,14 @@
"react-native": "0.71.8",
"react-native-dropdown-picker": "^5.4.6",
"react-native-gesture-handler": "~2.9.0",
"react-native-image-picker": "^5.6.0",
"react-native-modal": "^13.0.1",
"react-native-reanimated": "~2.14.4",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"react-native-select-dropdown": "^3.3.4",
"react-native-svg": "13.4.0",
"react-query": "^3.39.3",
"react-redux": "^8.1.1",
"redux": "^4.2.1",
"react-native-maps": "1.3.2"

13
src/components/DrawerSettings/CustomDrawerContent.tsx
View file

@ -16,6 +16,7 @@ import { RootState } from "../../features/redux/Store/Store";
import LogoutIcon from "../../icons/LogoutIcon/LogoutIcon";
import { logout } from "../../features/redux/slices/StatusSlice/StatusSlice";
import AsyncStorage from "@react-native-async-storage/async-storage";
import UserIcon from "../../icons/UserIcon/UserIcon";
export default function CustomDrawerContent(props: {}) {
const navigation = useNavigation<RootDrawerParamList>();
@ -60,7 +61,7 @@ export default function CustomDrawerContent(props: {}) {
<Text style={styles.text_white_medium}>Stud-E</Text>
</View>
<DrawerButton
color={colors.blue_2}
color={colors.blue_3}
onPress={() => {
navigation.navigate("Home");
}}
@ -68,6 +69,15 @@ export default function CustomDrawerContent(props: {}) {
<HomeIcon size={32} />
<Text style={styles.text_white_medium}>Home</Text>
</DrawerButton>
<DrawerButton
color={colors.blue_2}
onPress={() => {
navigation.navigate("UserInfo");
}}
>
<UserIcon size={32} />
<Text style={styles.text_white_medium}>UserInfo</Text>
</DrawerButton>
<DrawerButton
color={colors.blue_2}
onPress={async () => {
@ -111,6 +121,7 @@ export default function CustomDrawerContent(props: {}) {
<SignupIcon size={32} />
<Text style={styles.text_white_medium}>Register</Text>
</DrawerButton>
{/*
Debug buttons for accessing revalidation and activation page
<DrawerButton

4
src/components/DrawerSettings/DrawerScreenSettings.tsx
View file

@ -10,14 +10,14 @@ const DrawerScreenSettings: DrawerNavigationOptions = {
fontSize: font_sizes.medium,
},
unmountOnBlur: true,
headerStyle: { backgroundColor: colors.blue_3 },
headerStyle: { backgroundColor: colors.login_color},
headerTintColor: colors.text_default,
drawerType: "slide",
drawerLabelStyle: {
color: colors.text_default,
},
drawerStyle: {
backgroundColor: colors.blue_3,
backgroundColor: colors.login_color,
width: 260,
},
headerRight: () => (

26
src/icons/DropdownIcon/DropdownIcon.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
import finalPropsSelectorFactory from "react-redux/es/connect/selectorFactory";
export default function DropdownIcon(props: IconProps) {
return (
<>
<Svg
height={props.size + "px"}
width={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={colors.icon_color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
<Path d="M6 10l6 6l6 -6h-12"></Path>
</Svg>
</>
);
}

34
src/icons/UserInfoIcon/UserInfoIcon.tsx Normal file
View file

@ -0,0 +1,34 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
import finalPropsSelectorFactory from "react-redux/es/connect/selectorFactory";
export default function UserInfoIcon(props: IconProps) {
return (
<>
<Svg
height={props.size + "px"}
width={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={colors.icon_color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
<Path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></Path>
<Path d="M6 21v-2a4 4 0 0 1 4 -4h2.5"></Path>
<Path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></Path>
<Path d="M19.001 15.5v1.5"></Path>
<Path d="M19.001 21v1.5"></Path>
<Path d="M22.032 17.25l-1.299 .75"></Path>
<Path d="M17.27 20l-1.3 .75"></Path>
<Path d="M15.97 17.25l1.3 .75"></Path>
<Path d="M20.733 20l1.3 .75"></Path>
</Svg>
</>
);
}

17
src/routes/Login/Login.tsx
View file

@ -35,21 +35,20 @@ export default function Login() {
return (
<View style={styles.background}>
<AnimatedContainer>
<View style={styles.flex_row}>
<LoginIcon size={32} />
<Text style={styles.text_white_large}>Student Login</Text>
</View>
<View style={{ paddingVertical: 8 }} />
<View
style={{
paddingVertical: 4,
marginBottom: 16,
borderRadius: 4,
width: "90%",
backgroundColor: colors.blue_1,
backgroundColor: colors.head,
}}
/>
<View style={styles.flex_row}>
<LoginIcon size={32} />
<Text style={styles.text_white_large}>Student Login</Text>
</View>
<View style={{ paddingVertical: 8 }} />
<TextInput
style={styles.text_input}
placeholder="Username"
@ -110,13 +109,13 @@ export default function Login() {
}
});
}}
color={colors.blue_3}
color={colors.login_color}
>
<Text style={styles.text_white_small}>Login</Text>
</Button>
<Button
onPress={() => navigation.navigate("Register")}
color={colors.blue_3}
color={colors.reg_color}
>
<Text style={styles.text_white_small}>Register</Text>
</Button>

15
src/routes/Register/Register.tsx
View file

@ -34,20 +34,21 @@ export default function Register() {
return (
<View style={styles.background}>
<AnimatedContainer>
<View style={styles.flex_row}>
<SignupIcon size={32} />
<Text style={styles.text_white_large}>Student Signup</Text>
<View style={{ paddingVertical: 8, }} />
</View>
<View
style={{
paddingVertical: 4,
marginBottom: 16,
marginTop: 8,
borderRadius: 4,
width: "90%",
backgroundColor: colors.blue_1,
backgroundColor: colors.head,
}}
/>
<View style={styles.flex_row}>
<SignupIcon size={32} />
<Text style={styles.text_white_large}>Student Signup</Text>
<View style={{ paddingVertical: 8 }} />
</View>
<TextInput
style={styles.text_input}
placeholder="First Name"
@ -166,7 +167,7 @@ export default function Register() {
{
}
}}
color={colors.blue_3}
color={colors.reg_color}
>
<Text style={styles.text_white_small}>Register</Text>
</Button>

207
src/routes/UserInfo/UserInfo.tsx Normal file
View file

@ -0,0 +1,207 @@
import * as React from "react";
import styles from "../../styles";
import {
View,
Text,
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
} from "react-native";
import { colors } from "../../styles";
import { useState, useEffect } from "react";
import Button from "../../components/Button/Button";
import { useNavigation } from "@react-navigation/native";
import { RootDrawerParamList } from "../../interfaces/Interfaces";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { TouchableOpacity, Image } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import SelectDropdown from "react-native-select-dropdown";
import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon";
export default function UserInfo() {
const navigation = useNavigation<RootDrawerParamList>();
const [isEditable, setIsEditable] = useState(false);
const options = ["", "", "", ""];
const [isActive, setIsActive] = useState(false);
const toggleUserActive = () => {
setIsActive(!isActive);
};
//const dispatch = useDispatch();
// const creds = useSelector((state: RootState) => state.auth.creds);
const [user, setUser] = useState({
first_name: "",
last_name: "",
year_level: "",
semester: "",
course: "",
});
return (
<ScrollView style={styles.background}>
<AnimatedContainer>
<Text style={{ ...styles.text_white_medium, ...{ fontSize: 32 } }}>
Kurt Toledo
</Text>
<View>
<Image
source={require("./image/3135715.png")}
style={styles.profile}
/>
<TouchableOpacity onPress={toggleUserActive} style={styles.button}>
<Text
style={[
styles.text,
isActive ? styles.activeText : styles.inactiveText,
]}
>
Student {isActive ? "Active" : "Inactive"}
</Text>
</TouchableOpacity>
</View>
<View
style={{
paddingVertical: 4,
marginBottom: 16,
marginTop: 8,
borderRadius: 4,
width: "90%",
backgroundColor: colors.head,
}}
/>
<View style={styles.formGroup}>
<View style={{ width: 70 }}>
<Text style={styles.text}>First Name</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput
style={[styles.input, !isEditable && styles.input]}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setUser({ ...user, first_name: e.nativeEvent.text });
}}
/>
</View>
</View>
<View style={styles.formGroup}>
<View style={{ width: 70 }}>
<Text style={styles.text}>Last Name</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput
style={[styles.input, !isEditable && styles.input]}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setUser({ ...user, first_name: e.nativeEvent.text });
}}
/>
</View>
</View>
<View
style={{
paddingVertical: 4,
marginBottom: 16,
marginTop: 8,
borderRadius: 4,
width: "90%",
backgroundColor: colors.head,
}}
/>
<View style={styles.formGroup}>
<View style={{ width: 70 }}>
<Text style={styles.text}>Year Level</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput
style={[styles.input, !isEditable && styles.input]}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setUser({ ...user, first_name: e.nativeEvent.text });
}}
/>
</View>
</View>
<View style={styles.formGroup}>
<View style={{ width: 70 }}>
<Text style={styles.text}>Semester</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput
style={[styles.input, !isEditable && styles.input]}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setUser({ ...user, first_name: e.nativeEvent.text });
}}
/>
</View>
</View>
<View style={styles.formGroup}>
<View style={{ width: 70 }}>
<Text style={styles.text}>Course</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput
style={[styles.input, !isEditable && styles.input]}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setUser({ ...user, first_name: e.nativeEvent.text });
}}
/>
</View>
</View>
<View
style={{
paddingVertical: 4,
marginBottom: 16,
marginTop: 8,
borderRadius: 4,
width: "90%",
backgroundColor: colors.head,
}}
/>
<View style={styles.formGroup}>
<View style={{ width: 80 }}>
<Text style={styles.text}>Subject</Text>
</View>
<View style={{ flex: 1 }}>
<SelectDropdown
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
renderDropdownIcon={() => <DropdownIcon size={32} />}
buttonTextStyle={{
color: "white",
}}
dropdownStyle={{
backgroundColor: "#E3963E",
}}
data={options}
buttonStyle={{
width: "90%",
marginLeft: 10,
backgroundColor: "#E3963E",
borderRadius: 8,
}}
/>
</View>
</View>
<TouchableOpacity
style={styles.button_template}
onPress={() => setIsEditable(!isEditable)}
>
<Text style={styles.text_white_small}>
{isEditable ? "Save" : "Edit Profile"}
</Text>
</TouchableOpacity>
</AnimatedContainer>
</ScrollView>
);
}

BIN
src/routes/UserInfo/image/3135715.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

50
src/styles.tsx
View file

@ -7,16 +7,19 @@ const containerWidth = width - width * 0.08;
const containerHeight = height - height * 0.01;
export const colors = {
orange_1: "#FFBC72",
orange_1: "#FFDEAD",
orange_2: "#FFE2C1",
orange_3: "#C07624",
blue_1: "#4C87A1",
blue_2: "#77ACC3",
blue_3: "#1B5D79",
blue_1: "#E3963E",
blue_2: "#FFAC1C",
blue_3: "#FFAC1C",
text_default: "white",
text_error: "#e32d1e",
text_success: "green",
icon_color: "white",
login_color: "#0047AB",
reg_color: "#0096FF",
head: "white",
blue_disabled: "#C07624",
};
@ -115,6 +118,43 @@ const styles = StyleSheet.create({
width: containerWidth,
alignSelf: "center",
},
profile: {
height: 80,
width: 80,
alignSelf: 'center',
},
input: {
height: 40,
margin: 12,
marginRight: 30,
borderWidth: 1,
color: colors.text_default,
backgroundColor: colors.blue_1,
borderRadius: 8,
borderColor: '#FFAC1C',
padding: 8,
},
formGroup: {
display: "flex",
flexDirection: "row",
alignItems: "center",
},
text: {
marginLeft: 5,
color: colors.text_default,
fontSize: font_sizes.small,
fontWeight: "bold",
},
button: {
padding: 10,
backgroundColor: colors.blue_2,
borderRadius: 5,
},
activeText: {
color: 'green',
},
inactiveText: {
color: 'white',
},
});
export default styles;