diff --git a/src/shared/containers/timeline-wall/index.jsx b/src/shared/containers/timeline-wall/index.jsx index ea1492f780..33d25e08d0 100644 --- a/src/shared/containers/timeline-wall/index.jsx +++ b/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' }); } diff --git a/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx b/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx index 7bfd6e6a83..2238d0d593 100644 --- a/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx +++ b/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx @@ -94,10 +94,7 @@ function ApprovalItem({ { - if (result === true) { - removeEvent(showModalDelete); - } + onClose={() => { setShowModalDelete(false); }} handle={event.createdBy} diff --git a/src/shared/containers/timeline-wall/pending-approvals/styles.scss b/src/shared/containers/timeline-wall/pending-approvals/styles.scss index 5986a9bc73..37c3472041 100644 --- a/src/shared/containers/timeline-wall/pending-approvals/styles.scss +++ b/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; } diff --git a/src/shared/containers/timeline-wall/photo-items-mobile/index.jsx b/src/shared/containers/timeline-wall/photo-items-mobile/index.jsx index 169f03620a..e194772f37 100644 --- a/src/shared/containers/timeline-wall/photo-items-mobile/index.jsx +++ b/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 ? (main) : null} + {selectedPhotoObject && !selectedPhotoObject.videoThumnailUrl ? (main) : null} {selectedPhotoObject && !!selectedPhotoObject.videoThumnailUrl ? ( main diff --git a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx index 6a000d6392..87cf8bf3f2 100644 --- a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx +++ b/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 => ( { - 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, diff --git a/src/shared/containers/timeline-wall/timeline-events/styles.scss b/src/shared/containers/timeline-wall/timeline-events/styles.scss index 1f35af6b2c..d55b957f54 100644 --- a/src/shared/containers/timeline-wall/timeline-events/styles.scss +++ b/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 {