Merge pull request #1336 from h3poteto/iss-1334/custom-emoji

refs #1334 Add custom emoji reaction in timelines

src/components/compose/Status.tsx

@@ -35,7 +35,7 @@ import {
 import { Entity, MegalodonInterface } from 'megalodon'
 import Picker from '@emoji-mart/react'
 
-import { data } from 'src/utils/emojiData'
+import { data, mapCustomEmojiCategory } from 'src/utils/emojiData'
 import { Server } from 'src/entities/server'
 import { CustomEmojiCategory } from 'src/entities/emoji'
 import alert from 'src/components/utils/alert'
@@ -129,24 +129,7 @@ const Status: React.FC<Props> = props => {
  setMaxCharacters(instance.data.configuration.statuses.max_characters)
  }
  const emojis = await props.client.getInstanceCustomEmojis()
- setCustomEmojis([
- {
- id: props.server.domain,
- name: props.server.domain,
- emojis: emojis.data
- .map(emoji => ({
- name: emoji.shortcode,
- image: emoji.url
- }))
- .filter((e, i, array) => array.findIndex(ar => e.name === ar.name) === i)
- .map(e => ({
- id: e.name,
- name: e.name,
- keywords: [e.name],
- skins: [{ src: e.image, shortcodes: `:${e.name}:` }]
- }))
- }
- ])
+ setCustomEmojis(mapCustomEmojiCategory(props.server.domain, emojis.data))
  }
  f()
  }, [props.server, props.client])

src/components/detail/List.tsx

@@ -11,6 +11,8 @@ import { Server } from 'src/entities/server'
 import { Account } from 'src/entities/account'
 import Status from '../timelines/status/Status'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { CustomEmojiCategory } from 'src/entities/emoji'
+import { mapCustomEmojiCategory } from 'src/utils/emojiData'
 
 type Props = {
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
@@ -27,6 +29,7 @@ export default function ListDetail(props: Props) {
  const [account, setAccount] = useState<Account | null>(null)
  const [statuses, setStatuses] = useState<Array<Entity.Status>>([])
  const [list, setList] = useState<Entity.List | null>(null)
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
  useEffect(() => {
  const f = async () => {
@@ -42,6 +45,9 @@ export default function ListDetail(props: Props) {
  const listID = router.query.list_id.toString()
  const res = await cli.getList(listID)
  setList(res.data)
+
+ const emojis = await cli.getInstanceCustomEmojis()
+ setCustomEmojis(mapCustomEmojiCategory(server.domain, emojis.data))
  }
  }
 
@@ -149,6 +155,7 @@ export default function ListDetail(props: Props) {
  setTagDetail={setTagDetail}
  openReport={props.openReport}
  openFromOtherAccount={props.openFromOtherAccount}
+ customEmojis={customEmojis}
  />
  </List.Item>
  )}

src/components/detail/Status.tsx

@@ -10,6 +10,8 @@ import { Server } from 'src/entities/server'
 import { Account } from 'src/entities/account'
 import Status from '../timelines/status/Status'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { CustomEmojiCategory } from 'src/entities/emoji'
+import { mapCustomEmojiCategory } from 'src/utils/emojiData'
 
 type Props = {
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
@@ -25,23 +27,27 @@ const StatusDetail: React.FC<Props> = props => {
  const [status, setStatus] = useState<Entity.Status | null>(null)
  const [ancestors, setAncestors] = useState<Array<Entity.Status>>([])
  const [descendants, setDescendants] = useState<Array<Entity.Status>>([])
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
  const router = useRouter()
 
  useEffect(() => {
  const f = async () => {
  let cli: MegalodonInterface
+ let server: Server
  if (router.query.account_id && router.query.server_id) {
- const [account, server] = await invoke<[Account, Server]>('get_account', {
+ const [account, s] = await invoke<[Account, Server]>('get_account', {
  id: parseInt(router.query.account_id.toLocaleString())
  })
- setServer(server)
+ server = s
+ setServer(s)
  setAccount(account)
  cli = generator(server.sns, server.base_url, account.access_token, 'Fedistar')
  setClient(cli)
  } else if (router.query.server_id) {
- const server = await invoke<Server>('get_server', { id: parseInt(router.query.server_id.toString()) })
- setServer(server)
+ const s = await invoke<Server>('get_server', { id: parseInt(router.query.server_id.toString()) })
+ server = s
+ setServer(s)
  setAccount(null)
  cli = generator(server.sns, server.base_url, undefined, 'Fedistar')
  setClient(cli)
@@ -52,6 +58,11 @@ const StatusDetail: React.FC<Props> = props => {
  } else {
  setStatus(null)
  }
+
+ if (cli) {
+ const emojis = await cli.getInstanceCustomEmojis()
+ setCustomEmojis(mapCustomEmojiCategory(server.domain, emojis.data))
+ }
  }
  f()
  }, [router.query.status_id, router.query.server_id, router.query.account_id])
@@ -175,6 +186,7 @@ const StatusDetail: React.FC<Props> = props => {
  setTagDetail={setTagDetail}
  openReport={props.openReport}
  openFromOtherAccount={props.openFromOtherAccount}
+ customEmojis={customEmojis}
  />
  </List.Item>
  ))}

src/components/detail/Tag.tsx

@@ -11,6 +11,8 @@ import { Account } from 'src/entities/account'
 import { Virtuoso } from 'react-virtuoso'
 import Status from '../timelines/status/Status'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { CustomEmojiCategory } from 'src/entities/emoji'
+import { mapCustomEmojiCategory } from 'src/utils/emojiData'
 
 type Props = {
  openMedia: (media: Array<Entity.Attachment>, index: number) => void
@@ -26,29 +28,39 @@ export default function TagDetail(props: Props) {
  const [statuses, setStatuses] = useState<Array<Entity.Status>>([])
  const [tag, setTag] = useState('')
  const [hashtag, setHashtag] = useState<Entity.Tag | null>(null)
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
+
  const router = useRouter()
 
  useEffect(() => {
  const f = async () => {
  let cli: MegalodonInterface
+ let server: Server
  if (router.query.account_id && router.query.server_id) {
- const [account, server] = await invoke<[Account, Server]>('get_account', {
+ const [account, s] = await invoke<[Account, Server]>('get_account', {
  id: parseInt(router.query.account_id.toLocaleString())
  })
- setServer(server)
+ server = s
+ setServer(s)
  setAccount(account)
  cli = generator(server.sns, server.base_url, account.access_token, 'Fedistar')
  setClient(cli)
  } else if (router.query.server_id) {
- const server = await invoke<Server>('get_server', { id: parseInt(router.query.server_id.toString()) })
- setServer(server)
+ const s = await invoke<Server>('get_server', { id: parseInt(router.query.server_id.toString()) })
+ server = s
+ setServer(s)
  setAccount(null)
  cli = generator(server.sns, server.base_url, undefined, 'Fedistar')
  setClient(cli)
  }
  if (router.query.tag) {
  setTag(router.query.tag.toString())
  }
+
+ if (cli) {
+ const emojis = await cli.getInstanceCustomEmojis()
+ setCustomEmojis(mapCustomEmojiCategory(server.domain, emojis.data))
+ }
  }
  f()
  }, [router.query.tag, router.query.server_id, router.query.account_id])
@@ -188,6 +200,7 @@ export default function TagDetail(props: Props) {
  setTagDetail={setTagDetail}
  openReport={props.openReport}
  openFromOtherAccount={props.openFromOtherAccount}
+ customEmojis={customEmojis}
  />
  </List.Item>
  )}

src/components/detail/profile/Posts.tsx

@@ -5,7 +5,9 @@ import { List, Loader } from 'rsuite'
 import Status from 'src/components/timelines/status/Status'
 import { TIMELINE_STATUSES_COUNT } from 'src/defaults'
 import { Account } from 'src/entities/account'
+import { CustomEmojiCategory } from 'src/entities/emoji'
 import { Server } from 'src/entities/server'
+import { mapCustomEmojiCategory } from 'src/utils/emojiData'
 
 export type FuncProps = {
  loadMore: () => Promise<void>
@@ -27,6 +29,7 @@ const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref)
  const [statuses, setStatuses] = useState<Array<Entity.Status>>([])
  const [loading, setLoading] = useState<boolean>(false)
  const [loadingMore, setLoadingMore] = useState<boolean>(false)
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
  const router = useRouter()
 
@@ -41,6 +44,8 @@ const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref)
  } finally {
  setLoading(false)
  }
+ const emojis = await client.getInstanceCustomEmojis()
+ setCustomEmojis(mapCustomEmojiCategory(props.server.domain, emojis.data))
  }
  f()
  }, [user, client])
@@ -116,6 +121,7 @@ const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref)
  setTagDetail={setTagDetail}
  openReport={props.openReport}
  openFromOtherAccount={props.openFromOtherAccount}
+ customEmojis={customEmojis}
  />
  </List.Item>
  ))}
@@ -133,6 +139,7 @@ const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref)
  setTagDetail={setTagDetail}
  openReport={props.openReport}
  openFromOtherAccount={props.openFromOtherAccount}
+ customEmojis={customEmojis}
  />
  </List.Item>
  ))}

src/components/fromOtherAccount/Status.tsx

@@ -11,6 +11,8 @@ import Actions from '../timelines/status/Actions'
 import { Account } from 'src/entities/account'
 import Reply from 'src/components/compose/Status'
 import { FormattedMessage } from 'react-intl'
+import { CustomEmojiCategory } from 'src/entities/emoji'
+import { mapCustomEmojiCategory } from 'src/utils/emojiData'
 
 type Props = {
  target: Entity.Status
@@ -22,6 +24,7 @@ type Props = {
 export default function Status(props: Props) {
  const [statuses, setStatuses] = useState<Array<Entity.Status>>([])
  const [searching, setSearching] = useState(false)
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
  useEffect(() => {
  if (props.client === null) {
@@ -37,6 +40,9 @@ export default function Status(props: Props) {
  } finally {
  setSearching(false)
  }
+
+ const emojis = await props.client.getInstanceCustomEmojis()
+ setCustomEmojis(mapCustomEmojiCategory(props.server.domain, emojis.data))
  }
  f()
  }, [props.client, props.target])
@@ -83,6 +89,7 @@ export default function Status(props: Props) {
  updateStatus={replaceStatus}
  server={props.server}
  account={props.account}
+ customEmojis={customEmojis}
  />
  ))
  ) : (
@@ -107,6 +114,7 @@ type PostProps = {
  status: Entity.Status
  client: MegalodonInterface
  updateStatus: (status: Entity.Status) => void
+ customEmojis: Array<CustomEmojiCategory>
 }
 
 function Post(props: PostProps) {
@@ -164,6 +172,7 @@ function Post(props: PostProps) {
  client={client}
  setShowReply={setShowReply}
  updateStatus={props.updateStatus}
+ customEmojis={props.customEmojis}
  />
  </div>
  </FlexboxGrid.Item>

src/components/search/Results.tsx

@@ -9,6 +9,8 @@ import { Server } from 'src/entities/server'
 import Status from 'src/components/timelines/status/Status'
 import emojify from 'src/utils/emojify'
 import { Account } from 'src/entities/account'
+import { CustomEmojiCategory } from 'src/entities/emoji'
+import { mapCustomEmojiCategory } from 'src/utils/emojiData'
 
 type Props = {
  account: Account
@@ -27,12 +29,15 @@ export default function Results(props: Props) {
  const [accounts, setAccounts] = useState<Array<Entity.Account>>([])
  const [hashtags, setHashtags] = useState<Array<Entity.Tag>>([])
  const [statuses, setStatuses] = useState<Array<Entity.Status>>([])
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
  const search = async (word: string) => {
  const res = await props.client.search(word, { limit: 5, resolve: true })
  setAccounts(res.data.accounts)
  setHashtags(res.data.hashtags)
  setStatuses(res.data.statuses)
+ const emojis = await props.client.getInstanceCustomEmojis()
+ setCustomEmojis(mapCustomEmojiCategory(props.server.domain, emojis.data))
  }
 
  const loadMoreAccount = useCallback(async () => {
@@ -178,6 +183,7 @@ export default function Results(props: Props) {
  setTagDetail={setTagDetail}
  openReport={props.openReport}
  openFromOtherAccount={props.openFromOtherAccount}
+ customEmojis={customEmojis}
  />
  </div>
  </List.Item>

src/components/timelines/Notifications.tsx

@@ -35,6 +35,8 @@ import { useRouter } from 'next/router'
 import timelineName from 'src/utils/timelineName'
 import { Marker } from 'src/entities/marker'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { CustomEmojiCategory } from 'src/entities/emoji'
+import { mapCustomEmojiCategory } from 'src/utils/emojiData'
 
 type Props = {
  timeline: Timeline
@@ -56,6 +58,7 @@ const Notifications: React.FC<Props> = props => {
  const [loading, setLoading] = useState<boolean>(false)
  const [marker, setMarker] = useState<Marker | null>(null)
  const [pleromaUnreads, setPleromaUnreads] = useState<Array<string>>([])
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
  const scrollerRef = useRef<HTMLElement | null>(null)
  const triggerRef = useRef(null)
@@ -79,6 +82,9 @@ const Notifications: React.FC<Props> = props => {
  setLoading(false)
  }
  updateMarker(cli)
+ const emojis = await cli.getInstanceCustomEmojis()
+ setCustomEmojis(mapCustomEmojiCategory(props.server.domain, emojis.data))
+
  listen<ReceiveNotificationPayload>('receive-notification', ev => {
  if (ev.payload.server_id !== props.server.id) {
  return
@@ -384,6 +390,7 @@ const Notifications: React.FC<Props> = props => {
  setTagDetail={setTagDetail}
  openReport={props.openReport}
  openFromOtherAccount={props.openFromOtherAccount}
+ customEmojis={customEmojis}
  />
  </List.Item>
  )

src/components/timelines/Timeline.tsx

@@ -55,6 +55,8 @@ import { useRouter } from 'next/router'
 import { Instruction } from 'src/entities/instruction'
 import timelineName from 'src/utils/timelineName'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { CustomEmojiCategory } from 'src/entities/emoji'
+import { mapCustomEmojiCategory } from 'src/utils/emojiData'
 
 type Props = {
  timeline: Timeline
@@ -76,6 +78,7 @@ const Timeline: React.FC<Props> = props => {
  // This parameter is used only favourite. Because it is not receive streaming, and max_id in link header is required for favourite.
  const [nextMaxId, setNextMaxId] = useState<string | null>(null)
  const [walkthrough, setWalkthrough] = useState<boolean>(false)
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
  const scrollerRef = useRef<HTMLElement | null>(null)
  const triggerRef = useRef(null)
@@ -108,6 +111,9 @@ const Timeline: React.FC<Props> = props => {
  setLoading(false)
  }
 
+ const emojis = await client.getInstanceCustomEmojis()
+ setCustomEmojis(mapCustomEmojiCategory(props.server.domain, emojis.data))
+
  const instruction = await invoke<Instruction>('get_instruction')
  if (instruction.instruction == 1) {
  setWalkthrough(true)
@@ -486,6 +492,7 @@ const Timeline: React.FC<Props> = props => {
  setTagDetail={setTagDetail}
  openReport={props.openReport}
  openFromOtherAccount={props.openFromOtherAccount}
+ customEmojis={customEmojis}
  />
  </List.Item>
  )}