Untitled

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import Chart from 'chart.js/auto';

const Dashboard = ({ isLoggedIn }) => {
  const [appointments, setAppointments] = useState([]);
  const [uniqueVisitors, setUniqueVisitors] = useState(0);
  const navigate = useNavigate();

  const api = axios.create({
    baseURL: 'http://localhost:3001', 
  });



  const fetchAppointments = async () => {
    try {
      const response = await api.get('/programari');
      console.log('Appointments fetched after refresh:', response.data);
      setAppointments(response.data);
    } catch (error) {
      console.error('Error fetching appointments:', error);
    }
  };

  const fetchUniqueVisitors = async () => {
    try {
      const response = await api.get('/unique-visitors');
      setUniqueVisitors(response.data.uniqueVisitors);
    } catch (error) {
      console.error('Error fetching unique visitors:', error);
    }
  };

  const handleRefresh = async () => {
    try {
      fetchAppointments();
      fetchUniqueVisitors();


      const monthlyData = [];
      for (let i = 1; i <= 12; i++) {
        const month = i.toString(); 
        try {
          const response = await api.get(`/unique-visitors/${month}`);
          monthlyData.push(response.data.uniqueVisitors);
        } catch (error) {
          console.error(`Error fetching unique visitors for month ${month}:`, error);
          monthlyData.push(0); 
        }
      }


      const ctx = document.getElementById('uniqueVisitorsChart').getContext('2d');

      const existingChart = Chart.getChart(ctx);

      if (existingChart) {
        existingChart.destroy();
      }

      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          datasets: [{
            label: 'Unique Visitors',
            data: monthlyData,
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1,
          }],
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
              position: 'right',
              title: {
                display: true,
                text: 'Number of Visitors',
              },
              grid: {
                drawOnChartArea: false,
              },
            },
            
            y1: {
              position: 'left',
              display: false,
            },
          },
          plugins: {
            legend: {
              display: false, 
            },
          },
          responsive: false, 
        },
        
      });
    } catch (error) {
      console.error('Error refreshing data:', error);
    }
  };

  useEffect(() => {
    if (!isLoggedIn) {
      navigate('/dashboard');
    } else {
      fetchAppointments();
      fetchUniqueVisitors();
    }
  }, [isLoggedIn, navigate]);


  const handleIgnoreAppointment = async (appointmentId) => {
    try {
      await api.patch(`/programari/${appointmentId}/ig`);
      fetchAppointments();
    } catch (error) {
      console.error('Error ignoring appointment:', error);
    }
  };


  return (
    <div>
      <h2>Dashboard</h2>
      <p>Unique Visitors in total : {uniqueVisitors}</p>
      <canvas id="uniqueVisitorsChart" width="400" height="200"></canvas>

      <button onClick={handleRefresh}>Refresh</button>
      <ul>
      {appointments.map((appointment) => {
        return (
          <li key={appointment._id}>
            <p>Name: {appointment.name}</p>
            <p>Date: {appointment.date}</p>
            <p>Time: {appointment.time}</p>
            {!appointment.ignored && (
              <button onClick={() => { console.log("Ignore button clicked"); handleIgnoreAppointment(appointment._id); }}>Ignore</button>
            )}
          </li>
        );
      })}
      </ul>
    </div>
  );
};

export default Dashboard;