No more periodic api calls. all websockets

app/(tabs)/index.tsx

@@ -13,10 +13,8 @@ const IndexScreen = () => {
   return (
     <ThemedView style={styles.container}>
       <UserInfo onPfpUpdate={handlePfpUpdate} />
-      <CountdownView />
       <RelationshipView pfpUrl={pfpUrl} />
-      <ThemedView style={styles.footerContainer}>
-      </ThemedView>
+      <CountdownView />
     </ThemedView>
   );
 };
@@ -25,10 +23,5 @@ export default IndexScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-  },
-  footerContainer: {
-    flex: 1 / 3,
-    alignItems: 'center',
   },
 });

app/(tabs)/messages.tsx

@@ -107,12 +107,12 @@ const MessagesScreen = () => {
     });
     socket.on('connect', () => {
       console.log('Connected to WebSocket server');
-      socket.emit('join', user.id);
+      socket.emit('join', { userId: user.id });
     });
     socket.on('connect_error', (error) => {
       console.error('Error connecting to WebSocket server:', error);
     });
-    socket.on('message', async (newMessage) => {
+    socket.on('new_message', async (newMessage) => {
       const initialMessages = await getMessages(user.id, 20, 0);
       if (!initialMessages) return;
       const formattedMessages = formatMessages(initialMessages);