refs #11 Show ancestors and descendants in status detail

src/components/detail/Status.tsx

@@ -2,7 +2,7 @@ import { Icon } from '@rsuite/icons'
 import { Entity, MegalodonInterface } from 'megalodon'
 import { useCallback, useEffect, useState } from 'react'
 import { BsX } from 'react-icons/bs'
-import { Button, Container, Content, Header } from 'rsuite'
+import { Button, Container, Content, Header, List } from 'rsuite'
 import { Server } from 'src/entities/server'
 import Status from '../timelines/status/Status'
 
@@ -17,12 +17,19 @@ type Props = {
 
 const StatusDetail: React.FC<Props> = props => {
  const [status, setStatus] = useState(props.status)
+ const [ancestors, setAncestors] = useState<Array<Entity.Status>>([])
+ const [descendants, setDescendants] = useState<Array<Entity.Status>>([])
 
  useEffect(() => {
+ setAncestors([])
+ setDescendants([])
  setStatus(props.status)
  const f = async () => {
- const res = await props.client.getStatus(props.status.id)
- setStatus(res.data)
+ const s = await props.client.getStatus(props.status.id)
+ setStatus(s.data)
+ const c = await props.client.getStatusContext(props.status.id)
+ setAncestors(c.data.ancestors)
+ setDescendants(c.data.descendants)
  }
  f()
  }, [props.status, props.client])
@@ -33,11 +40,36 @@ const StatusDetail: React.FC<Props> = props => {
  setStatus(updated)
  } else if (status.reblog && status.reblog.id === updated.id) {
  setStatus(Object.assign({}, status, { reblog: updated }))
- } else if (updated.reblog && updated.reblog && status.reblog.id === updated.reblog.id) {
+ } else if (status.reblog && updated.reblog && status.reblog.id === updated.reblog.id) {
  setStatus(Object.assign({}, status, { reblog: updated.reblog }))
  }
+ setAncestors(last =>
+ last.map(status => {
+ if (status.id === updated.id) {
+ return updated
+ } else if (status.reblog && status.reblog.id === updated.id) {
+ return Object.assign({}, status, { reblog: updated })
+ } else if (status.reblog && updated.reblog && status.reblog.id === updated.reblog.id) {
+ return Object.assign({}, status, { reblog: updated.reblog })
+ }
+ return status
+ })
+ )
+
+ setDescendants(last =>
+ last.map(status => {
+ if (status.id === updated.id) {
+ return updated
+ } else if (status.reblog && status.reblog.id === updated.id) {
+ return Object.assign({}, status, { reblog: updated })
+ } else if (status.reblog && updated.reblog && status.reblog.id === updated.reblog.id) {
+ return Object.assign({}, status, { reblog: updated.reblog })
+ }
+ return status
+ })
+ )
  },
- [status, setStatus]
+ [status, setStatus, ancestors, setAncestors, descendants, setDescendants]
  )
 
  return (
@@ -48,15 +80,21 @@ const StatusDetail: React.FC<Props> = props => {
  </Button>
  </Header>
  <Content style={{ height: '100%' }}>
- <Status
- status={status}
- client={props.client}
- server={props.server}
- updateStatus={updateStatus}
- openMedia={props.openMedia}
- setReplyOpened={() => null}
- setStatusDetail={props.setStatusDetail}
- />
+ <List hover style={{ width: '340px', height: '100%' }}>
+ {[...ancestors, status, ...descendants].map(status => (
+ <div key={status.id}>
+ <Status
+ status={status}
+ client={props.client}
+ server={props.server}
+ updateStatus={updateStatus}
+ openMedia={props.openMedia}
+ setReplyOpened={() => null}
+ setStatusDetail={props.setStatusDetail}
+ />
+ </div>
+ ))}
+ </List>
  </Content>
  </Container>
  )

src/defaults.ts

@@ -1,3 +1,3 @@
-export const TIMELINE_STATUSES_COUNT = 40
+export const TIMELINE_STATUSES_COUNT = 20
 export const TIMELINE_MAX_STATUSES = 2147483647
 export const USER_AGENT = 'Fedistar'