wedding-planner-frontend/app/[slug]/dashboard/website/page.tsx

/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/

'use client'

import { AbstractApi } from '@/app/api/abstract-api';
import { Website, WebsiteSerializer } from '@/app/lib/website';
import { useEffect, useState } from 'react';
import Tiptap from '../../../components/Tiptap';

export default function Page() {

  const [website, setWebsite] = useState<Website>()
  const api = new AbstractApi<Website>();
  const serializer = new WebsiteSerializer();

  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);

  useEffect(() => {
    api.get(serializer, undefined, (loadedWebsite) => {
      setWebsite(loadedWebsite);
    });
  }, []);

  const updateWebsite = (newContent: string) => {
    // Debounce API update: send after 500ms of no further changes
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    setTimeoutId(
      setTimeout(() => {
        api.update(serializer, new Website('', newContent), () => { });
      }, 500)
    );
  }

  return (
    <div className="border rounded-lg p-4">
      <Tiptap
        key={website?.content ?? 'empty'}
        content={website?.content || ''}
        onUpdate={updateWebsite}
      />
    </div>
  );
}