messages implemented

resources/js/components/artwork/ArtworkReactions.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import ReactionBar from '../comments/ReactionBar'
+
+/**
+ * Loads and displays reactions for a single artwork.
+ *
+ * Props:
+ *   artworkId    number
+ *   isLoggedIn   boolean
+ */
+export default function ArtworkReactions({ artworkId, isLoggedIn = false }) {
+  const [totals, setTotals]   = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!artworkId) return
+    axios
+      .get(`/api/artworks/${artworkId}/reactions`)
+      .then(({ data }) => setTotals(data.totals ?? {}))
+      .catch(() => setTotals({}))
+      .finally(() => setLoading(false))
+  }, [artworkId])
+
+  if (loading) return null
+
+  if (!totals || Object.values(totals).every((r) => r.count === 0) && !isLoggedIn) {
+    return null
+  }
+
+  return (
+    <div className="mt-3">
+      <ReactionBar
+        entityType="artwork"
+        entityId={artworkId}
+        initialTotals={totals}
+        isLoggedIn={isLoggedIn}
+      />
+    </div>
+  )
+}