المحطّة ٦: واجهة React تعرض المواعيد وتحجز

import { useState, useEffect } from 'react'; const API = 'http://localhost:3000';const PATIENT = 'سعود';   // المريض المسجَّل دخوله (من محطّة المصادقة) export default function App() {  const [slots, setSlots] = useState([]);  const [msg, setMsg] = useState('');   const load = () =>    fetch(`${API}/api/appointments?status=free`)      .then(r => r.json())      .then(d => setSlots(d.data));   useEffect(() => { load(); }, []);   async function book(id) {    const res = await fetch(`${API}/api/appointments/${id}/book`, {      method: 'POST',      headers: { 'Content-Type': 'application/json' },      body: JSON.stringify({ patient: PATIENT }),    });    const data = await res.json();    if (!res.ok) return setMsg(data.error.message);    setMsg('تمّ الحجز');    load();  }   return (    <div>      <h2>المواعيد المتاحة</h2>      {msg && <p className="msg">{msg}</p>}      <ul className="slots">        {slots.map(s => (          <li key={s.id}>            {s.doctor} {s.time}            <button onClick={() => book(s.id)}>احجز</button>          </li>        ))}      </ul>    </div>  );}

const express = require('express');const app = express();app.use(express.json()); let appts = [  { id: 1, doctor: 'د. منى',  time: '09:00', bookedBy: null },  { id: 2, doctor: 'د. منى',  time: '09:30', bookedBy: 'سارة' },  { id: 3, doctor: 'د. أحمد', time: '10:00', bookedBy: null },]; app.get('/api/appointments', (req, res) => {  let data = appts;  if (req.query.status === 'free') data = appts.filter(a => a.bookedBy === null);  res.json({ data, meta: { total: data.length } });});app.post('/api/appointments/:id/book', (req, res) => {  const a = appts.find(x => x.id === Number(req.params.id));  if (!a) return res.status(404).json({ error: { code: 'NOT_FOUND', message: 'لا يوجد موعد' } });  if (a.bookedBy !== null) return res.status(409).json({ error: { code: 'CONFLICT', message: 'الموعد محجوز' } });  a.bookedBy = req.body.patient;  res.json({ data: a });}); app.listen(3000);