Revert "Revert "refs #467 Add basic modal for report""

This reverts commit ff5632e.

locales/en/translation.json

@@ -194,7 +194,8 @@
  "title": "Detail",
  "browser": "Open original page",
  "edit": "Edit",
- "delete": "Delete"
+ "delete": "Delete",
+ "report": "Report"
  }
  },
  "status": {
@@ -235,5 +236,12 @@
  "block": "Block",
  "unblock": "Unblock"
  }
+ },
+ "report": {
+ "title": "Report {{user}}",
+ "category": {
+ "title": "Tell us what's going on with this post",
+ "description": "Choose the best match"
+ }
  }
 }

src/components/Report.tsx

@@ -0,0 +1,31 @@
+import { Entity } from 'megalodon'
+import { useTranslation } from 'react-i18next'
+import { Modal } from 'rsuite'
+
+type Props = {
+ opened: boolean
+ status: Entity.Status
+ close: () => void
+}
+export default function Report(props: Props) {
+ const { t } = useTranslation()
+
+ if (props.status) {
+ return (
+ <Modal
+ open={props.opened}
+ onClose={() => {
+ props.close()
+ }}
+ >
+ <Modal.Header>{t('report.title', { user: props.status.account.acct })}</Modal.Header>
+ <Modal.Body>
+ <Modal.Title>{t('report.category.title')}</Modal.Title>
+ <p>{t('report.category.description')}</p>
+ </Modal.Body>
+ </Modal>
+ )
+ } else {
+ return <></>
+ }
+}

src/components/detail/Detail.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next'
 type Props = {
  dispatch: Dispatch<{ target: string; value: boolean; object?: any; index?: number }>
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+ openReport: (status: Entity.Status) => void
 }
 
 const Detail: React.FC<Props> = props => {
@@ -68,9 +69,10 @@ const Detail: React.FC<Props> = props => {
  openMedia={(media: Array<Entity.Attachment>, index: number) =>
  props.dispatch({ target: 'media', value: true, object: media, index: index })
  }
+ openReport={props.openReport}
  />
  )}
- {target === 'profile' && <Profile openMedia={props.openMedia} />}
+ {target === 'profile' && <Profile openMedia={props.openMedia} openReport={props.openReport} />}
  </Container>
  </div>
  )}

src/components/detail/Profile.tsx

@@ -22,6 +22,7 @@ const FollowersTab = forwardRef(Followers)
 
 type Props = {
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+ openReport: (status: Entity.Status) => void
 }
 
 const Profile: React.FC<Props> = props => {
@@ -158,7 +159,17 @@ const Profile: React.FC<Props> = props => {
  if (!user) return <></>
  switch (activeNav) {
  case 'posts':
- return <PostsTab client={client} user={user} server={server} account={account} openMedia={props.openMedia} ref={postsRef} />
+ return (
+ <PostsTab
+ client={client}
+ user={user}
+ server={server}
+ account={account}
+ openMedia={props.openMedia}
+ openReport={props.openReport}
+ ref={postsRef}
+ />
+ )
  case 'following':
  return <FollowingTab client={client} user={user} account={account} ref={followingRef} />
  case 'followers':

src/components/detail/Status.tsx

@@ -9,6 +9,7 @@ import Status from '../timelines/status/Status'
 
 type Props = {
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+ openReport: (status: Entity.Status) => void
 }
 
 const StatusDetail: React.FC<Props> = props => {
@@ -132,6 +133,7 @@ const StatusDetail: React.FC<Props> = props => {
  openMedia={props.openMedia}
  setReplyOpened={() => null}
  setAccountDetail={setAccountDetail}
+ openReport={props.openReport}
  />
  </List.Item>
  ))}

src/components/detail/profile/Posts.tsx

@@ -17,6 +17,7 @@ type ArgProps = {
  server: Server
  account: Account | null
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+ openReport: (status: Entity.Status) => void
 }
 
 const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref) => {
@@ -102,6 +103,7 @@ const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref)
  updateStatus={updateStatus}
  openMedia={props.openMedia}
  setAccountDetail={setAccountDetail}
+ openReport={props.openReport}
  />
  </List.Item>
  ))}
@@ -115,6 +117,7 @@ const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref)
  updateStatus={updateStatus}
  openMedia={props.openMedia}
  setAccountDetail={setAccountDetail}
+ openReport={props.openReport}
  />
  </List.Item>
  ))}

src/components/timelines/Notifications.tsx

@@ -26,6 +26,7 @@ type Props = {
  unreads: Array<Unread>
  setUnreads: Dispatch<SetStateAction<Array<Unread>>>
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+ openReport: (status: Entity.Status) => void
 }
 
 type Marker = {
@@ -320,6 +321,7 @@ const Notifications: React.FC<Props> = props => {
  setReplyOpened={opened => (replyOpened.current = opened)}
  setStatusDetail={setStatusDetail}
  setAccountDetail={setAccountDetail}
+ openReport={props.openReport}
  />
  </List.Item>
  )

src/components/timelines/Show.tsx

@@ -12,6 +12,7 @@ type Props = {
  unreads: Array<Unread>
  setUnreads: (a: Array<Unread>) => void
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+ openReport: (status: Entity.Status) => void
 }
 
 const Show: React.FC<Props> = props => {
@@ -23,12 +24,13 @@ const Show: React.FC<Props> = props => {
  unreads={props.unreads}
  setUnreads={props.setUnreads}
  openMedia={props.openMedia}
+ openReport={props.openReport}
  />
  )
  } else if (props.timeline.kind === 'direct') {
  return <ShowConversations server={props.server} timeline={props.timeline} openMedia={props.openMedia} />
  } else {
- return <ShowTimeline timeline={props.timeline} server={props.server} openMedia={props.openMedia} />
+ return <ShowTimeline timeline={props.timeline} server={props.server} openMedia={props.openMedia} openReport={props.openReport} />
  }
 }
 

src/components/timelines/Timeline.tsx

@@ -44,6 +44,7 @@ type Props = {
  timeline: Timeline
  server: Server
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+ openReport: (status: Entity.Status) => void
 }
 
 const Timeline: React.FC<Props> = props => {
@@ -432,6 +433,7 @@ const Timeline: React.FC<Props> = props => {
  setReplyOpened={opened => (replyOpened.current = opened)}
  setStatusDetail={setStatusDetail}
  setAccountDetail={setAccountDetail}
+ openReport={props.openReport}
  />
  </List.Item>
  )}

src/components/timelines/notification/Notification.tsx

@@ -15,6 +15,7 @@ type Props = {
  setReplyOpened: (opened: boolean) => void
  setStatusDetail: (statusId: string, serverId: number, accountId?: number) => void
  setAccountDetail: (userId: string, serverId: number, accountId?: number) => void
+ openReport: (status: Entity.Status) => void
 }
 
 const notification = (props: Props) => {
@@ -56,6 +57,7 @@ const notification = (props: Props) => {
  setReplyOpened={props.setReplyOpened}
  setStatusDetail={props.setStatusDetail}
  setAccountDetail={props.setAccountDetail}
+ openReport={props.openReport}
  />
  )
  default:

src/components/timelines/status/Actions.tsx

@@ -22,6 +22,7 @@ type Props = {
  setShowReply: Dispatch<SetStateAction<boolean>>
  setShowEdit: Dispatch<SetStateAction<boolean>>
  updateStatus: (status: Entity.Status) => void
+ openReport: () => void
 }
 
 const Actions: React.FC<Props> = props => {
@@ -184,6 +185,9 @@ const Actions: React.FC<Props> = props => {
  // After after deleted, streaming will receive a delete event.
  // So we don't need update parent timelines, the delete event will be handled.
  client.deleteStatus(props.status.id)
+ },
+ onReport: () => {
+ props.openReport()
  }
  },
  ref
@@ -236,6 +240,7 @@ type DetailMenuProps = {
  onDelete: () => void
  openEdit: () => void
  onClose: (delay?: number) => NodeJS.Timeout | void
+ onReport: () => void
 }
 
 const detailMenu = (props: DetailMenuProps, ref: React.RefCallback<HTMLElement>) => {
@@ -254,6 +259,9 @@ const detailMenu = (props: DetailMenuProps, ref: React.RefCallback<HTMLElement>)
  case 'delete':
  props.onDelete()
  return
+ case 'report':
+ props.onReport()
+ return
  }
  }
 
@@ -263,6 +271,8 @@ const detailMenu = (props: DetailMenuProps, ref: React.RefCallback<HTMLElement>)
  <Dropdown.Item eventKey="browser">{t('timeline.actions.detail.browser')}</Dropdown.Item>
  {props.own && <Dropdown.Item eventKey="edit">{t('timeline.actions.detail.edit')}</Dropdown.Item>}
  {props.own && <Dropdown.Item eventKey="delete">{t('timeline.actions.detail.delete')}</Dropdown.Item>}
+ <Dropdown.Separator />
+ <Dropdown.Item eventKey="report">{t('timeline.actions.detail.report')}</Dropdown.Item>
  </Dropdown.Menu>
  </Popover>
  )

src/components/timelines/status/Status.tsx

@@ -27,6 +27,7 @@ type Props = {
  setReplyOpened?: (opened: boolean) => void
  setStatusDetail?: (statusId: string, serverId: number, accountId?: number) => void
  setAccountDetail: (userId: string, serverId: number, accountId?: number) => void
+ openReport: (status: Entity.Status) => void
 } & HTMLAttributes<HTMLElement>
 
 const Status: React.FC<Props> = props => {
@@ -167,6 +168,7 @@ const Status: React.FC<Props> = props => {
  setShowReply={setShowReply}
  setShowEdit={setShowEdit}
  updateStatus={props.updateStatus}
+ openReport={() => props.openReport(status)}
  />
  </FlexboxGrid.Item>
  </FlexboxGrid>

src/pages/index.tsx

@@ -24,6 +24,7 @@ import SettingsPage from 'src/components/settings/Settings'
 import Detail from 'src/components/detail/Detail'
 import { useTranslation } from 'react-i18next'
 import { Account } from 'src/entities/account'
+import Report from 'src/components/Report'
 
 function App() {
  const { t, i18n } = useTranslation()
@@ -147,6 +148,11 @@ function App() {
  onClose={() => dispatch({ target: 'settings', value: false })}
  reloadAppearance={loadAppearance}
  />
+ <Report
+ opened={modalState.report.opened}
+ status={modalState.report.object}
+ close={() => dispatch({ target: 'report', value: false, object: null })}
+ />
 
  <Container style={{ height: '100%' }}>
  <Navigator
@@ -182,6 +188,7 @@ function App() {
  openMedia={(media: Array<Entity.Attachment>, index: number) =>
  dispatch({ target: 'media', value: true, object: media, index: index })
  }
+ openReport={(status: Entity.Status) => dispatch({ target: 'report', value: true, object: status })}
  />
  ))}
  <NewTimeline servers={servers} />
@@ -191,6 +198,7 @@ function App() {
  openMedia={(media: Array<Entity.Attachment>, index: number) =>
  dispatch({ target: 'media', value: true, object: media, index: index })
  }
+ openReport={(status: Entity.Status) => dispatch({ target: 'report', value: true, object: status })}
  />
  </Container>
  </div>
@@ -213,6 +221,10 @@ type ModalState = {
  settings: {
  opened: boolean
  }
+ report: {
+ opened: boolean
+ object: Entity.Status | null
+ }
 }
 
 const initialModalState: ModalState = {
@@ -230,6 +242,10 @@ const initialModalState: ModalState = {
  },
  settings: {
  opened: false
+ },
+ report: {
+ opened: false,
+ object: null
  }
 }
 
@@ -243,6 +259,8 @@ const modalReducer = (current: ModalState, action: { target: string; value: bool
  return { ...current, thirdparty: { opened: action.value } }
  case 'settings':
  return { ...current, settings: { opened: action.value } }
+ case 'report':
+ return { ...current, report: { opened: action.value, object: action.object } }
  default:
  return current
  }