Building a Blog Platform with Centrali¶

import React, { useState, useEffect } from 'react';
import { CentraliClient } from '@centrali/sdk';

const client = new CentraliClient({
  workspace: 'my-blog',
  apiKey: process.env.REACT_APP_CENTRALI_KEY
});

function BlogList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(0);

  useEffect(() => {
    fetchPosts();
  }, [page]);

  const fetchPosts = async () => {
    setLoading(true);
    try {
      const result = await client.queryRecords('BlogPost', {
        where: {
          'data.status': { eq: 'published' }
        },
        sort: [{ field: 'data.publishedAt', direction: 'desc' }],
        page: { limit: 10, offset: page * 10 }
      });

      const enrichedPosts = await Promise.all(result.data.map(async (post) => ({
        ...post,
        author: await client.records.get(post.data.authorId),
        category: post.data.categoryId ? await client.records.get(post.data.categoryId) : null
      })));

      setPosts(enrichedPosts);
    } catch (error) {
      console.error('Error fetching posts:', error);
    }
    setLoading(false);
  };

  if (loading) return <div>Loading...</div>;

  return (
    <div className="blog-list">
      {posts.map(post => (
        <article key={post.id} className="blog-post">
          <h2>
            <a href={`/posts/${post.data.slug}`}>
              {post.data.title}
            </a>
          </h2>

          <div className="meta">
            By {post.author.data.displayName}
            in {post.category?.data.name}
            • {new Date(post.data.publishedAt).toLocaleDateString()}
          </div>

          {post.data.featuredImage && (
            <img src={post.data.featuredImage} alt={post.data.title} />
          )}

          <p>{post.data.excerpt}</p>

          <a href={`/posts/${post.data.slug}`}>Read more →</a>
        </article>
      ))}

      <div className="pagination">
        <button
          onClick={() => setPage(page - 1)}
          disabled={page === 0}
        >
          Previous
        </button>
        <button onClick={() => setPage(page + 1)}>
          Next
        </button>
      </div>
    </div>
  );
}

function BlogPost({ slug }) {
  const [post, setPost] = useState(null);
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');

  useEffect(() => {
    fetchPost();
  }, [slug]);

  const fetchPost = async () => {
    const result = await client.queryRecords('BlogPost', {
      where: {
        'data.slug': { eq: slug }
      },
      page: { limit: 1 }
    });

    const currentPost = result.data[0];
    if (!currentPost) return;

    const author = await client.records.get(currentPost.data.authorId);
    const commentResults = await client.queryRecords('Comment', {
      where: {
        and: [
          { 'data.postId': { eq: currentPost.id } },
          { 'data.status': { eq: 'approved' } }
        ]
      },
      sort: [{ field: 'createdAt', direction: 'desc' }],
      page: { limit: 50 }
    });

    const enrichedComments = await Promise.all(commentResults.data.map(async (comment) => ({
      ...comment,
      user: await client.records.get(comment.data.userId)
    })));

    setPost({
      ...currentPost,
      author
    });
    setComments(enrichedComments);
    trackView(currentPost.id);
  };

  const trackView = async (postId) => {
    await client.functions.execute('trackView', {
      postId,
      referrer: document.referrer
    });
  };

  const submitComment = async (e) => {
    e.preventDefault();

    const comment = await client.records.create({
      structure: 'Comment',
      data: {
        postId: post.id,
        userId: currentUser.id,
        content: newComment
      }
    });

    // Comment will be moderated automatically
    setNewComment('');
    alert('Comment submitted for moderation!');
  };

  const likePost = async () => {
    await client.records.update(post.id, {
      likes: post.data.likes + 1
    });

    setPost({
      ...post,
      data: {
        ...post.data,
        likes: post.data.likes + 1
      }
    });
  };

  if (!post) return <div>Loading...</div>;

  return (
    <article className="blog-post-detail">
      <h1>{post.data.title}</h1>

      <div className="meta">
        <img src={post.author.data.avatar} alt={post.author.data.displayName} />
        <div>
          <strong>{post.author.data.displayName}</strong>
          <time>{new Date(post.data.publishedAt).toLocaleDateString()}</time>
        </div>
      </div>

      {post.data.featuredImage && (
        <img src={post.data.featuredImage} alt={post.data.title} />
      )}

      <div
        className="content"
        dangerouslySetInnerHTML={{ __html: post.data.content }}
      />

      <div className="actions">
        <button onClick={likePost}>
          ❤️ Like ({post.data.likes})
        </button>
        <span>👁 {post.data.viewCount} views</span>
      </div>

      {post.data.allowComments && (
        <section className="comments">
          <h3>Comments ({comments.length})</h3>

          <form onSubmit={submitComment}>
            <textarea
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              placeholder="Write a comment..."
              required
            />
            <button type="submit">Post Comment</button>
          </form>

          {comments.map(comment => (
            <div key={comment.id} className="comment">
              <strong>{comment.user.data.displayName}</strong>
              <time>{new Date(comment.createdAt).toLocaleDateString()}</time>
              <p>{comment.data.content}</p>
            </div>
          ))}
        </section>
      )}
    </article>
  );
}

function BlogSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [searching, setSearching] = useState(false);

  const search = async (e) => {
    e.preventDefault();
    setSearching(true);

    const results = await client.records.search('BlogPost', query, {
      where: {
        'data.status': { eq: 'published' }
      },
      page: { limit: 20 }
    });

    setResults(results.data);
    setSearching(false);
  };

  return (
    <div className="search">
      <form onSubmit={search}>
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search posts..."
        />
        <button type="submit" disabled={searching}>
          Search
        </button>
      </form>

      {results.length > 0 && (
        <div className="search-results">
          <h3>Found {results.length} posts</h3>
          {results.map(hit => (
            <div key={hit.id}>
              <h4>
                <a href={`/posts/${hit.data.slug}`}>
                  {hit.data.title}
                </a>
              </h4>
              <p>{hit._highlighted.excerpt}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function PostEditor({ postId }) {
  const [post, setPost] = useState({
    title: '',
    content: '',
    excerpt: '',
    categoryId: '',
    tags: [],
    status: 'draft',
    allowComments: true
  });

  const savePost = async (publish = false) => {
    const data = {
      ...post,
      status: publish ? 'published' : 'draft',
      publishedAt: publish ? new Date().toISOString() : null
    };

    if (postId) {
      await client.records.update(postId, data);
    } else {
      const newPost = await client.records.create({
        structure: 'BlogPost',
        data
      });
      setPostId(newPost.id);
    }
  };

  const uploadImage = async (file) => {
    const url = await client.storage.upload({
      file,
      path: `images/${Date.now()}-${file.name}`
    });

    setPost({ ...post, featuredImage: url });
  };

  return (
    <div className="post-editor">
      <input
        type="text"
        value={post.title}
        onChange={(e) => setPost({ ...post, title: e.target.value })}
        placeholder="Post Title"
      />

      <textarea
        value={post.excerpt}
        onChange={(e) => setPost({ ...post, excerpt: e.target.value })}
        placeholder="Excerpt (optional)"
        maxLength={300}
      />

      <RichTextEditor
        value={post.content}
        onChange={(content) => setPost({ ...post, content })}
      />

      <CategorySelector
        value={post.categoryId}
        onChange={(categoryId) => setPost({ ...post, categoryId })}
      />

      <TagSelector
        value={post.tags}
        onChange={(tags) => setPost({ ...post, tags })}
      />

      <input
        type="file"
        accept="image/*"
        onChange={(e) => uploadImage(e.target.files[0])}
      />

      <label>
        <input
          type="checkbox"
          checked={post.allowComments}
          onChange={(e) => setPost({ ...post, allowComments: e.target.checked })}
        />
        Allow comments
      </label>

      <div className="actions">
        <button onClick={() => savePost(false)}>
          Save Draft
        </button>
        <button onClick={() => savePost(true)}>
          Publish
        </button>
      </div>
    </div>
  );
}

function AnalyticsDashboard() {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    fetchAnalytics();
  }, []);

  const fetchAnalytics = async () => {
    const [postResults, viewResults, commentResults, userResults] = await Promise.all([
      client.queryRecords('BlogPost', {
        page: { limit: 1000 }
      }),
      client.queryRecords('Analytics', {
        where: {
          and: [
            { 'data.type': { eq: 'pageview' } },
            { createdAt: { gte: getLastMonth() } }
          ]
        },
        page: { limit: 5000 }
      }),
      client.queryRecords('Comment', {
        page: { limit: 1000 }
      }),
      client.queryRecords('User', {
        page: { limit: 1000 }
      })
    ]);

    const posts = {
      total: postResults.data.length,
      published: postResults.data.filter(post => post.data.status === 'published').length,
      draft: postResults.data.filter(post => post.data.status === 'draft').length
    };

    const viewsByDate = viewResults.data.reduce((acc, view) => {
      const date = new Date(view.createdAt).toISOString().slice(0, 10);
      acc[date] = (acc[date] || 0) + 1;
      return acc;
    }, {});
    const views = Object.entries(viewsByDate).map(([date, count]) => ({ date, views: count }));

    const comments = {
      total: commentResults.data.length,
      approved: commentResults.data.filter(comment => comment.data.status === 'approved').length,
      pending: commentResults.data.filter(comment => comment.data.status === 'pending').length
    };

    const usersByRole = userResults.data.reduce((acc, user) => {
      const role = user.data.role || 'unknown';
      acc[role] = (acc[role] || 0) + 1;
      return acc;
    }, {});
    const users = {
      total: userResults.data.length,
      byRole: Object.entries(usersByRole).map(([role, value]) => ({ role, value }))
    };

    const commentCountByPost = commentResults.data.reduce((acc, comment) => {
      const postId = comment.data.postId;
      acc[postId] = (acc[postId] || 0) + 1;
      return acc;
    }, {});

    const topPosts = postResults.data
      .filter(post => post.data.status === 'published')
      .sort((a, b) => (b.data.viewCount || 0) - (a.data.viewCount || 0))
      .slice(0, 10)
      .map(post => ({
        ...post,
        commentCount: commentCountByPost[post.id] || 0
      }));

    setStats({
      posts,
      views,
      comments,
      users,
      topPosts
    });
  };

  if (!stats) return <div>Loading...</div>;

  return (
    <div className="analytics-dashboard">
      <h2>Blog Analytics</h2>

      <div className="stats-grid">
        <div className="stat-card">
          <h3>Posts</h3>
          <div className="number">{stats.posts.total}</div>
          <div className="breakdown">
            Published: {stats.posts.published}
            Draft: {stats.posts.draft}
          </div>
        </div>

        <div className="stat-card">
          <h3>Page Views (30 days)</h3>
          <LineChart data={stats.views} />
        </div>

        <div className="stat-card">
          <h3>Comments</h3>
          <div className="number">{stats.comments.total}</div>
          <div className="breakdown">
            Approved: {stats.comments.approved}
            Pending: {stats.comments.pending}
          </div>
        </div>

        <div className="stat-card">
          <h3>Users</h3>
          <div className="number">{stats.users.total}</div>
          <PieChart data={stats.users.byRole} />
        </div>
      </div>

      <div className="top-posts">
        <h3>Top Posts</h3>
        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>Views</th>
              <th>Likes</th>
              <th>Comments</th>
            </tr>
          </thead>
          <tbody>
            {stats.topPosts.map(post => (
              <tr key={post.id}>
                <td>{post.data.title}</td>
                <td>{post.data.viewCount}</td>
                <td>{post.data.likes}</td>
                <td>{post.commentCount}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}