Releases & Changelog

// useReleases.ts: newest 10, then "Load more" pages with the cursor
import { useCallback, useEffect, useState } from 'react';

export interface Release {
  id: string;
  title: string;
  content: string; // markdown
  publishedAt: number;
}

export function useReleases(workspace: string, pageSize = 10) {
  const [releases, setReleases] = useState<Release[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);
  const [hasMore, setHasMore] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  const fetchPage = useCallback(async (after: string | null) => {
    setIsLoading(true);
    const params = new URLSearchParams({ workspace, limit: String(pageSize) });
    if (after) params.set('cursor', after);
    const { data, meta } = await fetch(`https://simpleproduct.dev/api/v1/releases/public?${params}`).then((r) => r.json());
    setReleases((prev) => (after ? [...prev, ...data] : data));
    setCursor(meta.nextCursor);
    setHasMore(meta.hasMore);
    setIsLoading(false);
  }, [workspace, pageSize]);

  useEffect(() => { fetchPage(null); }, [fetchPage]);

  return { releases, isLoading, hasMore, loadMore: () => fetchPage(cursor) };
}

// Changelog.tsx
import ReactMarkdown from 'react-markdown';
import { useReleases } from './useReleases';

export function Changelog({ workspace }: { workspace: string }) {
  const { releases, isLoading, hasMore, loadMore } = useReleases(workspace);

  return (
    <div>
      <h2>What's New</h2>
      {releases.map((release) => (
        <article key={release.id}>
          <h3>{release.title}</h3>
          <time>{new Date(release.publishedAt).toLocaleDateString()}</time>
          {/* content is markdown */}
          <ReactMarkdown>{release.content}</ReactMarkdown>
        </article>
      ))}
      {isLoading && <p>Loading…</p>}
      {hasMore && !isLoading && <button onClick={loadMore}>Load more</button>}
    </div>
  );
}