diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx index a4d7b67a..d2ec714e 100644 --- a/src/pages/hashtag.jsx +++ b/src/pages/hashtag.jsx @@ -140,6 +140,26 @@ function Hashtags({ media: mediaView, columnMode, ...props }) { const reachLimit = hashtags.length >= TOTAL_TAGS_LIMIT; + const [featuredUIState, setFeaturedUIState] = useState('default'); + const [featuredTags, setFeaturedTags] = useState([]); + const [isFeaturedTag, setIsFeaturedTag] = useState(false); + useEffect(() => { + if (!authenticated) return; + (async () => { + try { + const featuredTags = await masto.v1.featuredTags.list(); + setFeaturedTags(featuredTags); + setIsFeaturedTag( + featuredTags.some( + (tag) => tag.name.toLowerCase() === hashtag.toLowerCase(), + ), + ); + } catch (e) { + console.error(e); + } + })(); + }, []); + return ( )} + { + setFeaturedUIState('loading'); + if (isFeaturedTag) { + const featuredTagID = featuredTags.find( + (tag) => tag.name.toLowerCase() === hashtag.toLowerCase(), + ).id; + if (featuredTagID) { + masto.v1.featuredTags + .$select(featuredTagID) + .remove() + .then(() => { + setIsFeaturedTag(false); + showToast('Unfeatured on profile'); + setFeaturedTags( + featuredTags.filter( + (tag) => tag.id !== featuredTagID, + ), + ); + }) + .catch((e) => { + console.error(e); + }) + .finally(() => { + setFeaturedUIState('default'); + }); + } else { + showToast('Unable to unfeature on profile'); + } + } else { + masto.v1.featuredTags + .create({ + name: hashtag, + }) + .then((value) => { + setIsFeaturedTag(true); + showToast('Featured on profile'); + setFeaturedTags(featuredTags.concat(value)); + }) + .catch((e) => { + console.error(e); + }) + .finally(() => { + setFeaturedUIState('default'); + }); + } + }} + > + {isFeaturedTag ? ( + <> + + Featured on profile + + ) : ( + <> + + Feature on profile + + )} + )}