Fakultas Ilmu Komputer UI

Commit fbf59d89 authored by angelin depthios's avatar angelin depthios Committed by Ahmad Izzudin Alifyandra
Browse files

FEAT: add profile function

parent 26fedfc2
import { useNavigation } from "@react-navigation/core";
import * as React from "react";
import { Button, StyleSheet, Image } from "react-native";
import { Button, StyleSheet, Image, ActivityIndicator } from "react-native";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import PlainForm from "../../components/Forms/PlainForm";
import { useState } from "react";
......@@ -8,6 +8,13 @@ import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors";
import { RootTabScreenProps } from "../../types/navigation";
import Spacer from "../../components/Spacer/Spacer";
import { pickImage, uploadImgToFirebase } from "../../helpers/images";
import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
import { useDispatch } from "react-redux";
import { setProfilePic } from "../../redux/user/actions";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/store";
import { IUser } from "../../types/firebase/User";
export default function AccountSettingsScreen({
navigation,
......@@ -18,18 +25,50 @@ export default function AccountSettingsScreen({
const [hp, setHp] = useState("");
const [bisnis, setBisnis] = useState("");
const nav = useNavigation();
const [isLoading, setIsLoading] = useState(false);
const dispatch = useDispatch();
const user: IUser = useSelector((state: RootState) => state.user);
const handlePickImage = () => {
setIsLoading(true);
pickImage().then((res) => {
if (!res.cancelled) {
const { uri } = res as ImageInfo;
uploadImgToFirebase(uri, `profile/${user.id}`).then((res) => {
dispatch(setProfilePic(res, user.id));
setIsLoading(false);
});
}
});
};
return (
<ScrollView>
{/* <TouchableOpacity onPress={() => nav.navigate("ChangePassword")}>
<Text>Ganti Password</Text>
</TouchableOpacity> */}
<View style={styles.container}>
<View style={styles.profileImage}>{/* <Image></Image> */}</View>
<View style={styles.profileImage}>
<Image
style={styles.image}
source={
user.pic !== ""
? { uri: user.pic }
: require("../../../assets/images/defaultProfilePic.png")
}
/>
</View>
<View>
<TouchableOpacity>
<TouchableOpacity onPress={() => handlePickImage()}>
<Text style={styles.text}>Ganti Foto</Text>
</TouchableOpacity>
</View>
{isLoading && (
<ActivityIndicator
animating={true}
color="#000000"
style={{ height: 80, marginTop: 10 }}
size="large"
/>
)}
<Spacer variant="l" />
<View style={{ width: "100%" }}>
<PlainForm
......@@ -100,14 +139,12 @@ const styles = StyleSheet.create({
height: 100,
borderRadius: 100,
overflow: "hidden",
borderColor: Colors.button.primary.bg,
borderWidth: 2,
marginBottom: 8,
},
image: {
flex: 1,
height: undefined,
width: undefined,
width: "100%",
},
text: {
fontSize: 16,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment