From 9fc49c2fe550b3dae2f9c9adefc9fb7e15b4bb48 Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Wed, 13 Jan 2021 14:57:04 -0300 Subject: [PATCH] MM-31764 Fix image attachment layout when permanent sidebar is visible (#5115) --- .../file_attachment_list/file_attachment_list.js | 9 ++++----- app/components/image_viewport.js | 6 ++++-- app/components/sidebars/main/main_sidebar.ios.js | 1 + app/components/sidebars/main/main_sidebar.test.js | 2 +- app/init/{device.js => device.ts} | 8 +++++--- app/init/global_event_handler.js | 2 ++ app/mattermost.js | 3 ++- packager/moduleNames.js | 2 +- packager/modules.android.js | 2 +- packager/modules.ios.js | 2 +- 10 files changed, 22 insertions(+), 15 deletions(-) rename app/init/{device.js => device.ts} (65%) diff --git a/app/components/file_attachment_list/file_attachment_list.js b/app/components/file_attachment_list/file_attachment_list.js index 9db9708e2..8a52301f8 100644 --- a/app/components/file_attachment_list/file_attachment_list.js +++ b/app/components/file_attachment_list/file_attachment_list.js @@ -34,10 +34,6 @@ export default class FileAttachmentList extends ImageViewPort { constructor(props) { super(props); - this.state = { - inViewPort: false, - }; - this.filesForGallery = this.getFilesForGallery(props); this.buildGalleryFiles().then((results) => { @@ -46,6 +42,7 @@ export default class FileAttachmentList extends ImageViewPort { } componentDidMount() { + super.componentDidMount(); this.onScrollEnd = DeviceEventEmitter.addListener('scrolled', (viewableItems) => { if (this.props.postId in viewableItems) { this.setState({ @@ -65,6 +62,7 @@ export default class FileAttachmentList extends ImageViewPort { } componentWillUnmount() { + super.componentWillUnmount(); if (this.onScrollEnd && this.onScrollEnd.remove) { this.onScrollEnd.remove(); } @@ -180,7 +178,8 @@ export default class FileAttachmentList extends ImageViewPort { const {isReplyPost} = this.props; const visibleImages = images.slice(0, MAX_VISIBLE_ROW_IMAGES); - const portraitPostWidth = getViewPortWidth(isReplyPost, this.hasPermanentSidebar()); + const hasFixedSidebar = this.hasPermanentSidebar(); + const portraitPostWidth = getViewPortWidth(isReplyPost, hasFixedSidebar); let nonVisibleImagesCount; if (images.length > MAX_VISIBLE_ROW_IMAGES) { diff --git a/app/components/image_viewport.js b/app/components/image_viewport.js index 9e268953d..99d3f8f37 100644 --- a/app/components/image_viewport.js +++ b/app/components/image_viewport.js @@ -11,7 +11,9 @@ import EventEmitter from '@mm-redux/utils/event_emitter'; import mattermostManaged from 'app/mattermost_managed'; export default class ImageViewPort extends PureComponent { - state = {}; + state = { + inViewPort: false, + }; componentDidMount() { this.mounted = true; @@ -46,7 +48,7 @@ export default class ImageViewPort extends PureComponent { }; hasPermanentSidebar = () => { - return DeviceTypes.IS_TABLET && !this.state?.isSplitView && this.state?.permanentSidebar; + return DeviceTypes.IS_TABLET && !this.state.isSplitView && this.state.permanentSidebar; }; render() { diff --git a/app/components/sidebars/main/main_sidebar.ios.js b/app/components/sidebars/main/main_sidebar.ios.js index c995b755c..e2e5dad7c 100644 --- a/app/components/sidebars/main/main_sidebar.ios.js +++ b/app/components/sidebars/main/main_sidebar.ios.js @@ -28,6 +28,7 @@ export default class MainSidebarIOS extends MainSidebarBase { drawerOpened: false, searching: false, isSplitView: false, + permanentSidebar: DeviceTypes.IS_TABLET, }; } diff --git a/app/components/sidebars/main/main_sidebar.test.js b/app/components/sidebars/main/main_sidebar.test.js index f0c3b94ee..cd66f73c2 100644 --- a/app/components/sidebars/main/main_sidebar.test.js +++ b/app/components/sidebars/main/main_sidebar.test.js @@ -46,7 +46,7 @@ describe('MainSidebar', () => { const wrapper = loadShallow(); wrapper.instance().handlePermanentSidebar(); - expect(wrapper.state('permanentSidebar')).toBeUndefined(); + expect(wrapper.state('permanentSidebar')).toBeFalsy(); }); test('should set the permanentSidebar state if Tablet', async () => { diff --git a/app/init/device.js b/app/init/device.ts similarity index 65% rename from app/init/device.js rename to app/init/device.ts index ada744c66..d08d9c3e6 100644 --- a/app/init/device.js +++ b/app/init/device.ts @@ -4,10 +4,12 @@ import AsyncStorage from '@react-native-community/async-storage'; import {DeviceTypes} from 'app/constants'; -if (DeviceTypes.IS_TABLET) { - AsyncStorage.getItem(DeviceTypes.PERMANENT_SIDEBAR_SETTINGS).then((value) => { +export async function setupPermanentSidebar() { + if (DeviceTypes.IS_TABLET) { + const value = await AsyncStorage.getItem(DeviceTypes.PERMANENT_SIDEBAR_SETTINGS); + if (!value) { AsyncStorage.setItem(DeviceTypes.PERMANENT_SIDEBAR_SETTINGS, 'true'); } - }); + } } diff --git a/app/init/global_event_handler.js b/app/init/global_event_handler.js index 9a44edf8b..a75321af1 100644 --- a/app/init/global_event_handler.js +++ b/app/init/global_event_handler.js @@ -17,6 +17,7 @@ import {loadMe, logout} from '@actions/views/user'; import LocalConfig from '@assets/config'; import {NavigationTypes, ViewTypes} from '@constants'; import {getTranslations, resetMomentLocale} from '@i18n'; +import {setupPermanentSidebar} from '@init/device'; import PushNotifications from '@init/push_notifications'; import {setAppState, setServerVersion} from '@mm-redux/actions/general'; import {getTeams} from '@mm-redux/actions/teams'; @@ -317,6 +318,7 @@ class GlobalEventHandler { resetState = async () => { try { await AsyncStorage.clear(); + await setupPermanentSidebar(); const state = Store.redux.getState(); const newState = { ...initialState, diff --git a/app/mattermost.js b/app/mattermost.js index 0bdf5c11d..7e0ffdd6a 100644 --- a/app/mattermost.js +++ b/app/mattermost.js @@ -14,7 +14,7 @@ import telemetry from 'app/telemetry'; import {NavigationTypes} from '@constants'; import {getAppCredentials} from '@init/credentials'; import emmProvider from '@init/emm_provider'; -import '@init/device'; +import {setupPermanentSidebar} from '@init/device'; import '@init/fetch'; import globalEventHandler from '@init/global_event_handler'; import {registerScreens} from '@screens'; @@ -35,6 +35,7 @@ const init = async () => { const MMKVStorage = await getStorage(); const {store} = configureStore(MMKVStorage); + await setupPermanentSidebar(); globalEventHandler.configure({ launchApp, diff --git a/packager/moduleNames.js b/packager/moduleNames.js index 1a50c626d..265047c38 100644 --- a/packager/moduleNames.js +++ b/packager/moduleNames.js @@ -14,7 +14,7 @@ module.exports = [ 'app/constants/websocket.ts', 'app/init/analytics.ts', 'app/init/credentials.js', - 'app/init/device.js', + 'app/init/device.ts', 'app/init/emm_provider.js', 'app/init/fetch.js', 'app/init/global_event_handler.js', diff --git a/packager/modules.android.js b/packager/modules.android.js index 298fa54aa..9bf07e17b 100644 --- a/packager/modules.android.js +++ b/packager/modules.android.js @@ -14,7 +14,7 @@ module.exports = [ './node_modules/app/constants/websocket.ts', './node_modules/app/init/analytics.ts', './node_modules/app/init/credentials.js', - './node_modules/app/init/device.js', + './node_modules/app/init/device.ts', './node_modules/app/init/emm_provider.js', './node_modules/app/init/fetch.js', './node_modules/app/init/global_event_handler.js', diff --git a/packager/modules.ios.js b/packager/modules.ios.js index a316f08c0..26dcf48bd 100644 --- a/packager/modules.ios.js +++ b/packager/modules.ios.js @@ -14,7 +14,7 @@ module.exports = [ './node_modules/app/constants/websocket.ts', './node_modules/app/init/analytics.ts', './node_modules/app/init/credentials.js', - './node_modules/app/init/device.js', + './node_modules/app/init/device.ts', './node_modules/app/init/emm_provider.js', './node_modules/app/init/fetch.js', './node_modules/app/init/global_event_handler.js',