Merge pull request #159 from yoution/issue-76

fix: issue #76

Author: LieutenantRoger

src/containers/Challenges/Listing/index.jsx

@@ -3,6 +3,7 @@ import PT from "prop-types";
 import _ from "lodash";
 import moment from "moment";
 import Panel from "../../../components/Panel";
+import ChallengeError from "../Listing/errors/ChallengeError";
 import Pagination from "../../../components/Pagination";
 import ChallengeItem from "./ChallengeItem";
 import TextInput from "../../../components/TextInput";
@@ -101,38 +102,39 @@ const Listing = ({
           </div>
         </div>
       </Panel.Header>
-      <Panel.Body>
-        {challenges.map((challenge, index) => (
-          <div key={challenge.id} styleName={index % 2 === 0 ? "even" : "odd"}>
-            <ChallengeItem
-              challenge={challenge}
-              onClickTag={(tag) => {
-                const filterChange = { tags: [tag] };
-                updateFilter(filterChange);
-              }}
-              onClickTrack={(track) => {
-                const filterChange = { tracks: [track] };
+      {challenges.length ? 
+        <Panel.Body>
+          {challenges.map((challenge, index) => (
+            <div key={challenge.id} styleName={index % 2 === 0 ? "even" : "odd"}>
+              <ChallengeItem
+                challenge={challenge}
+                onClickTag={(tag) => {
+                  const filterChange = { tags: [tag] };
+                  updateFilter(filterChange);
+                }}
+                onClickTrack={(track) => {
+                  const filterChange = { tracks: [track] };
+                  updateFilter(filterChange);
+                }}
+                isLoggedIn={isLoggedIn}
+              />
+            </div>
+          ))}
+          <div styleName="pagination">
+            <Pagination
+              length={total}
+              pageSize={perPage}
+              pageIndex={utils.pagination.pageToPageIndex(page)}
+              onChange={(event) => {
+                const filterChange = {
+                  page: utils.pagination.pageIndexToPage(event.pageIndex),
+                  perPage: event.pageSize,
+                };
                 updateFilter(filterChange);
               }}
-              isLoggedIn={isLoggedIn}
             />
           </div>
-        ))}
-        <div styleName="pagination">
-          <Pagination
-            length={total}
-            pageSize={perPage}
-            pageIndex={utils.pagination.pageToPageIndex(page)}
-            onChange={(event) => {
-              const filterChange = {
-                page: utils.pagination.pageIndexToPage(event.pageIndex),
-                perPage: event.pageSize,
-              };
-              updateFilter(filterChange);
-            }}
-          />
-        </div>
-      </Panel.Body>
+        </Panel.Body> : <ChallengeError /> }
     </Panel>
   );
 };

src/containers/Challenges/index.jsx

@@ -3,7 +3,6 @@ import PT from "prop-types";
 import { connect } from "react-redux";
 import Listing from "./Listing";
 import actions from "../../actions";
-import ChallengeError from "./Listing/errors/ChallengeError";
 // import ChallengeRecommendedError from "./Listing/errors/ChallengeRecommendedError";
 import * as constants from "../../constants";
 import IconListView from "../../assets/icons/list-view.svg";
@@ -70,8 +69,7 @@ const Challenges = ({
           </button>
         </span>
       </h1>
-      {challenges.length === 0 && initialized && <ChallengeError />}
-      {challenges.length > 0 && (
+      {initialized && (
         <>
           {/*noRecommendedChallenges && <ChallengeRecommendedError />*/}
           <Listing