Merge pull request #6727 from topcoder-platform/feature-timeline-wall

Merging Timeline Wall fixes to Develop branch

Author: luizrrodrigues

__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

@@ -167,7 +167,7 @@ module.exports = {
     SUBDOMAIN_PROFILE_CONFIG: [{
       groupId: '20000000', communityId: 'wipro', communityName: 'topgear', userProfile: 'https://topgear-app.wipro.com/user-details',
     }],
-    TIMELNE_EVENT_API: 'https://api.topcoder-dev.com/v5/timeline-wall',
+    TIMELINE_WALL_API: 'https://api.topcoder-dev.com/v5/timeline-wall',
   },
 
   /* Information about Topcoder user groups can be cached in various places.
@@ -465,7 +465,8 @@ module.exports = {
   PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder-dev.com',
   DICE_VERIFY_URL: 'https://accounts-auth0.topcoder-dev.com',
   TIMELINE: {
-    REJECTION_EVENT_REASONS: ['Duplicate Event'],
+    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
   },
 };

config/production.js

@@ -62,7 +62,7 @@ module.exports = {
     },
     EMAIL_VERIFY_URL: 'http://www.topcoder.com/settings/account/changeEmail',
     THRIVE_FEED: 'https://topcoder.com/api/feeds/thrive',
-    TIMELNE_EVENT_API: 'https://api.topcoder.com/v5/timeline-wall',
+    TIMELINE_WALL_API: 'https://api.topcoder.com/v5/timeline-wall',
   },
   /* Filestack configuration for uploading Submissions
    * These are for the production back end */

src/assets/images/timeline-wall/icon-arrow-right.svg

@@ -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/components/LoadingIndicator/index.jsx

@@ -1,23 +1,30 @@
-import React, { useState, useEffect } from 'react';
+import React, {
+  useState, useEffect, useRef, useMemo,
+} from 'react';
 import PT from 'prop-types';
 import { connect } from 'react-redux';
 import TopBanner from 'assets/images/timeline-wall/top-banner.png';
 import TopBannerMobile from 'assets/images/timeline-wall/top-banner-mobile.png';
 import IconCheveronDownBlue from 'assets/images/timeline-wall/cheveron-down-blue.svg';
+import IconArrowRight from 'assets/images/timeline-wall/icon-arrow-right.svg';
 import { deleteEventById, approveEventById, rejectEventById } from 'services/timelineWall';
 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,13 +43,15 @@ function TimelineWallContainer(props) {
     getAvatar,
     userAvatars,
     pendingApprovals,
+    loadingApprovals,
     uploading,
+    uploadResult,
   } = props;
 
   const role = 'Admin User';
   const authToken = _.get(auth, 'tokenV3');
   const isMobile = useMediaQuery({
-    query: '(max-device-width: 768px)',
+    query: '(max-width: 768px)',
   });
 
   useEffect(() => {
@@ -54,9 +63,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(() => {
@@ -71,7 +96,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) {
@@ -89,7 +114,7 @@ function TimelineWallContainer(props) {
     let date = moment(`${currentYear}-${currentMonth + 1}`).format('YYYY-MM');
 
     while (!target) {
-      target = document.getElementById(`${moment(date).year()}-${(moment(date).month()).toString().padStart(2, '0')}`);
+      target = document.getElementById(`${isMobile ? 'mobile-' : 'desktop-'}${moment(date).year()}-${(moment(date).month()).toString().padStart(2, '0')}`);
 
       if (target || !moment(date).isValid() || moment(date).year() > maxYear) {
         break;
@@ -100,11 +125,7 @@ function TimelineWallContainer(props) {
     if (target) {
       const yOffset = -10;
       const coordinate = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
-      if (isMobile) {
-        setTimeout(target.scrollTo(), 100);
-      } else {
-        window.scrollTo({ top: coordinate, behavior: 'smooth' });
-      }
+      window.scrollTo({ top: coordinate, behavior: 'smooth' });
     } else {
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }
@@ -137,10 +158,23 @@ function TimelineWallContainer(props) {
   };
 
   const sortedEvents = _.orderBy(events, ['eventDate'], ['desc']);
+  const shouldShowDiscuss = useMemo(() => {
+    if (tab !== 0) {
+      return false;
+    }
+    if (isAdmin) {
+      return !isMobile;
+    }
+    return true;
+  }, [isAdmin, isMobile, tab]);
 
   return (
     <div styleName="container">
-      <div styleName={isAdmin ? 'header header-admin' : 'header'}>
+      <div styleName={cn('header', {
+        'header-admin': isAdmin,
+        'header-with-discuss': shouldShowDiscuss,
+      })}
+      >
         <img src={TopBanner} alt="top-banner" styleName="header-bg hide-mobile" />
         <img src={TopBannerMobile} alt="top-banner" styleName="header-bg hide-desktop show-mobile" />
 
@@ -170,6 +204,16 @@ function TimelineWallContainer(props) {
           </div>
         ) : (<h1 styleName="header-content-1">Topcoder Timeline Wall</h1>)}
 
+        {shouldShowDiscuss ? (
+          <button
+            type="button"
+            styleName="btn-discuss"
+          >
+            <span>DISCUSS</span>
+            <IconArrowRight />
+          </button>
+        ) : null}
+
         <button
           onClick={() => {
             setShowRightFilterMobile(true);
@@ -203,12 +247,15 @@ function TimelineWallContainer(props) {
             getAvatar={getAvatar}
             userAvatars={userAvatars}
             uploading={uploading}
+            uploadResult={uploadResult}
             deleteEvent={deleteEvent}
           />
           <React.Fragment>
             {
-              loading ? (
-                <LoadingIndicator />
+              loadingApprovals ? (
+                <LoadingIndicator
+                  styleName={cn({ hide: tab === 0 })}
+                />
               ) : (
                 <PendingApprovals
                   events={pendingApprovals}
@@ -234,7 +281,9 @@ TimelineWallContainer.defaultProps = {
   auth: null,
   isAdmin: false,
   loading: false,
+  loadingApprovals: false,
   uploading: false,
+  uploadResult: '',
   events: [],
   userAvatars: {},
   pendingApprovals: [],
@@ -247,7 +296,9 @@ 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()),
   loadUserDetails: PT.func.isRequired,
   createNewEvent: PT.func.isRequired,
@@ -264,10 +315,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/containers/timeline-wall/index.jsx

@@ -6,7 +6,11 @@ import LoadingIndicator from 'components/LoadingIndicator';
 
 import style from './styles.scss';
 
-function ModalEventAdd({ onClose, isAdmin, uploading }) {
+function ModalEventAdd({
+  onClose, isAdmin, uploading, uploadResult,
+}) {
+  const successMessage = !isAdmin ? 'Thank you! Your event was submitted for review. You’ll receive an email once the review is completed'
+    : 'Thank you! Your event was added to the Timeline Wall.';
   return (
     <Modal
       theme={{ container: style.container, overlay: style.overlay }}
@@ -22,8 +26,7 @@ function ModalEventAdd({ onClose, isAdmin, uploading }) {
         ) : (
           <span styleName="text-description">
             {
-              !isAdmin ? 'Thank you! Your event was submitted for review. You’ll receive an email once the review is completed'
-                : 'Thank you! Your event was added to the Timeline Wall.'
+              uploadResult || successMessage
             }
           </span>
         )
@@ -56,6 +59,7 @@ ModalEventAdd.defaultProps = {
   onClose: () => { },
   isAdmin: false,
   uploading: false,
+  uploadResult: '',
 };
 
 /**
@@ -65,6 +69,7 @@ ModalEventAdd.propTypes = {
   onClose: PT.func,
   isAdmin: PT.bool,
   uploading: PT.bool,
+  uploadResult: PT.string,
 };
 
 export default ModalEventAdd;

src/shared/containers/timeline-wall/modal-event-add/index.jsx

@@ -35,7 +35,13 @@ function ApprovalItem({
               <span styleName="text-date">{moment(event.eventDate).format('MMM DD, YYYY')}</span>
               <div styleName="separator" />
               <img width="24" height="24" src={photoURL} alt="avatar" />
-              <span styleName="text-handle">{event.createdBy}</span>
+              <a
+                href={`${window.origin}/members/${event.createdBy}`}
+                target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
+                rel="noopener noreferrer"
+                styleName="text-handle"
+              >{event.createdBy}
+              </a>
             </div>
             <span styleName="text-date">Submitted date: {moment(event.submitedDate).format('MMM DD, YYYY')}</span>
           </div>

src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx

@@ -17,10 +17,16 @@
   @media (max-width: 768px) {
     min-height: 190px;
   }
-}
 
-.header-admin {
-  min-height: 207px;
+  &.header-with-discuss {
+    @media (max-width: 768px) {
+      min-height: 214px;
+    }
+  }
+
+  &.header-admin {
+    min-height: 207px;
+  }
 }
 
 .header-content-1 {
@@ -68,6 +74,40 @@
   display: none !important;
 }
 
+.btn-discuss {
+  margin-top: 11px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 33px;
+  left: 1408px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: white;
+
+  @media (max-width: 1500px) {
+    left: unset;
+    right: 0;
+  }
+
+  @media (max-width: 768px) {
+    position: relative;
+    right: unset;
+    top: 0;
+    margin-left: 27px;
+  }
+
+  span {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 16px;
+    margin-right: 4px;
+  }
+}
+
 .tab-item {
   border: none;
   background-color: transparent;