fix: review opp numbers a little while

Author: dedywahyudi

__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap

@@ -67,6 +67,7 @@ exports[`Matches shallow shapshot 2`] = `
           expanding={false}
           isAuth={false}
           isReviewer={false}
+          loading={true}
           past={false}
         />
       </div>

__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap

@@ -13,6 +13,7 @@ exports[`Matches shallow shapshot 1`] = `
       disabled={false}
       expanding={false}
       isAuth={false}
+      loading={true}
       past={false}
       selectBucket={[MockFunction]}
     />
@@ -36,6 +37,7 @@ exports[`Matches shallow shapshot 2`] = `
       disabled={false}
       expanding={false}
       isAuth={false}
+      loading={true}
       past={false}
       selectBucket={[MockFunction]}
     />

src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/index.jsx

@@ -20,6 +20,7 @@ function Bucket({
   onClick,
   // allActiveChallengesLoaded,
   meta,
+  loading,
 }) {
   // let countEl;
   // if (!disabled) { // !bucket.hideCount &&
@@ -93,7 +94,7 @@ function Bucket({
         }}
       />
       <span styleName="bucketName">{BUCKET_DATA[bucket].name}</span>
-      {(bucket !== BUCKETS.ALL && count > 0) ? <span styleName="count">{count}</span> : null}
+      {(bucket !== BUCKETS.ALL && count > 0 && !loading) ? <span styleName="count">{count}</span> : null}
     </div>
   );
 }
@@ -103,6 +104,7 @@ Bucket.defaultProps = {
   disabled: false,
   onClick: _.noop,
   meta: {},
+  loading: true,
 };
 
 Bucket.propTypes = {
@@ -119,6 +121,7 @@ Bucket.propTypes = {
   onClick: PT.func,
   meta: PT.shape(),
   // allActiveChallengesLoaded: PT.bool.isRequired,
+  loading: PT.bool,
 };
 
 const mapStateToProps = (state) => {

src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx

@@ -36,6 +36,7 @@ export default function BucketSelector({
   // setEditSavedFiltersMode,
   past,
   auth,
+  loading,
 }) {
   // let filteredChallenges = challenges.filter(Filter.getFilterFunction(filterState));
 
@@ -59,6 +60,7 @@ export default function BucketSelector({
           document.body.scrollTop = 0;
           document.documentElement.scrollTop = 0;
         }}
+        loading={loading}
       />
     );
   };
@@ -144,6 +146,7 @@ BucketSelector.defaultProps = {
   isAuth: false,
   expanding: false,
   past: false,
+  loading: true,
 };
 
 BucketSelector.propTypes = {
@@ -168,4 +171,5 @@ BucketSelector.propTypes = {
   // selectSavedFilter: PT.func.isRequired,
   // setEditSavedFiltersMode: PT.func.isRequired,
   past: PT.bool,
+  loading: PT.bool,
 };

src/shared/components/challenge-listing/Sidebar/index.jsx

@@ -53,6 +53,7 @@ export default function SideBarFilters({
   // updateSavedFilter,
   // setFilter,
   setFilterState,
+  loading,
 }) {
   const past = isPastBucket(activeBucket);
 
@@ -120,6 +121,7 @@ export default function SideBarFilters({
           // selectSavedFilter={selectSavedFilter}
           // setEditSavedFiltersMode={setEditSavedFiltersMode}
           past={past}
+          loading={loading}
         />
         {/* )} */}
       </div>
@@ -168,4 +170,5 @@ SideBarFilters.propTypes = {
   // updateSavedFilter: PT.func.isRequired,
   // setFilter: PT.func.isRequired,
   setFilterState: PT.func.isRequired,
+  loading: PT.bool.isRequired,
 };

src/shared/components/challenge-listing/index.jsx

@@ -175,6 +175,9 @@ export default function ChallengeListing(props) {
           <Sidebar
             expanding={expanding}
             setFilterState={props.setFilterState}
+            loadingMyChallenges={props.loadingMyChallenges}
+            loadingOpenForRegistrationChallenges={props.loadingOpenForRegistrationChallenges}
+            loadingReviewOpportunities={props.loadingReviewOpportunities}
           />
 
           <FilterPanel

src/shared/containers/challenge-listing/Listing/index.jsx

@@ -64,6 +64,7 @@ export class ListingContainer extends React.Component {
       selectCommunity,
       queryBucket,
       filter,
+      getReviewOpportunities,
     } = this.props;
 
     markHeaderMenu();
@@ -105,6 +106,8 @@ export class ListingContainer extends React.Component {
       });
     }
     // }
+
+    getReviewOpportunities(0, auth.tokenV3);
   }
 
   componentDidUpdate(prevProps) {
@@ -138,6 +141,7 @@ export class ListingContainer extends React.Component {
       loading,
       setFilter,
     } = this.props;
+
     const oldUserId = _.get(prevProps, 'auth.user.userId');
     const userId = _.get(this.props, 'auth.user.userId');
     const handle = _.get(auth, 'user.handle');
@@ -347,7 +351,6 @@ export class ListingContainer extends React.Component {
       getMyPastChallenges,
       getAllChallenges,
       getPastChallenges,
-      getReviewOpportunities,
       // lastRequestedPageOfActiveChallenges,
       // lastRequestedPageOfOpenForRegistrationChallenges,
       // lastRequestedPageOfMyChallenges,
@@ -405,7 +408,6 @@ export class ListingContainer extends React.Component {
       f.front,
     );
     getTotalChallengesCount(auth.tokenV3, f.front);
-    getReviewOpportunities(0, auth.tokenV3);
   }
 
   reloadChallenges() {

src/shared/containers/challenge-listing/Sidebar.jsx

@@ -71,6 +71,12 @@ export class SidebarContainer extends React.Component {
     // userChallenges,
     // } = this.props;
 
+    const {
+      loadingMyChallenges,
+      loadingOpenForRegistrationChallenges,
+      loadingReviewOpportunities,
+    } = this.props;
+
     const {
       previousBucketOfActiveTab,
       previousBucketOfPastChallengesTab,
@@ -98,6 +104,10 @@ export class SidebarContainer extends React.Component {
 
     // const savedFilters = checkFilterErrors(origSavedFilters, updatedCommunityFilters);
 
+    const loading = loadingMyChallenges
+    || loadingOpenForRegistrationChallenges
+    || loadingReviewOpportunities;
+
     return (
       <Sidebar
         {...this.props}
@@ -126,6 +136,7 @@ export class SidebarContainer extends React.Component {
         setPreviousBucketOfPastChallengesTab={(bucket) => {
           this.setState({ previousBucketOfPastChallengesTab: bucket });
         }}
+        loading={loading}
       />
     );
   }
@@ -160,6 +171,9 @@ SidebarContainer.propTypes = {
   // user: PT.shape(),
   // userChallenges: PT.arrayOf(PT.string),
   expanding: PT.bool,
+  loadingMyChallenges: PT.bool.isRequired,
+  loadingOpenForRegistrationChallenges: PT.bool.isRequired,
+  loadingReviewOpportunities: PT.bool.isRequired,
 };
 
 function mapDispatchToProps(dispatch) {