Merge pull request #6719 from topcoder-platform/timeline-wall-api-issues-17

fix: side navigation doesn't work on mobile

Author: igoroshko

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

@@ -42,7 +42,7 @@ function TimelineWallContainer(props) {
   const role = 'Admin User';
   const authToken = _.get(auth, 'tokenV3');
   const isMobile = useMediaQuery({
-    query: '(max-device-width: 768px)',
+    query: '(max-width: 768px)',
   });
 
   useEffect(() => {
@@ -89,7 +89,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 +100,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' });
     }

src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx

@@ -16,7 +16,7 @@ import './styles.scss';
 import { DEFAULT_AVATAR_URL } from '../../../../../utils/url';
 
 function EventItem({
-  className, isLeft, eventItem, deleteEvent, isAdmin, userAvatars,
+  className, isLeft, eventItem, deleteEvent, isAdmin, userAvatars, idPrefix,
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [showModalPhoto, setShowModalPhoto] = useState(false);
@@ -33,7 +33,7 @@ function EventItem({
         'color-red': eventItem.color === 'red',
         'color-purple': eventItem.color === 'purple',
       })}
-      id={moment(eventItem.eventDate).format('YYYY-MM')}
+      id={`${idPrefix}${moment(eventItem.eventDate).format('YYYY-MM')}`}
     >
       {isLeft ? null : (<div styleName="dot dot-left" />)}
       {isLeft ? null : (<IconTooltipLeft styleName="tooltip-indicator" />)}
@@ -137,6 +137,7 @@ EventItem.defaultProps = {
   },
   isAdmin: false,
   userAvatars: {},
+  idPrefix: '',
 };
 
 /**
@@ -149,6 +150,7 @@ EventItem.propTypes = {
   isAdmin: PT.bool,
   userAvatars: PT.shape(),
   deleteEvent: PT.func.isRequired,
+  idPrefix: PT.string,
 };
 
 export default EventItem;

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

@@ -67,6 +67,7 @@ function Events({
             userAvatars={userAvatars}
             isAdmin={isAdmin}
             deleteEvent={deleteEvent}
+            idPrefix="desktop-"
           />
         ))}
       </div>
@@ -84,6 +85,7 @@ function Events({
             userAvatars={userAvatars}
             isAdmin={isAdmin}
             deleteEvent={deleteEvent}
+            idPrefix="desktop-"
           />
         ))}
       </div>
@@ -101,6 +103,7 @@ function Events({
             userAvatars={userAvatars}
             isAdmin={isAdmin}
             deleteEvent={deleteEvent}
+            idPrefix="mobile-"
           />
         ))}
       </div>