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

front/src/adminOption/CreateArticle.jsx
91 строка3 KB
TimurIsm
first_commit
16 май 2026, 15:34
16 май 2026, 15:344d3f198
import React, { useContext, useEffect } from 'react';
import { createArticle } from '../http/articlesAPI';
import { observer } from 'mobx-react-lite';
import { Context } from '../main';
import Button from '../buttons/Button';
import FileUploader from '../components/FileUploader';
import ArticleForm from '../components/ArticleForm';
import { useArticleForm } from '../hooks/useArticleForm';
import { deepTrim } from '../components/stringUtils';

const CreateArticle = observer(() => {
  const { articles, user } = useContext(Context);
  const {
    formData,
    setFormData,
    alertMessage,
    setAlertMessage, 
    loadArticles,
    handleInputChange,
    handleKeyDown,
    validateForm
  } = useArticleForm();

  useEffect(() => {
    loadArticles();
  }, [loadArticles]);

  const handleFileProcessed = ({ title, description, content }) => {
    setFormData({ title, description, content });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const cleanedData = {
      title: deepTrim(formData.title),
      description: deepTrim(formData.description),
      content: deepTrim(formData.content)
    };
    
    setFormData(cleanedData);
    
    const isValid = await validateForm();
    if (!isValid) return;

    try {
      const createdArticle = await createArticle({
        ...cleanedData,
        adminId: user.user.id
      });
      articles.addArticle(createdArticle);
      setFormData({ title: '', description: '', content: '' });
      
      setAlertMessage({ type: 'success', message: 'Новая статья успешно добавлена' });
    } catch (error) {
      setAlertMessage({ 
        type: 'error', 
        message: error.message || 'Ошибка при создании статьи! Пожалуйста, попробуйте снова.' 
      });
    }
  };

  const handleTextareaResize = (e) => {
    e.target.style.height = 'auto';
    e.target.style.height = `${e.target.scrollHeight}px`;
  };

  return (
    <div className="flex items-center justify-center">
      <form onSubmit={handleSubmit} className="space-y-4 w-3/4">
        <h1 className="text-xl font-bold text-center mb-8">Добавление новой статьи</h1>
        
        <FileUploader onFileProcessed={handleFileProcessed} />
        
        <ArticleForm
          formData={formData}
          alertMessage={alertMessage}
          onInputChange={handleInputChange}
          onKeyDown={handleKeyDown}
          onTextareaResize={handleTextareaResize}
        />
        
        <div className="flex justify-center">
          <Button onClick={handleSubmit} buttonText="Сохранить статью" />
        </div>
      </form>
    </div>
  );
});

export default CreateArticle;