UI Action Handler Changes, Misc Fixes

frontend/src/Store/Actions/appActions.js

@@ -1,27 +1,134 @@
+import _ from 'lodash';
 import { createAction } from 'redux-actions';
-import * as types from './actionTypes';
+import getSectionState from 'Utilities/State/getSectionState';
+import updateSectionState from 'Utilities/State/updateSectionState';
+import createHandleActions from './Creators/createHandleActions';
 
-export const saveDimensions = createAction(types.SAVE_DIMENSIONS);
-export const setVersion = createAction(types.SET_VERSION);
-export const setIsSidebarVisible = createAction(types.SET_IS_SIDEBAR_VISIBLE);
-
-export const setAppValue = createAction(types.SET_APP_VALUE, (payload) => {
-  return {
-    section: 'app',
-    ...payload
+function getDimensions(width, height) {
+  const dimensions = {
+    width,
+    height,
+    isExtraSmallScreen: width <= 480,
+    isSmallScreen: width <= 768,
+    isMediumScreen: width <= 992,
+    isLargeScreen: width <= 1200
   };
-});
 
-export const showMessage = createAction(types.SHOW_MESSAGE, (payload) => {
-  return {
-    section: 'messages',
-    ...payload
-  };
-});
+  return dimensions;
+}
+
+//
+// Variables
+
+export const section = 'app';
+const messagesSection = 'app.messages';
+
+//
+// State
+
+export const defaultState = {
+  dimensions: getDimensions(window.innerWidth, window.innerHeight),
+  messages: {
+    items: []
+  },
+  version: window.Sonarr.version,
+  isUpdated: false,
+  isConnected: true,
+  isReconnecting: false,
+  isDisconnected: false,
+  isSidebarVisible: !getDimensions(window.innerWidth, window.innerHeight).isSmallScreen
+};
+
+//
+// Action Types
+
+export const SHOW_MESSAGE = 'app/showMessage';
+export const HIDE_MESSAGE = 'app/hideMessage';
+export const SAVE_DIMENSIONS = 'app/saveDimensions';
+export const SET_VERSION = 'app/setVersion';
+export const SET_APP_VALUE = 'app/setAppValue';
+export const SET_IS_SIDEBAR_VISIBLE = 'app/setIsSidebarVisible';
+
+//
+// Action Creators
+
+export const saveDimensions = createAction(SAVE_DIMENSIONS);
+export const setVersion = createAction(SET_VERSION);
+export const setIsSidebarVisible = createAction(SET_IS_SIDEBAR_VISIBLE);
+export const setAppValue = createAction(SET_APP_VALUE);
+export const showMessage = createAction(SHOW_MESSAGE);
+export const hideMessage = createAction(HIDE_MESSAGE);
+
+//
+// Reducers
+
+export const reducers = createHandleActions({
+
+  [SAVE_DIMENSIONS]: function(state, { payload }) {
+    const {
+      width,
+      height
+    } = payload;
+
+    const dimensions = getDimensions(width, height);
+
+    return Object.assign({}, state, { dimensions });
+  },
+
+  [SHOW_MESSAGE]: function(state, { payload }) {
+    const newState = getSectionState(state, messagesSection);
+    const items = newState.items;
+    const index = _.findIndex(items, { id: payload.id });
+
+    newState.items = [...items];
+
+    if (index >= 0) {
+      const item = items[index];
+
+      newState.items.splice(index, 1, { ...item, ...payload });
+    } else {
+      newState.items.push({ ...payload });
+    }
+
+    return updateSectionState(state, messagesSection, newState);
+  },
+
+  [HIDE_MESSAGE]: function(state, { payload }) {
+    const newState = getSectionState(state, messagesSection);
+
+    newState.items = [...newState.items];
+    _.remove(newState.items, { id: payload.id });
+
+    return updateSectionState(state, messagesSection, newState);
+  },
+
+  [SET_APP_VALUE]: function(state, { payload }) {
+    const newState = Object.assign(getSectionState(state, section), payload);
+
+    return updateSectionState(state, section, newState);
+  },
+
+  [SET_VERSION]: function(state, { payload }) {
+    const version = payload.version;
+
+    const newState = {
+      version
+    };
+
+    if (state.version !== version) {
+      newState.isUpdated = true;
+    }
+
+    return Object.assign({}, state, newState);
+  },
+
+  [SET_IS_SIDEBAR_VISIBLE]: function(state, { payload }) {
+    const newState = {
+      isSidebarVisible: payload.isSidebarVisible
+    };
+
+    return Object.assign({}, state, newState);
+  }
+
+}, defaultState, section);
 
-export const hideMessage = createAction(types.HIDE_MESSAGE, (payload) => {
-  return {
-    section: 'messages',
-    ...payload
-  };
-});