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

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