fix: #12 use Fetch API instead of XHR

app/scripts/sub_modules/slack.ts

@@ -8,23 +8,25 @@ interface SessionInfo {
 
 export const getSessionInfo = async (teamName: string): Promise<SessionInfo | undefined> => {
     const emojiCustomizeUrl = 'https://' + teamName + '.slack.com/customize/emoji'
-    const ret = await httpGet(emojiCustomizeUrl)
+    const response = await httpGet(emojiCustomizeUrl)
 
-    if (ret.responseURL !== emojiCustomizeUrl) {
+    if (response.url !== emojiCustomizeUrl) {
         return
     }
 
-    const apiTokenMatches = ret.responseText.match(/api_token: "(.+?)"/)
+    const responseText = await response.text()
+
+    const apiTokenMatches = responseText.match(/api_token: "(.+?)"/)
     if (!apiTokenMatches || !apiTokenMatches[1]) {
         return
     }
 
-    const versionUidMatches = ret.responseText.match(/version_uid: "(.+?)"/)
+    const versionUidMatches = responseText.match(/version_uid: "(.+?)"/)
     if (!versionUidMatches || !versionUidMatches[1]) {
         return
     }
 
-    const versionTsMatches = ret.responseText.match(/version_ts: "(.+?)"/)
+    const versionTsMatches = responseText.match(/version_ts: "(.+?)"/)
     if (!versionTsMatches || !versionTsMatches[1]) {
         return
     }
@@ -56,9 +58,8 @@ export const uploadEmoji = async (teamName: string, emojiName: string, imageUrl:
         image: await getBase64Image(imageUrl),
         token: sessionInfo.api_token,
     }
-    const header = {}
-    const ret = await httpPostForm(emojiCustomizeUrl, formData, header)
-    if (JSON.parse(ret.responseText).ok) {
+    const response = await httpPostForm(emojiCustomizeUrl, formData)
+    if ((await response.json()).ok) {
         return true
     }
     return false

app/scripts/sub_modules/util.ts

@@ -1,47 +1,30 @@
-export const httpGet = async (url: string, header: { [s: string]: string } = {}): Promise<XMLHttpRequest> => {
-  return new Promise<XMLHttpRequest>((resolve, reject) => {
-    const xhr = new XMLHttpRequest()
-    xhr.onreadystatechange = (event) => {
-      if (xhr.readyState !== 4) {
-        return
-      }
-      return resolve(xhr) // OK
-    }
-    xhr.open('GET', url, true) // Async
-    Object.keys(header).forEach((key) => {
-      xhr.setRequestHeader(key, header[key])
-    })
-    xhr.withCredentials = true
-    xhr.send()
+interface Headers { [s: string]: string }
+interface Data { [s: string]: string | Blob }
+
+export const httpGet = async (url: string, headers: Headers = {}) => {
+  return fetch(url, {
+    headers,
+    credentials: 'include',
   })
 }
 
-export const httpPostForm = async (
-  url: string,
-  formData: { [s: string]: string | Blob },
-  header: { [s: string]: string } = {},
-): Promise<XMLHttpRequest> => {
-  return new Promise<XMLHttpRequest>((resolve, reject) => {
-    const xhr = new XMLHttpRequest()
-    const form = new FormData()
-    Object.keys(formData).forEach((key) => {
-      form.append(key, formData[key])
-    })
-    xhr.onreadystatechange = (event) => {
-      if (xhr.readyState !== 4) {
-        return
-      }
-      return resolve(xhr) // OK
-    }
-    xhr.open('POST', url, true) // Async
-    Object.keys(header).forEach((key) => {
-      xhr.setRequestHeader(key, header[key])
-    })
-    xhr.withCredentials = true
-    xhr.send(form)
+export const httpPostForm = async (url: string, data: Data, headers: Headers = {}) => {
+  const formData = new FormData()
+  for (const key of Object.keys(data)) {
+    formData.append(key, data[key])
+  }
+
+  return fetch(url, {
+    method: 'POST',
+    headers: {
+      ...headers,
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    credentials: 'include',
+    body: formData,
   })
 }
 
 export const getBase64Image = async (url: string): Promise<Blob> => {
-  return await fetch(url).then((r) => r.blob())
+  return (await fetch(url)).blob()
 }