42 lines
1022 B
JavaScript
42 lines
1022 B
JavaScript
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>
|
|
)
|
|
}
|