From 68c2d15f9c9bdf3fdb5a6e49f78989891ab3b1cb Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 8 Dec 2022 01:52:51 +0900
Subject: [PATCH 1/3] refs #72 Add emoji button

---
 package.json               |  2 ++
 src/components/Compose.tsx | 35 +++++++++++++++++++++++++++++++----
 src/utils/emojiData.ts     |  5 +++++
 yarn.lock                  | 10 ++++++++++
 4 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/emojiData.ts

diff --git a/package.json b/package.json
index 1c453846..d92fa50e 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,10 @@
     "testEnvironment": "node"
   },
   "dependencies": {
+    "@emoji-mart/react": "^1.0.1",
     "@rsuite/icons": "^1.0.2",
     "@tauri-apps/api": "^1.2.0",
+    "emoji-mart": "^5.3.3",
     "megalodon": "^5.0.0",
     "moment": "^2.29.4",
     "next": "^13.0.6",
diff --git a/src/components/Compose.tsx b/src/components/Compose.tsx
index 823e9de2..f3e3e356 100644
--- a/src/components/Compose.tsx
+++ b/src/components/Compose.tsx
@@ -1,13 +1,29 @@
-import { Container, Header, Content, FlexboxGrid, Button, Dropdown, Avatar, Form, Input, ButtonToolbar, Schema } from 'rsuite'
+import {
+  Container,
+  Header,
+  Content,
+  FlexboxGrid,
+  Button,
+  Dropdown,
+  Avatar,
+  Form,
+  Input,
+  ButtonToolbar,
+  Schema,
+  Whisper,
+  Popover
+} from 'rsuite'
 import { Icon } from '@rsuite/icons'
-import { BsX } from 'react-icons/bs'
+import { BsX, BsEmojiLaughing } from 'react-icons/bs'
 import { useEffect, useState, forwardRef, useRef } from 'react'
 import { invoke } from '@tauri-apps/api/tauri'
+import generator from 'megalodon'
 
 import { Server } from 'src/entities/server'
 import { Account } from 'src/entities/account'
 import failoverImg from 'src/utils/failoverImg'
-import generator from 'megalodon'
+import { data } from 'src/utils/emojiData'
+import Picker from '@emoji-mart/react'
 
 const renderAccountIcon = (props: any, ref: any, account: [Account, Server] | undefined) => {
   if (account && account.length > 0) {
@@ -128,9 +144,14 @@ const Compose: React.FC<Props> = props => {
         </FlexboxGrid>
         <div style={{ fontSize: '1.2em', padding: '12px 0' }}>Status</div>
         <Form fluid model={model} ref={formRef} onChange={setFormValue} formValue={formValue}>
-          <Form.Group controlId="status">
+          <Form.Group controlId="status" style={{ position: 'relative' }}>
             {/** @ts-ignore **/}
             <Form.Control rows={5} name="status" accepter={Textarea} />
+            <Whisper trigger="click" placement="bottom" speaker={<EmojiPicker />}>
+              <Button appearance="link" style={{ position: 'absolute', top: '4px', right: '8px', padding: 0 }}>
+                <Icon as={BsEmojiLaughing} style={{ fontSize: '1.2em' }} />
+              </Button>
+            </Whisper>
           </Form.Group>
           <Form.Group>
             <ButtonToolbar style={{ textAlign: 'right' }}>
@@ -145,4 +166,10 @@ const Compose: React.FC<Props> = props => {
   )
 }
 
+const EmojiPicker = forwardRef<HTMLDivElement>((props, ref) => (
+  <Popover ref={ref} {...props}>
+    <Picker data={data} onEmojiSelect={console.log} previewPosition="none" set="native" perLine="7" />
+  </Popover>
+))
+
 export default Compose
diff --git a/src/utils/emojiData.ts b/src/utils/emojiData.ts
new file mode 100644
index 00000000..4365ea6c
--- /dev/null
+++ b/src/utils/emojiData.ts
@@ -0,0 +1,5 @@
+export const data = async () => {
+  const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data')
+
+  return response.json()
+}
diff --git a/yarn.lock b/yarn.lock
index a5d0c6f0..8f9213f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -304,6 +304,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@emoji-mart/react@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.0.1.tgz#46b6a2e92faf16fa9b7f9471f137fa2e3d1e8ac3"
+  integrity sha512-ALhLD96BOL5w+a4NI5NpmfqfF1aVjjj2qJE0dLst/OhjBfVmpteWNgn/h8LZy9ulU6AnbeS+13KnPFzDjCvRRw==
+
 "@eslint/eslintrc@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
@@ -1615,6 +1620,11 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
+emoji-mart@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.3.3.tgz#f079700be84d5b13653378cf7bba45fb0217452b"
+  integrity sha512-rr3wXUimYFQ5Mf50P/5UOsRibr5JSJE3Nj4zw0aDglb3GSHzn/wGKBoXoSkjtWaji8UcmXcYn3cdilD2Eix6iQ==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"

From 58dd9724020558a9258224fd187462c409fd4b3b Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 8 Dec 2022 23:49:08 +0900
Subject: [PATCH 2/3] refs #72 Insert emoji if it is selected

---
 src/components/Compose.tsx | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/Compose.tsx b/src/components/Compose.tsx
index f3e3e356..6833b808 100644
--- a/src/components/Compose.tsx
+++ b/src/components/Compose.tsx
@@ -75,6 +75,7 @@ const Compose: React.FC<Props> = props => {
   const [loading, setLoading] = useState<boolean>(false)
 
   const formRef = useRef<any>()
+  const statusRef = useRef<HTMLDivElement>()
 
   const model = Schema.Model({
     status: Schema.Types.StringType().isRequired('This field is required.')
@@ -117,6 +118,24 @@ const Compose: React.FC<Props> = props => {
     })
   }
 
+  const onEmojiSelect = emoji => {
+    const textarea = statusRef.current.firstElementChild as HTMLTextAreaElement
+    const cursor = textarea.selectionStart
+    if (emoji.native) {
+      setFormValue(current =>
+        Object.assign({}, current, {
+          status: `${current.status.slice(0, cursor)}${emoji.native} ${current.status.slice(cursor)}`
+        })
+      )
+    }
+  }
+
+  const EmojiPicker = forwardRef<HTMLDivElement>((props, ref) => (
+    <Popover ref={ref} {...props}>
+      <Picker data={data} onEmojiSelect={onEmojiSelect} previewPosition="none" set="native" perLine="7" />
+    </Popover>
+  ))
+
   return (
     <Container>
       <Header style={{ borderBottom: '1px solid var(--rs-divider-border)', backgroundColor: 'var(--rs-sidenav-default-bg)' }}>
@@ -146,7 +165,7 @@ const Compose: React.FC<Props> = props => {
         <Form fluid model={model} ref={formRef} onChange={setFormValue} formValue={formValue}>
           <Form.Group controlId="status" style={{ position: 'relative' }}>
             {/** @ts-ignore **/}
-            <Form.Control rows={5} name="status" accepter={Textarea} />
+            <Form.Control rows={5} name="status" accepter={Textarea} ref={statusRef} />
             <Whisper trigger="click" placement="bottom" speaker={<EmojiPicker />}>
               <Button appearance="link" style={{ position: 'absolute', top: '4px', right: '8px', padding: 0 }}>
                 <Icon as={BsEmojiLaughing} style={{ fontSize: '1.2em' }} />
@@ -166,10 +185,4 @@ const Compose: React.FC<Props> = props => {
   )
 }
 
-const EmojiPicker = forwardRef<HTMLDivElement>((props, ref) => (
-  <Popover ref={ref} {...props}>
-    <Picker data={data} onEmojiSelect={console.log} previewPosition="none" set="native" perLine="7" />
-  </Popover>
-))
-
 export default Compose

From f3faab66f1a9acb0429cf286c8b4824ed2993b72 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 9 Dec 2022 22:47:22 +0900
Subject: [PATCH 3/3] refs #72 Insert custom emoji

---
 src/components/Compose.tsx | 76 ++++++++++++++++++++++++++++++++++----
 src/defaults.ts            |  1 +
 2 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/src/components/Compose.tsx b/src/components/Compose.tsx
index 6833b808..787697a7 100644
--- a/src/components/Compose.tsx
+++ b/src/components/Compose.tsx
@@ -17,13 +17,14 @@ import { Icon } from '@rsuite/icons'
 import { BsX, BsEmojiLaughing } from 'react-icons/bs'
 import { useEffect, useState, forwardRef, useRef } from 'react'
 import { invoke } from '@tauri-apps/api/tauri'
-import generator from 'megalodon'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 
 import { Server } from 'src/entities/server'
 import { Account } from 'src/entities/account'
 import failoverImg from 'src/utils/failoverImg'
 import { data } from 'src/utils/emojiData'
 import Picker from '@emoji-mart/react'
+import { USER_AGENT } from 'src/defaults'
 
 const renderAccountIcon = (props: any, ref: any, account: [Account, Server] | undefined) => {
   if (account && account.length > 0) {
@@ -51,8 +52,7 @@ const renderAccountIcon = (props: any, ref: any, account: [Account, Server] | un
 
 const Textarea = forwardRef<HTMLTextAreaElement>((props, ref) => <Input {...props} as="textarea" ref={ref} />)
 
-const post = async (account: Account, server: Server, value: FormValue) => {
-  const client = generator(server.sns, server.base_url, account.access_token, 'Fedistar')
+const post = async (client: MegalodonInterface, value: FormValue) => {
   const res = await client.postStatus(value.status)
   return res
 }
@@ -66,6 +66,19 @@ type FormValue = {
   status: string
 }
 
+type CustomEmojiCategory = {
+  id: string
+  name: string
+  emojis: Array<CustomEmoji>
+}
+
+type CustomEmoji = {
+  id: string
+  name: string
+  keywords: Array<String>
+  skins: Array<{ src: string }>
+}
+
 const Compose: React.FC<Props> = props => {
   const [accounts, setAccounts] = useState<Array<[Account, Server]>>([])
   const [fromAccount, setFromAccount] = useState<[Account, Server]>()
@@ -73,9 +86,12 @@ const Compose: React.FC<Props> = props => {
     status: ''
   })
   const [loading, setLoading] = useState<boolean>(false)
+  const [client, setClient] = useState<MegalodonInterface>()
+  const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
   const formRef = useRef<any>()
   const statusRef = useRef<HTMLDivElement>()
+  const emojiPickerRef = useRef(null)
 
   const model = Schema.Model({
     status: Schema.Types.StringType().isRequired('This field is required.')
@@ -90,6 +106,39 @@ const Compose: React.FC<Props> = props => {
     f()
   }, [props.servers])
 
+  useEffect(() => {
+    if (!fromAccount || fromAccount.length < 2) {
+      return
+    }
+    const account = fromAccount[0]
+    const server = fromAccount[1]
+    const client = generator(server.sns, server.base_url, account.access_token, USER_AGENT)
+    setClient(client)
+
+    const f = async () => {
+      const emojis = await client.getInstanceCustomEmojis()
+      setCustomEmojis([
+        {
+          id: server.domain,
+          name: 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 }]
+            }))
+        }
+      ])
+    }
+    f()
+  }, [fromAccount])
+
   const selectAccount = (eventKey: string) => {
     const account = accounts[parseInt(eventKey)]
     setFromAccount(account)
@@ -106,9 +155,12 @@ const Compose: React.FC<Props> = props => {
       return
     } else {
       setLoading(true)
-      await post(fromAccount[0], fromAccount[1], formValue)
-      clear()
-      setLoading(false)
+      try {
+        await post(client, formValue)
+        clear()
+      } finally {
+        setLoading(false)
+      }
     }
   }
 
@@ -127,12 +179,20 @@ const Compose: React.FC<Props> = props => {
           status: `${current.status.slice(0, cursor)}${emoji.native} ${current.status.slice(cursor)}`
         })
       )
+    } else if (emoji.shortcodes) {
+      // Custom emojis don't have native code
+      setFormValue(current =>
+        Object.assign({}, current, {
+          status: `${current.status.slice(0, cursor)}${emoji.shortcodes} ${current.status.slice(cursor)}`
+        })
+      )
     }
+    emojiPickerRef?.current.close()
   }
 
   const EmojiPicker = forwardRef<HTMLDivElement>((props, ref) => (
     <Popover ref={ref} {...props}>
-      <Picker data={data} onEmojiSelect={onEmojiSelect} previewPosition="none" set="native" perLine="7" />
+      <Picker data={data} custom={customEmojis} onEmojiSelect={onEmojiSelect} previewPosition="none" set="native" perLine="7" />
     </Popover>
   ))
 
@@ -166,7 +226,7 @@ const Compose: React.FC<Props> = props => {
           <Form.Group controlId="status" style={{ position: 'relative' }}>
             {/** @ts-ignore **/}
             <Form.Control rows={5} name="status" accepter={Textarea} ref={statusRef} />
-            <Whisper trigger="click" placement="bottom" speaker={<EmojiPicker />}>
+            <Whisper trigger="click" placement="bottomStart" ref={emojiPickerRef} speaker={<EmojiPicker />}>
               <Button appearance="link" style={{ position: 'absolute', top: '4px', right: '8px', padding: 0 }}>
                 <Icon as={BsEmojiLaughing} style={{ fontSize: '1.2em' }} />
               </Button>
diff --git a/src/defaults.ts b/src/defaults.ts
index 5f218c1e..dd9588a6 100644
--- a/src/defaults.ts
+++ b/src/defaults.ts
@@ -1,2 +1,3 @@
 export const TIMELINE_STATUSES_COUNT = 40
 export const TIMELINE_MAX_STATUSES = 2147483647
+export const USER_AGENT = 'Fedistar'