Added window dimensions to redux, listener in gabsocial.js

• Added:
- window dimensions to redux, listener in gabsocial.js

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

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

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: