diff --git a/models/social.ts b/models/social.ts index 24a4945..1c2fc70 100644 --- a/models/social.ts +++ b/models/social.ts @@ -5,6 +5,8 @@ export interface SocialModel { eventImage: string; eventLocation: string; eventName: string; + userID : string; + likes :String[]; // TODO: You may need to add attributes here // to implement your desired functionality. // The staff solutions add two attributes. diff --git a/screens/AuthStack/SignInScreen.tsx b/screens/AuthStack/SignInScreen.tsx index b197e04..ee21314 100644 --- a/screens/AuthStack/SignInScreen.tsx +++ b/screens/AuthStack/SignInScreen.tsx @@ -4,12 +4,17 @@ import { SafeAreaView, StyleSheet, ScrollView, Text } from "react-native"; import { Appbar, TextInput, Snackbar, Button } from "react-native-paper"; import { AuthStackParamList } from "./AuthStackScreen"; import firebase from "firebase"; +import SignUpScreen from "./SignUpScreen"; interface Props { navigation: StackNavigationProp; } export default function SignInScreen({ navigation }: Props) { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [visible, setVisible] = useState(false); + const [errMessage, setErr] = useState(""); /* Screen Requirements: - AppBar - Email & Password Text Input @@ -24,10 +29,66 @@ export default function SignInScreen({ navigation }: Props) { All authentication logic can be found at: https://firebase.google.com/docs/auth/web/starts */ + + const snackBarError = (message : String) => { + + const onToggleSnackBar = () => setVisible(!visible); + + const onDismissSnackBar = () => setVisible(false); + + return ( + { {setVisible(false)}; + }, + }}> + {message} + + ); + }; + + const errorDeal = (message: any) => { + setVisible(true); + setErr(message); + } + + + const signIn = () => { + firebase.auth().signInWithEmailAndPassword(email, password).then((userCredential) => { + }).catch(error => errorDeal(error.message)); + } + + const resetPassword = () => { + firebase.auth().sendPasswordResetEmail(email).then(function() { + setErr("A password reset email has been sent to you") + setVisible(true); + }).catch(error => errorDeal(error.message)); + } + return ( <> - {"TODO"} + + + + setEmail(text)} + /> + setPassword(text)} + /> + + + + {snackBarError(errMessage)} ); diff --git a/screens/AuthStack/SignUpScreen.tsx b/screens/AuthStack/SignUpScreen.tsx index 01f8d6c..1d4866a 100644 --- a/screens/AuthStack/SignUpScreen.tsx +++ b/screens/AuthStack/SignUpScreen.tsx @@ -10,6 +10,10 @@ interface Props { } export default function SignUpScreen({ navigation }: Props) { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [visible, setVisible] = useState(false); + const [errMessage, setErr] = useState(""); /* Screen Requirements: - AppBar - Email & Password Text Input @@ -23,14 +27,63 @@ export default function SignUpScreen({ navigation }: Props) { All authentication logic can be found at: https://firebase.google.com/docs/auth/web/start */ - return ( - <> - - {"TODO"} - - - ); -} + + const snackBarError = (message : String) => { + const onToggleSnackBar = () => setVisible(!visible); + const onDismissSnackBar = () => setVisible(false); + + return ( + { {setVisible(false)}; + }, + }}> + {message} + + ); + }; + + const errorDeal = (message: any) => { + setVisible(true); + setErr(message); + } + + + const signUp = () => { + firebase.auth().createUserWithEmailAndPassword(email, password) + .then((userCredential) => {}).catch(error => errorDeal(error.message)) + } + + + + return ( + <> + + + + + setEmail(text)} + /> + setPassword(text)} + /> + + + {snackBarError(errMessage)} + + + ); + } + const styles = StyleSheet.create({ container: { diff --git a/screens/RootStack/MainStack/FeedScreen/FeedScreen.main.tsx b/screens/RootStack/MainStack/FeedScreen/FeedScreen.main.tsx index a0c7cd3..c693eb2 100644 --- a/screens/RootStack/MainStack/FeedScreen/FeedScreen.main.tsx +++ b/screens/RootStack/MainStack/FeedScreen/FeedScreen.main.tsx @@ -1,12 +1,13 @@ import React, { useState, useEffect } from "react"; import { View, FlatList, Text } from "react-native"; -import { Appbar, Button, Card } from "react-native-paper"; +import { Appbar, Button, Card, Headline } from "react-native-paper"; import firebase from "firebase/app"; import "firebase/firestore"; import { SocialModel } from "../../../../models/social.js"; import { styles } from "./FeedScreen.styles"; import { StackNavigationProp } from "@react-navigation/stack"; import { MainStackParamList } from "../MainStackScreen.js"; +import { SafeAreaView } from "react-native-safe-area-context"; /* Remember the navigation-related props from Project 2? They were called `route` and `navigation`, @@ -26,6 +27,10 @@ interface Props { export default function FeedScreen({ navigation }: Props) { // List of social objects const [socials, setSocials] = useState([]); + const [likes, setLikes] = useState([]); + const [changes, setChanges] = useState(true); + const [icon, setIcon] = useState("heart-outline"); + const [inLikes, setInLikes] = useState(false); const currentUserId = firebase.auth().currentUser!.uid; @@ -47,17 +52,71 @@ export default function FeedScreen({ navigation }: Props) { }, []); const toggleInterested = (social: SocialModel) => { - // TODO: Put your logic for flipping the user's "interested" - // status here, and call this method from your "like" - // button on each Social card. + if (icon === "heart") { + setIcon("heart-outline"); + } else { + setIcon("heart"); + } + const ref = firebase.firestore().collection("socials").doc(social.id) + + if (changes && !inLikes) { + const arr = likes; + arr.push(currentUserId) + setLikes(arr) + const res = ref.update({likes: likes}).then(() => { + setChanges(false); + setInLikes(true); + + }) + } else if (inLikes) { + const arr = likes; + const index = arr.indexOf(currentUserId); + arr.splice(index,1); + setLikes(arr); + const res = ref.update({likes: likes}).then(() => { + setChanges(true); + setInLikes(false); + }) + } }; const deleteSocial = (social: SocialModel) => { + const documentRef = firebase.firestore().collection("socials").doc(social.id) + var doc_data = documentRef.get(); + doc_data.then((data) => { + var fieldValue= data.get("userID"); + if (fieldValue === currentUserId) { + const res = firebase.firestore().collection("socials").doc(social.id); + res.delete().then(() => { + }).catch((err) => console.error(err)); + } + }) + // TODO: Put your logic for deleting a social here, // and call this method from your "delete" button // on each Social card that was created by this user. }; + const Liked = (social: SocialModel) => { + const documentRef = firebase.firestore().collection("socials").doc(social.id) + var doc_data = documentRef.get(); + const likeValue = doc_data.then((data) => { + var aaa= data.get("likes"); + setLikes(aaa); + }) + + return ( + + ) + } + + const layks = () => { + if (!likes || !likes.includes(currentUserId)) { + return 0 + } else { + return likes.length; + } + } const renderSocial = ({ item }: { item: SocialModel }) => { const onPress = () => { navigation.navigate("DetailScreen", { @@ -75,14 +134,23 @@ export default function FeedScreen({ navigation }: Props) { " • " + new Date(item.eventDate).toLocaleString() } - /> - {/* TODO: Add a like/interested button & delete soccial button. See Card.Actions - in React Native Paper for UI/UX inspiration. - https://callstack.github.io/react-native-paper/card-actions.html */} + /> + + + {Liked(item)} + ); }; + const noEvents = () => { + return ( + + No Events so far! Add some!! + + ) + } + const Bar = () => { return ( @@ -113,7 +181,7 @@ export default function FeedScreen({ navigation }: Props) { // by reading the documentation :) // https://reactnative.dev/docs/flatlist#listemptycomponent - // ListEmptyComponent={ListEmptyComponent} + ListEmptyComponent={noEvents} /> diff --git a/screens/RootStack/NewSocialScreen/NewSocialScreen.main.tsx b/screens/RootStack/NewSocialScreen/NewSocialScreen.main.tsx index b0c7338..421e5ae 100644 --- a/screens/RootStack/NewSocialScreen/NewSocialScreen.main.tsx +++ b/screens/RootStack/NewSocialScreen/NewSocialScreen.main.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { Platform, View } from "react-native"; +import { Platform, View, Keyboard, TouchableWithoutFeedback} from "react-native"; import { Appbar, TextInput, Snackbar, Button } from "react-native-paper"; import { getFileObjectAsync } from "../../../Utils"; @@ -21,7 +21,6 @@ import { RootStackParamList } from "../RootStackScreen"; interface Props { navigation: StackNavigationProp; } - export default function NewSocialScreen({ navigation }: Props) { // Event details. const [eventName, setEventName] = useState(""); @@ -36,6 +35,7 @@ export default function NewSocialScreen({ navigation }: Props) { const [message, setMessage] = useState(""); // Loading state for submit button const [loading, setLoading] = useState(false); + const currentUserId = firebase.auth().currentUser!.uid; // Code for ImagePicker (from docs) useEffect(() => { @@ -135,6 +135,8 @@ export default function NewSocialScreen({ navigation }: Props) { eventLocation: eventLocation, eventDescription: eventDescription, eventImage: downloadURL, + userID: currentUserId, + likes: [] }; console.log("setting download url"); await socialRef.set(doc); @@ -159,6 +161,7 @@ export default function NewSocialScreen({ navigation }: Props) { <> +