Functionality for attending/not attending events

components/cards/Event.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Card, Text } from 'react-native-paper';
 import { View } from 'react-native';
 

components/cards/EventDetails.js

@@ -1,7 +1,51 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Card, Button, Text } from 'react-native-paper';
+import { doc, getDoc } from 'firebase/firestore';
+import { useSelector } from 'react-redux';
+import db from '../../firebaseFiles/firebase.config';
 
 export default function Event({ event, close }) {
+  const [attending, setAttending] = useState(false);
+  const user = useSelector((state) => state.user).data;
+
+  function getAttending() {
+    if (event.id) {
+      getDoc(doc(db, 'events', event.id))
+        .then((e) => {
+          const members = e.data().members
+          const attendingTF = members.filter((member) => member.user_id === user.id).length === 1;
+          console.log(attendingTF);
+          setAttending(attendingTF);
+        })
+        .catch(console.error);
+    }
+  }
+
+  function updateAttending(status) {
+    if (event.id) {
+      updateDoc(doc(db, 'events', event.id))
+        .then((doc) => {
+          const attendingTF = doc.data().members.includes(user.id);
+          console.log(attendingTF);
+        })
+        .catch(console.error);
+    }
+  }
+
+  useEffect(() => {
+    getAttending();
+  }, [event]);
+
+  function handleAttending() {
+    updateAttending(true);
+    close();
+  }
+
+  function handleNotAttending() {
+    updateAttending(false);
+    close();
+  }
+
   return (
     <Card>
       <Card.Cover
@@ -19,10 +63,14 @@ export default function Event({ event, close }) {
         <Text variant='bodySmall'>
           {event.description || 'no description given'}
         </Text>
+        <Text>
+          Attending:
+          {attending}
+        </Text>
       </Card.Content>
       <Card.Actions>
-        <Button onPress={close}>Eat Cheetos</Button>
-        <Button onPress={close}>Get Shredded</Button>
+        <Button onPress={handleAttending}>Attending</Button>
+        <Button onPress={handleNotAttending}>Not Attending</Button>
       </Card.Actions>
     </Card>
   );

components/lists/EventList.js

@@ -24,10 +24,6 @@ export default function EventList({ events }) {
     setIsVisible(true);
   }
 
-  // useEffect(() => {
-  //   console.log('in eventsList: ', events);
-  // }, [events]);
-
   return (
     <>
       <View style={styles.carouselContainer}>