Notifications.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import MainLayout from '../components/Layout/MainLayout';
import { apiFetch } from '../lib/api';
 
function Notifications() {
  const [notes, setNotes] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
 
  async function fetchNotes() {
    setLoading(true);
    setError('');
    try {
      const token = localStorage.getItem('token');
      const { apiUrl } = await import('../lib/api');
      const url = apiUrl('/notifications');
      const res = await apiFetch(url.toString(), { headers: { Authorization: `Bearer ${token}` } });
      if (!res.ok) throw new Error('Failed to load notifications');
      const data = await res.json();
      setNotes(data);
    } catch (err) {
      console.error(err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }
 
  useEffect(() => { fetchNotes(); }, []);
 
  const markRead = async (id) => {
    try {
      const token = localStorage.getItem('token');
      const { apiUrl } = await import('../lib/api');
      const url = apiUrl(`/notifications/${id}/mark-read`);
      const res = await apiFetch(url.toString(), { method: 'PUT', headers: { Authorization: `Bearer ${token}` } });
      if (!res.ok) throw new Error('Failed');
      setNotes(n => n.map(x => x.notification_id === id ? { ...x, is_read: true } : x));
    } catch (err) {
      console.error(err);
    }
  };
 
  const dismissNote = async (id) => {
    if (!window.confirm('Dismiss this notification?')) return;
    try {
      const token = localStorage.getItem('token');
      const { apiUrl } = await import('../lib/api');
      const url = apiUrl(`/notifications/${id}`);
      const res = await apiFetch(url.toString(), { method: 'DELETE', headers: { Authorization: `Bearer ${token}` } });
      if (!res.ok) throw new Error('Failed to dismiss notification');
      setNotes(n => n.filter(x => x.notification_id !== id));
    } catch (err) {
      console.error(err);
      alert('Failed to dismiss notification');
    }
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header"><h2>Notifications</h2></div>
        {loading && <div className="loading">Loading...</div>}
        {error && <div className="error-message">{error}</div>}
        <div className="notifications-list" style={{ maxWidth: 600, margin: '0 auto' }}>
          {notes.length === 0 ? (
            <div style={{ color: '#888', textAlign: 'center', marginTop: 32 }}>
              <span className="material-symbols-outlined" style={{ fontSize: 48, opacity: 0.3 }}>notifications_off</span>
              <div>No notifications</div>
            </div>
          ) : (
            notes.map(n => (
              <div key={n.notification_id} style={{
                padding: 16,
                borderBottom: '1px solid #eee',
                background: n.is_read ? '#fafafa' : '#fff',
                display: 'flex',
                flexDirection: 'column',
                gap: 6,
                position: 'relative'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ fontWeight: 'bold', fontSize: '1.1em' }}>{n.title}</div>
                  <div style={{ fontSize: '0.95em', color: '#888' }}>{new Date(n.created_at).toLocaleString()}</div>
                </div>
                <div style={{ marginTop: 2 }}>{n.message}</div>
                <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                  {!n.is_read && (
                    <button className="btn btn-sm" onClick={() => markRead(n.notification_id)}>
                      Mark read
                    </button>
                  )}
                  <button className="btn btn-sm btn-danger" onClick={() => dismissNote(n.notification_id)}>
                    Dismiss
                  </button>
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    </MainLayout>
  );
}
 
export default Notifications;