From d603f48badecbf0834e990524763f8e3737b0018 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Fri, 20 Mar 2020 17:14:18 +0800
Subject: [PATCH] refactor

---
 resources/assets/src/views/skinlib/Upload.tsx      | 14 +++-----------
 .../assets/src/views/user/Closet/Previewer.tsx     | 14 +++-----------
 .../assets/src/views/user/Players/Previewer.tsx    | 14 +++-----------
 3 files changed, 9 insertions(+), 33 deletions(-)

diff --git a/resources/assets/src/views/skinlib/Upload.tsx b/resources/assets/src/views/skinlib/Upload.tsx
index 25d7f5b5..0873cbec 100644
--- a/resources/assets/src/views/skinlib/Upload.tsx
+++ b/resources/assets/src/views/skinlib/Upload.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
 import { hot } from 'react-hot-loader/root'
 import { t } from '@/scripts/i18n'
 import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'
+import useMount from '@/scripts/hooks/useMount'
 import * as fetch from '@/scripts/net'
 import { showModal, toast } from '@/scripts/notify'
 import { isAlex } from '@/scripts/textureUtils'
@@ -12,8 +13,6 @@ import ViewerSkeleton from '@/components/ViewerSkeleton'
 
 const Previewer = React.lazy(() => import('@/components/Viewer'))
 
-const container = document.createElement('div')
-
 const Upload: React.FC = () => {
   const [name, setName] = useState('')
   const [type, setType] = useState<TextureType>('steve')
@@ -29,14 +28,7 @@ const Upload: React.FC = () => {
   const scorePrivate = useBlessingExtra<number>('scorePrivate')
   const closetItemCost = useBlessingExtra<number>('closetItemCost')
 
-  useEffect(() => {
-    const mount = document.querySelector('#previewer')!
-    mount.appendChild(container)
-
-    return () => {
-      mount.removeChild(container)
-    }
-  }, [])
+  const container = useMount('#previewer')
 
   const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value)
diff --git a/resources/assets/src/views/user/Closet/Previewer.tsx b/resources/assets/src/views/user/Closet/Previewer.tsx
index 1de157af..00e83543 100644
--- a/resources/assets/src/views/user/Closet/Previewer.tsx
+++ b/resources/assets/src/views/user/Closet/Previewer.tsx
@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
+import useMount from '@/scripts/hooks/useMount'
 import ViewerSkeleton from '@/components/ViewerSkeleton'
 
 const Viewer = React.lazy(() => import('@/components/Viewer'))
@@ -10,17 +11,8 @@ interface Props {
   isAlex: boolean
 }
 
-const container = document.createElement('div')
-
 const Previewer: React.FC<Props> = props => {
-  useEffect(() => {
-    const mount = document.querySelector('#previewer')!
-    mount.appendChild(container)
-
-    return () => {
-      mount.removeChild(container)
-    }
-  }, [])
+  const container = useMount('#previewer')
 
   const skin = props.skin ? `${blessing.base_url}/textures/${props.skin}` : ''
   const cape = props.cape ? `${blessing.base_url}/textures/${props.cape}` : ''
diff --git a/resources/assets/src/views/user/Players/Previewer.tsx b/resources/assets/src/views/user/Players/Previewer.tsx
index f8a58f6a..8ec5b92f 100644
--- a/resources/assets/src/views/user/Players/Previewer.tsx
+++ b/resources/assets/src/views/user/Players/Previewer.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
+import useMount from '@/scripts/hooks/useMount'
 import { t } from '@/scripts/i18n'
 import ViewerSkeleton from '@/components/ViewerSkeleton'
 import Viewer2d from './Viewer2d'
@@ -12,19 +13,10 @@ interface Props {
   isAlex: boolean
 }
 
-const container = document.createElement('div')
-
 const Previewer: React.FC<Props> = props => {
   const [is3d, setIs3d] = useState(true)
 
-  useEffect(() => {
-    const mount = document.querySelector('#previewer')!
-    mount.appendChild(container)
-
-    return () => {
-      mount.removeChild(container)
-    }
-  }, [])
+  const container = useMount('#previewer')
 
   const switchMode = () => setIs3d(is => !is)