No more periodic api calls. all websockets

components/home/Countdown.tsx

@@ -24,7 +24,6 @@ const CountdownView = () => {
   const [isDateModalOpen, setIsDateModalOpen] = useState(false);
   const [user, setUser] = useState<User | null>(null);
   const [relationship, setRelationship] = useState<Relationship | null>(null);
-  const [title, setTitle] = useState('');
 
   useEffect(() => {
     const loadData = async () => {
@@ -135,9 +134,9 @@ const CountdownView = () => {
         />
       </ThemedView>
       <TextButton
-        width={320} height={68}
+        width={160} height={48}
         text='Change Countdown'
-        fontSize={24}
+        fontSize={18}
         onPress={() => setIsDateModalOpen(true)}
       />
       {user && countdown && (
@@ -171,13 +170,12 @@ const styles = StyleSheet.create({
   },
   innerContainer: {
     flex: 1,
-    justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: 10,
     backgroundColor: 'transparent',
   },
   title: {
-    fontSize: 32,
+    fontSize: 24,
     lineHeight: 32,
     fontWeight: '600',
     textAlign: 'center',
@@ -187,17 +185,17 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',
-    width: '100%',
+    width: '90%',
     backgroundColor: 'transparent',
-    marginVertical: 20,
+    marginVertical: 10,
   },
   countdownItem: {
     alignItems: 'center',
-    marginHorizontal: 10,
+    marginHorizontal: 5,
     backgroundColor: 'transparent',
   },
   countdownValue: {
-    fontSize: 32,
+    fontSize: 28,
     lineHeight: 42,
     fontWeight: 'bold',
   },

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,

components/home/UserInfo.tsx

@@ -97,7 +97,6 @@ const styles = StyleSheet.create({
   profileContainer: {
     alignItems: 'center',
     marginTop: 20,
-    marginBottom: 20,
   },
   profilePicture: {
     width: 100,
@@ -112,6 +111,5 @@ const styles = StyleSheet.create({
   },
   email: {
     fontSize: 16,
-    marginBottom: 20,
   },
 });