Merge branch 'main' of https://github.com/AjayLiu/GratiCat

AjayLiu · May 14, 2023 · 21cb796 · 21cb796
2 parents a42605c + ee47ab5
commit 21cb796
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 36 deletions.
diff --git a/src/components/ProfileButton.tsx b/src/components/ProfileButton.tsx
@@ -3,8 +3,11 @@ import { TouchableOpacity, StyleSheet, View, Text } from "react-native";
 import { IconType } from "react-icons";
 import { useNavigation } from "@react-navigation/native";
 import profile from "../assets/images/GratiCatLogo.png";
+import { Image } from "react-native-elements";
+import { useUser } from "@utils/hooks/useUser";
 
 const ProfileButton = ({}) => {
+	const { authUser } = useUser();
 	const navigation = useNavigation();
 
 	return (
@@ -13,7 +16,7 @@ const ProfileButton = ({}) => {
 			style={styles.container}
 		>
 			<View style={styles.profileIconContainer}>
-				{/* <Image source={profile} styles={styles.image} /> */}
+				<Image source={{ uri: authUser?.photoURL }} />
 			</View>
 		</TouchableOpacity>
 	);

diff --git a/src/components/SelfPostModal.tsx b/src/components/SelfPostModal.tsx
@@ -1,6 +1,6 @@
 import { usePost } from "@utils/hooks/usePost";
 import { useUser } from "@utils/hooks/useUser";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Ionicons from "react-native-vector-icons/Ionicons";
 
 import {
@@ -13,10 +13,23 @@ import {
 	TextInput,
 } from "react-native";
 
-const SelfPostModal = () => {
+import { SelfPost } from "src/types";
+
+interface Props {
+	forceLock: boolean;
+}
+const SelfPostModal = (props: Props) => {
 	const { makeSelfPost } = usePost();
 	const [modalVisible, setModalVisible] = useState(false);
+	const [xButtonVisible, setXButtonVisible] = useState(true);
 	const [text, onChangeText] = React.useState("");
+	const forceLock = async () => {
+		setModalVisible(true);
+		setXButtonVisible(false);
+	};
+	useEffect(() => {
+		if (props.forceLock) forceLock();
+	}, [props.forceLock]);
 	return (
 		<View>
 			<Modal
@@ -30,12 +43,17 @@ const SelfPostModal = () => {
 			>
 				<View style={styles.centeredView}>
 					<View style={styles.modalView}>
-						<Pressable
-							style={[styles.button, styles.buttonClose]}
-							onPress={() => setModalVisible(!modalVisible)}
-						>
-							<Ionicons name="close-circle-outline" size={20} />
-						</Pressable>
+						{xButtonVisible && (
+							<Pressable
+								style={[styles.button, styles.buttonClose]}
+								onPress={() => setModalVisible(!modalVisible)}
+							>
+								<Ionicons
+									name="close-circle-outline"
+									size={20}
+								/>
+							</Pressable>
+						)}
 						<View style={styles.note}>
 							<TextInput
 								style={styles.input}
@@ -49,9 +67,10 @@ const SelfPostModal = () => {
 								style={[styles.button, styles.buttonSubmit]}
 								onPress={async () => {
 									await makeSelfPost(text);
+									setModalVisible(!modalVisible);
 								}}
 							>
-								<Ionicons name="send-outline" color={"#f8f4e3"}/>
+								<Ionicons name="send-outline" color={"white"} />
 							</Pressable>
 						</View>
 					</View>
@@ -77,6 +96,7 @@ const styles = StyleSheet.create({
 		justifyContent: "center",
 		alignItems: "center",
 		marginTop: 10,
+		backgroundColor: "rgba(0,0,0,0.9)",
 	},
 	modalView: {
 		margin: 20,

diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
@@ -1,6 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { RouterProps } from "../types";
-import { View, Text, StyleSheet, TextInput, Platform, TouchableOpacity} from "react-native";
+import {
+	View,
+	Text,
+	StyleSheet,
+	TextInput,
+	Platform,
+	TouchableOpacity,
+} from "react-native";
 import { usePost } from "@utils/hooks/usePost";
 import { Button } from "react-native-elements";
 import { SelfPost } from "../types";
@@ -17,9 +24,26 @@ export default function Home({ navigation }: RouterProps) {
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const { getAllSelfPosts, calculateStreakCount } = usePost();
 	const [mySelfPosts, setMySelfPosts] = useState<SelfPost[]>([]);
+	const [forceLock, setForceLock] = useState<boolean>(false);
 	useEffect(() => {
 		const getPosts = async () => {
 			const allPosts = await getAllSelfPosts(authUser?.uid || "");
+
+			// CHECK WHETHER OR NOT TO LOCK USER OUT (IF THEY HAVEN'T POSTED IN 24 HOURS OR NEVER POSTED)
+			if (authUser?.uid) {
+				if (!allPosts || allPosts?.length == 0) {
+					setForceLock(true);
+				} else {
+					const latestPost = allPosts[allPosts.length - 1];
+					if (
+						Date.now() / 1000 - latestPost.timestamp.seconds >
+						60 * 60 * 24
+					) {
+						setForceLock(true);
+					}
+				}
+			}
+
 			setMySelfPosts(allPosts || []);
 		};
 		const getStreak = async () => {
@@ -34,26 +58,45 @@ export default function Home({ navigation }: RouterProps) {
 		) {
 			const refresh = async () => {
 				setIsLoading(true);
-				// console.log(
-				// 	fireUser.selfPostsUids.length + " vs " + mySelfPosts.length,
-				// );
 				await getPosts();
 				await getStreak();
+
 				setIsLoading(false);
 			};
 			refresh();
 		}
 	}, [fireUser.selfPostsUids]);
 
 	const [streakCount, setStreakCount] = useState<number>(0);
+
 	return (
 		<View style={styles.background}>
-			<View style={[styles.container, styles.phoneSection, { marginTop: 80 }]}>
-			<Text style={{ fontSize: 35, textAlign: "center", color: "#1D201F" }}>
+			<View
+				style={[
+					styles.container,
+					styles.phoneSection,
+					{ marginTop: 80 },
+				]}
+			>
+				<Text
+					style={{
+						fontSize: 35,
+						textAlign: "center",
+						color: "#1D201F",
+					}}
+				>
 					you've loved yourself for
 				</Text>
-				<Text style={{ fontSize: 150, color: "#1D201F" }}>{streakCount}</Text>
-				<Text style={{ fontSize: 35, textAlign: "center", color: "#1D201F" }}>
+				<Text style={{ fontSize: 150, color: "#1D201F" }}>
+					{streakCount}
+				</Text>
+				<Text
+					style={{
+						fontSize: 35,
+						textAlign: "center",
+						color: "#1D201F",
+					}}
+				>
 					days in a row!
 				</Text>
 				{mySelfPosts.map((post) => {
@@ -66,19 +109,17 @@ export default function Home({ navigation }: RouterProps) {
 			</View>
 			<View style={styles.container}>
 				<TouchableOpacity
-							style={[styles.button, {borderRadius: 10}]}
-							onPress={() => {
-								signOut(auth);
-							}}
-						>
-							<Text style={styles.text}>
-								Sign Out
-							</Text>
-						</TouchableOpacity>
+					style={[styles.button, { borderRadius: 10 }]}
+					onPress={() => {
+						signOut(auth);
+					}}
+				>
+					<Text style={styles.text}>Sign Out</Text>
+				</TouchableOpacity>
 			</View>
 			<View style={styles.footer}>
 				<ProfileButton />
-				<SelfPostModal />
+				<SelfPostModal forceLock={forceLock} />
 			</View>
 		</View>
 	);
@@ -95,9 +136,9 @@ const styles = StyleSheet.create({
 		margin: 40,
 	},
 	button: {
-		backgroundColor: '#E9637C',
+		backgroundColor: "#E9637C",
 		padding: 10,
-		alignItems: 'center',
+		alignItems: "center",
 	},
 	footer: {
 		flexDirection: "row",
@@ -108,13 +149,13 @@ const styles = StyleSheet.create({
 		padding: 25,
 	},
 	phoneSection: {
-        flexDirection: "column",
+		flexDirection: "column",
 		flex: 0.5,
-		backgroundColor: '#F8F4E3',
-        borderRadius: 25,
-        padding: 20,
-        width: '80%'
-    },
+		backgroundColor: "#F8F4E3",
+		borderRadius: 25,
+		padding: 20,
+		width: "80%",
+	},
 	text: {
 		color: "#F8F4E3",
 		marginVertical: 10,