76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
|
import { Entity, MegalodonInterface } from 'megalodon'
|
||
|
|
import { useRouter } from 'next/router'
|
||
|
|
import { useEffect, useState } from 'react'
|
||
|
|
import { FormattedMessage } from 'react-intl'
|
||
|
|
import User from './followRequests/User'
|
||
|
|
import Detail from '../detail/Detail'
|
||
|
|
import { Account } from '@/db'
|
||
|
|
import { useUnreads } from '@/provider/unreads'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
client: MegalodonInterface
|
||
|
|
account: Account
|
||
|
|
openMedia: (media: Array<Entity.Attachment>, index: number) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function FollowRequests(props: Props) {
|
||
|
|
const router = useRouter()
|
||
|
|
const { setUnreads } = useUnreads()
|
||
|
|
const [requests, setRequests] = useState<Array<Entity.FollowRequest | Entity.Account>>([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
refreshRequests()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const refreshRequests = async () => {
|
||
|
|
const res = await props.client.getFollowRequests()
|
||
|
|
setRequests(res.data)
|
||
|
|
return res.data
|
||
|
|
}
|
||
|
|
|
||
|
|
const updateUnreads = (length: number) => {
|
||
|
|
setUnreads(current =>
|
||
|
|
Object.assign({}, current, {
|
||
|
|
[`${props.account.id?.toString()}_follow_requests`]: length
|
||
|
|
})
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const timelineClass = () => {
|
||
|
|
if (router.query.detail) {
|
||
|
|
return 'timeline-with-drawer'
|
||
|
|
}
|
||
|
|
return 'timeline'
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="flex timeline-wrapper">
|
||
|
|
<section className={`h-full ${timelineClass()}`}>
|
||
|
|
<div className="w-full theme-bg theme-text-primary p-2 flex justify-between">
|
||
|
|
<div className="text-lg font-bold cursor-pointer">
|
||
|
|
<FormattedMessage id="timeline.follow_requests" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="timeline overflow-y-auto w-full overflow-x-hidden" style={{ height: 'calc(100% - 44px)' }}>
|
||
|
|
{requests.map(r => (
|
||
|
|
<>
|
||
|
|
<User
|
||
|
|
key={r.id}
|
||
|
|
user={r}
|
||
|
|
client={props.client}
|
||
|
|
refresh={async () => {
|
||
|
|
const data = await refreshRequests()
|
||
|
|
updateUnreads(data.length)
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<Detail client={props.client} account={props.account} className="detail" openMedia={props.openMedia} />
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|