Merge pull request #6697 from nursoltan-s/timeline-wall-final-fix

fix mobile thumbnail

Author: igoroshko

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

@@ -7,6 +7,7 @@ import IconCheveronDownBlue from 'assets/images/timeline-wall/cheveron-down-blue
 import { deleteEventById, approveEventById, rejectEventById } from 'services/timelineWall';
 import cn from 'classnames';
 import moment from 'moment';
+import { useMediaQuery } from 'react-responsive';
 import _ from 'lodash';
 import timelineActions from 'actions/timelineWall';
 import LoadingIndicator from 'components/LoadingIndicator';
@@ -40,6 +41,9 @@ function TimelineWallContainer(props) {
 
   const role = 'Admin User';
   const authToken = _.get(auth, 'tokenV3');
+  const isMobile = useMediaQuery({
+    query: '(max-device-width: 768px)',
+  });
 
   useEffect(() => {
     if (authToken) {
@@ -79,7 +83,7 @@ function TimelineWallContainer(props) {
 
   useEffect(() => {
     const currentYear = selectedFilterValue.year;
-    const currentMonth = selectedFilterValue.month;
+    const currentMonth = Math.max(selectedFilterValue.month, 0);
     const maxYear = 2032;
     let target;
     let date = moment(`${currentYear}-${currentMonth + 1}`).format('YYYY-MM');
@@ -96,7 +100,11 @@ function TimelineWallContainer(props) {
     if (target) {
       const yOffset = -10;
       const coordinate = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
-      window.scrollTo({ top: coordinate, behavior: 'smooth' });
+      if (isMobile) {
+        setTimeout(target.scrollTo(), 100);
+      } else {
+        window.scrollTo({ top: coordinate, behavior: 'smooth' });
+      }
     } else {
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }

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

@@ -94,10 +94,7 @@ function ApprovalItem({
         <ModalDeleteConfirmation
           id={event.id}
           eventItem={showModalDelete}
-          onClose={(result) => {
-            if (result === true) {
-              removeEvent(showModalDelete);
-            }
+          onClose={() => {
             setShowModalDelete(false);
           }}
           handle={event.createdBy}

src/shared/containers/timeline-wall/pending-approvals/styles.scss

@@ -39,4 +39,5 @@
   font-size: 18px;
   line-height: 22px;
   text-align: center;
+  margin-bottom: 32px;
 }

src/shared/containers/timeline-wall/photo-items-mobile/index.jsx

@@ -33,7 +33,7 @@ function PhotoItemsMobile({ photos, className }) {
         role="button"
         tabIndex={0}
       >
-        {selectedPhotoObject && !selectedPhotoObject.videoThumnailUrl ? (<img src={selectedPhotoObject.url} alt="main" />) : null}
+        {selectedPhotoObject && !selectedPhotoObject.videoThumnailUrl ? (<img src={selectedPhotoObject.previewUrl || selectedPhotoObject.url} alt="main" />) : null}
         {selectedPhotoObject && !!selectedPhotoObject.videoThumnailUrl ? (
           <React.Fragment>
             <img src={selectedPhotoObject.videoThumnailUrl} alt="main" />

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, removeEvent, deleteEvent, isAdmin, userAvatars,
+  className, isLeft, eventItem, deleteEvent, isAdmin, userAvatars,
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [showModalPhoto, setShowModalPhoto] = useState(false);
@@ -67,7 +67,7 @@ function EventItem({
             />
             {eventItem.mediaFiles.map(photo => (
               <PhotoVideoItem
-                styleName="photo-item hide-mobile"
+                styleName="photo-item"
                 url={photo.previewUrl || photo.url}
                 videoThumnailUrl={photo.videoThumnailUrl}
                 isUrlPhoto={!photo.videoThumnailUrl}
@@ -114,10 +114,8 @@ function EventItem({
         <ModalDeleteConfirmation
           id={eventItem.id}
           eventItem={showModalDelete}
-          onClose={(result) => {
-            if (result === true) {
-              removeEvent(showModalDelete);
-            }
+          handle={eventItem.createdBy}
+          onClose={() => {
             setShowModalDelete(false);
           }}
           deleteEvent={deleteEvent}
@@ -137,7 +135,6 @@ EventItem.defaultProps = {
     creator: {},
     media: [],
   },
-  removeEvent: () => {},
   isAdmin: false,
   userAvatars: {},
 };
@@ -149,7 +146,6 @@ EventItem.propTypes = {
   className: PT.string,
   isLeft: PT.bool,
   eventItem: PT.any,
-  removeEvent: PT.func,
   isAdmin: PT.bool,
   userAvatars: PT.shape(),
   deleteEvent: PT.func.isRequired,

src/shared/containers/timeline-wall/timeline-events/styles.scss

@@ -26,6 +26,7 @@
   font-weight: 500;
   font-size: 18px;
   line-height: 22px;
+  margin-bottom: 32px;
 }
 
 .hide-mobile {