wedding-planner-frontend/app/ui/guests/table.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import clsx from 'clsx';
import React, { useState, useEffect } from 'react';
import { Guest } from '@/app/lib/definitions';
import { getCsrfToken } from '@/app/lib/utils';

export default function guestsTable() {
  const [guests, setGuests] = useState<Array<Guest>>([]);

  function loadGuests() {
    fetch("/api/guests.json")
      .then((response) => response.json())
      .then((data) => {
        setGuests(data.data.map((record: any) => {
          return ({
            id: record.id,
            name: record.attributes.name,
            email: record.attributes.email,
            group_name: record.attributes.group_name,
            status: record.attributes.status
          });
        }));
      }, (error) => {
        return [];
      });
  };

  const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
  const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
  const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
  const handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');

  const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status:string) => {
    fetch("/api/guests/bulk_update.json",
      {
        method: 'POST',
        body: JSON.stringify({ properties: { status: status }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': getCsrfToken(),
        }
      })
      .then(() => loadGuests())
      .catch((error) => console.error(error));
  }

  guests.length === 0 && loadGuests();
  const ctaClassName = "text-white py-1 px-2 mx-1 rounded";

  return (
    <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
          Guests
          <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
            There are {guests.length} guests in the list
          </p>
        </caption>
        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th scope="col" className="px-6 py-3">
              Name
            </th>
            <th scope="col" className="px-6 py-3">
              Email
            </th>
            <th scope="col" className="px-6 py-3">
              Group
            </th>
            <th scope="col" className="px-6 py-3">
              Status
            </th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {guests.map((guest) => (
            <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                {guest.name}
              </th>
              <td className="px-6 py-4">
                {guest.email}
              </td>
              <td className="px-6 py-4">
                {guest.group_name}
              </td>
              <td className="px-6 py-4">
                <span className="flex items-center text-sm dark:text-white me-3">
                  <span className={clsx(
                    'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
                    {
                      'bg-gray-400': guest.status === 'Considered',
                      'bg-blue-400': guest.status === 'Invited',
                      'bg-green-600': guest.status === 'Confirmed',
                      'bg-red-400': guest.status === 'Declined',
                      'bg-yellow-400': guest.status === 'Tentative',
                    }
                  )}>
                  </span>
                  {guest.status}
                </span>
              </td>
              <td>
                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={`${ctaClassName} bg-blue-400 hover:bg-blue-600`}>
                  Invite
                </button>)}
                {(guest.status === 'Invited' || guest.status === 'Tentative') && (
                  <>
                    <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>Confirm</button>
                    {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-yellow-500 hover:bg-yellow-700`}>Tentative</button>}
                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>Decline</button>
                  </>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}