Use a constant number of grid columns

src/common/ducks/config.ts

@@ -3,9 +3,6 @@
 import { createAction, createReducer } from "redux-starter-kit";
 
 export interface ConfigState {
-  grid: {
-    columns: number;
-  };
   theme: string;
   language: string;
 }
@@ -14,9 +11,6 @@ const changeTheme = createAction<string>("config/change-theme");
 export const changeLanguage = createAction<string>("config/change-language");
 
 export const initialState = {
-  grid: {
-    columns: 24
-  },
   theme: "default",
   language: "" // let i18next use the correct language
 };

src/common/environment.ts

@@ -8,6 +8,15 @@ export const LANGUAGES = ["en", "de"];
 /** Available themes */
 export const THEMES = ["default", "dark"];
 
+/** Dashboard grid properties */
+export const GRID = {
+  /** Number of dashboard columns */
+  COLUMNS_COUNT: 24,
+
+  /** Dashboard row height in px */
+  ROW_HEIGHT_PX: 60
+};
+
 /** True, if the application is running in production mode*/
 export const IS_PRODUCTION = process.env.NODE_ENV === "production";
 

src/components/app/index.tsx

@@ -14,7 +14,6 @@ import { importWidgets, WidgetsState } from "components/widget/duck";
 import mapStateToProps from "./selectors";
 
 export interface Props {
-  gridColumns: number;
   widgetIDs: string[];
 
   layout: Layout;
@@ -32,7 +31,6 @@ export interface Props {
 
 export const App: React.FC<Props> = memo(props => {
   const {
-    gridColumns,
     widgetIDs,
     layout,
     saveLayout,
@@ -57,7 +55,6 @@ export const App: React.FC<Props> = memo(props => {
       <div className="flex h-full flex-col md:flex-row overflow-y-auto">
         <main className="flex-grow w-full p-1 md:p-6">
           <Dashboard
-            columns={gridColumns}
             layout={layout}
             isLayoutEditable={isLayoutEditable}
             widgetIDs={widgetIDs}

src/components/app/selectors.ts

@@ -3,9 +3,8 @@ import createSelector from "selectorator";
 /* TODO: use a hash to prevent re-rendering */
 
 const selectComponentProps = createSelector(
-  ["config.grid.columns", "config.theme", "layout", "widgets"],
-  (columns, theme, layout, widgets) => ({
-    gridColumns: columns,
+  ["config.theme", "layout", "widgets"],
+  (theme, layout, widgets) => ({
     layout: layout.config,
     isLayoutEditable: layout.isEditable,
     widgetIDs: Object.keys(widgets),

src/components/dashboard/__tests__/index.test.tsx

@@ -23,8 +23,6 @@ describe("<Dashboard />", () => {
         saveLayout={_.noop}
         removeWidgetFromLayout={_.noop}
         importWidgets={_.noop}
-        columns={3}
-        rows={2}
         widgetIDs={["id-01", "id-02"]}
       />
     );
@@ -55,7 +53,6 @@ describe("<Dashboard />", () => {
     expect(shouldUpdate({ columns: 3, widgetIDs: ["id-02", "id-01"] })).toBe(
       false
     );
-    expect(shouldUpdate({ columns: 99 })).toBe(true);
     expect(shouldUpdate({ widgetIDs: ["id-01"] })).toBe(true);
   });
 });

src/components/dashboard/index.tsx

@@ -3,14 +3,14 @@ import { Responsive, WidthProvider } from "react-grid-layout";
 import _ from "lodash";
 
 import { Layout } from "common/ducks/layout";
+import { GRID } from "common/environment";
 import makeWidget from "components/widget";
 import WelcomePage from "components/welcome-page";
 import { WidgetsState } from "components/widget/duck";
 
 const ReactGridLayout = WidthProvider(Responsive);
 
 export interface Props {
-  columns: number;
   layout: Layout;
   isLayoutEditable: boolean;
   widgetIDs: string[];
@@ -20,7 +20,7 @@ export interface Props {
   [key: string]: any;
 }
 
-const updateProps = ["columns", "layout", "isLayoutEditable"];
+const updateProps = ["layout", "isLayoutEditable"];
 
 const makeWidgetMemoized = _.memoize(makeWidget);
 
@@ -35,7 +35,6 @@ class Dashboard extends React.Component<Props> {
 
   render() {
     const {
-      columns,
       layout,
       isLayoutEditable,
       widgetIDs,
@@ -52,8 +51,8 @@ class Dashboard extends React.Component<Props> {
         className="layout"
         layouts={layout}
         breakpoints={{ mobile: 0, desktop: 768 }}
-        cols={{ mobile: 1, desktop: columns }}
-        rowHeight={60}
+        cols={{ mobile: 1, desktop: GRID.COLUMNS_COUNT }}
+        rowHeight={GRID.ROW_HEIGHT_PX}
         compactType={null}
         useCSSTransforms={false}
         isRearrangeable={false}