Skip to content
Snippets Groups Projects
Commit f72d4de8 authored by neyney2810's avatar neyney2810
Browse files

cat sitter setting page

parent bec98c4b
No related branches found
No related tags found
No related merge requests found
......@@ -25,6 +25,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.14",
"react-native-currency-input": "^1.1.1",
"react-native-gesture-handler": "~2.9.0",
"react-native-gifted-chat": "^2.4.0",
"react-native-radio-buttons-group": "^3.0.5",
......@@ -14820,6 +14821,15 @@
"resolved": "https://registry.npmjs.org/react-native-communications/-/react-native-communications-2.2.1.tgz",
"integrity": "sha512-5+C0X9mopI0+qxyQHzOPEi5v5rxNBQjxydPPiKMQSlX1RBIcJ8uTcqUPssQ9Mo8p6c1IKIWJUSqCj4jAmD0qVQ=="
},
"node_modules/react-native-currency-input": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/react-native-currency-input/-/react-native-currency-input-1.1.1.tgz",
"integrity": "sha512-DLsYqXkhpbvwa1M3znaG0bfKh8jlzkf+iO8TRlAJ/t8c+3gXyKwO2YdWqsBUuX0ZHLY4IVBzDjURMEofjq3ypg==",
"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",
......
import React, { useEffect, useState, useLayoutEffect } from "react";
import { View, TouchableOpacity, Text, TextInput, StyleSheet, Image } from "react-native";
import { View, TouchableOpacity, Text, TextInput, StyleSheet, Image, Switch, SafeAreaView, ScrollView } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { FontAwesome } from "@expo/vector-icons";
import colors from "../../colors";
......@@ -8,24 +8,13 @@ import { AntDesign } from "@expo/vector-icons";
import { collection, query, onSnapshot, where, and, updateDoc, doc } from "firebase/firestore";
import { auth, database } from "../../config/firebase";
import { DIMENSION_WIDTH } from "../../assets/styles";
import Icon from "../../components/Icon";
import CurrencyInput from 'react-native-currency-input';
//When user has role cat sitter
//TODO: get profile of cat sitter => If not then has to create
//Cat sitter has 2 screens => Profile Setting and Chat List
//Check for some needed info => If not go direct to setting screen
//Include Chatbox like in cat owner home => OK
const imageStyle = [
{
borderRadius: 8,
height: 120,
margin: 0,
aspectRatio: 1,
borderWidth: 2,
borderColor: "#FAFAFA"
}
];
const nameStyle = [
{
paddingTop: 10,
......@@ -37,9 +26,8 @@ const nameStyle = [
const CatsitterSetting = () => {
const navigation = useNavigation();
const [displayName, setDisplayName] = useState("");
const [profileId, setProfileId] = useState();
const [catsitter, setCatsitter] = useState({})
const [profileId, setProfileId] = useState("")
const onSignOut = () => {
signOut(auth).catch((error) => console.log("Error logging out: ", error));
......@@ -56,7 +44,8 @@ const CatsitterSetting = () => {
onPress={onSignOut}>
<AntDesign name="logout" size={24} color={colors.gray} style={{ marginRight: 10 }} />
</TouchableOpacity>
)
),
title: "Setup your profile"
});
}, [navigation]);
......@@ -72,10 +61,12 @@ const CatsitterSetting = () => {
const unsubscribe = onSnapshot(q, (querySnapshot) => {
if (querySnapshot.docs.length > 0) {
setProfileId(querySnapshot.docs[0].id)
setCatsitter({
id: querySnapshot.docs[0].id,
displayName: querySnapshot.docs[0].data().displayName || ""
...querySnapshot.docs[0].data()
})
}
});
return unsubscribe;
......@@ -83,81 +74,160 @@ const CatsitterSetting = () => {
const onUpdateProfileClick = async () => {
if (!profileId) return;
alert(profileId)
const profileRef = doc(database, "profiles", profileId);
const updateProfile = await updateDoc(profileRef, {
displayName: displayName,
updatedAt: new Date()
});
const updateProfile = await updateDoc(profileRef, { ...catsitter, updatedAt: new Date() });
alert(updateProfile)
}
return (
<View source={require("../../assets/images/10.jpg")} style={styles.containerHomePage}>
<TouchableOpacity style={{ width: "100%" }}>
<Text style={styles.heading1}>Setup your profile</Text>
</TouchableOpacity>
<View>
<View style={{
borderRadius: 8,
alignItems: "center",
margin: 10,
elevation: 1,
padding: 10,
width: "95%",
display: "flex",
flexDirection: "column",
overflow: "hidden"
}}>
{/* IMAGE */}
<Image source={{ uri: catsitter.avatar }} style={imageStyle} />
{/* MATCHES */}
{/* <View style={styles.matchesCardItem}>
<Text style={styles.matchesTextCardItem}>
<Icon name="heart" color={WHITE} size={13} /> {catsitter.availableTime}
</Text>
</View> */}
<Text >Cat Sitter Address: {catsitter.address}</Text >
<Text >Cat Sitter Postal Code:{catsitter.postalCode} </Text >
{/* NAME */}
<Text style={nameStyle}>{catsitter.displayName}</Text>
<Text >Cat Sitter Age: {catsitter.age}</Text >
<Text >Cat Sitter Price Per Night: {catsitter.price}</Text >
{/* DESCRIPTION */}
<Text style={styles.descriptionCardItem}>{catsitter.description}</Text>
{/* STATUS */}
<View style={styles.status}>
<View style={catsitter.isOpen ? styles.online : styles.offline} />
<Text style={styles.statusText}>
{catsitter.isOpen ? "Online" : "Offline"}
</Text>
</View>
</View>
<TextInput
style={styles.input}
placeholder="Display Name"
autoCapitalize="none"
textContentType="name"
value={displayName}
onChangeText={(text) => setDisplayName(text)}
/>
<TouchableOpacity style={styles.button} onPress={onUpdateProfileClick}>
<Text style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}>Update your profile</Text>
</TouchableOpacity>
</View>
<SafeAreaView>
<ScrollView style={styles.scrollView}>
<View source={require("../../assets/images/10.jpg")} style={styles.containerHomePage}>
<View>
<View style={{
alignItems: "center",
margin: 10,
padding: 10,
width: "95%",
display: "flex",
flexDirection: "column",
overflow: "hidden",
borderWidth: 0
}}>
{/* Open for search */}
<View style={{ width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
<Text style={styles.heading2}> Open for catsitter-search</Text>
<Switch
trackColor={{ false: '#767577', true: '#81b0ff' }}
ios_backgroundColor="#3e3e3e"
onValueChange={(isOpen) => setCatsitter({ ...catsitter, isOpen })}
value={catsitter.isOpen}
/>
</View>
{/* IMAGE */}
<View style={{ width: "100%" }}>
<Text style={styles.heading2}> Display avatar:</Text>
<Image source={{ uri: catsitter.avatar }} style={[
{
borderRadius: 8,
height: 120,
margin: 0,
aspectRatio: 1,
borderWidth: 2,
borderColor: "#FAFAFA"
}
]} />
</View>
{/* Display Name */}
<View style={[styles.inputContainer, { marginTop: 20 }]}>
<Text style={styles.inputLabel}>Your display name:
</Text >
<TextInput
style={styles.input}
placeholder="Max Mustermann"
autoCapitalize="words"
autoCorrect={false}
textContentType="name"
value={catsitter.displayName}
onChangeText={(text) => setCatsitter({ ...catsitter, displayName: text })}
/>
</View>
{/* Biography */}
<View style={styles.inputContainer}>
<Text style={styles.inputLabel}>Biography:
</Text >
<TextInput
style={[styles.input, { height: "auto" }]}
placeholder="Write a short description about you"
autoCapitalize="sentences"
autoCorrect={false}
numberOfLines={4}
multiline={true}
editable
value={catsitter.description}
onChangeText={(text) => setCatsitter({ ...catsitter, description: text })}
/>
</View>
{/* Address and postal code */}
<View style={styles.inputContainer}>
<Text style={styles.inputLabel}>Your Address:
</Text >
<View style={{ display: "flex", flexDirection: "row", gap: 10 }}>
<TextInput
style={[styles.input, { width: "33%" }]}
placeholder="72762"
autoCapitalize="none"
autoCorrect={false}
textContentType="postalCode"
value={catsitter.postalCode}
onChangeText={(text) => setCatsitter({ ...catsitter, postalCode: text })}
/>
<TextInput
style={[styles.input, { flexGrow: 1 }]}
placeholder="Reutlingen"
autoCapitalize="none"
autoCorrect={false}
textContentType="addressCity"
value={catsitter.address}
onChangeText={(text) => setCatsitter({ ...catsitter, address: text })}
/>
</View>
</View>
</View>
{/* Age */}
<View style={styles.inputContainer}>
<Text style={styles.inputLabel}>Your Age (optional):
</Text >
<TextInput
style={styles.input}
placeholder="Address"
autoCapitalize="none"
autoCorrect={false}
textContentType="streetAddressLine1"
value={catsitter.age}
onChangeText={(text) => setCatsitter({ ...catsitter, age: text })}
/>
</View>
{/* Available time: */}
<View style={styles.inputContainer}>
<Text style={styles.inputLabel}>Your available time:
</Text >
<TextInput
style={[styles.input]}
placeholder="13:00 - 15:00"
autoCapitalize="none"
autoCorrect={false}
value={catsitter.availableTime}
onChangeText={(text) => setCatsitter({ ...catsitter, availableTime: text })}
/>
</View>
{/* Price per hour */}
<View style={styles.inputContainer}>
<Text style={[styles.inputLabel]}>Price per hour:
</Text >
<CurrencyInput value={catsitter.price}
onChangeValue={(text) => setCatsitter({ ...catsitter, price: text })} style={styles.input} />
</View>
</View>
<TouchableOpacity style={styles.buttonContainer} onPress={onUpdateProfileClick}>
<Text style={styles.button}>Update your profile</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</SafeAreaView >
);
};
......@@ -193,6 +263,32 @@ const styles = StyleSheet.create({
marginRight: 20,
marginBottom: 50
},
//Home
heading1: {
color: "#444240",
fontSize: 20,
fontWeight: "500",
letterSpacing: 1,
marginVertical: 20,
marginHorizontal: 14
},
heading2: {
color: "#444240",
fontSize: 16,
fontWeight: "400",
letterSpacing: 1,
marginVertical: 10,
},
inputContainer: {
display: "flex",
flexDirection: "column",
width: "100%"
},
inputLabel: {
marginVertical: 6,
fontSize: 14,
fontWeight: "400",
},
input: {
backgroundColor: "#F6F7FB",
height: 58,
......@@ -217,6 +313,18 @@ const styles = StyleSheet.create({
shadowOpacity: 0.9,
shadowRadius: 8,
borderRadius: 12,
borderColor: "#EDE6DD"
},
buttonContainer: {
},
button: {
fontWeight: "bold",
color: "#fff",
fontSize: 18,
backgroundColor: "#7444C0",
margin: 20,
paddingHorizontal: 20,
textAlign: "center",
paddingVertical: 10,
borderRadius: 10
}
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment