refs #273 Implement editing statuses

src/components/compose/Status.tsx

@@ -34,6 +34,7 @@ type Props = {
  account: Account
  client: MegalodonInterface
  in_reply_to?: Entity.Status
+ edit_target?: Entity.Status
  onClose?: () => void
 }
 
@@ -119,6 +120,29 @@ const Status: React.FC<Props> = props => {
  }
  }, [props.in_reply_to, props.account])
 
+ useEffect(() => {
+ if (props.edit_target) {
+ const target = props.edit_target
+ let value = {
+ spoiler: target.spoiler_text,
+ status: target.plain_content ? target.plain_content : target.content
+ }
+
+ if (target.sensitive) {
+ value = Object.assign(value, {
+ nsfw: target.sensitive
+ })
+ }
+ if (target.media_attachments.length > 0) {
+ value = Object.assign(value, {
+ attachments: target.media_attachments
+ })
+ }
+ setFormValue(value)
+ setVisibility(target.visibility)
+ }
+ }, [props.edit_target])
+
  const handleSubmit = async () => {
  if (loading) {
  return
@@ -157,7 +181,16 @@ const Status: React.FC<Props> = props => {
  poll: formValue.poll
  })
  }
- await props.client.postStatus(formValue.status, options)
+ if (props.edit_target) {
+ await props.client.editStatus(
+ props.edit_target.id,
+ Object.assign({}, options, {
+ status: formValue.status
+ })
+ )
+ } else {
+ await props.client.postStatus(formValue.status, options)
+ }
  clear()
  } catch {
  toast.push(alert('error', t('alert.failed_post')), { placement: 'topStart' })
@@ -370,7 +403,7 @@ const Status: React.FC<Props> = props => {
  </Form.Group>
  <Form.Group>
  <ButtonToolbar style={{ justifyContent: 'flex-end' }}>
- {props.in_reply_to && <Button onClick={clear}>{t('compose.cancel')}</Button>}
+ {(props.in_reply_to || props.edit_target) && <Button onClick={clear}>{t('compose.cancel')}</Button>}
  <Button appearance="primary" type="submit" onClick={handleSubmit} loading={loading}>
  {t('compose.post')}
  </Button>

src/components/timelines/status/Actions.tsx

@@ -20,6 +20,7 @@ type Props = {
  status: Entity.Status
  client: MegalodonInterface
  setShowReply: Dispatch<SetStateAction<boolean>>
+ setShowEdit: Dispatch<SetStateAction<boolean>>
  updateStatus: (status: Entity.Status) => void
 }
 
@@ -176,6 +177,9 @@ const Actions: React.FC<Props> = props => {
  openBrowser: () => {
  open(status.url)
  },
+ openEdit: () => {
+ props.setShowEdit(current => !current)
+ },
  onDelete: () => {
  // After after deleted, streaming will receive a delete event.
  // So we don't need update parent timelines, the delete event will be handled.
@@ -230,6 +234,7 @@ type DetailMenuProps = {
  own: boolean
  openBrowser: () => void
  onDelete: () => void
+ openEdit: () => void
  onClose: (delay?: number) => NodeJS.Timeout | void
 }
 
@@ -242,6 +247,9 @@ const detailMenu = (props: DetailMenuProps, ref: React.RefCallback<HTMLElement>)
  case 'browser':
  props.openBrowser()
  return
+ case 'edit':
+ props.openEdit()
+ return
  case 'delete':
  props.onDelete()
  return

src/components/timelines/status/Status.tsx

@@ -31,14 +31,23 @@ type Props = {
 const Status: React.FC<Props> = props => {
  const { client } = props
  const [showReply, setShowReply] = useState<boolean>(false)
+ const [showEdit, setShowEdit] = useState<boolean>(false)
 
  const status = originalStatus(props.status)
 
  useEffect(() => {
  if (props.setReplyOpened) {
- props.setReplyOpened(showReply)
+ if (showReply) {
+ props.setReplyOpened(showReply)
+ setShowEdit(false)
+ } else if (showEdit) {
+ props.setReplyOpened(showEdit)
+ setShowReply(false)
+ } else {
+ props.setReplyOpened(false)
+ }
  }
- }, [showReply])
+ }, [showReply, showEdit])
 
  const statusClicked: MouseEventHandler<HTMLDivElement> = e => {
  const url = findLink(e.target as HTMLElement, 'status-body')
@@ -124,6 +133,7 @@ const Status: React.FC<Props> = props => {
  status={status}
  client={client}
  setShowReply={setShowReply}
+ setShowEdit={setShowEdit}
  updateStatus={props.updateStatus}
  />
  </FlexboxGrid.Item>
@@ -133,6 +143,11 @@ const Status: React.FC<Props> = props => {
  <Reply client={client} server={props.server} account={props.account} in_reply_to={status} onClose={() => setShowReply(false)} />
  </div>
  )}
+ {showEdit && (
+ <div style={{ padding: '8px 12px' }}>
+ <Reply client={client} server={props.server} account={props.account} edit_target={status} onClose={() => setShowEdit(false)} />
+ </div>
+ )}
  </div>
  )
 }