chore: clean file reader (#3527)

DimensionDev · Jun 30, 2021 · c832b4d · c832b4d
1 parent f15cb96
commit c832b4d
Show file tree

Hide file tree

Showing 7 changed files with 777 additions and 661 deletions.
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@dimensiondev/holoflows-kit": "0.8.0-20210317064617-6c4792c",
-    "@dimensiondev/kit": "=0.0.0-20210624142900-972fd05",
+    "@dimensiondev/kit": "=0.0.0-20210630024153-886532b",
     "@masknet/icons": "workspace:*",
     "@masknet/plugin-example": "workspace:*",
     "@masknet/plugin-infra": "workspace:*",

diff --git a/packages/dashboard/src/components/FileUpload/index.tsx b/packages/dashboard/src/components/FileUpload/index.tsx
@@ -2,6 +2,7 @@ import { MaskColorVar } from '@masknet/theme'
 import { makeStyles, Typography } from '@material-ui/core'
 import { useEffect, useState } from 'react'
 import { File as FileIcon } from '@masknet/icons'
+import { toText } from '@dimensiondev/kit'
 
 const useStyles = makeStyles(() => ({
     root: {
@@ -51,11 +52,7 @@ export default function FileUpload({ width, height, readAsText, onChange }: File
     useEffect(() => {
         if (file) {
             if (readAsText) {
-                const reader = new FileReader()
-                reader.readAsText(file)
-                reader.addEventListener('loadend', () => {
-                    onChange(file, reader.result as string)
-                })
+                toText(file).then((result) => onChange(file, result))
             } else {
                 onChange(file)
             }

diff --git a/packages/maskbook/package.json b/packages/maskbook/package.json
@@ -9,7 +9,7 @@
     "@balancer-labs/sor": "^1.0.0",
     "@dimensiondev/common-protocols": "1.6.0-20201027083702-d0ae6e2",
     "@dimensiondev/holoflows-kit": "0.8.0-20210317064617-6c4792c",
-    "@dimensiondev/kit": "=0.0.0-20210624142900-972fd05",
+    "@dimensiondev/kit": "=0.0.0-20210630024153-886532b",
     "@dimensiondev/metamask-extension-provider": "3.0.6-20210519045409-1835d4d",
     "@dimensiondev/stego-js": "=0.11.1-20201027083223-8ab41be",
     "@dimensiondev/uniswap-sdk": "=3.0.4-20210619092641-a270dc0",

diff --git a/packages/maskbook/src/database/helpers/avatar.ts b/packages/maskbook/src/database/helpers/avatar.ts
@@ -3,6 +3,7 @@ import { queryAvatarDB, isAvatarOutdatedDB, storeAvatarDB } from '../avatar'
 import { memoizePromise } from '../../utils/memoize'
 import { MaskMessage } from '../../utils/messages'
 import { downloadUrl } from '../../utils/utils'
+import { toDataURL } from '@dimensiondev/kit'
 
 /**
  * Get a (cached) blob url for an identifier.
@@ -12,21 +13,11 @@ export const queryAvatarDataURL = memoizePromise(
     async function (identifier: ProfileIdentifier | GroupIdentifier): Promise<string | undefined> {
         const buffer = await queryAvatarDB(identifier)
         if (!buffer) throw new Error('Avatar not found')
-        return ArrayBufferToBase64(buffer)
+        return toDataURL(new Blob([buffer], { type: 'image/png' }))
     },
     (id) => id.toText(),
 )
 
-function ArrayBufferToBase64(buffer: ArrayBuffer) {
-    const blob = new Blob([buffer], { type: 'image/png' })
-    return new Promise<string>((resolve, reject) => {
-        const reader = new FileReader()
-        reader.addEventListener('load', () => resolve(reader.result as string))
-        reader.addEventListener('error', reject)
-        reader.readAsDataURL(blob)
-    })
-}
-
 /**
  * Store an avatar with a url for an identifier.
  * @param identifier - This avatar belongs to.

diff --git a/packages/maskbook/src/extension/options-page/DashboardComponents/RestoreFromBackupBox.tsx b/packages/maskbook/src/extension/options-page/DashboardComponents/RestoreFromBackupBox.tsx
@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core'
 import { useI18N } from '../../../utils'
 import { useStylesExtends } from '../../../components/custom-ui-helper'
 import { RestoreBox } from './RestoreBox'
+import { toText } from '@dimensiondev/kit'
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -36,9 +37,7 @@ export function RestoreFromBackupBox(props: RestoreFromBackupBoxProps) {
     // invoke callback
     useEffect(() => {
         if (file) {
-            const fr = new FileReader()
-            fr.readAsText(file)
-            fr.addEventListener('loadend', () => props.onChange?.(file, fr.result as string))
+            toText(file).then((result) => props.onChange?.(file, result))
         }
     }, [file, props.onChange])
 

diff --git a/...ges/maskbook/src/extension/options-page/DashboardComponents/RestoreFromQRCodeImageBox.tsx b/...ges/maskbook/src/extension/options-page/DashboardComponents/RestoreFromQRCodeImageBox.tsx
@@ -5,6 +5,7 @@ import { useI18N } from '../../../utils'
 import { RestoreBox } from './RestoreBox'
 import { useStylesExtends } from '../../../components/custom-ui-helper'
 import { QRCodeImageScanner } from './QRCodeImageScanner'
+import { toDataURL } from '@dimensiondev/kit'
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -58,10 +59,7 @@ export function RestoreFromQRCodeImageBox(props: RestoreFromQRCodeImageBoxProps)
     // read file as data URL
     useEffect(() => {
         if (file) {
-            const fr = new FileReader()
-            fr.readAsDataURL(file)
-            fr.addEventListener('loadend', () => setDataURL(fr.result as string))
-            fr.addEventListener('error', () => setDataURL(''))
+            toDataURL(file).then(setDataURL, () => setDataURL(''))
         } else {
             setDataURL('')
         }