Add news article comments and reactions

resources/js/components/comments/ReactionBar.jsx

@@ -32,18 +32,24 @@ function HeartOutlineIcon({ className }) {
  *   entityId      number
  *   initialTotals Record<slug, { emoji, label, count, mine }>
  *   isLoggedIn    boolean
+ *   endpoint      string | null
  */
-export default function ReactionBar({ entityType, entityId, initialTotals = {}, isLoggedIn = false }) {
+export default function ReactionBar({ entityType, entityId, initialTotals = {}, isLoggedIn = false, endpoint = null }) {
   const [totals, setTotals] = useState(initialTotals)
   const [loading, setLoading] = useState(null)
   const [pickerOpen, setPickerOpen] = useState(false)
   const containerRef = useRef(null)
   const hoverTimeout = useRef(null)
 
-  const endpoint =
+  useEffect(() => {
+    setTotals(initialTotals ?? {})
+  }, [entityId, initialTotals])
+
+  const resolvedEndpoint = endpoint || (
     entityType === 'artwork'
       ? `/api/artworks/${entityId}/reactions`
       : `/api/comments/${entityId}/reactions`
+  )
 
   // Close picker when clicking outside
   useEffect(() => {
@@ -81,7 +87,7 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
       })
 
       try {
-        const { data } = await axios.post(endpoint, { reaction: slug })
+        const { data } = await axios.post(resolvedEndpoint, { reaction: slug })
         setTotals(data.totals)
       } catch {
         setTotals((prev) => {
@@ -99,7 +105,7 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
         setLoading(null)
       }
     },
-    [endpoint, isLoggedIn, loading],
+    [resolvedEndpoint, isLoggedIn, loading],
   )
 
   // Compute summary data
@@ -167,7 +173,7 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
           aria-label={isArtworkVariant
             ? (myReaction
               ? `Open reaction picker. Current reaction: ${myReactionData?.label}.`
-              : 'Open reaction picker for this artwork')
+              : 'React to this artwork')
             : (myReaction
               ? `You reacted with ${myReactionData?.label}. Click to remove.`
               : 'React to this comment')}