Feedback

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.

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<AuthStackParamList, "SignInScreen">;
 }
 
 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 (
+        <Snackbar
+          visible={visible}
+          onDismiss={onDismissSnackBar}
+          action={{
+            label: 'Close',
+            onPress: () => { {setVisible(false)};
+            },
+          }}>
+          {message}
+        </Snackbar>
+    );
+  };
+
+  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 (
     <>
       <SafeAreaView style={styles.container}>
-        <Text>{"TODO"}</Text>
+        <Appbar.Header>
+          <Appbar.Content title = "Sign in" />
+        </Appbar.Header>
+        <TextInput
+        label = "Email"
+        value = {email}
+        onChangeText = {text => setEmail(text)}
+        />
+        <TextInput
+        secureTextEntry = {true}
+        label = "Password"
+        value = {password}
+        onChangeText = {text => setPassword(text)}
+        />
+        <Button onPress = {() => signIn()}> Sign In</Button>
+        <Button onPress = {() => navigation.navigate("SignUpScreen")}> Create an Account</Button>
+        <Button onPress = {() => resetPassword()}> Reset Password </Button>
+        {snackBarError(errMessage)}
       </SafeAreaView>
     </>
   );

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 (
-    <>
-      <SafeAreaView style={styles.container}>
-        <Text>{"TODO"}</Text>
-      </SafeAreaView>
-    </>
-  );
-}
+
+  const snackBarError = (message : String) => {
+    const onToggleSnackBar = () => setVisible(!visible);
+    const onDismissSnackBar = () => setVisible(false);
+
+    return (
+      <Snackbar
+         visible={visible}
+          onDismiss={onDismissSnackBar}
+          action={{
+             label: 'Close',
+              onPress: () => { {setVisible(false)};
+                },
+              }}>
+            {message}
+      </Snackbar>
+        );
+      };
+
+  const errorDeal = (message: any) => {
+    setVisible(true);
+    setErr(message);
+  }
+
+
+  const signUp = () => {
+  firebase.auth().createUserWithEmailAndPassword(email, password)
+  .then((userCredential) => {}).catch(error => errorDeal(error.message))
+  }
+
+
+
+      return (
+        <>
+          <SafeAreaView style={styles.container}>
+            <Appbar.Header>
+              <Appbar.Content title = "Create an Account" />
+            </Appbar.Header>
+            <TextInput
+            label = "Email"
+            value = {email}
+            onChangeText = {text => setEmail(text)}
+            />
+            <TextInput
+            secureTextEntry = {true}
+            label = "Password"
+            value = {password}
+            onChangeText = {text => setPassword(text)}
+            />
+            <Button onPress = {() => signUp()}>  Create an Account</Button>
+            <Button onPress = {() => navigation.navigate("SignInScreen")}> or Sign in Instead</Button>
+            {snackBarError(errMessage)}
+          </SafeAreaView>
+        </>
+      );
+    }
+
 
 const styles = StyleSheet.create({
   container: {

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<SocialModel[]>([]);
+  const [likes, setLikes] = useState<String[]>([]);
+  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 (
+      <Button icon = {icon} onPress = {() => toggleInterested(social)}>{layks()}</Button>
+    )
+  }
+
+  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 */}
+        /> 
+        <Card.Actions>
+          <Button onPress = {() => deleteSocial(item)}> Delete </Button>
+          {Liked(item)}
+        </Card.Actions>
       </Card>
     );
   };
 
+  const noEvents = () => {
+    return (
+      <SafeAreaView>
+        <Headline >No Events so far! Add some!!</Headline>
+        </SafeAreaView>
+    )
+  }
+
   const Bar = () => {
     return (
       <Appbar.Header>
@@ -113,7 +181,7 @@ export default function FeedScreen({ navigation }: Props) {
           // by reading the documentation :)
           // https://reactnative.dev/docs/flatlist#listemptycomponent
 
-          // ListEmptyComponent={ListEmptyComponent}
+          ListEmptyComponent={noEvents}
         />
       </View>
     </>

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<RootStackParamList, "NewSocialScreen">;
 }
-
 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) {
     <>
       <Bar />
       <View style={{ ...styles.container, padding: 20 }}>
+      <Button onPress={() => Keyboard.dismiss()} > Dismiss Keyboard</Button>
         <TextInput
           label="Event Name"
           value={eventName}