refs #4754 Add follow/unfollow tag button

This commit is contained in:
AkiraFukushima 2024-09-02 22:00:18 +09:00
parent 1a374d1a2d
commit ef8278ae30
No known key found for this signature in database
GPG Key ID: B7EA3A3C9AEC9F0E
2 changed files with 54 additions and 2 deletions

View File

@ -150,7 +150,9 @@
}, },
"detail": { "detail": {
"back": "Back", "back": "Back",
"close": "Close" "close": "Close",
"follow_tag": "Follow hashtag",
"unfollow_tag": "Unfollow hashtag"
}, },
"profile": { "profile": {
"follow": "Follow", "follow": "Follow",

View File

@ -1,6 +1,6 @@
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { HTMLAttributes, useEffect, useState } from 'react' import { HTMLAttributes, useEffect, useState } from 'react'
import { FaChevronLeft, FaX } from 'react-icons/fa6' import { FaChevronLeft, FaUserPlus, FaUserXmark, FaX } from 'react-icons/fa6'
import Thread from './Thread' import Thread from './Thread'
import { Entity, MegalodonInterface } from 'megalodon' import { Entity, MegalodonInterface } from 'megalodon'
import Reply from './Reply' import Reply from './Reply'
@ -19,6 +19,7 @@ export default function Detail(props: Props) {
const [target, setTarget] = useState<'status' | 'reply' | 'profile' | 'tag' | null>(null) const [target, setTarget] = useState<'status' | 'reply' | 'profile' | 'tag' | null>(null)
const router = useRouter() const router = useRouter()
const { formatMessage } = useIntl() const { formatMessage } = useIntl()
const [tagFollowing, setTagFollowing] = useState(false)
useEffect(() => { useEffect(() => {
if (router.query.status_id) { if (router.query.status_id) {
@ -34,6 +35,23 @@ export default function Detail(props: Props) {
} }
}, [router.query]) }, [router.query])
useEffect(() => {
if (router.query.tag) {
refreshFollowing(router.query.tag as string)
} else {
setTagFollowing(false)
}
}, [router.query.tag])
const refreshFollowing = async (tag: string) => {
const res = await props.client.getTag(tag)
if (res.data.following) {
setTagFollowing(true)
} else {
setTagFollowing(false)
}
}
const back = () => { const back = () => {
router.back() router.back()
} }
@ -42,6 +60,16 @@ export default function Detail(props: Props) {
router.push({ query: { id: router.query.id, timeline: router.query.timeline } }) router.push({ query: { id: router.query.id, timeline: router.query.timeline } })
} }
const followTag = async (tag: string) => {
await props.client.followTag(tag)
await refreshFollowing(tag)
}
const unfollowTag = async (tag: string) => {
await props.client.unfollowTag(tag)
await refreshFollowing(tag)
}
return ( return (
<> <>
{target && ( {target && (
@ -54,6 +82,28 @@ export default function Detail(props: Props) {
{target === 'tag' && `#${router.query.tag}`} {target === 'tag' && `#${router.query.tag}`}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
{target === 'tag' && (
<>
{tagFollowing ? (
<button
className="text-lg mr-4"
title={formatMessage({ id: 'detail.unfollow_tag' })}
onClick={() => unfollowTag(router.query.tag as string)}
>
<FaUserXmark />
</button>
) : (
<button
className="text-lg mr-4"
title={formatMessage({ id: 'detail.follow_tag' })}
onClick={() => followTag(router.query.tag as string)}
>
<FaUserPlus />
</button>
)}
</>
)}
<button className="text-lg" title={formatMessage({ id: 'detail.close' })}> <button className="text-lg" title={formatMessage({ id: 'detail.close' })}>
<FaX onClick={close} /> <FaX onClick={close} />
</button> </button>