@actuate-media/cms-admin 0.17.0 → 0.19.0

package/src/views/Posts.tsx

@@ -1,375 +0,0 @@
-'use client'
-
-import {
-  Plus,
-  Search,
-  Trash2,
-  SlidersHorizontal,
-  Pencil,
-  ArrowUpDown,
-  ArrowUp,
-  ArrowDown,
-  Loader2,
-  AlertTriangle,
-} from 'lucide-react'
-import { useState, useMemo } from 'react'
-import { toast } from 'sonner'
-import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
-import { useApiData } from '../lib/useApiData.js'
-import { cmsApi } from '../lib/api.js'
-
-type PostSortKey = 'title' | 'author' | 'category' | 'status' | 'date'
-
-export interface PostsProps {
-  onNavigate?: (path: string) => void
-}
-
-export function Posts({ onNavigate }: PostsProps) {
-  const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(
-    '/collections/posts?pageSize=100',
-  )
-  const [searchQuery, setSearchQuery] = useState('')
-  const [filterStatus, setFilterStatus] = useState<string>('all')
-  const [filterCategory, setFilterCategory] = useState<string>('all')
-  const [selectedPosts, setSelectedPosts] = useState<number[]>([])
-  const [sortConfig, setSortConfig] = useState<SortConfig<PostSortKey> | null>(null)
-
-  const posts = data?.docs ?? []
-
-  const filteredAndSorted = useMemo(() => {
-    let results = posts.filter((post: any) => {
-      const matchesSearch =
-        (post.title ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (post.author ?? '').toLowerCase().includes(searchQuery.toLowerCase())
-      const matchesStatus =
-        filterStatus === 'all' || (post.status ?? '').toLowerCase() === filterStatus.toLowerCase()
-      const matchesCategory =
-        filterCategory === 'all' ||
-        (post.category ?? '').toLowerCase() === filterCategory.toLowerCase()
-      return matchesSearch && matchesStatus && matchesCategory
-    })
-
-    if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (p: any) => [
-        p.title,
-        p.author ?? '',
-        p.category ?? '',
-      ])
-    } else if (sortConfig) {
-      results = [...results].sort((a: any, b: any) => {
-        const aVal = a[sortConfig.key] ?? ''
-        const bVal = b[sortConfig.key] ?? ''
-        const cmp = String(aVal).localeCompare(String(bVal))
-        return sortConfig.direction === 'asc' ? cmp : -cmp
-      })
-    }
-    return results
-  }, [posts, searchQuery, filterStatus, filterCategory, sortConfig])
-
-  const handleSelectAll = (checked: boolean) => {
-    setSelectedPosts(checked ? filteredAndSorted.map((p: any) => p.id) : [])
-  }
-
-  const handleSelectPost = (id: number) => {
-    setSelectedPosts((prev) =>
-      prev.includes(id) ? prev.filter((pid) => pid !== id) : [...prev, id],
-    )
-  }
-
-  const handleBulkDelete = async () => {
-    for (const id of selectedPosts) {
-      await cmsApi(`/collections/posts/${id}`, { method: 'DELETE' })
-    }
-    toast.success(`${selectedPosts.length} posts deleted`)
-    setSelectedPosts([])
-    refetch()
-  }
-
-  const handleDelete = async (id: number) => {
-    await cmsApi(`/collections/posts/${id}`, { method: 'DELETE' })
-    toast.success('Post deleted')
-    setSelectedPosts((prev) => prev.filter((pid) => pid !== id))
-    refetch()
-  }
-
-  function SortHeader({ label, sortKey }: { label: string; sortKey: PostSortKey }) {
-    const active = sortConfig?.key === sortKey
-    return (
-      <button
-        type="button"
-        onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
-        className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900"
-      >
-        {label}
-        {active ? (
-          sortConfig!.direction === 'asc' ? (
-            <ArrowUp className="h-3 w-3" />
-          ) : (
-            <ArrowDown className="h-3 w-3" />
-          )
-        ) : (
-          <ArrowUpDown className="h-3 w-3 text-gray-400" />
-        )}
-      </button>
-    )
-  }
-
-  if (loading) {
-    return (
-      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
-      {error && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
-          <span className="flex-1 text-sm text-red-800">{error}</span>
-          <button
-            onClick={refetch}
-            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
-          >
-            Retry
-          </button>
-        </div>
-      )}
-
-      <div className="mb-4 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
-        <div>
-          <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">Posts</h1>
-          <p className="text-sm text-gray-600">{filteredAndSorted.length} total posts</p>
-        </div>
-        <button
-          onClick={() => onNavigate?.('/posts/new')}
-          className="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-        >
-          <Plus className="h-4 w-4" />
-          <span className="hidden sm:inline">New Post</span>
-          <span className="sm:hidden">New</span>
-        </button>
-      </div>
-
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
-        <div className="flex flex-col gap-3 p-3">
-          <div className="relative">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Search posts..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            />
-          </div>
-          <div className="flex flex-col gap-2 sm:flex-row">
-            <select
-              value={filterStatus}
-              onChange={(e) => setFilterStatus(e.target.value)}
-              className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            >
-              <option value="all">All Status</option>
-              <option value="published">Published</option>
-              <option value="draft">Draft</option>
-            </select>
-            <select
-              value={filterCategory}
-              onChange={(e) => setFilterCategory(e.target.value)}
-              className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            >
-              <option value="all">All Categories</option>
-              <option value="technology">Technology</option>
-              <option value="design">Design</option>
-              <option value="business">Business</option>
-            </select>
-            <button
-              type="button"
-              className="flex items-center justify-center gap-2 rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors hover:bg-gray-50"
-            >
-              <SlidersHorizontal className="h-4 w-4" />
-              <span className="hidden sm:inline">More Filters</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {selectedPosts.length > 0 && (
-        <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
-          <div className="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
-            <span className="text-sm text-blue-900">
-              {selectedPosts.length} post{selectedPosts.length !== 1 ? 's' : ''} selected
-            </span>
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={handleBulkDelete}
-                className="flex-1 rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-red-700 sm:flex-none"
-              >
-                Delete
-              </button>
-              <button
-                type="button"
-                onClick={() => setSelectedPosts([])}
-                className="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm transition-colors hover:bg-gray-50 sm:flex-none"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {filteredAndSorted.length === 0 && !error ? (
-        <div className="flex flex-1 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-8 text-center">
-          <p className="mb-2 text-sm text-gray-500">No posts yet</p>
-          <button
-            onClick={() => onNavigate?.('/posts/new')}
-            className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-          >
-            Create your first post
-          </button>
-        </div>
-      ) : (
-        <>
-          <div className="hidden flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white md:block">
-            <div className="h-full overflow-x-auto">
-              <table className="w-full">
-                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
-                  <tr>
-                    <th className="w-8 px-3 py-2 text-left">
-                      <input
-                        type="checkbox"
-                        checked={
-                          selectedPosts.length === filteredAndSorted.length &&
-                          filteredAndSorted.length > 0
-                        }
-                        onChange={(e) => handleSelectAll(e.target.checked)}
-                        className="rounded border-gray-300"
-                      />
-                    </th>
-                    <th className="px-3 py-2 text-left">
-                      <SortHeader label="Title" sortKey="title" />
-                    </th>
-                    <th className="px-3 py-2 text-left">
-                      <SortHeader label="Author" sortKey="author" />
-                    </th>
-                    <th className="px-3 py-2 text-left">
-                      <SortHeader label="Category" sortKey="category" />
-                    </th>
-                    <th className="px-3 py-2 text-left">
-                      <SortHeader label="Status" sortKey="status" />
-                    </th>
-                    <th className="px-3 py-2 text-left">
-                      <SortHeader label="Date" sortKey="date" />
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {filteredAndSorted.map((post: any) => (
-                    <tr key={post.id} className="transition-colors hover:bg-gray-50">
-                      <td className="px-3 py-2">
-                        <input
-                          type="checkbox"
-                          checked={selectedPosts.includes(post.id)}
-                          onChange={() => handleSelectPost(post.id)}
-                          className="rounded border-gray-300"
-                        />
-                      </td>
-                      <td className="px-3 py-2">
-                        <button
-                          type="button"
-                          onClick={() => onNavigate?.(`/posts/${post.id}`)}
-                          className="text-left text-sm font-medium text-gray-900 hover:text-blue-600"
-                        >
-                          {post.title}
-                        </button>
-                      </td>
-                      <td className="px-3 py-2 text-sm text-gray-600">{post.author}</td>
-                      <td className="px-3 py-2 text-sm text-gray-600">{post.category}</td>
-                      <td className="px-3 py-2">
-                        <span
-                          className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
-                        >
-                          {post.status}
-                        </span>
-                      </td>
-                      <td className="px-3 py-2 text-sm text-gray-600">{post.date}</td>
-                      <td className="px-3 py-2">
-                        <div className="flex items-center gap-2">
-                          <button
-                            type="button"
-                            onClick={() => onNavigate?.(`/posts/${post.id}`)}
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                            title="Edit"
-                          >
-                            <Pencil className="h-4 w-4 text-gray-600" />
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => handleDelete(post.id)}
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                            title="Delete"
-                          >
-                            <Trash2 className="h-4 w-4 text-red-600" />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-auto rounded-lg border border-gray-200 bg-white md:hidden">
-            <div className="divide-y divide-gray-200">
-              {filteredAndSorted.map((post: any) => (
-                <div key={post.id} className="p-3">
-                  <div className="flex items-start gap-3">
-                    <input
-                      type="checkbox"
-                      checked={selectedPosts.includes(post.id)}
-                      onChange={() => handleSelectPost(post.id)}
-                      className="mt-1 rounded border-gray-300"
-                    />
-                    <div className="min-w-0 flex-1">
-                      <button
-                        type="button"
-                        onClick={() => onNavigate?.(`/posts/${post.id}`)}
-                        className="mb-1 block text-left text-sm font-medium text-gray-900 hover:text-blue-600"
-                      >
-                        {post.title}
-                      </button>
-                      <div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-gray-600">
-                        <span>{post.author}</span>
-                        <span>•</span>
-                        <span>{post.date}</span>
-                        <span
-                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
-                        >
-                          {post.status}
-                        </span>
-                      </div>
-                    </div>
-                    <button
-                      type="button"
-                      onClick={() => handleDelete(post.id)}
-                      className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                    >
-                      <Trash2 className="h-4 w-4 text-red-600" />
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}