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