Untitled
unknown
javascript
a year ago
4.1 kB
13
Indexable
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;
Editor is loading...
Leave a Comment