Enable deployment of mock backend via netlify functions.

Author: levino

frontend/.eslintrc.json

@@ -18,6 +18,7 @@
         "singleQuote": false,
         "arrowParens": "avoid"
       }
-    ]
+    ],
+    "no-console": "error"
   }
 }

frontend/.gitignore

@@ -21,3 +21,4 @@ package-lock.json
 *.tgz
 
 app/api/dnd/**/_*.*
+storybook-static

frontend/mock-api/functions/api.ts

@@ -0,0 +1,5 @@
+import * as serverless from "serverless-http";
+import * as createApi from "../index";
+const app = createApi();
+
+module.exports.handler = serverless(app);

frontend/mock-api/index.js

@@ -2,29 +2,32 @@ const path = require("path");
 const version = require("../package.json").version;
 const EXPORT_FORM_CONFIG = require("./forms/export-form.json");
 const mockAuthMiddleware = require("./mockAuthMiddleware");
+const express = require("express");
+const bodyParser = require("body-parser");
+const cors = require("cors");
 
 // Taken from:
 // http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
 function shuffleArray(array) {
-  for (var i = array.length - 1; i > 0; i--) {
-    var j = Math.floor(Math.random() * (i + 1));
-    var temp = array[i];
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    const temp = array[i];
     array[i] = array[j];
     array[j] = temp;
   }
   return array;
 }
 
 const ERROR = JSON.stringify({
-  message: "Could not process the request",
+  message: "Could not process the request"
 });
 
 const LONG_DELAY = 500;
 const SHORT_DELAY = 300;
 const NO_DELAY = 10;
 
 // Simulate API
-module.exports = function (app, port) {
+function mountApi(app) {
   /*
     QUERIES
   */
@@ -78,7 +81,7 @@ module.exports = function (app, port) {
               id: 1,
               status: "DONE",
               numberOfResults: 5,
-              resultUrl: `/api/results/results.csv`,
+              resultUrl: `/api/results/results.csv`
             })
           );
       }, LONG_DELAY);
@@ -97,8 +100,8 @@ module.exports = function (app, port) {
         { id: "empty-set", label: "Empty Dataset" },
         {
           id: "another-empty-set",
-          label: "Another empty dataset with a long name",
-        },
+          label: "Another empty dataset with a long name"
+        }
       ])
     );
   });
@@ -149,10 +152,10 @@ module.exports = function (app, port) {
           "group 1",
           "important",
           "jk",
-          "interesting",
+          "interesting"
         ];
 
-        for (var i = 25600; i < 35600; i++) {
+        for (let i = 25600; i < 35600; i++) {
           const notExecuted = Math.random() < 0.1;
 
           ids.push({
@@ -168,7 +171,7 @@ module.exports = function (app, port) {
             own: Math.random() < 0.1,
             shared: Math.random() < 0.8,
             resultUrl: notExecuted ? null : `/api/results/results.csv`,
-            ownerName: "System",
+            ownerName: "System"
           });
         }
 
@@ -229,7 +232,7 @@ module.exports = function (app, port) {
         res.send(
           JSON.stringify({
             successful: 1 + Math.floor(Math.random() * 200),
-            unsuccessful: 586,
+            unsuccessful: 586
           })
         );
       }, LONG_DELAY);
@@ -258,16 +261,16 @@ module.exports = function (app, port) {
               "1000326535",
               "1014150881",
               "1017126347",
-              "1008445564",
+              "1008445564"
             ];
 
         const suggestions = storedValues
           .map((v, id) => ({
             label: v,
             value: id,
-            templateValues: { company: "Columbia Pictures Corporation" },
+            templateValues: { company: "Columbia Pictures Corporation" }
           }))
-          .filter((v) => v.label.toLowerCase().startsWith(text));
+          .filter(v => v.label.toLowerCase().startsWith(text));
 
         res.send(JSON.stringify(suggestions));
       }, LONG_DELAY);
@@ -285,7 +288,7 @@ module.exports = function (app, port) {
 
         res.send({
           unknownCodes: concepts.slice(5),
-          resolvedConcepts: concepts.slice(1),
+          resolvedConcepts: concepts.slice(1)
         });
       }, LONG_DELAY);
     }
@@ -299,7 +302,7 @@ module.exports = function (app, port) {
 
     res.send({
       version: version,
-      isDevelopment: process.env.NODE_ENV !== "production",
+      isDevelopment: process.env.NODE_ENV !== "production"
     });
   });
 
@@ -318,16 +321,16 @@ module.exports = function (app, port) {
         if (req.params.filterId !== "production_country") return null;
 
         const countries = require("./autocomplete/countries");
-        const unknownCodes = values.filter((val) => !countries.includes(val));
-        const resolvedValues = values.filter((val) => countries.includes(val));
+        const unknownCodes = values.filter(val => !countries.includes(val));
+        const resolvedValues = values.filter(val => countries.includes(val));
 
         res.send({
           unknownCodes: unknownCodes,
           resolvedFilter: {
             tableId: req.params.tableId,
             filterId: req.params.filterId,
-            value: resolvedValues.map((val) => ({ label: val, value: val })),
-          },
+            value: resolvedValues.map(val => ({ label: val, value: val }))
+          }
         });
       }, LONG_DELAY);
     }
@@ -351,13 +354,13 @@ module.exports = function (app, port) {
 
       if (user === "test" && password === "test") {
         res.send({
-          access_token: "VALID",
+          access_token: "VALID"
         });
       } else {
         res.status(422);
         res.send(
           JSON.stringify({
-            message: "Login failed",
+            message: "Login failed"
           })
         );
       }
@@ -374,10 +377,10 @@ module.exports = function (app, port) {
           domains: ["datasets"],
           abilities: ["read", "download", "preserve_id"],
           targets: ["imdb"],
-          creationTime: "2020-01-23T09:52:31.3318485",
-        },
+          creationTime: "2020-01-23T09:52:31.3318485"
+        }
       ],
-      groups: [],
+      groups: []
     });
   });
 
@@ -390,7 +393,7 @@ module.exports = function (app, port) {
         res.status(201);
         res.send(
           JSON.stringify({
-            id: 56000 + Math.floor(Math.random() * 200),
+            id: 56000 + Math.floor(Math.random() * 200)
           })
         );
       }, LONG_DELAY);
@@ -409,12 +412,12 @@ module.exports = function (app, port) {
         if (dice < 0.5) {
           return {
             formType: "EXPORT_FORM",
-            values: {},
+            values: {}
           };
         } else {
           return {
             formType: "Other form",
-            values: {},
+            values: {}
           };
         }
       }
@@ -428,10 +431,10 @@ module.exports = function (app, port) {
           "group 1",
           "important",
           "jk",
-          "interesting",
+          "interesting"
         ];
 
-        for (var i = 55600; i < 85600; i++) {
+        for (let i = 55600; i < 85600; i++) {
           configs.push({
             id: i,
             label: "Saved Config",
@@ -442,7 +445,7 @@ module.exports = function (app, port) {
             own: Math.random() < 0.1,
             shared: Math.random() < 0.8,
             ownerName: "System",
-            ...getFormConfigAttributes(),
+            ...getFormConfigAttributes()
           });
         }
 
@@ -481,4 +484,16 @@ module.exports = function (app, port) {
       }, LONG_DELAY);
     }
   );
+}
+
+const createApi = () => {
+  const app = express();
+  app.use(cors());
+  // body parser must be set up before routes are attached
+  app.use(bodyParser.json());
+
+  mountApi(app);
+  return app;
 };
+
+module.exports = createApi;

frontend/mock-api/server.js

@@ -2,21 +2,12 @@
 // EXPRESS SETUP
 // -----------
 const path = require("path");
-const express = require("express");
-const bodyParser = require("body-parser");
-const cors = require("cors");
-const mountApi = require(".");
+const createApi = require(".");
 
 const isDeveloping = process.env.NODE_ENV !== "production";
 const port = process.env.PORT || 8001;
-const app = express();
-const lang = process.env.APP_LANG || "en";
 
-app.use(cors());
-// body parser must be set up before routes are attached
-app.use(bodyParser.json());
-
-mountApi(app, port);
+const app = createApi()
 
 if (!isDeveloping) {
   app.use("/app/static", express.static(__dirname + "/build"));

frontend/package.json

@@ -10,15 +10,16 @@
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "build-frontend": "react-app-rewired build",
+    "build": "yarn build-frontend && yarn build-mock-backend",
+    "build-mock-backend": "tsc mock-api/functions/*",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "heroku-postbuild": "yarn run build",
     "lint": "eslint --ext .ts --ext .tsx src/",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "serve": "ts-node mock-api/server"
   },
-  "homepage": "/app/static",
   "dependencies": {
     "@emotion/babel-plugin": "^11.0.0-next.12",
     "@emotion/is-prop-valid": "^0.8.8",
@@ -37,6 +38,7 @@
     "lodash.difference": "^4.5.0",
     "mustache": "^2.3.0",
     "node-sass": "^4.12.0",
+    "ramda": "^0.27.0",
     "react": "^16.13.1",
     "react-animated-dots": "^1.0.0",
     "react-dnd": "^9.4.0",
@@ -65,9 +67,15 @@
     "redux": "^4.0.5",
     "redux-form": "^8.2.4",
     "redux-multi": "^0.1.12",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "serverless-http": "^2.5.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.1.4",
+    "@storybook/react": "^5.3.19",
     "@types/axios": "^0.14.0",
     "@types/body-parser": "^1.19.0",
     "@types/classnames": "^2.2.10",
@@ -82,6 +90,7 @@
     "@types/node-sass": "^4.11.1",
     "@types/papaparse": "^5.0.4",
     "@types/prettier": "^2.0.2",
+    "@types/ramda": "^0.27.11",
     "@types/react": "^16.9.25",
     "@types/react-dnd-multi-backend": "^4.0.1",
     "@types/react-dom": "^16.9.5",
@@ -109,6 +118,7 @@
     "express": "^4.16.2",
     "flux-standard-action": "^2.0.1",
     "ie-version": "^0.1.0",
+    "netlify-cli": "^2.58.0",
     "nock": "^12.0.3",
     "papaparse": "^5.0.0",
     "prettier": "^2.0.5",

frontend/src/js/app/Content.tsx

@@ -54,6 +54,7 @@ const PreviewItem = styled("div")`
 //@ts-ignore
 
 const generatePreview = (type, item, style) => {
+  // eslint-disable-next-line no-console
   console.log("PREVIEW RENDERED", item.width, item.height, style);
   //@ts-ignore
 

frontend/src/js/common/helpers/fileHelper.ts

@@ -27,6 +27,7 @@ export async function getFileRows(file: File) {
   const rows = cleanFileContent(text);
 
   if (rows.length === 0) {
+    // eslint-disable-next-line no-console
     console.error("An empty file was dropped");
   }
 

frontend/src/js/concept-trees/actions.ts

@@ -79,6 +79,7 @@ export const loadTree = (datasetId: DatasetIdT, treeId: ConceptIdT) => {
 
     // If the datasetId changed in the mean time, don't load the tree
     if (datasetId !== getDatasetId()) {
+      // eslint-disable-next-line no-console
       console.log(`${datasetId} not matching, not loading ${treeId}`);
       semaphore.release();
       return;

frontend/src/js/concept-trees/globalTreeStoreHelper.ts

@@ -113,6 +113,7 @@ export const getConceptsByIdsWithTablesAndSelects = (
   // There should only be one exact root node that has table information
   // If it's more or less than one, something went wrong
   if (!rootConceptId) {
+    // eslint-disable-next-line no-console
     console.error("No root concept ID found");
     return null;
   }

frontend/tsconfig.json

@@ -24,5 +24,5 @@
     "isolatedModules": true
   },
   "include": ["src", "node_modules/**/*/*.d.ts"],
-  "exclude": ["node_modules", "public", ".cache", ".idea", "src/ignored/*"]
+  "exclude": ["node_modules", "public", ".cache", ".idea", "src/ignored/*"],
 }