From 6a312b2ad4c1c50d082165c968fc5111a1a50d28 Mon Sep 17 00:00:00 2001 From: atp Date: Tue, 29 Aug 2017 20:17:32 +0530 Subject: 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. --- .../components/post_view/post_body_additional_content.jsx | 13 +++++++++++-- webapp/stores/browser_store.jsx | 7 ++++--- 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; } -- cgit v1.2.3-1-g7c22