front/src/adminOption/EditTest.jsx - main - TimurIsm/OpenEyes

front/src/adminOption/EditTest.jsx
177 строк6 KB
TimurIsm
first_commit
16 май 2026, 15:34
16 май 2026, 15:344d3f198
import React, { useState, useEffect, useContext } from 'react';
import { Context } from '../main';
import { observer } from 'mobx-react-lite';
import AlertMessage from '../components/AlertMessage';
import { fetchTests } from '../http/testsAPI';
import SearchBar from '../components/SearchBar';
import EditTestModal from '../modals/EditTestModal';
import ModalConfirm from '../modals/ModalConfirm';
import { EditIcon, DeleteIcon } from '../buttons/IconButton';
import '../index.css';

const EditTest = observer(() => {
  const { tests } = useContext(Context);

  const [uiState, setUiState] = useState({
    searchQuery: '',
    alertMessage: null,
    showEditModal: false,
    showDeleteModal: false
  });
  
  const [dataState, setDataState] = useState({
    filteredTests: [],
    currentTest: null
  });

  useEffect(() => {
    tests.fetchTests();
  }, [tests]);

  useEffect(() => {
    const filtered = tests.tests.filter(testItem =>
      testItem.type.toLowerCase().includes(uiState.searchQuery.toLowerCase())
    );
    setDataState(prev => ({ ...prev, filteredTests: filtered }));
  }, [uiState.searchQuery, tests.tests]);

  const handleEditTest = (testItem) => {
    setDataState(prev => ({ ...prev, currentTest: testItem }));
    setUiState(prev => ({ ...prev, showEditModal: true }));
  };

  const handleSaveTest = async (updatedTest) => {
    try {
      const existingTest = tests.tests.find(t => 
        t.type.toLowerCase() === updatedTest.type.toLowerCase() && 
        t.id !== updatedTest.id
      );
      
      if (existingTest) {
        return {error: true, message: 'Тест с таким названием уже существует!'};
      }
      
      await tests.updateTest(updatedTest.id, updatedTest);
      await tests.fetchTests();
      setUiState(prev => ({
        ...prev,
        alertMessage: { type: 'success', message: 'Тест успешно обновлен!' },
        showEditModal: false
      }));
      
      setDataState(prev => ({
        ...prev,
        filteredTests: tests.tests.filter(testItem =>
          testItem.type.toLowerCase().includes(uiState.searchQuery.toLowerCase()))
    }));
      
      return { success: true };
    } catch (error) {
      console.error('Ошибка при обновлении теста:', error);
      return {error: true, message: 'Ошибка при обновлении теста.'};
    }
  };

  const handleDeleteTest = (testId) => {
    setDataState(prev => ({
      ...prev,
      currentTest: tests.tests.find(t => t.id === testId)
    }));
    setUiState(prev => ({ ...prev, showDeleteModal: true }));
  };

  const confirmDelete = async () => {
    try {
      await tests.deleteTest(dataState.currentTest.id);
      setUiState(prev => ({
        ...prev,
        alertMessage: { type: 'success', message: 'Тест успешно удален!' },
        showDeleteModal: false
      }));
    } catch (error) {
      console.error('Ошибка при удалении теста:', error);
      setUiState(prev => ({
        ...prev,
        alertMessage: { type: 'error', message: 'Ошибка при удалении теста.' }
      }));
    }
  };

  const handleCloseModal = (e) => {
    if (e) e.preventDefault();
    setUiState(prev => ({ ...prev, showEditModal: false }));
  };

  return (
    <div className="p-4">
      <h2 className="text-2xl font-bold mb-8 text-center">Редактирование тестов</h2>

      <div className="flex justify-center">
        <div className="md:w-1/2 w-full">
          <SearchBar
            searchTerm={uiState.searchQuery}
            handleSearch={(e) => setUiState(prev => ({ ...prev, searchQuery: e.target.value }))}
            placeholderText="Поиск теста..."
          />
          {uiState.alertMessage && (
            <div className="mb-4">
              <AlertMessage type={uiState.alertMessage.type} message={uiState.alertMessage.message} />
            </div>
          )}
        </div>
      </div>

      <div className="flex justify-center">
        <div className="space-y-8 md:w-1/2 w-full mb-4 mt-4">
          {dataState.filteredTests.map((testItem) => (
            <div key={testItem.id} className="flex justify-between items-center p-4 bg-white border 
            border-gray-200 rounded-lg shadow-md">
              <span className="text-lg font-semibold break-words whitespace-normal overflow-hidden">{testItem.type}</span>
              <div className="flex space-x-4">
                <button
                  onClick={() => handleEditTest(testItem)}
                  className="text-gray-500 hover:text-gray-700"
                >
                  <EditIcon className="w-6 h-6" />
                </button>
                <button
                  onClick={() => handleDeleteTest(testItem.id)}
                  className="text-gray-500 hover:text-gray-700"
                >
                  <DeleteIcon className="w-6 h-6" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      <ModalConfirm
        isOpen={uiState.showDeleteModal}
        onClose={() => setUiState(prev => ({ ...prev, showDeleteModal: false }))}
        onConfirm={confirmDelete}
        message={`Вы уверены, что хотите удалить тест "${dataState.currentTest?.type}"?`}
      />

      {uiState.showEditModal && (
        <EditTestModal
          isOpen={uiState.showEditModal}
          onClose={handleCloseModal}
          onSave={async (testData) => {
              const result = await handleSaveTest(testData);
              if (result?.success) {
                setUiState(prev => ({
                    ...prev,
                    alertMessage: { type: 'success', message: 'Тест успешно обновлен!' }
                }));
              }
              return result;
          }}
          test={dataState.currentTest}
        />
      )}
    </div>
  );
});

export default EditTest;