No more periodic api calls. all websockets

components/home/RelationshipView.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
 import { Image, StyleSheet, AppState } from 'react-native';
 import { ThemedText, ThemedView } from '@/components/theme/Theme';
 import { getUser, getRelationship, getPartner, saveRelationshipData } from '@/components/services/SecureStore';
@@ -7,8 +8,6 @@ import TextButton from '@/components/theme/buttons/TextButton';
 import { checkRelationshipStatus, updateRelationshipStatus } from '@/constants/APIs';
 import type { User, Relationship, RelationshipData } from '@/constants/Types';
 
-const CHECK_TIME = 2; // In minutes
-
 type RelationshipProps = {
   pfpUrl: string | null;
 };
@@ -16,12 +15,12 @@ type RelationshipProps = {
 const RelationshipView: React.FC<RelationshipProps> = ({ pfpUrl }) => {
   const [status, setStatus] = useState<RelationshipData | null>(null);
   const [user, setUser] = useState<User | null>(null);
+  const [relationship, setRelationship] = useState<Relationship | null>(null);
   const [showRequestRelationship, setShowRequestRelationship] = useState(false);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     fetchRelationshipStatus();
-    setUpPeriodicCheck();
   }, []);
 
   useEffect(() => {
@@ -31,35 +30,35 @@ const RelationshipView: React.FC<RelationshipProps> = ({ pfpUrl }) => {
     }
   }, [pfpUrl]);
 
+  useEffect(() => {
+    if (!user || !relationship) {
+      console.log('User or relationship not found');
+      return;
+    }
+    const socket = io(process.env.EXPO_PUBLIC_WEBSOCKET_URL as string, {
+      transports: ['websocket'],
+    });
+    socket.on('connect', () => {
+      console.log('Connected to WebSocket server');
+      socket.emit('join', { relationshipId: relationship.id });
+    });
+    socket.on('connect_error', (error) => {
+      console.error('Error connecting to WebSocket server:', error);
+    });
+    socket.on('relationship_status_change', async (relationshipStatus) => {
+      handleCheckRelationshipStatus();
+    });
+    return () => {
+      socket.disconnect();
+    };
+  }, [relationship]);
+
+
   const handleRequestSent = (relationshipData: RelationshipData) => {
     setStatus(relationshipData);
     setShowRequestRelationship(false);
   };
 
-  const setUpPeriodicCheck = () => {
-    let intervalId: NodeJS.Timeout | null = null;
-    const startChecking = () => {
-      handleCheckRelationshipStatus();
-      intervalId = setInterval(handleCheckRelationshipStatus, 60000*CHECK_TIME);
-    };
-    const stopChecking = () => {
-      if (intervalId) {
-        clearInterval(intervalId);
-        intervalId = null;
-      }
-    };
-    const handleAppStateChange = (nextAppState: string) => {
-      if (nextAppState === 'active') startChecking();
-      else stopChecking();
-    };
-    const subscription = AppState.addEventListener('change', handleAppStateChange);
-    if (AppState.currentState === 'active') startChecking();
-    return () => {
-      stopChecking();
-      subscription.remove();
-    };
-  };
-
   const fetchRelationshipStatus = async () => {
     setLoading(true);
     try {
@@ -67,6 +66,7 @@ const RelationshipView: React.FC<RelationshipProps> = ({ pfpUrl }) => {
       if (!userFromStore) throw new Error('User not found in store.');
       setUser(userFromStore);
       const relationshipFromStore: Relationship = await getRelationship() as Relationship;
+      setRelationship(relationshipFromStore);
       const partnerFromStore: User = await getPartner() as User;
       if (!relationshipFromStore || !partnerFromStore)
         throw new Error('Relationship not found in store.');
@@ -105,7 +105,7 @@ const RelationshipView: React.FC<RelationshipProps> = ({ pfpUrl }) => {
     try {
       if (newStatus === 'accepted') {
         const updatedRelationshipData: RelationshipData =
-          await updateRelationshipStatus(user.id, newStatus);
+          await updateRelationshipStatus(user.id, newStatus) as RelationshipData;
         setStatus(updatedRelationshipData);
         await saveRelationshipData(updatedRelationshipData);
       } else {
@@ -243,6 +243,12 @@ const RelationshipView: React.FC<RelationshipProps> = ({ pfpUrl }) => {
               </ThemedView>
             )}
           </ThemedView>
+          <TextButton
+            width={140} height={36}
+            text='Leave Relationship'
+            fontSize={16}
+            onPress={() => handleRejectRequest()}
+          />
         </>
       );
     }
@@ -260,7 +266,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
   },
   title: {
     fontSize: 24,
@@ -271,7 +276,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: 20,
   },
   profileWrapper: {
     alignItems: 'center',
@@ -292,6 +296,7 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   buttonContainer: {
+    alignItems: 'center',
     justifyContent: 'space-around',
     width: '100%',
     marginTop: 20,