UI: Sagas update, batch-edit-button change, cleanup

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Backup/restore works again. [#237](https://github.com/openkfw/TruBudget/issues/237)
 - Budgets on project analytics do not contain open workflow items [#230](https://github.com/openkfw/TruBudget/issues/230)
 - Fixed a bug where on smaller screens the action buttons (create & cancel) are hidden and no item could be created [#240](https://github.com/openkfw/TruBudget/issues/240)
+- Increase frontend stability[#263](https://github.com/openkfw/TruBudget/pull/263)
 
 ## [1.0.0-beta.9] - 2019-04-23
 

frontend/config-overrides.js

@@ -0,0 +1,10 @@
+module.exports = function override(config, env) {
+  //do stuff with the webpack config...
+
+  return {
+    ...config,
+    externals: {
+      moment: "moment"
+    }
+  };
+};

frontend/docker-compose.yml

@@ -60,9 +60,8 @@ services:
     environment:
       TEST_API_PORT: 8080
       PROD_API_PORT: 8080
-      TEST_API_HOST: testapi
+      TEST_API_HOST: masterapi
       PROD_API_HOST: masterapi
       PORT: 8888
     depends_on:
-      - testapi
       - masterapi

frontend/package.json

@@ -21,24 +21,18 @@
     "@material-ui/icons": "^3.0.2",
     "accounting": "^0.4.1",
     "axios": "^0.16.0",
-    "babel-polyfill": "^6.26.0",
     "chart.js": "^2.3.0",
-    "d3-color": "^1.0.3",
-    "d3-interpolate": "^1.1.5",
+    "dayjs": "^1.8.13",
     "downshift": "^2.0.16",
     "file-saver": "^1.3.8",
     "history": "^4.6.1",
     "immutable": "^3.8.1",
-    "leaflet": "^1.0.3",
     "lodash": "^4.17.10",
-    "moment": "^2.18.1",
-    "react": "^16.0.0",
+    "react": "^16.6.0",
     "react-chartjs-2": "^2.0.5",
     "react-dom": "^16.0.0",
     "react-infinite-scroller": "^1.2.4",
-    "react-leaflet": "^1.1.6",
-    "react-liquid-gauge": "^1.2.2",
-    "react-localization": "^0.1.1",
+    "react-localization": "^1.0.13",
     "react-number-format": "^4.0.7",
     "react-redux": "^5.0.3",
     "react-router": "^4.0.0",
@@ -51,19 +45,28 @@
     "redux-saga": "^1.0.0"
   },
   "devDependencies": {
-    "babel-preset-es2015": "^6.24.1",
-    "babel-register": "^6.26.0",
+    "@babel/register": "^7.4.4",
     "eslint-config-prettier": "^4.1.0",
     "prettier": "1.12.1",
-    "react-scripts": "^2.1.8"
+    "react-app-rewired": "^2.1.3",
+    "react-scripts": "^3.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
     "test": "npm run check-translations",
-    "eject": "react-scripts eject",
-    "check-translations": "node scripts/check-translations.js"
+    "eject": "react-app-rewired eject",
+    "check-translations": "node scripts/check-translations.js",
+    "lint": "eslint src"
   },
   "proxy": "http://localhost:8080",
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "browser": {
+    "moment": false
+  }
 }

frontend/scripts/check-translations.js

@@ -1,6 +1,6 @@
 // require babel-register and set Babel presets options to es2015
-require('babel-register')({
-  presets: [ 'es2015' ]
+require("@babel/register")({
+  presets: ["@babel/preset-env"]
 });
 
 require("./check-translations.es6.js");

frontend/src/api.js

@@ -4,6 +4,7 @@ const devMode = process.env.NODE_ENV === "development";
 const API_VERSION = "1.0";
 const instance = axios.create();
 
+// eslint-disable-next-line no-console
 console.log(`API is running in ${devMode ? "development" : "production"} mode (Version ${API_VERSION})`);
 
 class Api {

frontend/src/helper.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Iterable } from "immutable";
-import moment from "moment";
+import dayjs from "dayjs";
 
 import OpenIcon from "@material-ui/icons/Remove";
 import DoneIcon from "@material-ui/icons/Check";
@@ -98,12 +98,12 @@ export const toAmountString = (amount, currency) => {
 };
 
 export const tsToString = ts => {
-  let dateString = moment(ts, "x").format("MMM D, YYYY");
+  let dateString = dayjs.unix(ts).format("MMM D, YYYY");
   return dateString;
 };
 
 export const unixTsToString = ts => {
-  let dateString = moment(new Date(ts * 1000)).format("MMM D, YYYY");
+  let dateString = dayjs.unix(ts).format("MMM D, YYYY");
   return dateString;
 };
 
@@ -183,8 +183,7 @@ export const getCompletionString = subprojects => {
 };
 
 export const formatString = (text, ...args) => {
-  const x = strings.formatString(text, ...args).join(" ");
-  return x;
+  return strings.formatString(text, ...args);
 };
 export const formatUpdateString = (identifier, createdBy, data) => {
   let string = strings.formatString(strings.history.changed_by, identifier, createdBy);

frontend/src/index.js

@@ -1,11 +1,12 @@
-import "babel-polyfill";
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { ConnectedRouter } from "react-router-redux";
 import { Route, Switch } from "react-router";
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
-import createHistory from "history/createBrowserHistory";
+import { createBrowserHistory } from "history";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
 
 import red from "@material-ui/core/colors/deepOrange";
 import blue from "@material-ui/core/colors/indigo";
@@ -17,7 +18,12 @@ import PrivateRoute from "./pages/Login/PrivateRoute";
 import configureStore from "./store";
 import withInitialLoading from "./pages/Loading/withInitialLoading";
 
-const history = createHistory();
+// setup dayjs
+// if you need to add time to your charts you have to add a dayjs adapter
+// see: https://github.com/chartjs/Chart.js/pull/5960
+dayjs.extend(relativeTime);
+
+const history = createBrowserHistory();
 
 const initialState = {};
 const store = configureStore(initialState, history);

frontend/src/languages/english.js

@@ -26,6 +26,7 @@ const en = {
     created: "Created",
     disbursed_budget: "Disbursed Budget",
     disbursement: "Projected",
+    disconnected: "Offline",
     done: "Done",
     edit: "Edit",
     edited: "Edited",

frontend/src/languages/french.js

@@ -26,6 +26,7 @@ const fr = {
     created: "Créé",
     disbursed_budget: "Budget décaissé",
     disbursement: "Décaissements prévus",
+    disconnected: "Déconnecté",
     done: "Terminé",
     edit: "Modifier",
     edited: "Modifié",

frontend/src/languages/german.js

@@ -26,6 +26,7 @@ const de = {
     created: "Created",
     disbursed_budget: "Disbursed Budget",
     disbursement: "Disbursement",
+    disconnected: "Offline",
     done: "Done",
     edit: "German: Edit",
     edited: "German: Edited",

frontend/src/languages/portuguese.js

@@ -26,6 +26,7 @@ const pt = {
     created: "Criado",
     disbursed_budget: "Desembolsado",
     disbursement: "Projetado",
+    disconnected: "Desligada",
     done: "Finalizado",
     edit: "Portuguese: Edit",
     edited: "Portuguese: Edited",

frontend/src/localStorage.js

@@ -65,7 +65,9 @@ export const persistState = state => {
         break;
     }
   } catch (error) {
-    console.log(error);
-    console.log("failed to persist state");
+    // eslint-disable-next-line no-console
+    console.error(error);
+    // eslint-disable-next-line no-console
+    console.error("failed to persist state");
   }
 };

frontend/src/pages/Analytics/ProjectAnalyticsDialog.js

@@ -1,20 +1,23 @@
-import { FormControl, MenuItem, Select } from "@material-ui/core";
 import AppBar from "@material-ui/core/AppBar";
+import FormControl from "@material-ui/core/FormControl";
+import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
 import Dialog from "@material-ui/core/Dialog";
 import IconButton from "@material-ui/core/IconButton";
 import Slide from "@material-ui/core/Slide";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import CloseIcon from "@material-ui/icons/Close";
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import { connect } from "react-redux";
 
 import { getCurrencies } from "../../helper";
 import { closeAnalyticsDialog, getExchangeRates, storeDisplayCurrency } from "./actions";
-import ProjectAnalytics from "./ProjectAnalytics";
 import strings from "../../localizeStrings";
 
+const ProjectAnalytics = lazy(() => import("./ProjectAnalytics"));
+
 const styles = {
   container: {
     marginTop: "68px"
@@ -87,7 +90,9 @@ const ProjectAnalyticsDialog = ({
       </Toolbar>
     </AppBar>
     <div style={styles.container}>
-      <ProjectAnalytics projectId={projectId} />
+      <Suspense fallback={<div>Loading...</div>}>
+        <ProjectAnalytics projectId={projectId} />
+      </Suspense>
     </div>
   </Dialog>
 );

frontend/src/pages/Analytics/SubProjectAnalyticsDialog.js

@@ -1,20 +1,23 @@
-import { FormControl, MenuItem, Select } from "@material-ui/core";
 import AppBar from "@material-ui/core/AppBar";
+import FormControl from "@material-ui/core/FormControl";
+import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
 import Dialog from "@material-ui/core/Dialog";
 import IconButton from "@material-ui/core/IconButton";
 import Slide from "@material-ui/core/Slide";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import CloseIcon from "@material-ui/icons/Close";
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import { connect } from "react-redux";
 
 import { getCurrencies } from "../../helper";
 import { closeAnalyticsDialog, getExchangeRates, storeDisplayCurrency } from "./actions";
-import SubProjectAnalytics from "./SubProjectAnalytics";
 import strings from "../../localizeStrings";
 
+const SubProjectAnalytics = lazy(() => import("./SubProjectAnalytics"));
+
 const styles = {
   container: {
     marginTop: "68px"
@@ -88,7 +91,9 @@ const SubProjectAnalyticsDialog = ({
       </Toolbar>
     </AppBar>
     <div style={styles.container}>
-      <SubProjectAnalytics projectId={projectId} subProjectId={subProjectId} />
+      <Suspense fallback={<div>Loading...</div>}>
+        <SubProjectAnalytics projectId={projectId} subProjectId={subProjectId} />{" "}
+      </Suspense>
     </div>
   </Dialog>
 );