pref: code tuning and optimization

Author: guosw

src/components/Discuss/index.jsx

@@ -8,6 +8,7 @@ import { DISCUSS_AVATAR } from '@/config'
 import axios from '@/utils/axios'
 import { calcCommentsCount } from '@/utils'
 import { loginout } from '@/redux/user/actions'
+import useAjaxLoading from '@/hooks/useAjaxLoading'
 
 // components
 import SvgIcon from '@/components/SvgIcon'
@@ -44,7 +45,7 @@ function Discuss(props) {
 
   const { commentList, articleId } = props
   const [value, setValue] = useState('')
-  const [submitting, setSubmitting] = useState(false)
+  const [submitting, withLoading] = useAjaxLoading()
 
   const renderDropdownMenu = () => {
     return username ? (
@@ -84,16 +85,12 @@ function Discuss(props) {
     if (!value) return
     if (!userInfo.username) return message.warn('您未登陆，请登录后再试。')
 
-    setSubmitting(true)
-
-    axios
-      .post('/discuss', { articleId: props.articleId, content: value, userId: userInfo.userId })
-      .then(res => {
-        setSubmitting(false)
-        setValue('')
-        props.setCommentList(res.rows)
-      })
-      .catch(e => setSubmitting(false))
+    withLoading(
+      axios.post('/discuss', { articleId: props.articleId, content: value, userId: userInfo.userId })
+    ).then(res => {
+      setValue('')
+      props.setCommentList(res.rows)
+    })
   }
 
   return (

src/hooks/useAjaxLoading.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+
+/**
+ * ajax request with loading
+*/
+export default function useRequestLoading() {
+  const [loading, setLoading] = useState(false)
+
+  function withLoading(request) {
+    if (request instanceof Promise) {
+      return new Promise((reslove, reject) => {
+        setLoading(true)
+        request.then(res => {
+          reslove(res)
+          setLoading(false)
+        }).catch(e => {
+          reject(e)
+          setLoading(false)
+        })
+      })
+    }
+  }
+
+  return [loading, withLoading]
+}
+

src/views/web/article/index.jsx

@@ -5,6 +5,7 @@ import { useMediaQuery } from 'react-responsive'
 // methods
 import axios from '@/utils/axios'
 import { translateMarkdown, calcCommentsCount } from '@/utils'
+import useAjaxLoading from '@/hooks/useAjaxLoading'
 
 // components
 import { Drawer, Icon, Divider, Spin } from 'antd'
@@ -14,7 +15,8 @@ import Navigation from './Navigation'
 import Discuss from '@/components/Discuss'
 
 function Article(props) {
-  const [loading, setLoading] = useState(true)
+  const [loading, withLoading] = useAjaxLoading()
+
   const [article, setArticle] = useState({
     title: '',
     content: '',
@@ -35,21 +37,14 @@ function Article(props) {
   }, [])
 
   useEffect(() => {
-    const fetchData = id => {
-      setLoading(true)
-      axios
-        .get(`/article/${id}`)
-        .then(res => {
-          res.content = translateMarkdown(res.content)
-          setArticle(res)
-          setLoading(false)
-        })
-        .catch(e => {
-          props.history.push('/404')
-        })
-    }
-    fetchData(props.match.params.id)
-    /*eslint react-hooks/exhaustive-deps: "off"*/
+    withLoading(axios.get(`/article/${props.match.params.id}`))
+      .then(res => {
+        res.content = translateMarkdown(res.content)
+        setArticle(res)
+      })
+      .catch(e => {
+        props.history.push('/404')
+      })
   }, [props.match.params.id])
 
   function setCommentList(list) {

src/views/web/home/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useMemo } from 'react'
 import './index.less'
 
 import { Link } from 'react-router-dom'
@@ -15,10 +15,11 @@ import SvgIcon from '@/components/SvgIcon'
 // hooks
 import useFetchList from '@/hooks/useFetchList'
 
-function Preview({ list, showTitle = true }) {
+const LinkList = props => {
+  const { list, showTitle = true } = props
   return (
     <ul className='preview'>
-      {showTitle && <Divider>文章列表</Divider>}
+      {showTitle && <Divider>快速导航</Divider>}
       {list.map(item => (
         <li key={item.id}>
           <Link to={`/article/${item.id}`}>{item.title}</Link>
@@ -28,41 +29,58 @@ function Preview({ list, showTitle = true }) {
   )
 }
 
-function NoDataDesc({ keyword }) {
-  return keyword ? (
-    <span>
-      不存在标题/内容中含有 <span className='keyword'>{keyword}</span> 的文章！
-    </span>
+/**
+ * 快速导航
+*/
+const QuickLink = props => {
+  const isGreaterThan1300 = useMediaQuery({ query: '(min-width: 1300px)' })
+
+  const { list } = props
+
+  const [drawerVisible, setDrawerVisible] = useState(false)
+
+  return isGreaterThan1300 ? (
+    <LinkList list={list} />
   ) : (
-    <span>暂无数据...</span>
+    <>
+      <div className='drawer-btn' onClick={e => setDrawerVisible(true)}>
+        <Icon type='menu-o' className='nav-phone-icon' />
+      </div>
+      <Drawer
+        title='快速导航'
+        placement='right'
+        closable={false}
+        onClose={e => setDrawerVisible(false)}
+        visible={drawerVisible}
+        getContainer={() => document.querySelector('.app-home')}>
+        <LinkList list={list} showTitle={false} />
+      </Drawer>
+    </>
   )
 }
 
-function Home(props) {
-  const [drawerVisible, setDrawerVisible] = useState(false)
-
+const Home = props => {
   const { loading, pagination, dataList } = useFetchList({
     requestUrl: '/article/list',
     queryParams: { pageSize: HOME_PAGESIZE },
     fetchDependence: [props.location.search]
   })
 
-  const list = [...dataList].map(item => {
-    const index = item.content.indexOf('<!--more-->')
-    item.content = translateMarkdown(item.content.slice(0, index))
-    return item
-  })
-
-  const isGreaterThan1300 = useMediaQuery({
-    query: '(min-width: 1300px)'
-  })
+  const list = useMemo(() => {
+    return [...dataList].map(item => {
+      const index = item.content.indexOf('<!--more-->')
+      item.content = translateMarkdown(item.content.slice(0, index))
+      return item
+    })
+  }, [dataList])
 
   // 跳转到文章详情
   function jumpTo(id) {
     props.history.push(`/article/${id}`)
   }
 
   const { keyword } = decodeQuery(props.location.search)
+
   return (
     <Spin tip='Loading...' spinning={loading}>
       <div className='app-home'>
@@ -94,35 +112,17 @@ function Home(props) {
             </li>
           ))}
         </ul>
-        {list.length > 0 ? (
-          <>
-            {isGreaterThan1300 ? (
-              <Preview list={list} />
-            ) : (
-              <>
-                <div className='drawer-btn' onClick={e => setDrawerVisible(true)}>
-                  <Icon type='menu-o' className='nav-phone-icon' />
-                </div>
-                <Drawer
-                  title='文章列表'
-                  placement='right'
-                  closable={false}
-                  onClose={e => setDrawerVisible(false)}
-                  visible={drawerVisible}
-                  getContainer={() => document.querySelector('.app-home')}>
-                  <Preview list={list} showTitle={false} />
-                </Drawer>
-              </>
-            )}
-          </>
-        ) : (
-          <>
-            {keyword && (
-              <div className='no-data'>
-                <Empty description={<NoDataDesc keyword={keyword} />} />
-              </div>
-            )}
-          </>
+        <QuickLink list={list} />
+
+        {/* 结果为空 */}
+        {list.length === 0 && keyword && (
+          <div className='no-data'>
+            <Empty description={(
+              <span>
+                不存在标题/内容中含有 <span className='keyword'>{keyword}</span> 的文章！
+              </span>
+            )} />
+          </div>
         )}
 
         <Pagination {...pagination} onChange={