PLT-3638: Fix re-opening of collapsed preview on refresh (#7301)

In this change, user action for toggling the preview is stored in the browser localstorage. Hence If there us a preview visibility value is present
in the localstorage, that will be given the preference compared to the overall preview setting.

2 files changed, 15 insertions, 5 deletions

diff --git a/webapp/components/post_view/post_body_additional_content.jsx b/webapp/components/post_view/post_body_additional_content.jsx
index bd7574949..ddc73d554 100644
--- a/webapp/components/post_view/post_body_additional_content.jsx
+++ b/webapp/components/post_view/post_body_additional_content.jsx
@@ -8,6 +8,7 @@ import YoutubeVideo from 'components/youtube_video';
 
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
+import BrowserStore from 'stores/browser_store.jsx';
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -47,7 +48,7 @@ export default class PostBodyAdditionalContent extends React.PureComponent {
         this.handleLinkLoaded = this.handleLinkLoaded.bind(this);
 
         this.state = {
-            embedVisible: props.previewCollapsed.startsWith('false'),
+            embedVisible: PostBodyAdditionalContent.isEmbedVisible(props),
             link: Utils.extractFirstLink(props.post.message),
             linkLoadError: false,
             linkLoaded: false
@@ -62,7 +63,7 @@ export default class PostBodyAdditionalContent extends React.PureComponent {
     componentWillReceiveProps(nextProps) {
         if (nextProps.previewCollapsed !== this.props.previewCollapsed || nextProps.post.message !== this.props.post.message) {
             this.setState({
-                embedVisible: nextProps.previewCollapsed.startsWith('false'),
+                embedVisible: PostBodyAdditionalContent.isEmbedVisible(nextProps),
                 link: Utils.extractFirstLink(nextProps.post.message)
             }, () => {
                 // check the availability of the image link
@@ -72,6 +73,9 @@ export default class PostBodyAdditionalContent extends React.PureComponent {
     }
 
     toggleEmbedVisibility() {
+        // save the taggle info in the localstorage
+        BrowserStore.setItem(`isVisible-${this.props.post.id}`, !this.state.embedVisible);
+
         this.setState((prevState) => {
             return {embedVisible: !prevState.embedVisible};
         });
@@ -260,4 +264,9 @@ export default class PostBodyAdditionalContent extends React.PureComponent {
 
         return this.props.message;
     }
+
+    static isEmbedVisible(props) {
+        // check first in localstorage, if not present, consider previewCollapsed from the parent component
+        return BrowserStore.getItem(`isVisible-${props.post.id}`, props.previewCollapsed.startsWith('false'));
+    }
 }
diff --git a/webapp/stores/browser_store.jsx b/webapp/stores/browser_store.jsx
index 18fcc452d..a7c5294cd 100644
--- a/webapp/stores/browser_store.jsx
+++ b/webapp/stores/browser_store.jsx
@@ -6,8 +6,8 @@ import * as Utils from 'utils/utils.jsx';
 import {Constants, ErrorPageTypes} from 'utils/constants.jsx';
 
 function getPrefix() {
-    if (global.window.mm_current_user_id) {
-        return global.window.mm_current_user_id + '_';
+    if (global.mm_user) {
+        return global.mm_user.id + '_';
     }
 
     console.warn('BrowserStore tried to operate without user present'); //eslint-disable-line no-console
@@ -50,6 +50,7 @@ class BrowserStoreClass {
 
     getGlobalItem(name, defaultValue = null) {
         var result = null;
+
         try {
             if (this.isLocalStorageSupported()) {
                 result = JSON.parse(localStorage.getItem(name));
@@ -60,7 +61,7 @@ class BrowserStoreClass {
             result = null;
         }
 
-        if (!result) {
+        if (typeof result === 'undefined' || result === null) {
             result = defaultValue;
         }