From 5528f6143559a77d613543dddac1f025d415ddc1 Mon Sep 17 00:00:00 2001
From: neyney2810 <nguyenyen281099@gmail.com>
Date: Wed, 24 Jan 2024 19:29:36 +0100
Subject: [PATCH] fix ui
---
assets/styles/index.ts | 2 +-
components/CardItem.tsx | 4 ++--
package.json | 4 ++--
screens/ScreenNavigator.js | 24 ++++++++++++------------
screens/auth/Signup.js | 2 +-
screens/tabs/Catsitter.js | 19 ++++++++-----------
screens/tabs/Chat.js | 2 +-
screens/tabs/ChatList.js | 2 +-
screens/tabs/ChatUid.js | 2 +-
9 files changed, 29 insertions(+), 32 deletions(-)
diff --git a/assets/styles/index.ts b/assets/styles/index.ts
index 8f22808..773be0a 100644
--- a/assets/styles/index.ts
+++ b/assets/styles/index.ts
@@ -50,7 +50,7 @@ export default StyleSheet.create({
descriptionCardItem: {
color: GRAY,
textAlign: "left",
- width: "100%",
+ width: "75%",
flexWrap: "wrap"
},
status: {
diff --git a/components/CardItem.tsx b/components/CardItem.tsx
index b826810..ac02001 100644
--- a/components/CardItem.tsx
+++ b/components/CardItem.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { Text, View, Image, Dimensions, TouchableOpacity, Pressable } from "react-native";
import Icon from "./Icon";
-import styles, { DISLIKE_ACTIONS } from "../assets/styles";
+import styles, { DISLIKE_ACTIONS, GRAY } from "../assets/styles";
export type CardItemT = {
description?: string;
@@ -50,7 +50,7 @@ const CardItem = ({ description, hasActions, hasVariant, avatar, isOnline, locat
<Text style={styles.matchesTextCardItem}>{location}</Text>
</View>
)}
- <Text style={{ textAlign: "right" }}>{price} €/Std.</Text>
+ <Text style={{ textAlign: "right" }}>{price}€/Std.</Text>
</View>
<View style={{ height: "100%", flexGrow: 1, padding: 10, width: "90%" }}>
diff --git a/package.json b/package.json
index 6674b31..8ca4690 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
- "start": "expo start",
+ "start": "expo start --tunnel",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
@@ -41,4 +41,4 @@
"@babel/core": "^7.12.9"
},
"private": true
-}
+}
\ No newline at end of file
diff --git a/screens/ScreenNavigator.js b/screens/ScreenNavigator.js
index 1f0e037..86b0b79 100644
--- a/screens/ScreenNavigator.js
+++ b/screens/ScreenNavigator.js
@@ -16,7 +16,7 @@ import { Ionicons } from '@expo/vector-icons';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const loadingImage =
- "https://technometrics.net/wp-content/uploads/2020/11/loading-icon-animated-gif-19-1.gif";
+ "https://technometrics.net/wp-content/uploads/2020/11/loading-icon-animated-gif-19-1.gif";
const ScreenNavigator = () => {
//Get current profile
@@ -60,26 +60,26 @@ const ScreenNavigator = () => {
<Tab.Screen name="CatsitterHome" component={CatsitterHome} options={{
tabBarLabel: "Home", tabBarIcon: ({ color, size }) => (
<Ionicons name="home-outline" color={color} size={size} />
- ),
+ ),
}} />
<Tab.Screen name="CatsitterSetting" component={CatsitterSetting} options={{
- tabBarLabel: "Setting", tabBarIcon: ({ color, size }) => (
+ tabBarLabel: "Setting", tabBarIcon: ({ color, size }) => (
<Ionicons name="options-outline" color={color} size={size} />
- ),
+ ),
}} />
</Tab.Navigator>
)
return (
<View>
<ImageBackground
- source={{ uri: loadingImage }}
- style={{
- justifyContent: 'center',
- alignItems: 'center',
- width: 300,
- height: 400,
- }}
- />
+ source={{ uri: loadingImage }}
+ style={{
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: 300,
+ height: 400,
+ }}
+ />
</View>
)
diff --git a/screens/auth/Signup.js b/screens/auth/Signup.js
index 009bc23..4c9257d 100644
--- a/screens/auth/Signup.js
+++ b/screens/auth/Signup.js
@@ -25,7 +25,7 @@ export default function Signup({ navigation }) {
userId: userCredential.user.uid,
role: role,
displayName: name,
- photoURL: 'https://gravatar.com/avatar/94d45dbdba988afacf30d916e7aaad69?s=200&d=mp&r=x',
+ avatar: 'https://gravatar.com/avatar/94d45dbdba988afacf30d916e7aaad69?s=200&d=mp&r=x',
});
})
.catch((err) => Alert.alert("Login error", err.message));
diff --git a/screens/tabs/Catsitter.js b/screens/tabs/Catsitter.js
index f52348e..e6599dd 100644
--- a/screens/tabs/Catsitter.js
+++ b/screens/tabs/Catsitter.js
@@ -1,4 +1,4 @@
-import { Text, View, Dimensions, TouchableOpacity, Image } from "react-native";
+import { Text, View, Dimensions, TouchableOpacity, Image, Pressable } from "react-native";
import React, { useState, useLayoutEffect } from "react";
import { collection, query, onSnapshot, where, and } from "firebase/firestore";
import { database } from "../../config/firebase";
@@ -16,6 +16,7 @@ const Catsitter = ({ route }) => {
const { id } = route.params;
const [catsitter, setCatsitter] = useState({});
+ const [catsitterId, setCatsitterId] = useState("")
useLayoutEffect(() => {
navigation.setOptions({
@@ -77,13 +78,11 @@ const Catsitter = ({ route }) => {
<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 >
+ <Text >Address:{catsitter.postalCode} {catsitter.address}</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 */}
@@ -99,13 +98,11 @@ const Catsitter = ({ route }) => {
{/* ACTIONS */}
<View style={styles.actionsCardItem}>
- <TouchableOpacity style={styles.button}>
- <Icon name="mail" color={LIKE_ACTIONS} size={25} />
- </TouchableOpacity>
-
- <TouchableOpacity style={styles.button}>
- <Icon name="close" color={DISLIKE_ACTIONS} size={25} />
- </TouchableOpacity>
+ <Pressable>
+ <TouchableOpacity style={styles.button} onPress={() => navigation.navigate("ChatWithUser", { id: catsitter.userId })}>
+ <Icon name="mail" color={LIKE_ACTIONS} size={25} />
+ </TouchableOpacity>
+ </Pressable>
</View>
</View>
diff --git a/screens/tabs/Chat.js b/screens/tabs/Chat.js
index 9aba1cc..ec6ffb5 100644
--- a/screens/tabs/Chat.js
+++ b/screens/tabs/Chat.js
@@ -88,7 +88,7 @@ export default function Chat({ route }) {
user={{
_id: auth?.currentUser?.uid,
name: auth?.currentUser?.displayName,
- avatar: auth?.currentUser?.photoURL
+ avatar: auth?.currentUser?.avatar || auth?.currentUser?.photoURL
}}
/>
</>
diff --git a/screens/tabs/ChatList.js b/screens/tabs/ChatList.js
index 27e60d6..d72fa72 100644
--- a/screens/tabs/ChatList.js
+++ b/screens/tabs/ChatList.js
@@ -34,7 +34,7 @@ const ChatList = () => {
useLayoutEffect(() => {
const collectionRef = collection(database, "chats");
- const q = query(collectionRef, where("participant", "array-contains", auth.currentUser.uid), orderBy("updatedAt", "desc"));
+ const q = query(collectionRef, where("participant", "array-contains", auth.currentUser.uid));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
setChats(
diff --git a/screens/tabs/ChatUid.js b/screens/tabs/ChatUid.js
index ca123aa..dc69b64 100644
--- a/screens/tabs/ChatUid.js
+++ b/screens/tabs/ChatUid.js
@@ -107,7 +107,7 @@ export default function ChatUid({ route }) {
user={{
_id: auth?.currentUser?.uid,
name: auth?.currentUser?.displayName,
- avatar: auth?.currentUser?.photoURL
+ avatar: auth?.currentUser?.avatar
}}
/>
</>
--
GitLab