tasko/components/modals/card-modal/index.tsx

'use client';

import { useQuery } from '@tanstack/react-query';
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';

import { CardWithList } from '@/types';
import { fetcher } from '@/lib/fetcher';
import { AuditLog } from '@prisma/client';
import { useCardModal } from '@/hooks/use-card-modal';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';

import { Header } from './header';
import { Description } from './description';
import { Actions } from './actions';
import { Activity } from './activity';

export const CardModal = () => {
  const id = useCardModal((state) => state.id);
  const isOpen = useCardModal((state) => state.isOpen);
  const onClose = useCardModal((state) => state.onClose);

  const { data: cardData } = useQuery<CardWithList>({
    queryKey: ['card', id],
    queryFn: () => fetcher(`/api/cards/${id}`),
  });

  const { data: auditLogsData } = useQuery<AuditLog[]>({
    queryKey: ['card-logs', id],
    queryFn: () => fetcher(`/api/cards/${id}/logs`),
  });

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent>
        <VisuallyHidden.Root>
          <DialogTitle>Card Data Panel</DialogTitle>
        </VisuallyHidden.Root>
        {!cardData ? <Header.Skeleton /> : <Header data={cardData} />}
        <div className='grid grid-cols-1 md:grid-cols-4 md:gap-4'>
          <div className='col-span-3'>
            <div className='w-full space-y-10'>
              {!cardData ? (
                <Description.Skeleton />
              ) : (
                <Description data={cardData} />
              )}
              {!auditLogsData ? (
                <Activity.Skeleton />
              ) : (
                <Activity items={auditLogsData} />
              )}
            </div>
          </div>
          {!cardData ? <Actions.Skeleton /> : <Actions data={cardData} />}
        </div>
      </DialogContent>
    </Dialog>
  );
};