chore: Merge branch 'hooks-rocks' into dev

Author: mydearxym

.babelrc

@@ -52,6 +52,7 @@
       "alias": {
         "@containers":"./containers",
         "@components":"./components",
+        "@hooks":"./components/Hooks",
         "@config":"./config",
         "@stores":"./stores",
         "@model":"./stores/SharedModel",

components/Hooks/index.js

@@ -1,3 +1,4 @@
 export { default as useShortcut } from './useShortcut'
 export { default as useMedia } from './useMedia'
 export { default as usePlatform } from './usePlatform'
+export { default as useScript } from './useScript'

components/Hooks/useScript.js

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react'
+
+const cachedScripts = []
+
+const useScript = src => {
+  // Keeping track of script loaded and error state
+  const [state, setState] = useState({
+    loaded: false,
+    error: false,
+  })
+
+  useEffect(
+    () => {
+      // If cachedScripts array already includes src that means another instance ...
+      // ... of this hook already loaded this script, so no need to load again.
+      if (cachedScripts.includes(src)) {
+        setState({
+          loaded: true,
+          error: false,
+        })
+      } else {
+        cachedScripts.push(src)
+
+        // Create script
+        const script = document.createElement('script')
+        script.src = src
+        script.async = true
+
+        // Script event listener callbacks for load and error
+        const onScriptLoad = () => {
+          setState({
+            loaded: true,
+            error: false,
+          })
+        }
+
+        const onScriptError = () => {
+          // Remove from cachedScripts we can try loading again
+          const index = cachedScripts.indexOf(src)
+          if (index >= 0) cachedScripts.splice(index, 1)
+          script.remove()
+
+          setState({
+            loaded: true,
+            error: true,
+          })
+        }
+
+        script.addEventListener('load', onScriptLoad)
+        script.addEventListener('error', onScriptError)
+
+        // Add script to document body
+        document.body.appendChild(script)
+
+        // Remove event listeners on cleanup
+        return () => {
+          script.removeEventListener('load', onScriptLoad)
+          script.removeEventListener('error', onScriptError)
+        }
+      }
+    },
+    [src] // Only re-run effect if script src changes
+  )
+
+  return [state.loaded, state.error]
+}
+
+export default useScript

containers/DocUploader/index.js

@@ -43,21 +43,27 @@ class DocUploaderContainer extends React.Component {
 
   state = {
     ossClient: null,
+    ossScriptAnchor: null,
+    ossScriptLoaded: false,
     // use unique id to init the file input, otherwise it will be the some instance
     uniqueId: uid.gen(),
     initTimestamp: Date.now() / 1000,
   }
 
   componentDidMount() {
+    this.loadScriptAndInitOSS()
+
     const { docUploader, pasteImage } = this.props
     init(docUploader)
 
-    this.initOssClient()
+    // if (ossScriptLoaded) this.initOssClient()
     if (pasteImage) this.initPasteWatcher()
   }
 
   componentWillUnmount() {
     log('componentWillUnmount')
+    const { ossScriptLoaded, ossScriptAnchor } = this.state
+
     /* eslint-disable */
     delete this.state.ossClient
     /* eslint-enable */
@@ -66,6 +72,31 @@ class DocUploaderContainer extends React.Component {
       Global.removeEventListener('paste', this.handlePaste.bind(this), true)
     }
     uninit()
+
+    if (ossScriptLoaded) {
+      ossScriptAnchor.removeEventListener('load', () => {
+        this.setState({ ossScriptLoaded: false })
+      })
+    }
+  }
+
+  loadScriptAndInitOSS() {
+    let { ossScriptAnchor } = this.state
+
+    ossScriptAnchor = document.createElement('script')
+    ossScriptAnchor.src =
+      'https://gosspublic.alicdn.com/aliyun-oss-sdk-5.2.0.min.js'
+    ossScriptAnchor.async = true
+    document.getElementsByTagName('head')[0].appendChild(ossScriptAnchor)
+
+    ossScriptAnchor.addEventListener('load', () => {
+      log('load done')
+      this.initOssClient()
+      this.setState({ ossScriptLoaded: true, ossScriptAnchor })
+    })
+    ossScriptAnchor.addEventListener('error', () => {
+      this.setState({ ossScriptLoaded: false, ossScriptAnchor: null })
+    })
   }
 
   initPasteWatcher() {
@@ -116,6 +147,8 @@ class DocUploaderContainer extends React.Component {
   }
 
   doUploadFile(file) {
+    const { ossScriptLoaded } = this.state
+    if (!ossScriptLoaded) return alert('脚本未加载...')
     if (!file || !R.startsWith('image/', file.type)) return false
 
     const fileSize = file.size / 1024 / 1024

containers/Doraemon/InputEditor.js

@@ -6,7 +6,7 @@
 
 import React from 'react'
 
-import { useShortcut } from '@components/Hooks'
+import { useShortcut } from '@hooks'
 import InputPrefix from './InputPrefix'
 
 import { EditorBar, InputBar, PrefixWraper } from './styles/input_editor'

containers/ErrorBox/index.js

@@ -9,7 +9,7 @@ import React from 'react'
 import { connectStore, buildLog } from '@utils'
 
 import Modal from '@components/Modal'
-import { useShortcut } from '@components/Hooks'
+import { useShortcut } from '@hooks'
 
 import Header from './Header'
 import Details from './Details'

containers/GlobalLayout/index.js

@@ -11,7 +11,7 @@ import useNetwork from 'react-use/lib/useNetwork'
 import { ICON_CMD } from '@config'
 import { connectStore } from '@utils'
 
-import { useShortcut, useMedia, usePlatform } from '@components/Hooks'
+import { useShortcut, useMedia, usePlatform } from '@hooks'
 
 import { Wrapper, SubCommunitiesExpander, ExpanderIcon } from './styles'
 import { useInit, openDoraemon, queryDoraemon } from './logic'

containers/Preview/index.js

@@ -7,8 +7,8 @@
 import React from 'react'
 
 import { connectStore, buildLog } from '@utils'
+import { useShortcut } from '@hooks'
 
-import { useShortcut } from '@components/Hooks'
 import SliderPreview from './SliderPreview'
 import ModalPreview from './ModalPreview'
 import Viewer from './Viewer'

containers/UsersThread/index.js

@@ -8,6 +8,7 @@ import React from 'react'
 import dynamic from 'next/dynamic'
 
 import { connectStore, buildLog } from '@utils'
+import { useScript } from '@hooks'
 
 import NumDashboard from './NumDashboard'
 import MapLoading from './MapLoading'
@@ -26,6 +27,11 @@ const GeoMapSSR = dynamic({
 })
 
 const UsersThreadContainer = ({ usersThread }) => {
+  /* load g2 from CDN, it's too big for dynamic import, and i am poor ..' */
+  const [g2ScriptLoaded] = useScript(
+    'https://a.alipayobjects.com/g/datavis/g2/2.3.13/index.js'
+  )
+
   useInit(usersThread)
 
   const {
@@ -36,7 +42,7 @@ const UsersThreadContainer = ({ usersThread }) => {
     showNums,
   } = usersThread
 
-  const ready = GeoMapSSR !== null && !geoDataLoading
+  const ready = g2ScriptLoaded && GeoMapSSR !== null && !geoDataLoading
 
   return (
     <Wrapper>

pages/_document.js

@@ -48,12 +48,6 @@ export default class DocumentPage extends Document {
             content="width=device-width, initial-scale=1, viewport-fit=cover"
           />
 
-          {/* load g2 from CDN, it's too big for dynamic import, and i am poor ..' */}
-          <script
-            async
-            src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/index.js"
-          />
-          {/* https://cps-oss.oss-cn-shanghai.aliyuncs.com/antd-3.8.4-mini.css */}
           <link href="/antd-3.8.4-mini.css" rel="stylesheet" />
           <link
             href="https://fonts.googleapis.com/css?family=Orbitron"
@@ -63,9 +57,7 @@ export default class DocumentPage extends Document {
 
           <script
             async
-            src={`https://www.googletagmanager.com/gtag/js?id=${
-              process.env.GA_TRACING_ID
-            }`}
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACING_ID}`}
           />
           <script
             dangerouslySetInnerHTML={{
@@ -94,12 +86,6 @@ export default class DocumentPage extends Document {
           href="https://cdn.staticfile.org/izitoast/1.4.0/css/iziToast.css"
           rel="stylesheet"
         />
-        {/* the ali-oss-sdk es6 import support sucks */}
-        {/* import from cdn is fine, it's not my money anyway */}
-        <script
-          async
-          src="https://gosspublic.alicdn.com/aliyun-oss-sdk-5.2.0.min.js"
-        />
         <noscript>
           You need to enable JavaScript to get this website runing.
         </noscript>