Some UI work

Vacation-HomeStay · Apr 2, 2023 · 5b2da13 · 5b2da13
1 parent 8cd5f69
commit 5b2da13
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 51 deletions.
diff --git a/App.js b/App.js
@@ -42,7 +42,7 @@ function HomeTabs() {
 					),
 				}}
 			/>
-			<Tab.Screen
+			{/* <Tab.Screen
 				name="Saved"
 				component={SavedScreen}
 				options={{
@@ -51,7 +51,7 @@ function HomeTabs() {
 						<FontAwesome name="bookmark" size={size} color={color} />
 					),
 				}}
-			/>
+			/> */}
 			<Tab.Screen
 				name="Setting"
 				component={SettingsScreen}

diff --git a/assets/image.png b/assets/image.png
diff --git a/components/Review.js b/components/Review.js
@@ -40,11 +40,11 @@ const Review = ({  rating, reviewText, user_uid , date}) => {
 			});
 	}, []);
 	return (
-		<View paddingLeft={20} paddingTop={50} paddingRight={25}>
-			<Text>
-				{rating} by {userName} at {getDate(date)}
+		<View style= {{paddingLeft:20, paddingTop:20, paddingRight:25, marginTop:1, font: 'bold'}}>
+			<Text style = {{fontSize: 20, fontWeight: 'bold'}}>
+				Rated {rating} by {userName} at {getDate(date)}
 			</Text>
-			<Text> comment: {reviewText} </Text>
+			<Text marginTop = {10}>Comment: {reviewText} </Text>
 		</View>
 	);
 };

diff --git a/screens/Demographic.js b/screens/Demographic.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useNavigation } from "@react-navigation/native";
-
+import { Image } from 'react-native';
 import {
 	View,
 	ScrollView,
@@ -60,12 +60,16 @@ export default function Demographic() {
 		}
 	};
 	return (
-		<View>
+		<View style={{backgroundColor: "#efeaed"}}>
+			<Image source={require('../assets/image.png')} style={{width:350}} resizeMode="contain"/>
 			<ScrollView
 				contentContainerStyle={{ flexGrow: 1 }}
 				keyboardShouldPersistTaps="handled"
-				style={{ padding: 20 }}
+				style={{ paddingLeft: 20, paddingRight:20, paddingBottom:20, paddingVertical:5 }}
 			>
+
+
+
 				<Text
 					style={{
 						fontSize: 30,

diff --git a/screens/ResidenciesList.js b/screens/ResidenciesList.js
@@ -51,38 +51,48 @@ const ResidenciesList = ({ city }) => {
 	}, []);
 
 	return (
-		<FlatList
-			data={residences}
-			keyExtractor={(item) => {
-				item.id.toString();
-			}}
-			renderItem={({ item }) => (
-				<TouchableOpacity
-					onPress={() =>
-						navigation.navigate("SpecificResidence", {
-							navigation: navigation,
-							item: item,
-						})
-					}
-				>
-					<View style={styles.container}>
-						<Text style={styles.hostName}>{item.host_name}</Text>
-						<Text style={styles.cost}>{"$" + item.cost}</Text>
-						{/* change styling */}
-						<Text style={styles.cost}>
-							{getDate(item.first_day)}{" "}
-						</Text>
-						<Text style={styles.cost}>
-							{getDate(item.second_day)}{" "}
-						</Text>
-						<Image
-							source={{ uri: item.images[0] }}
-							style={styles.image}
-						/>
-					</View>
-				</TouchableOpacity>
-			)}
-		/>
+		<View padding={30} >
+			<Text style = {{color: "#2596be", fontSize:30, textAlign: "center"}}>Homestays in {city}</Text>
+			<FlatList
+				contentContainterStyle={styles.packagesListContainer}
+				data={residences}
+				keyExtractor={(item) => {
+					item.id.toString();
+				}}
+				renderItem={({ item }) => (
+					<TouchableOpacity
+						onPress={() =>
+							navigation.navigate("SpecificResidence", {
+								navigation: navigation,
+								item: item,
+							})
+						}
+					>
+						<View style={styles.container}>
+							<Text style={styles.hostName}>
+								{item.host_name}
+							</Text>
+							<Text style={styles.cost}>
+								{"$" + item.cost + "/night"}
+							</Text>
+							{/* change styling */}
+							<Text style={styles.cost}>
+								{getDate(item.first_day)}{" "}
+							</Text>
+							<Text>to</Text>
+							<Text style={styles.cost}>
+								{getDate(item.second_day)}{" "}
+							</Text>
+							<Image
+								source={{ uri: item.images[0] }}
+								style={styles.image}
+							/>
+							<View style={{ marginTop: 40 }}></View>
+						</View>
+					</TouchableOpacity>
+				)}
+			/>
+		</View>
 	);
 };
 
@@ -91,7 +101,7 @@ const styles = StyleSheet.create({
 		flex: 1,
 		alignItems: "center",
 		justifyContent: "center",
-		padding: 20,
+		padding: 100,
 	},
 	title: {
 		fontSize: 24,
@@ -108,9 +118,19 @@ const styles = StyleSheet.create({
 		marginBottom: 10,
 	},
 	image: {
-		width: 200,
-		height: 200,
+		width: "155%",
+		height: "155%",
+		borderRadius: 10,
 		marginHorizontal: 10,
+		marginVertical: 1,
+	},
+	packagesList: {
+		backgroundColor: "#89CFF0",
+	},
+	packagesListContainer: {
+		backgroundColor: "#1a1d27",
+		paddingVertical: 8,
+		marginHorizontal: 8,
 	},
 });
 

diff --git a/screens/SpecificResidence.js b/screens/SpecificResidence.js
@@ -4,8 +4,9 @@ import {
 	View,
 	TouchableOpacity,
 	FlatList,
-	Button,
+	Button, ScrollView
 } from "react-native";
+
 import React, { useState, useEffect } from "react";
 import { db } from "../firebase";
 import Review from "../components/Review";
@@ -15,6 +16,19 @@ const usersRef = db.collection("users");
 
 const itineraryRef = db.collection("itinerary");
 
+function getDate(seconds) {
+	// var utcSeconds = 1234567890;
+	var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
+	d.setUTCSeconds(seconds);
+	const year = d.getFullYear();
+	const month = String(d.getMonth() + 1).padStart(2, "0");
+	const day = String(d.getDate()).padStart(2, "0");
+
+	// Format the date string in YYYY-MM-DD format
+	const formattedDate = month + "/" + day + "/" + year;
+	return formattedDate;
+}
+
 const SpecificResidence = (item) => {
 	nav = item["route"]["params"]["navigation"];
 	item = item["route"]["params"]["item"];
@@ -51,9 +65,23 @@ const SpecificResidence = (item) => {
 	}, []);
 
 	return (
-		<View paddingTop={50}>
-			{/* <Button> Book </Button> */}
-			<Text>Reviews for {console.log(itinerary)}</Text>
+		<ScrollView> 
+			<View paddingTop={50}>
+
+			<Text style = {{fontSize: 27,
+						marginTop: 15,
+						paddingHorizontal: 15,
+						color: "#2596be"}} >{item.host_name}'s Homestay from {getDate(item.first_day)} to {getDate(item.second_day)}</Text>
+			<Text style = {{fontSize: 15,
+						marginTop: 10,
+						paddingHorizontal: 15,
+						fontSize:20,
+						fontWeight: 'bold'}}> ${item.cost}/night</Text>
+			<Text style = {{fontSize: 30,
+						marginTop: 34,
+						paddingHorizontal: 15,
+						color: "#2596be",
+						}} >Reviews</Text>
 			{reviews.map((singlereview, i) => (
 				<Review
 					rating={singlereview.rating}
@@ -62,10 +90,16 @@ const SpecificResidence = (item) => {
 					date={singlereview.date.seconds}
 				></Review>
 			))}
-			{itinerary.map((iten, i) => (
-				<Text>{iten}</Text>
-			))}
+			<Text style = {{fontSize: 30,
+						marginTop: 45,
+						paddingHorizontal: 15,
+						color: "#2596be"}} >Itinerary</Text>
+			<Text style = {{marginTop:30, marginHorizontal:50}}> {itinerary[0]}</Text>
 		</View>
+		<Button title="Book" style={{fontSize: 20, color: 'blue'}}
+  styleDisabled={{color: 'red'}}> Book</Button>
+		</ScrollView>
+
 	);
 };