src/MessageView.jsx - master - prost0nekit/MyMail

src/MessageView.jsx
122 строки3 KB
cxlevi
Initial commit — MyMail project
09 июн 2026, 17:14
09 июн 2026, 17:149e6cd7e
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { supabase } from './supabaseClient';
import './messageView.css';

function MessageView() {
  const { id } = useParams(); // Получаем ID сообщения из URL
  const navigate = useNavigate();
  const [message, setMessage] = useState(null);
  const [loading, setLoading] = useState(true);
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    // Проверяем авторизацию
    const user = JSON.parse(localStorage.getItem('user') || 'null');
    if (!user) {
      navigate('/login');
      return;
    }
    setCurrentUser(user);
    
    // Загружаем сообщение
    fetchMessage(id);
  }, [id, navigate]);

  const fetchMessage = async (messageId) => {
    try {
      setLoading(true);
      const { data, error } = await supabase
        .from('messages')
        .select('*')
        .eq('id', messageId)
        .single();

      if (error || !data) {
        console.error('❌ Ошибка загрузки:', error);
        alert('Сообщение не найдено');
        navigate('/');
      } else {
        setMessage(data);
      }
    } catch (err) {
      console.error('❌ Критическая ошибка:', err);
    } finally {
      setLoading(false);
    }
  };

  // Форматирование даты
  const formatFullDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleString('ru-RU', {
      day: '2-digit',
      month: 'long',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  // Извлечение имени из email
  const getSenderName = (email) => {
    return email.split('@')[0];
  };

  if (loading) {
    return <div className="mv-loading">Загрузка сообщения...</div>;
  }

  if (!message) {
    return <div className="mv-error">Сообщение не найдено</div>;
  }

  return (
    <div className="mv-wrapper">
      
      {/* === Верхняя панель === */}
      <header className="mv-header">
        <button className="mv-back-btn" onClick={() => navigate('/')}>
          ← Назад
        </button>
      </header>

      {/* === Тело сообщения === */}
      <div className="mv-message">
        
        {/* Тема */}
        <h1 className="mv-subject">{message.theme}</h1>
        
        {/* Информация об отправителе */}
        <div className="mv-sender-info">
          <div className="mv-sender-avatar">
            {getSenderName(message.from_email).charAt(0).toUpperCase()}
          </div>
          
          <div className="mv-sender-details">
            <div className="mv-sender-name">
              {getSenderName(message.from_email)} 
              <span className="mv-sender-email">&lt;{message.from_email}&gt;</span>
            </div>
            <div className="mv-recipient-info">
              кому: {message.to_email}
            </div>
          </div>
          
          <div className="mv-date">
            {formatFullDate(message.created_at)}
          </div>
        </div>

        {/* Текст сообщения */}
        <div className="mv-message-body">
          {message.message_text}
        </div>
        
      </div>
      
    </div>
  );
}

export default MessageView;