mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2025-07-05 03:44:09 +08:00
Allow editing of user info
This commit is contained in:
parent
f24b84139b
commit
8de8e67070
3 changed files with 80 additions and 32 deletions
|
@ -18,11 +18,15 @@ 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";
|
||||
import { useQuery } from "react-query";
|
||||
import { UserInfo as GetUserInfo } from "../../components/Api/Api";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import {
|
||||
UserInfo as GetUserInfo,
|
||||
PatchUserInfo,
|
||||
} from "../../components/Api/Api";
|
||||
import { colors } from "../../styles";
|
||||
|
||||
export default function UserInfo() {
|
||||
const queryClient = useQueryClient();
|
||||
const UserInfo = useQuery("user", GetUserInfo, {
|
||||
onSuccess: (data: UserInfoParams) => {
|
||||
setUser({
|
||||
|
@ -34,10 +38,18 @@ export default function UserInfo() {
|
|||
course: data[1].course,
|
||||
avatar: data[1].avatar,
|
||||
});
|
||||
setDisplayName({
|
||||
first_name: data[1].first_name,
|
||||
last_name: data[1].last_name,
|
||||
});
|
||||
},
|
||||
});
|
||||
const mutation = useMutation({
|
||||
mutationFn: PatchUserInfo,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries("user");
|
||||
},
|
||||
});
|
||||
|
||||
const navigation = useNavigation<RootDrawerParamList>();
|
||||
const [isEditable, setIsEditable] = useState(false);
|
||||
const subjectOptions = ["", "", "", ""];
|
||||
const [user, setUser] = useState({
|
||||
|
@ -48,6 +60,10 @@ export default function UserInfo() {
|
|||
course: "",
|
||||
avatar: "",
|
||||
});
|
||||
const [displayName, setDisplayName] = useState({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
});
|
||||
function Avatar() {
|
||||
if (user.avatar) {
|
||||
return <Image source={{ uri: user.avatar }} style={styles.profile} />;
|
||||
|
@ -64,7 +80,9 @@ export default function UserInfo() {
|
|||
<ScrollView style={styles.background}>
|
||||
<AnimatedContainer>
|
||||
<Text style={styles.text_white_medium_large}>
|
||||
{(user.first_name || "Undefined") + " " + (user.last_name || "User")}
|
||||
{(displayName.first_name || "Undefined") +
|
||||
" " +
|
||||
(displayName.last_name || "User")}
|
||||
</Text>
|
||||
<View>
|
||||
<Avatar />
|
||||
|
@ -185,7 +203,19 @@ export default function UserInfo() {
|
|||
</View>
|
||||
<TouchableOpacity
|
||||
style={styles.button_template}
|
||||
onPress={() => setIsEditable(!isEditable)}
|
||||
onPress={() => {
|
||||
if (isEditable) {
|
||||
mutation.mutate({
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
course: user.course,
|
||||
semester: user.semester,
|
||||
subjects: [],
|
||||
year_level: user.year_level,
|
||||
});
|
||||
}
|
||||
setIsEditable(!isEditable);
|
||||
}}
|
||||
>
|
||||
<Text style={styles.text_white_small}>
|
||||
{isEditable && UserInfo.isSuccess ? "Save" : "Edit Profile"}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue