Merge pull request #15 from Cognifide/feature/persist-data-state

Feature/persist data state

cogboard-webapp/src/actions/helpers.js

@@ -1,3 +1,5 @@
+import { dataChanged } from './actionCreators';
+
 const checkResponseStatus = response => {
   const { status, statusText } = response;
 
@@ -83,4 +85,10 @@ export const mapDataToState = (data) => {
     generalData,
     serverData: { id, type, ...other }
   };
-};
+};
+
+export const withDataChanged = (actionCallback) => (...args) =>
+  dispatch => {
+    dispatch(actionCallback.apply(null, args));
+    dispatch(dataChanged());
+  };

cogboard-webapp/src/actions/thunks.js

@@ -2,27 +2,32 @@ import {
   requestData,
   receiveData,
   requestUpdate,
+  addBoard,
+  editBoard,
   deleteBoard,
   setCurrentBoard,
   updateWidget,
   addWidget,
   editWidget,
   deleteMultipleWidgets,
   dataChanged,
-  saveDataStart
+  saveDataStart,
+  deleteWidget
 } from './actionCreators';
 import {
   fetchData,
   createNewWidgetData,
   createEditWidgetData,
-  mapDataToState
+  mapDataToState,
+  withDataChanged
 } from './helpers';
+import { URL } from '../constants';
 
 export const fetchInitialData = () =>
   (dispatch) => {
     dispatch(requestData());
 
-    return fetchData('/api/config')
+    return fetchData(URL.LOAD_DATA)
       .then(
         data => dispatch(receiveData(data)),
         console.error
@@ -34,14 +39,14 @@ export const saveData = () =>
     const { boards, widgets } = getState();
     const data = { boards, widgets };
 
-    return fetchData('/api/config/save', 'POST', data)
+    return fetchData(URL.SAVE_DATA, 'POST', data)
       .then(
         () => dispatch(saveDataStart()),
         console.error
       );
   };
 
-export const deleteBoardWithWidgets = (id) =>
+const deleteBoardWithWidgetsThunk = (id) =>
   (dispatch, getState) => {
     const { ui, boards } = getState();
     const { widgets } = boards.boardsById[id];
@@ -55,8 +60,8 @@ export const deleteBoardWithWidgets = (id) =>
     dispatch(deleteMultipleWidgets(widgets));
   };
 
-const makeWidgetUpdaterThunk = (beforeUpdateActionCreator, widgetDataCreator) => data => {
-  return (dispatch, getState) => {
+const makeWidgetUpdaterThunk = (beforeUpdateActionCreator, widgetDataCreator) => data =>
+  (dispatch, getState) => {
     const allWidgets = getState().widgets.allWidgets;
     const widgetData = widgetDataCreator({...data, allWidgets});
     const { id } = widgetData;
@@ -66,14 +71,23 @@ const makeWidgetUpdaterThunk = (beforeUpdateActionCreator, widgetDataCreator) =>
     dispatch(dataChanged());
     dispatch(requestUpdate(id));
 
-    return fetchData('/api/widget/update', 'POST', serverData)
+    return fetchData(URL.UPDATE_WIDGET, 'POST', serverData)
       .then(
         () => dispatch(updateWidget(serverData)),
         console.error
       );
   };
-};
 
-export const addNewWidget = makeWidgetUpdaterThunk(addWidget, createNewWidgetData);
+const removeWidgetThunk = (id) =>
+  (dispatch, getState) => {
+    const { currentBoard } = getState().ui;
 
-export const saveWidget = makeWidgetUpdaterThunk(editWidget, createEditWidgetData);
+    dispatch(deleteWidget(id, currentBoard));
+  };
+
+export const addNewWidget = makeWidgetUpdaterThunk(addWidget, createNewWidgetData);
+export const saveWidget = makeWidgetUpdaterThunk(editWidget, createEditWidgetData);
+export const removeWidget = withDataChanged(removeWidgetThunk);
+export const addNewBoard = withDataChanged(addBoard);
+export const saveBoard = withDataChanged(editBoard);
+export const deleteBoardWithWidgets = withDataChanged(deleteBoardWithWidgetsThunk);

cogboard-webapp/src/components/AddBoard.js

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import styled from '@emotion/styled/macro';
 
 import { useDialogToggle } from '../hooks';
-import { addBoard } from '../actions/actionCreators';
+import { addNewBoard } from '../actions/thunks';
 
 import { Button, IconButton } from '@material-ui/core';
 import { Add } from '@material-ui/icons';
@@ -25,7 +25,7 @@ const AddBoard = () => {
   };
 
   const handleAddActionClick = values => () => {
-    dispatch(addBoard(values));
+    dispatch(addNewBoard(values));
     handleDialogClose();
   };
 

cogboard-webapp/src/components/BoardCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { func, object } from 'prop-types';
+import { object } from 'prop-types';
 import { useDispatch } from 'react-redux';
 import styled from '@emotion/styled/macro';
 
@@ -92,7 +92,6 @@ const BoardCard = ({ boardData, className }) => {
 };
 
 BoardCard.propTypes = {
-  handleBoardClick: func.isRequired,
   boardData: object.isRequired
 }
 

cogboard-webapp/src/components/BoardList.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { func } from 'prop-types';
 import styled from '@emotion/styled/macro';
 import { useSelector } from 'react-redux';
 
@@ -10,7 +9,7 @@ const StyledBoardCard = styled(BoardCard)`
   margin-bottom: 32px;
 `;
 
-const BoardList = ({ handleBoardClick, className }) => {
+const BoardList = ({ className }) => {
   const boards = useSelector(
     ({ boards }) => {
       const { boardsById, allBoards } = boards;
@@ -23,7 +22,6 @@ const BoardList = ({ handleBoardClick, className }) => {
     <Box className={className}>
       {boards.map(boardData =>
         <StyledBoardCard
-          handleBoardClick={handleBoardClick}
           boardData={boardData}
           key={boardData.id}
         />
@@ -32,8 +30,4 @@ const BoardList = ({ handleBoardClick, className }) => {
   );
 };
 
-BoardList.propTypes = {
-  handleBoardClick: func.isRequired
-};
-
 export default BoardList;

cogboard-webapp/src/components/EditBoard.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import styled from '@emotion/styled/macro';
 
-import { editBoard } from '../actions/actionCreators';
+import { saveBoard } from '../actions/thunks';
 
 import { Button } from '@material-ui/core'
 import BoardForm from './BoardForm';
@@ -16,7 +16,7 @@ const EditBoard = ({ closeDialog, id, ...initialFormValues }) => {
   const dispatch = useDispatch()
 
   const handleSaveClick = (values) => () => {
-    dispatch(editBoard({ id, ...values }));
+    dispatch(saveBoard({ id, ...values }));
     closeDialog();
   };
 

cogboard-webapp/src/components/Widget.js

@@ -5,7 +5,7 @@ import styled from '@emotion/styled/macro';
 import { useTheme } from '@material-ui/styles';
 
 import { useDialogToggle } from '../hooks';
-import { deleteWidget } from '../actions/actionCreators';
+import { removeWidget } from '../actions/thunks';
 
 import { Card, CardHeader, CardContent, MenuItem } from '@material-ui/core';
 import AppDialog from './AppDialog';
@@ -29,7 +29,6 @@ const StyledCard = styled(({
 `;
 
 const Widget = ({ id }) => {
-  const currentBoardId = useSelector(({ ui }) => ui.currentBoard);
   const widgetData = useSelector(
     state => state.widgets.widgetsById[id],
     shallowEqual
@@ -58,9 +57,9 @@ const Widget = ({ id }) => {
   };
 
   const handleDeleteClick = (closeMenu) => () => {
-    dispatch(deleteWidget(id, currentBoardId));
+    dispatch(removeWidget(id));
     closeMenu();
-  }
+  };
 
   return (
     <>
@@ -123,6 +122,6 @@ StyledCard.propTypes = {
   goNewLine: bool.isRequired,
   status: string.isRequired,
   theme: object.isRequired
-}
+};
 
 export default Widget;

cogboard-webapp/src/constants/index.js

@@ -1,2 +1,7 @@
+export const URL = {
+  LOAD_DATA: '/api/config',
+  SAVE_DATA: '/api/config/save',
+  UPDATE_WIDGET: '/api/widget/update'
+};
 export const COLUMNS_MIN = 1;
-export const COLUMNS_MAX = 8;
+export const COLUMNS_MAX = 20;