MM-31764 Fix image attachment layout when permanent sidebar is visible (#5115)

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) {

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() {

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,
         };
     }
 

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 () => {

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');
         }
-    });
+    }
 }

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,

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,

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',

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',

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',