refactor: hooks usage

generators/app/templates/eslintrc

@@ -6,9 +6,11 @@
     "prettier/react",
     "prettier/standard"
   ],
-  "plugins": ["prettier"],
+  "plugins": ["prettier", "react-hooks"],
   "rules": {
     "max-len": ["error", { "code": 120 }],
-    "react/prop-types": ["error"]
+    "react/prop-types": ["error"],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

generators/app/templates/src/hooks/useAuthModel.js

@@ -1,6 +1,6 @@
 import { message } from 'antd'
 import { createModel } from 'hox'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { formatMessage } from 'umi-plugin-react/locale'
 
 import API from '@/helpers/api'
@@ -20,13 +20,14 @@ function useAuthModel() {
     }
   }, [tokenState])
 
+  // redirect to login page whenver tokenState changed && is empty
   useEffect(() => {
     if (!tokenState) {
       redirectTo('/o/login')
     }
   }, [tokenState])
 
-  function sign(account, password) {
+  const sign = useCallback((account, password) => {
     return API.post('/login', {
       data: {
         account,
@@ -42,13 +43,13 @@ function useAuthModel() {
       }
       return data
     })
-  }
+  }, [])
 
-  function signout(account, password) {
+  const signout = useCallback((account, password) => {
     clearAll()
     setCurrentUser(null)
     setTokenState(null)
-  }
+  }, [])
 
   return {
     currentUser,

generators/app/templates/src/layouts/AuthRequiredLayout/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import withRouter from 'umi/withRouter'
 import { Layout, BackTop } from 'antd'
@@ -12,12 +12,17 @@ import styles from './index.less'
 function AuthRequiredLayout({ children }) {
   const { currentUser } = useAuthModel()
 
+  // remove spinner while signin
+  useEffect(() => {
+    if (currentUser) {
+      destoryGlobalSpinner()
+    }
+  }, [currentUser])
+
   if (!currentUser) {
     return null
   }
 
-  destoryGlobalSpinner()
-
   return (
     <React.Fragment>
       <BackTop />

generators/app/templates/src/layouts/OpenPageLayout.js

@@ -1,12 +1,14 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 
 import { destoryGlobalSpinner } from '@/helpers/view'
 
 function OpenPageLayout(props) {
   const { children } = props
 
-  destoryGlobalSpinner()
+  useEffect(() => {
+    destoryGlobalSpinner()
+  }, [])
 
   return <React.Fragment>{children}</React.Fragment>
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-umi",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "umi project generator",
   "files": [
     "generators"