fix: approvals number should increase automatically

Author: suppermancool

__tests__/shared/components/tc-communities/__snapshots__/JoinCommunity.jsx.snap

@@ -65,6 +65,7 @@ exports[`Matches shallow shapshot 2`] = `
         Joining...
       </span>
       <ThemedLoadingIndicator
+        className=""
         composeAdhocTheme="deeply"
         composeContextTheme="softly"
         mapThemrProps={[Function]}

config/default.js

@@ -467,5 +467,6 @@ module.exports = {
   TIMELINE: {
     REJECTION_EVENT_REASONS: ['Duplicate Event', 'Violates the Topcoder terms', 'Inaccurate or Invalid'],
     ALLOWED_FILETYPES: ['image/jpeg', 'image/png', 'video/mp4', 'video/x-msvideo', 'video/webm'],
+    FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL: 5 * 60 * 1000, // 5 minutes
   },
 };

src/shared/components/LoadingIndicator/index.jsx

@@ -8,11 +8,12 @@
 import PT from 'prop-types';
 import React from 'react';
 import { themr } from 'react-css-super-themr';
+import cn from 'classnames';
 import style from './styles.scss';
 
-const LoadingIndicator = ({ theme }) => (
+const LoadingIndicator = ({ theme, className }) => (
   <svg
-    className={theme.container}
+    className={cn(theme.container, className)}
     viewBox="0 0 64 64"
   >
     <circle
@@ -32,8 +33,13 @@ const LoadingIndicator = ({ theme }) => (
   </svg>
 );
 
+LoadingIndicator.defaultProps = {
+  className: '',
+};
+
 LoadingIndicator.propTypes = {
   theme: PT.shape().isRequired,
+  className: PT.string,
 };
 
 export default themr('LoadingIndicator', style)(LoadingIndicator);

src/shared/containers/timeline-wall/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PT from 'prop-types';
 import { connect } from 'react-redux';
 import TopBanner from 'assets/images/timeline-wall/top-banner.png';
@@ -9,15 +9,19 @@ import cn from 'classnames';
 import moment from 'moment';
 import { useMediaQuery } from 'react-responsive';
 import _ from 'lodash';
+import { config } from 'topcoder-react-utils';
 import timelineActions from 'actions/timelineWall';
 import LoadingIndicator from 'components/LoadingIndicator';
 import TimelineEvents from './timeline-events';
 import PendingApprovals from './pending-approvals';
 
 import './styles.scss';
 
+
+const FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL = _.get(config, 'TIMELINE.FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL', 0);
 function TimelineWallContainer(props) {
   const [tab, setTab] = useState(0);
+  const fetchingApprovalsInterval = useRef(null);
   const [showRightFilterMobile, setShowRightFilterMobile] = useState(false);
   const [selectedFilterValue, setSelectedFilterValue] = useState({
     year: 0,
@@ -36,6 +40,7 @@ function TimelineWallContainer(props) {
     getAvatar,
     userAvatars,
     pendingApprovals,
+    loadingApprovals,
     uploading,
     uploadResult,
   } = props;
@@ -55,9 +60,25 @@ function TimelineWallContainer(props) {
   }, []);
 
   useEffect(() => {
-    if (authToken && isAdmin && !pendingApprovals.length) {
+    if (fetchingApprovalsInterval.current) {
+      clearInterval(fetchingApprovalsInterval.current);
+      fetchingApprovalsInterval.current = null;
+    }
+    if (authToken && isAdmin) {
       getPendingApprovals(authToken);
+      if (FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL) {
+        fetchingApprovalsInterval.current = setInterval(() => {
+          getPendingApprovals(authToken);
+        }, FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL);
+      }
     }
+
+    return () => {
+      if (fetchingApprovalsInterval.current) {
+        clearInterval(fetchingApprovalsInterval.current);
+        fetchingApprovalsInterval.current = null;
+      }
+    };
   }, [isAdmin]);
 
   useEffect(() => {
@@ -72,7 +93,7 @@ function TimelineWallContainer(props) {
   }, [events]);
 
   useEffect(() => {
-    if ((pendingApprovals || []).length) {
+    if (pendingApprovals.length) {
       _.uniqBy(pendingApprovals, 'createdBy').forEach((eventItem) => {
         const photoURL = _.get(userAvatars, eventItem.createdBy);
         if (!photoURL) {
@@ -205,8 +226,10 @@ function TimelineWallContainer(props) {
           />
           <React.Fragment>
             {
-              loading ? (
-                <LoadingIndicator />
+              loadingApprovals ? (
+                <LoadingIndicator
+                  styleName={cn({ hide: tab === 0 })}
+                />
               ) : (
                 <PendingApprovals
                   events={pendingApprovals}
@@ -232,6 +255,7 @@ TimelineWallContainer.defaultProps = {
   auth: null,
   isAdmin: false,
   loading: false,
+  loadingApprovals: false,
   uploading: false,
   uploadResult: '',
   events: [],
@@ -246,6 +270,7 @@ TimelineWallContainer.propTypes = {
   auth: PT.shape(),
   isAdmin: PT.bool,
   loading: PT.bool,
+  loadingApprovals: PT.bool,
   uploading: PT.bool,
   uploadResult: PT.string,
   events: PT.arrayOf(PT.shape()),
@@ -264,11 +289,13 @@ const mapStateToProps = state => ({
   },
   isAdmin: state.timelineWall.isAdmin,
   loading: state.timelineWall.loading,
+  loadingApprovals: state.timelineWall.loadingApprovals
+    && !(state.timelineWall.pendingApprovals || []).length,
   uploading: state.timelineWall.uploading,
   uploadResult: state.timelineWall.uploadResult,
   events: state.timelineWall.events,
   userAvatars: state.timelineWall.userAvatars,
-  pendingApprovals: state.timelineWall.pendingApprovals,
+  pendingApprovals: state.timelineWall.pendingApprovals || [],
 });
 
 function mapDispatchToProps(dispatch) {

src/shared/reducers/timelineWall.js

@@ -60,8 +60,7 @@ function onEventsDone(state, { payload }) {
 function onPendingApprovalInit(state) {
   return {
     ...state,
-    loading: true,
-    pendingApprovals: [],
+    loadingApprovals: true,
   };
 }
 
@@ -74,7 +73,7 @@ function onPendingApprovalDone(state, { payload }) {
   const approvals = _.isArray(payload) ? payload : [];
   return {
     ...state,
-    loading: false,
+    loadingApprovals: false,
     pendingApprovals: approvals,
   };
 }