wedding-planner-frontend/app/ui/components/affinities-form-dialog.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { Affinities } from '@/app/lib/affinities';
import { Group } from '@/app/lib/group';
import { getCsrfToken, getSlug } from '@/app/lib/utils';
import { classNames } from '@/app/ui/components/button';
import { Dialog } from 'primereact/dialog';
import { useEffect, useState } from 'react';
import AffinitySlider from './form/affinitySlider';

export default function AffinitiesFormDialog({ groups, group, visible, onHide }: {
  groups: Group[],
  group?: Group,
  visible: boolean,
  onHide: () => void,
}) {
  const [affinities, setAffinities] = useState<Affinities>({});
  const [isLoadingAffinities, setIsLoadingAffinities] = useState(true);

  useEffect(() => {
    setIsLoadingAffinities(true);
    if (group?.id === undefined) {
      setAffinities({});
      setIsLoadingAffinities(false)
    } else {
      fetch(`/api/${getSlug()}/groups/${group?.id}/affinities`)
        .then((response) => response.json())
        .then((data) => {
          setAffinities(data);
          setIsLoadingAffinities(false)
        });
    }
  }, [group]);

  function submitAffinities() {
    const formattedAffinities = Object.entries(affinities).map(([groupId, affinity]) => ({ group_id: groupId, affinity: affinity }));
    fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/bulk_update`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': getCsrfToken(),
      },
      body: JSON.stringify({ affinities: formattedAffinities })
    }).then(() => {
      onHide();
    });
  }

  function resetAffinities() {
    fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/default`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
      }
    }).then((response) => response.json())
      .then(setAffinities);
  }

  return (
    <Dialog header="Update affinities" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
      {!isLoadingAffinities && <div className="card justify-evenly py-5 bg-gray-200 flex flex-col">
        <span className="text-center p-4">Describe the affinity with the rest of the groups</span>

        {
          groups.filter((currentGroup) => currentGroup.id !== group?.id).map((group) =>
            <div key={group.id} className="flex flex-row hover:bg-gray-300 px-3 py-2 items-center">
              <span className="w-1/3 text-right px-4">{group.name}</span>
              <AffinitySlider value={group.id && affinities[group.id] || 1} onChange={(value) => setAffinities({ ...affinities, [group.id || "default"]: value })} />
            </div>)
        }

        <div className="flex justify-center">
          <button className={classNames('gray')} onClick={resetAffinities} >Reset</button>
          <button className={classNames('primary')} onClick={submitAffinities} >Update</button>
        </div>
      </div>
      }
    </Dialog>
  );
}