From f72d4de8370fd711be019ad218b8cb51c859bea6 Mon Sep 17 00:00:00 2001
From: neyney2810 <nguyenyen281099@gmail.com>
Date: Tue, 16 Jan 2024 18:14:58 +0100
Subject: [PATCH] cat sitter setting page
---
package-lock.json | 10 +
package.json | 1 +
screens/cat-sitter/CatsitterSetting.js | 276 +++++++++++++++++--------
3 files changed, 203 insertions(+), 84 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 92e1da6..99e6e60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 01630d1..0f19527 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,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",
diff --git a/screens/cat-sitter/CatsitterSetting.js b/screens/cat-sitter/CatsitterSetting.js
index 0d74c47..0a14ca7 100644
--- a/screens/cat-sitter/CatsitterSetting.js
+++ b/screens/cat-sitter/CatsitterSetting.js
@@ -1,5 +1,5 @@
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
+ }
});
--
GitLab