Initial commit: Meshkee dashboards monorepo.

Includes business, customer, and super-admin apps with shared packages and production deploy scripts. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-22 13:48:53 +03:30
commit f566387c61
509 changed files with 62690 additions and 0 deletions
@@ -0,0 +1,190 @@
+import { useEffect, useState } from 'react'
+import { ThumbsUp, Check, XCircle, Trash2 } from 'lucide-react'
+import type { ProductComment } from '../types/comment'
+import { formatCommentDate } from '../data/productComments'
+import { ApiError } from '../lib/api'
+import {
+  COMMENTS_PER_PAGE,
+  deleteComment,
+  listBlogComments,
+  updateCommentApproval,
+} from '../services/commentService'
+import { Pagination } from './Pagination'
+import styles from './BlogCommentsSection.module.css'
+
+interface BlogCommentsSectionProps {
+  blogId: string
+  onCountChange?: (count: number) => void
+}
+
+export function BlogCommentsSection({ blogId, onCountChange }: BlogCommentsSectionProps) {
+  const [comments, setComments] = useState<ProductComment[]>([])
+  const [totalComments, setTotalComments] = useState(0)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [actionId, setActionId] = useState<string | null>(null)
+
+  const totalPages = Math.max(1, Math.ceil(totalComments / COMMENTS_PER_PAGE))
+
+  useEffect(() => {
+    const controller = new AbortController()
+    void loadComments(currentPage, controller.signal)
+    return () => controller.abort()
+  }, [blogId, currentPage])
+
+  async function loadComments(page: number, signal?: AbortSignal) {
+    setIsLoading(true)
+    setError('')
+
+    try {
+      const data = await listBlogComments(blogId, page, COMMENTS_PER_PAGE, signal)
+      setComments(data.items)
+      setTotalComments(data.total)
+      onCountChange?.(data.total)
+    } catch (err) {
+      if (err instanceof DOMException && err.name === 'AbortError') return
+      if (err instanceof ApiError) {
+        setError(err.message)
+      } else {
+        setError('Unable to load comments.')
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  async function toggleApproval(comment: ProductComment) {
+    setActionId(comment.id)
+    setError('')
+
+    try {
+      const updated = await updateCommentApproval(comment.id, !comment.approved)
+      setComments((prev) => prev.map((c) => (c.id === comment.id ? updated : c)))
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message)
+      } else {
+        setError('Unable to update comment approval.')
+      }
+    } finally {
+      setActionId(null)
+    }
+  }
+
+  async function removeComment(commentId: string) {
+    setActionId(commentId)
+    setError('')
+
+    try {
+      await deleteComment(commentId)
+      const nextTotal = totalComments - 1
+      const nextTotalPages = Math.max(1, Math.ceil(nextTotal / COMMENTS_PER_PAGE))
+      const nextPage = currentPage > nextTotalPages ? nextTotalPages : currentPage
+      setTotalComments(nextTotal)
+      onCountChange?.(nextTotal)
+
+      if (nextPage !== currentPage) {
+        setCurrentPage(nextPage)
+      } else {
+        setComments((prev) => prev.filter((c) => c.id !== commentId))
+      }
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message)
+      } else {
+        setError('Unable to delete comment.')
+      }
+    } finally {
+      setActionId(null)
+    }
+  }
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.header}>
+        <h3 className={styles.title}>Comments</h3>
+        <span className={styles.count}>
+          {totalComments} {totalComments === 1 ? 'comment' : 'comments'}
+        </span>
+      </div>
+
+      {error && (
+        <p className={styles.errorText} role="alert">
+          {error}
+        </p>
+      )}
+
+      {isLoading ? (
+        <p className={styles.emptyText}>Loading comments...</p>
+      ) : totalComments === 0 ? (
+        <p className={styles.emptyText}>No comments yet for this blog post.</p>
+      ) : (
+        <>
+          <div className={styles.list}>
+            {comments.map((comment) => (
+              <article
+                key={comment.id}
+                className={`${styles.comment} ${comment.approved ? styles.commentApproved : ''}`}
+              >
+                <div className={styles.commentHeader}>
+                  <div className={styles.commentMeta}>
+                    <div className={styles.author}>{comment.author}</div>
+                    <div className={styles.dateTime}>{formatCommentDate(comment.createdAt)}</div>
+                  </div>
+                  <span className={styles.likes}>
+                    <ThumbsUp size={13} />
+                    {comment.likesCount}
+                  </span>
+                </div>
+                <p className={styles.text}>{comment.text}</p>
+                <div className={styles.commentActions}>
+                  {comment.approved ? (
+                    <button
+                      type="button"
+                      className={styles.rejectBtn}
+                      disabled={actionId === comment.id}
+                      onClick={() => void toggleApproval(comment)}
+                    >
+                      <XCircle size={14} />
+                      Reject
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      className={styles.approveBtn}
+                      disabled={actionId === comment.id}
+                      onClick={() => void toggleApproval(comment)}
+                    >
+                      <Check size={14} />
+                      Approve
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className={styles.removeBtn}
+                    disabled={actionId === comment.id}
+                    onClick={() => void removeComment(comment.id)}
+                  >
+                    <Trash2 size={14} />
+                    Remove
+                  </button>
+                </div>
+              </article>
+            ))}
+          </div>
+
+          {totalComments > COMMENTS_PER_PAGE && (
+            <div className={styles.paginationWrap}>
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={setCurrentPage}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </section>
+  )
+}