No more periodic api calls. all websockets
This commit is contained in:
@ -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',
|
||||
},
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
Reference in New Issue
Block a user