Moxitech-Websocket-Do/frontend/app/(tabs)/groups.tsx

233 lines
6.2 KiB
TypeScript
Raw Permalink Normal View History

import { Image, StyleSheet, Button, ActivityIndicator, TextInput, Modal, Pressable, View } from 'react-native';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useEffect, useState } from 'react';
import NetInfo from '@react-native-community/netinfo';
interface Message {
title: string;
type: string;
additionally: {
payload: string;
};
}
interface GroupData {
groupName: string;
users: string[];
messages: Message[];
}
export default function GroupsScreen() {
const [groups, setGroups] = useState<GroupData[]>([]);
const [isSyncing, setIsSyncing] = useState<boolean>(false);
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
const [newGroupName, setNewGroupName] = useState<string>("");
const fetchGroups = async () => {
try {
setIsSyncing(true);
const response = await fetch("http://127.0.0.1:8099/getAllGroups");
const data: GroupData[] = await response.json();
setGroups(data);
} catch (error) {
console.log('Fetch error:', error);
} finally {
setIsSyncing(false);
}
};
const createGroup = async () => {
if (!newGroupName.trim()) return;
try {
const response = await fetch(`http://127.0.0.1:8099/create_group?group_name=` + newGroupName + `&username=` + "moxitech", {
method: "GET",
headers: {
'Content-Type': 'application/json',
},
});
if (response.ok) {
await fetchGroups(); // Обновляем список групп после создания новой
setIsModalVisible(false); // Закрываем модальное окно
setNewGroupName(""); // Сбрасываем имя новой группы
}
} catch (error) {
console.log('Create group error:', error);
}
};
useEffect(() => {
const syncWithServer = async () => {
await fetchGroups();
};
const unsubscribe = NetInfo.addEventListener(state => {
if (state.isConnected) {
syncWithServer();
}
});
// Первоначальная загрузка данных
syncWithServer();
return () => {
unsubscribe();
};
}, []);
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}>
<ThemedView style={styles.buttonContainer}>
<Button
title="Создать группу"
color="green"
onPress={() => setIsModalVisible(true)}
/>
</ThemedView>
{/* {isSyncing ? (
<ActivityIndicator size="large" color="#00ff00" />
) : (
<Text>None</Text>
// groups.map( (group, groupIndex) => (
// <ThemedView key={groupIndex} style={styles.groupContainer}>
// <ThemedText type="title">{group.groupName}</ThemedText>
// <ThemedView style={styles.titleContainer}>
// <ThemedText type="subtitle">Пользователи</ThemedText>
// {group.users.map((user, userIndex) => (
// <ThemedText key={userIndex}>{user}</ThemedText>
// ))}
// </ThemedView>
// <ThemedView>
// {group.messages.map((message, messageIndex) => (
// <ThemedView key={messageIndex} style={styles.Message}>
// <ThemedText>{message.title}</ThemedText>
// {message.type === "text" ?
// <ThemedText>{message.additionally.payload}</ThemedText> :
// <ThemedText>!!! Please Update Program !!!</ThemedText>
// }
// </ThemedView>
// ))}
// </ThemedView>
// </ThemedView>
// ))
)
} */}
<Modal
animationType="slide"
transparent={true}
visible={isModalVisible}
onRequestClose={() => setIsModalVisible(false)}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<ThemedText type="title">Создать новую группу</ThemedText>
<TextInput
style={styles.input}
placeholder="Введите имя группы"
value={newGroupName}
onChangeText={setNewGroupName}
/>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={createGroup}
>
<ThemedText style={styles.textStyle}>Создать</ThemedText>
</Pressable>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setIsModalVisible(false)}
>
<ThemedText style={styles.textStyle}>Отмена</ThemedText>
</Pressable>
</View>
</View>
</Modal>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
groupContainer: {
marginBottom: 20,
},
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
Message: {
backgroundColor: 'grey',
padding: 10,
marginBottom: 10,
borderRadius: 10,
},
buttonContainer: {
margin: 10,
alignItems: 'center',
},
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 35,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonClose: {
backgroundColor: '#2196F3',
marginTop: 10,
},
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
width: 200,
},
textStyle: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
});