diff --git a/app/javascript/gabsocial/actions/settings.js b/app/javascript/gabsocial/actions/settings.js index 2c18fb85..b38ddd68 100644 --- a/app/javascript/gabsocial/actions/settings.js +++ b/app/javascript/gabsocial/actions/settings.js @@ -1,10 +1,23 @@ import api from '../api' import debounce from 'lodash.debounce' import { me } from '../initial_state' +import { getWindowDimension } from '../utils/is_mobile' export const SETTING_CHANGE = 'SETTING_CHANGE' export const SETTING_SAVE = 'SETTING_SAVE' +export const WINDOW_DIMENSION_CHANGE = 'WINDOW_DIMENSION_CHANGE' + +export const saveWindowDimensions = () => (dispatch) => { + const { width, height } = getWindowDimension() + + dispatch({ + type: WINDOW_DIMENSION_CHANGE, + width, + height, + }) +} + export const saveShownOnboarding = () => (dispatch) => { dispatch(changeSetting(['shownOnboarding'], true)) dispatch(saveSettings()) diff --git a/app/javascript/gabsocial/containers/gabsocial.js b/app/javascript/gabsocial/containers/gabsocial.js index 977b5d46..f6302a3b 100644 --- a/app/javascript/gabsocial/containers/gabsocial.js +++ b/app/javascript/gabsocial/containers/gabsocial.js @@ -19,6 +19,7 @@ import { connectStatusUpdateStream, connectChatMessagesStream, } from '../actions/streaming' +import { saveWindowDimensions } from '../actions/settings' import { getLocale } from '../locales' import initialState from '../initial_state' import { me, isFirstSession } from '../initial_state' @@ -37,6 +38,7 @@ store.dispatch(hydrateAction) store.dispatch(fetchCustomEmojis()) store.dispatch(fetchPromotions()) store.dispatch(fetchChatConversationUnreadCount()) +store.dispatch(saveWindowDimensions()) const mapStateToProps = (state) => ({ accountCreatedAt: !!me ? state.getIn(['accounts', me, 'created_at']) : undefined, @@ -64,6 +66,17 @@ class GabSocialMount extends React.PureComponent { if (shouldShow) this.setState({ shouldShow }) } + + this.handleResize() + window.addEventListener('resize', this.handleResize, false) + } + + componentWillUnmount () { + window.removeEventListener('resize', this.handleResize, false) + } + + handleResize = () => { + this.props.dispatch(saveWindowDimensions()) } render () { diff --git a/app/javascript/gabsocial/reducers/settings.js b/app/javascript/gabsocial/reducers/settings.js index 65738002..d04de8ac 100644 --- a/app/javascript/gabsocial/reducers/settings.js +++ b/app/javascript/gabsocial/reducers/settings.js @@ -1,4 +1,8 @@ -import { SETTING_CHANGE, SETTING_SAVE } from '../actions/settings' +import { + SETTING_CHANGE, + SETTING_SAVE, + WINDOW_DIMENSION_CHANGE, +} from '../actions/settings' import { STORE_HYDRATE } from '../actions/store' import { EMOJI_USE } from '../actions/emojis' import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists' @@ -28,6 +32,10 @@ const initialState = ImmutableMap({ shownOnboarding: false, skinTone: 1, isCompact: false, + window_dimensions: ImmutableMap({ + width: 0, + height: 0, + }), commentSorting: COMMENT_SORTING_TYPE_OLDEST, gabDeckOrder: ImmutableList([]), @@ -72,6 +80,11 @@ const filterDeadListColumns = (state, listId) => state.update('columns', columns export default function settings(state = initialState, action) { switch(action.type) { + case WINDOW_DIMENSION_CHANGE: + return state.set('window_dimensions', ImmutableMap({ + width: action.width, + height: action.height, + })) case STORE_HYDRATE: return hydrate(state, action.state.get('settings')) case SETTING_CHANGE: