🎨 Improving format of the code.

src/layouts/index.js

@@ -45,8 +45,10 @@ class Layout extends Component {
   }
 
   loadCatalog = async language => {
-    const catalog = await import(/* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
-    `@lingui/loader!../locales/${language}/messages.json`)
+    const catalog = await import(
+      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
+      `@lingui/loader!../locales/${language}/messages.json`
+    )
 
     this.setState(state => ({
       catalogs: {

src/pages/dashboard/components/numberCard.js

@@ -22,7 +22,7 @@ function NumberCard({ icon, color, title, number, countUp }) {
             useEasing
             useGrouping
             separator=","
-            {...countUp || {}}
+            {...(countUp || {})}
           />
         </p>
       </div>

src/pages/post/index.js

@@ -18,12 +18,23 @@ const EnumPostStatus = {
 @withI18n()
 @connect(({ post, loading }) => ({ post, loading }))
 class Post extends PureComponent {
-  render() {
-    const { post, loading, location, i18n } = this.props
+  handleTabClick = key => {
+    const { pathname } = this.props.location
+
+    router.push({
+      pathname,
+      search: stringify({
+        status: key,
+      }),
+    })
+  }
+
+  get listProps() {
+    const { post, loading, location } = this.props
     const { list, pagination } = post
     const { query, pathname } = location
 
-    const listProps = {
+    return {
       pagination,
       dataSource: list,
       loading: loading.effects['post/query'],
@@ -38,15 +49,11 @@ class Post extends PureComponent {
         })
       },
     }
+  }
 
-    const handleTabClick = key => {
-      router.push({
-        pathname,
-        search: stringify({
-          status: key,
-        }),
-      })
-    }
+  render() {
+    const { location, i18n } = this.props
+    const { query } = location
 
     return (
       <Page inner>
@@ -56,19 +63,19 @@ class Post extends PureComponent {
               ? String(EnumPostStatus.UNPUBLISH)
               : String(EnumPostStatus.PUBLISHED)
           }
-          onTabClick={handleTabClick}
+          onTabClick={this.handleTabClick}
         >
           <TabPane
             tab={i18n.t`Publised`}
             key={String(EnumPostStatus.PUBLISHED)}
           >
-            <List {...listProps} />
+            <List {...this.listProps} />
           </TabPane>
           <TabPane
             tab={i18n.t`Unpublished`}
             key={String(EnumPostStatus.UNPUBLISH)}
           >
-            <List {...listProps} />
+            <List {...this.listProps} />
           </TabPane>
         </Tabs>
       </Page>

src/pages/user/index.js

@@ -29,19 +29,30 @@ class User extends PureComponent {
     })
   }
 
-  render() {
-    const { location, dispatch, user, loading, i18n } = this.props
-    const { query } = location
-    const {
-      list,
-      pagination,
-      currentItem,
-      modalVisible,
-      modalType,
-      selectedRowKeys,
-    } = user
+  handleDeleteItems = () => {
+    const { dispatch, user } = this.props
+    const { list, pagination, selectedRowKeys } = user
 
-    const modalProps = {
+    dispatch({
+      type: 'user/multiDelete',
+      payload: {
+        ids: selectedRowKeys,
+      },
+    }).then(() => {
+      this.handleRefresh({
+        page:
+          list.length === selectedRowKeys.length && pagination.current > 1
+            ? pagination.current - 1
+            : pagination.current,
+      })
+    })
+  }
+
+  get modalProps() {
+    const { dispatch, user, loading, i18n } = this.props
+    const { currentItem, modalVisible, modalType } = user
+
+    return {
       item: modalType === 'create' ? {} : currentItem,
       visible: modalVisible,
       destroyOnClose: true,
@@ -65,8 +76,13 @@ class User extends PureComponent {
         })
       },
     }
+  }
 
-    const listProps = {
+  get listProps() {
+    const { dispatch, user, loading } = this.props
+    const { list, pagination, selectedRowKeys } = user
+
+    return {
       dataSource: list,
       loading: loading.effects['user/query'],
       pagination,
@@ -110,8 +126,13 @@ class User extends PureComponent {
         },
       },
     }
+  }
 
-    const filterProps = {
+  get filterProps() {
+    const { location, dispatch } = this.props
+    const { query } = location
+
+    return {
       filter: {
         ...query,
       },
@@ -129,26 +150,15 @@ class User extends PureComponent {
         })
       },
     }
+  }
 
-    const handleDeleteItems = () => {
-      dispatch({
-        type: 'user/multiDelete',
-        payload: {
-          ids: selectedRowKeys,
-        },
-      }).then(() => {
-        this.handleRefresh({
-          page:
-            list.length === selectedRowKeys.length && pagination.current > 1
-              ? pagination.current - 1
-              : pagination.current,
-        })
-      })
-    }
+  render() {
+    const { user } = this.props
+    const { selectedRowKeys } = user
 
     return (
       <Page inner>
-        <Filter {...filterProps} />
+        <Filter {...this.filterProps} />
         {selectedRowKeys.length > 0 && (
           <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
             <Col>
@@ -156,7 +166,7 @@ class User extends PureComponent {
               <Popconfirm
                 title="Are you sure delete these items?"
                 placement="left"
-                onConfirm={handleDeleteItems}
+                onConfirm={this.handleDeleteItems}
               >
                 <Button type="primary" style={{ marginLeft: 8 }}>
                   Remove
@@ -165,8 +175,8 @@ class User extends PureComponent {
             </Col>
           </Row>
         )}
-        <List {...listProps} />
-        <Modal {...modalProps} />
+        <List {...this.listProps} />
+        <Modal {...this.modalProps} />
       </Page>
     )
   }