No more periodic api calls. all websockets

This commit is contained in:
2024-10-30 15:03:53 -05:00
parent cfb6f01d00
commit 28543c285c
6 changed files with 106 additions and 112 deletions

View File

@ -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',
},

View File

@ -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,

View File

@ -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,
},
});