mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2024-11-17 06:19:25 +08:00
user info added
This commit is contained in:
AngelV3rgs
parent
d51ab2082d
commit
281d53e3dd
7 changed files with 295 additions and 2 deletions
2
App.tsx
2
App.tsx
|
|
@ -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";
|
||||
|
||||
const Drawer = createDrawerNavigator();
|
||||
|
|
@ -62,6 +63,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>
|
||||
</Provider>
|
||||
|
|
|
|||
54
package-lock.json
generated
54
package-lock.json
generated
|
|
@ -12,6 +12,7 @@
|
|||
"@react-navigation/drawer": "^6.6.3",
|
||||
"@react-navigation/native": "^6.1.7",
|
||||
"@react-navigation/native-stack": "^6.9.13",
|
||||
"@redmin_delishaj/react-native-select": "^1.0.6",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"axios": "^1.4.0",
|
||||
"expo": "~48.0.18",
|
||||
|
|
@ -20,10 +21,14 @@
|
|||
"moti": "^0.25.3",
|
||||
"react": "18.2.0",
|
||||
"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-redux": "^8.1.1",
|
||||
"redux": "^4.2.1"
|
||||
|
|
@ -5130,6 +5135,11 @@
|
|||
"nanoid": "^3.1.23"
|
||||
}
|
||||
},
|
||||
"node_modules/@redmin_delishaj/react-native-select": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@redmin_delishaj/react-native-select/-/react-native-select-1.0.6.tgz",
|
||||
"integrity": "sha512-YEpA8wEaOWTjkF5VkNXB7k+yuqxzlqQczlL8kaKtV30AS2uURV+0gk7ZPrKrSOEroc8xoWsTv5V4nJcYYiBfZw=="
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "1.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
|
||||
|
|
@ -12149,6 +12159,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",
|
||||
|
|
@ -12160,6 +12178,15 @@
|
|||
"nullthrows": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-dropdown-picker": {
|
||||
"version": "5.4.6",
|
||||
"resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz",
|
||||
"integrity": "sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==",
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-gesture-handler": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",
|
||||
|
|
@ -12181,6 +12208,28 @@
|
|||
"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-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",
|
||||
|
|
@ -12222,6 +12271,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",
|
||||
|
|
|
|||
|
|
@ -13,21 +13,26 @@
|
|||
"@react-navigation/drawer": "^6.6.3",
|
||||
"@react-navigation/native": "^6.1.7",
|
||||
"@react-navigation/native-stack": "^6.9.13",
|
||||
"@redmin_delishaj/react-native-select": "^1.0.6",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"axios": "^1.4.0",
|
||||
"expo": "~48.0.18",
|
||||
"expo-linking": "~4.0.1",
|
||||
"expo-status-bar": "~1.4.4",
|
||||
"moti": "^0.25.3",
|
||||
"react": "18.2.0",
|
||||
"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-redux": "^8.1.1",
|
||||
"redux": "^4.2.1",
|
||||
"expo-linking": "~4.0.1"
|
||||
"redux": "^4.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
|
|
|
|||
|
|
@ -97,6 +97,15 @@ export default function CustomDrawerContent(props: {}) {
|
|||
<SignupIcon size={32} />
|
||||
<Text style={styles.text_white_medium}>Register</Text>
|
||||
</DrawerButton>
|
||||
<DrawerButton
|
||||
color={colors.blue_2}
|
||||
onPress={() => {
|
||||
navigation.navigate("UserInfo");
|
||||
}}
|
||||
>
|
||||
<HomeIcon size={32} />
|
||||
<Text style={styles.text_white_medium}>UserInfo</Text>
|
||||
</DrawerButton>
|
||||
{/*
|
||||
Debug buttons for accessing revalidation and activation page
|
||||
<DrawerButton
|
||||
|
|
|
|||
193
src/routes/UserInfo/UserInfo.tsx
Normal file
193
src/routes/UserInfo/UserInfo.tsx
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
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 SignupIcon from "../../icons/SignupIcon/SignupIcon";
|
||||
import { UserRegister } from "../../components/Api/Api";
|
||||
import IsNumber from "../../components/IsNumber/IsNumber";
|
||||
import ParseError from "../../components/ParseError/ParseError";
|
||||
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
|
||||
import {TouchableOpacity, Image} from "react-native";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import Select, { SelectConfig, SelectItem } from '@redmin_delishaj/react-native-select';
|
||||
import DropDownPicker from 'react-native-dropdown-picker'
|
||||
import SelectDropdown from 'react-native-select-dropdown'
|
||||
import ImagePicker from 'react-native-image-picker';
|
||||
|
||||
export default function UserInfo() {
|
||||
const navigation = useNavigation<RootDrawerParamList>();
|
||||
const [isEditable, setIsEditable] = useState(false);
|
||||
const options = ["Prog1", "Prog2", "Networking", "Database"];
|
||||
|
||||
//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}}}></Text>
|
||||
<View>
|
||||
<Text style ={styles. text_white_medium} >Kurt Toledo</Text>
|
||||
<Text style ={styles. text_white_small} >Student</Text>
|
||||
<Image source={require("./image/3135715.png")} style={styles.profile} />
|
||||
</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={() =><SignupIcon 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
BIN
src/routes/UserInfo/image/3135715.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
|
|
@ -1,3 +1,4 @@
|
|||
import { createErrorHandler } from "expo/build/errors/ExpoErrorManager";
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export const colors = {
|
||||
|
|
@ -101,6 +102,35 @@ const styles = StyleSheet.create({
|
|||
padding: 10,
|
||||
borderRadius: 8,
|
||||
},
|
||||
profile: {
|
||||
height: 80,
|
||||
width: 80,
|
||||
marginLeft: 10,
|
||||
},
|
||||
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",
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
|
||||
export default styles;
|
||||
|
|
|
|||
Loading…
Reference in a new issue