pref: granulated components

alvin0216 · Apr 29, 2020 · 305ca89 · 305ca89
1 parent 5c80fea
commit 305ca89
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 105 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -25,21 +25,20 @@ const App = props => {
           children: []
         }
       }
-
-      if (item.component) {
-        if (item.childRoutes) {
-          const childRoutes = renderRoutes(item.childRoutes, newContextPath)
-          children.push(
-            <Route
-              key={newContextPath}
-              render={props => <item.component {...props}>{childRoutes}</item.component>}
-              path={newContextPath}
-            />
-          )
-          item.childRoutes.forEach(r => renderRoute(r, newContextPath))
-        } else {
-          children.push(<Route key={newContextPath} component={item.component} path={newContextPath} exact />)
-        }
+      if (!item.component) return
+
+      if (item.childRoutes) {
+        const childRoutes = renderRoutes(item.childRoutes, newContextPath)
+        children.push(
+          <Route
+            key={newContextPath}
+            render={props => <item.component {...props}>{childRoutes}</item.component>}
+            path={newContextPath}
+          />
+        )
+        item.childRoutes.forEach(r => renderRoute(r, newContextPath))
+      } else {
+        children.push(<Route key={newContextPath} component={item.component} path={newContextPath} exact />)
       }
     }
 

diff --git a/src/views/web/home/List.jsx b/src/views/web/home/List.jsx
@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
+import { calcCommentsCount } from '@/utils'
+
+// components
+import { Divider } from 'antd'
+import SvgIcon from '@/components/SvgIcon'
+import ArticleTag from '@/components/ArticleTag'
+
+const ArticleList = props => {
+  const history = useHistory()
+  const { list } = props
+
+  function jumpTo(id) {
+    history.push(`/article/${id}`)
+  }
+
+  return (
+    <ul className='app-home-list'>
+      {list.map(item => (
+        <li key={item.id} className='app-home-list-item'>
+          <Divider orientation='left'>
+            <span className='title' onClick={() => jumpTo(item.id)}>
+              {item.title}
+            </span>
+            <span className='posted-time'>{item.createdAt.slice(0, 10)}</span>
+          </Divider>
+
+          <div
+            onClick={() => jumpTo(item.id)}
+            className='article-detail content'
+            dangerouslySetInnerHTML={{ __html: item.content }}
+          />
+
+          <div className='list-item-others'>
+            <SvgIcon type='iconcomment' />
+            <span style={{ marginRight: 5 }}> {calcCommentsCount(item.comments)}</span>
+
+            <SvgIcon type='iconview' style={{ marginRight: 5 }} />
+            <span>{item.viewCount}</span>
+
+            <ArticleTag tagList={item.tags} categoryList={item.categories} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default ArticleList
diff --git a/src/views/web/home/QuickLink.jsx b/src/views/web/home/QuickLink.jsx
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+
+import { useMediaQuery } from 'react-responsive'
+
+// components
+import { Icon, Divider, Empty, Drawer, Tag, Spin } from 'antd'
+
+const title = '快速导航'
+
+const List = props => {
+  const { list, showTitle = true } = props
+  return (
+    <ul className='preview'>
+      {showTitle && <Divider>{title}</Divider>}
+      {list.map(item => (
+        <li key={item.id}>
+          <Link to={`/article/${item.id}`}>{item.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/**
+ * article quick link
+ */
+const QuickLink = props => {
+  const isGreaterThan1300 = useMediaQuery({ query: '(min-width: 1300px)' })
+  const { list } = props
+
+  const [drawerVisible, setDrawerVisible] = useState(false)
+
+  return isGreaterThan1300 ? <List list={list} /> : (
+    <>
+      <div className='drawer-btn' onClick={e => setDrawerVisible(true)}>
+        <Icon type='menu-o' className='nav-phone-icon' />
+      </div>
+      <Drawer
+        title={title}
+        placement='right'
+        closable={false}
+        onClose={e => setDrawerVisible(false)}
+        visible={drawerVisible}
+        getContainer={() => document.querySelector('.app-home')}>
+        <List list={list} showTitle={false} />
+      </Drawer>
+    </>
+  )
+}
+
+export default QuickLink
+
diff --git a/src/views/web/home/index.jsx b/src/views/web/home/index.jsx
@@ -1,64 +1,19 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import './index.less'
 
-import { Link } from 'react-router-dom'
-import { useMediaQuery } from 'react-responsive'
-import { decodeQuery, translateMarkdown, calcCommentsCount } from '@/utils'
+import { decodeQuery, translateMarkdown } from '@/utils'
 import { HOME_PAGESIZE } from '@/utils/config'
 
 // components
-import { Icon, Divider, Empty, Drawer, Tag, Spin } from 'antd'
+import QuickLink from './QuickLink'
+import ArticleList from './List'
+
+import { Empty, Spin } from 'antd'
 import Pagination from '@/components/Pagination'
-import ArticleTag from '@/components/ArticleTag'
-import SvgIcon from '@/components/SvgIcon'
 
 // hooks
 import useFetchList from '@/hooks/useFetchList'
 
-const LinkList = props => {
-  const { list, showTitle = true } = props
-  return (
-    <ul className='preview'>
-      {showTitle && <Divider>快速导航</Divider>}
-      {list.map(item => (
-        <li key={item.id}>
-          <Link to={`/article/${item.id}`}>{item.title}</Link>
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-/**
- * 快速导航
-*/
-const QuickLink = props => {
-  const isGreaterThan1300 = useMediaQuery({ query: '(min-width: 1300px)' })
-
-  const { list } = props
-
-  const [drawerVisible, setDrawerVisible] = useState(false)
-
-  return isGreaterThan1300 ? (
-    <LinkList 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')}>
-        <LinkList list={list} showTitle={false} />
-      </Drawer>
-    </>
-  )
-}
-
 const Home = props => {
   const { loading, pagination, dataList } = useFetchList({
     requestUrl: '/article/list',
@@ -74,47 +29,18 @@ const Home = props => {
     })
   }, [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'>
-        <ul className='app-home-list'>
-          {list.map(item => (
-            <li key={item.id} className='app-home-list-item'>
-              <Divider orientation='left'>
-                <span className='title' onClick={() => jumpTo(item.id)}>
-                  {item.title}
-                </span>
-                <span className='posted-time'>{item.createdAt.slice(0, 10)}</span>
-              </Divider>
-
-              <div
-                onClick={() => jumpTo(item.id)}
-                className='article-detail content'
-                dangerouslySetInnerHTML={{ __html: item.content }}
-              />
-
-              <div className='list-item-others'>
-                <SvgIcon type='iconcomment' />
-                <span style={{ marginRight: 5 }}> {calcCommentsCount(item.comments)}</span>
-
-                <SvgIcon type='iconview' style={{ marginRight: 5 }} />
-                <span>{item.viewCount}</span>
+        {/* list  */}
+        <ArticleList list={list} />
 
-                <ArticleTag tagList={item.tags} categoryList={item.categories} />
-              </div>
-            </li>
-          ))}
-        </ul>
+        {/* quick link */}
         <QuickLink list={list} />
 
-        {/* 结果为空 */}
+        {/* serach empty result */}
         {list.length === 0 && keyword && (
           <div className='no-data'>
             <Empty description={(
@@ -125,12 +51,14 @@ const Home = props => {
           </div>
         )}
 
-        <Pagination {...pagination} onChange={
-          page => {
-            document.querySelector('.app-main').scrollTop = 0
-            pagination.onChange(page)
-          }
-        } />
+        <Pagination
+          {...pagination}
+          onChange={
+            page => {
+              document.querySelector('.app-main').scrollTop = 0 // turn to the top
+              pagination.onChange(page)
+            }
+          } />
       </div>
     </Spin>
   )