fix: Home page loading data and card animation (#664)

Author: sunnywx

src/components/AppList/index.jsx

@@ -26,7 +26,11 @@ export default class AppList extends PureComponent {
 
   getSearchTitle() {
     const { search, title, t } = this.props;
-    return (search && t('search_results')) || title || t('Newest');
+    if (search) {
+      return t('search_results');
+    }
+
+    return title || t('Newest');
   }
 
   render() {

src/components/Card/index.scss

@@ -3,6 +3,7 @@
 .card {
    float: left;
    display: inline-block;
+   position: relative;
    width: $app-card-width;
    height: $app-card-height;
    padding: 40px 20px 20px;
@@ -14,6 +15,7 @@
    text-align: center;
    box-shadow: 0 1px 4px 0 rgba(73, 33, 173, 0.06), 0 4px 8px 0 rgba(35, 35, 36, 0.04);
    cursor: pointer;
+   overflow: hidden;
 
   .label {
     font-size: $size-small;
@@ -25,8 +27,14 @@
     }
   }
 
-  .toggleCard{
-    display: none;
+  .toggleCard, .basicCard{
+    position: relative;
+    left: 0;
+    transition: all .3s ease-in-out;
+  }
+
+  .toggleCard {
+    top: -1000px;
   }
 
   // mimic toggle card effect
@@ -37,13 +45,12 @@
       box-shadow: 0 0 8px 0 rgba(119, 133, 146, 0.04), 0 3px 4px 0 rgba(134, 145, 156, 0.04);
 
       .basicCard {
-        display: none;
+        top: -1000px;
       }
 
       .toggleCard {
-        display: block;
+        top: -132px;
         text-align: left;
-        transition: all .3s ease-in-out;
 
         .title {
           .icon {
@@ -67,8 +74,9 @@
             margin-left: 8px;
             font-weight: bold;
             color: $N500;
-            width: auto;
+            width: 170px;
             @include textCut;
+            word-break: break-word;
           }
         }
         .desc{

src/pages/Home/SearchBox/index.jsx

@@ -12,7 +12,10 @@ import styles from './index.scss';
 
 @translate()
 @withRouter
-@inject('rootStore')
+@inject(({ rootStore }) => ({
+  rootStore,
+  appStore: rootStore.appStore
+}))
 @observer
 export default class SearchBox extends React.Component {
   static propTypes = {
@@ -25,8 +28,10 @@ export default class SearchBox extends React.Component {
   };
 
   onClearSearch = () => {
-    this.props.rootStore.setSearchWord('');
-    this.props.history.push('/');
+    const { rootStore, appStore, history } = this.props;
+    appStore.currentPage = 1;
+    rootStore.setSearchWord('');
+    history.push('/');
   };
 
   render() {
@@ -37,7 +42,7 @@ export default class SearchBox extends React.Component {
       <Input.Search
         className={classnames(styles.search, className)}
         placeholder={t('search.placeholder')}
-        value={getUrlParam('q') || searchWord}
+        value={searchWord || getUrlParam('q')}
         onSearch={this.onSearch}
         onClear={this.onClearSearch}
       />

src/pages/Home/index.jsx

@@ -1,16 +1,16 @@
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
 import classnames from 'classnames';
 import { observer, inject } from 'mobx-react';
 import _ from 'lodash';
 import { translate } from 'react-i18next';
 
-import { Icon, Notification } from 'components/Base';
+import { Icon } from 'components/Base';
 import Layout, { TitleBanner } from 'components/Layout';
 import AppList from 'components/AppList';
 import Loading from 'components/Loading';
 import InfiniteScroll from 'components/InfiniteScroll';
 
-import { getScrollTop, getScrollBottom } from 'utils';
+import { getScrollTop } from 'utils';
 import { getUrlParam } from 'utils/url';
 
 import styles from './index.scss';
@@ -29,36 +29,42 @@ export default class Home extends Component {
   static isHome = true;
 
   state = {
-    pageLoading: true
+    pageLoading: true,
+    cate: ''
   };
 
   get searchWord() {
-    return getUrlParam('q');
+    return this.props.search || getUrlParam('q');
+  }
+
+  get category() {
+    return this.state.cate || getUrlParam('cate');
   }
 
   async componentDidMount() {
-    const {
-      rootStore, appStore, categoryStore, match
-    } = this.props;
-    const { category } = match.params;
+    const { rootStore, appStore, categoryStore } = this.props;
+
+    rootStore.setNavFix(Boolean(this.category || this.searchWord));
 
-    rootStore.setNavFix(Boolean(category || this.searchWord));
-    if (!(category || this.searchWord)) {
+    if (!(this.category || this.searchWord)) {
       this.threshold = this.getThreshold();
-      window.onscroll = _.throttle(this.handleScroll, 100);
+      window.onscroll = _.debounce(this.handleScroll, 100);
     }
     window.scroll({ top: 0 });
 
-    await categoryStore.fetchAll();
+    await categoryStore.fetchAll({ noLimit: true });
     await appStore.fetchStoreAppsCount();
 
     // always fetch active apps
-    appStore.selectStatus = 'active';
+    Object.assign(appStore, {
+      selectStatus: 'active',
+      currentPage: 1
+    });
 
-    if (this.searchWord || category) {
+    if (this.searchWord || (this.category && this.category !== cateLatest)) {
       await appStore.fetchAll({
         search_word: this.searchWord,
-        category_id: category
+        category_id: this.category
       });
     } else {
       await appStore.fetchActiveApps();
@@ -69,30 +75,34 @@ export default class Home extends Component {
     });
   }
 
-  async componentDidUpdate(prevProps) {
-    const { match, appStore, search } = this.props;
-    const { category } = match.params;
+  async componentDidUpdate(prevProps, prevState) {
+    const { appStore, search } = this.props;
+    const { cate } = this.state;
 
-    if (prevProps.match.params.category !== category) {
-      if (category === cateLatest) {
-        await appStore.fetchActiveApps({
-          search_word: this.searchWord
-        });
+    appStore.showActiveApps = this.category === cateLatest;
+
+    if (prevState.cate !== cate) {
+      appStore.currentPage = 1;
+      // reset search wd
+      appStore.searchWord = '';
+      if (cate === cateLatest) {
+        await appStore.fetchActiveApps();
       } else {
-        // reset search wd
-        appStore.searchWord = '';
         await appStore.fetchAll({
-          category_id: category
+          category_id: cate
         });
       }
     }
 
     if (prevProps.search !== search) {
       appStore.searchWord = search;
-      if (search) {
-        await appStore.fetchAll();
-      } else {
+      appStore.currentPage = 1;
+
+      if (!search) {
+        this.setState({ cate: cateLatest });
         await appStore.fetchActiveApps();
+      } else {
+        await appStore.fetchAll();
       }
     }
   }
@@ -115,7 +125,7 @@ export default class Home extends Component {
   }
 
   handleScroll = async () => {
-    const { rootStore, appStore, categoryStore } = this.props;
+    const { rootStore } = this.props;
     const { fixNav } = rootStore;
     if (this.threshold <= 0) {
       return;
@@ -128,20 +138,22 @@ export default class Home extends Component {
     } else if (!needFixNav && fixNav) {
       rootStore.setNavFix(false);
     }
-
-    // todo
   };
 
-  handleClickCate = cate_id => {
-    this.props.history.push(`/cat/${cate_id}`);
+  handleClickCate = cate => {
+    const { rootStore, history } = this.props;
+
+    this.setState({
+      cate
+    });
+    rootStore.setNavFix(true);
+    rootStore.setSearchWord();
+    history.push(`/?cate=${cate}`);
   };
 
   renderCateMenu() {
-    const {
-      match, categoryStore, rootStore, t
-    } = this.props;
+    const { categoryStore, rootStore, t } = this.props;
     const { categories } = categoryStore;
-    const { category } = match.params;
 
     return (
       <div
@@ -155,7 +167,7 @@ export default class Home extends Component {
             <li
               key={cateLatest}
               className={classnames(styles.item, {
-                [styles.active]: category === cateLatest
+                [styles.active]: this.category === cateLatest
               })}
               onClick={() => this.handleClickCate(cateLatest)}
             >
@@ -172,7 +184,7 @@ export default class Home extends Component {
               <li
                 key={category_id}
                 className={classnames(styles.item, {
-                  [styles.active]: category === category_id
+                  [styles.active]: this.category === category_id
                 })}
                 onClick={() => this.handleClickCate(category_id)}
               >
@@ -193,7 +205,7 @@ export default class Home extends Component {
 
   render() {
     const {
-      rootStore, appStore, categoryStore, match, t
+      rootStore, appStore, categoryStore, t
     } = this.props;
     const { pageLoading } = this.state;
     const { fixNav } = rootStore;
@@ -203,13 +215,12 @@ export default class Home extends Component {
       isLoading,
       hasMore,
       currentPage,
-      loadMoreHomeApps,
+      loadMore,
       countStoreApps
     } = appStore;
     const { categories } = categoryStore;
-    const { category } = match.params;
     const categoryTitle = _.get(
-      _.find(categories, { category_id: category }),
+      _.find(categories, { category_id: this.category }),
       'name',
       ''
     );
@@ -231,9 +242,9 @@ export default class Home extends Component {
             <InfiniteScroll
               className={styles.apps}
               pageStart={currentPage}
-              loadMore={loadMoreHomeApps}
+              loadMore={loadMore}
               isLoading={isLoading}
-              hasMore={Boolean(category || this.searchWord) && hasMore}
+              hasMore={Boolean(this.category || this.searchWord) && hasMore}
             >
               <AppList
                 apps={apps}

src/routes/index.js

@@ -13,7 +13,7 @@ const AppDetail = lazy(() => import('../pages/AppDetail'));
 
 const routes = {
   '/': Home,
-  '/cat/:category': Home,
+
   '/apps/:appId': [AppDetail, { applyHome: true }],
 
   '/login': Login,