Issue 16

.eslintrc.js

@@ -26,6 +26,14 @@ module.exports = {
     react: {
       version: "detect",
     },
+    "import/resolver": {
+      "eslint-import-resolver-custom-alias": {
+        alias: {
+          "@bach": "./src",
+        },
+        extensions: [".js", ".jsx"],
+      },
+    },
   },
   rules: {
     "prettier/prettier": ["error", { singleQuote: false, parser: "flow" }],

package.json

@@ -6,7 +6,13 @@
   "jest": {
     "transform": {
       "^.+\\.svg$": "jest-svg-transformer",
-      "^.+\\.(js|jsx)$": "babel-jest"
+      "^.+\\.(js|jsx)$": "babel-jest",
+      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
+    },
+    "moduleNameMapper": {
+      "@bach/test-utils": "<rootDir>/src/test_utils.jsx",
+      "@bach/(.*)": "<rootDir>/src/$1",
+      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
     }
   },
   "scripts": {
@@ -27,72 +33,62 @@
   "dependencies": {
     "@babel/core": "^7.17.5",
     "@date-io/moment": "^2.13.1",
+    "@fontsource/roboto": "^4.5.5",
     "@material-ui/core": "^4.12.3",
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/pickers": "^3.3.10",
     "@material-ui/x-grid": "^4.0.0-alpha.37",
-    "@testing-library/react": "^11.2.7",
-    "ansi-regex": ">=5.0.1",
     "axios": "^0.21.4",
     "babel-eslint": "^10.1.0",
     "babel-polyfill": "^6.0.16",
     "babel-preset-es2015": "^6.0.15",
     "babel-preset-stage-0": "^6.0.15",
     "babel-runtime": "^6.26.0",
     "clsx": "^1.1.1",
-    "css-loader": "^6.5.1",
-    "file-loader": "3.0.1",
-    "html-loader": "0.5.5",
-    "material-ui": "^0.20.2",
+    "eslint-import-resolver-custom-alias": "^1.3.0",
+    "file-loader": "^6.2.0",
     "moment": "^2.29.1",
-    "node-fetch": ">=2.6.7",
-    "node-forge": ">=1.0.0",
-    "postcss": ">=8.2.13",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "source-map": "^0.7.3",
-    "style-loader": "0.23.1",
-    "url-loader": "1.1.2",
-    "webpack": "4.41.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.46.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
-    "ws": ">=6.2.2"
+    "webpack-dev-server": "^4.7.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.5.0",
-    "ansi-regex": ">=5.0.1",
     "babel-core": "^6.26.3",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.4",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "^5.2.7",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.4.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "html-webpack-plugin": "3.2.0",
     "jest": "^26.6.3",
     "jest-svg-transformer": "^1.0.0",
-    "node-fetch": ">=2.6.7",
-    "node-forge": ">=1.0.0",
-    "postcss": ">=8.2.13",
+    "jest-transform-stub": "^2.0.0",
     "prettier": "2.2.1",
     "prettier-eslint": "^12.0.0",
-    "react-test-renderer": "^17.0.2",
-    "ws": ">=6.2.2"
+    "react-test-renderer": "^17.0.2"
   }
 }

src/App.jsx

@@ -2,23 +2,21 @@ import React from "react";
 
 import MomentUtils from "@date-io/moment";
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
-import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { createTheme, ThemeProvider } from "@material-ui/core/styles";
 
-import Routes from "./pages/Routes";
+import Routes from "@bach/pages/Routes";
 
-import Contexts from "./contexts";
+import Contexts from "@bach/contexts";
 
-const defaultTheme = createMuiTheme({
+const defaultTheme = createTheme({
   palette: {
     primary: {
-      main: "#007DFF",
+      main: "#10B0AB",
+      dark: "#069995",
     },
     secondary: {
       main: "#EEEEEE",
     },
-    background: {
-      main: "#FFFFFF",
-    },
   },
 });
 

src/api/DataUtils/index.js

@@ -1,22 +1,18 @@
 import axios from "axios";
-import { DEFAULT_HOST, SUFFIX } from "../../config";
-import mozartConfig from "../../config/mozartConfig.json";
+import { DEFAULT_HOST, SUFFIX } from "@bach/config";
+import mozartConfig from "@bach/config/mozartConfig.json";
 
-import { buildAPIUrl } from "../utils";
-
-import { URL_TO_VALUES_DICT, VALUES_TO_URL_DICT } from "../../constants";
+import { URL_TO_VALUES_DICT, VALUES_TO_URL_DICT } from "@bach/constants";
+import { buildAPIUrl } from "@bach/api/utils";
 
 export async function makeAPIGet(paths, params, data) {
   const url = buildAPIUrl(paths, `${DEFAULT_HOST}${SUFFIX}`);
-  try {
-    const config = { method: "GET", url };
-    if (data !== null) config.data = data;
-    const response = await axios.get(url, { params });
-    return response;
-  } catch (err) {
-    console.error(err);
-    return {};
+  const config = { method: "GET", url };
+  if (data !== null) {
+    config.data = data;
   }
+  const response = await axios.get(url, { params });
+  return response;
 }
 
 export function getVenue() {

src/api/DataUtils/index.test.js

@@ -0,0 +1,42 @@
+import React from "react"
+import { render } from "@bach/test-utils";
+import { Router } from 'react-router-dom'
+import {createMemoryHistory} from 'history'
+import { getUrlParams, pushUrlParams } from "@bach/api/DataUtils"
+
+describe("DataUtils test", () => {
+    it("should parse query params", () => {
+        // ARRANGE
+        const history = createMemoryHistory()
+        render(<Router history={history}><></></Router>)
+        history.push("/dummyPath?param1&param2=value2")
+
+        // ACT
+        const params = getUrlParams(history);
+
+        // ASSERT
+        expect(params).toEqual({
+            "param1": undefined,
+            "param2": "value2"
+        });
+    });
+
+    it("should push query params", () => {
+        // ARRANGE
+        const history = createMemoryHistory()
+        render(<Router history={history}><></></Router>)
+
+        // ACT
+        const params = pushUrlParams(
+            {
+                "param1": undefined,
+                "param2": "value2",
+                "startDate": true // needs to be truthy
+            },
+            history
+        );
+
+        // ASSERT
+        expect(history.location.search).toEqual("?start_date=true");
+    });
+});

src/components/FilterController/index.jsx

@@ -1,8 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import clsx from "clsx";
-
 import { Typography, Button, Paper } from "@material-ui/core";
 
 import useStyles from "./style";
@@ -17,7 +15,9 @@ export default function FilterController(props) {
     <Paper
       position="fixed"
       elevation={0}
-      className={clsx(classes.filterControlPaper)}
+      classes={{
+        root: classes.filterControlPaper,
+      }}
     >
       <Button
         variant="outlined"

src/components/FilterController/index.test.jsx

@@ -3,7 +3,7 @@ import { render, fireEvent } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
-import FilterController from "./index";
+import FilterController from "@bach/components/FilterController"
 
 describe("Filter Controller", () => {
   const defaultProps = {

src/components/FilterController/style.js

@@ -1,27 +1,15 @@
 import { makeStyles } from "@material-ui/core/styles";
 
-export default makeStyles(() => ({
+export default makeStyles((theme) => ({
   filterControlPaper: {
+    backgroundColor: "inherit",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     padding: "17px",
   },
   visibilityBtn: {
-    flex: "none",
-    order: 0,
-    flexGrow: 0,
-    margin: "0px 0px",
-    height: "32px",
-    left: 0,
-    top: 0,
-    borderRadius: 4,
-    color: "#007DFF",
-    borderColor: "#007DFF",
-    fontFamily: "Roboto",
-    fontStyle: "normal",
-    fontWeight: 500,
-    fontSize: 14,
-    lineHeight: 24,
+    color: theme.palette.primary.main,
+    borderColor: theme.palette.primary.main,
   },
 }));

src/components/FilterMenu/index.jsx

@@ -26,60 +26,63 @@ export default function FilterMenu(props) {
 
   const onSearchClick = () => search();
 
-  const GlobalCss = withStyles({
-    "@global": {
-      ".MuiCardHeader-title": {
-        fontSize: "1.2em",
-        alignSelf: "center",
-        position: "relative",
+  const GlobalCss = withStyles((theme) => {
+    return {
+      "@global": {
+        ".MuiCardHeader-title": {
+          fontSize: "1.2em",
+          alignSelf: "center",
+          position: "relative",
+        },
+        ".MuiCardContent-root": {
+          padding: "0px",
+          display: "flow-root",
+        },
+        ".MuiCardHeader-root": {
+          background: theme.palette.secondary.main,
+          color: theme.palette.secondary.contrastText,
+          boxShadow: "inset 0px -1px 0px #E0E0E0",
+          /* Inside Auto Layout */
+          flex: "none",
+          order: 0,
+          alignSelf: "normal",
+          flexGrow: 0,
+          margin: "0px 0px",
+        },
+        "MuiFormControl-root": {
+          display: "flex",
+        },
+        ".MuiCardActions-root": {
+          /* Sidebar / Footer */
+
+          /* Auto Layout */
+
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "12px",
+
+          position: "static",
+          width: "-webkit-fill-available",
+          height: "56px",
+          left: "0px",
+          top: "312px",
+          background: theme.palette.secondary.main,
+          border: "1px solid #E0E0E0",
+          boxSizing: "border-box",
+          borderRadius: "0px 0px 4px 4px",
+          verticalAlign: "baseline",
+          /* Inside Auto Layout */
+
+          flex: "none",
+          order: 2,
+          alignSelf: "flex-start",
+          flexGrow: 0,
+          margin: "0px 0px",
+        },
       },
-      ".MuiCardContent-root": {
-        padding: "0px",
-        display: "flow-root",
-      },
-      ".MuiCardHeader-root": {
-        background: "#EEEEEE",
-        boxShadow: "inset 0px -1px 0px #E0E0E0",
-        /* Inside Auto Layout */
-        flex: "none",
-        order: 0,
-        alignSelf: "normal",
-        flexGrow: 0,
-        margin: "0px 0px",
-      },
-      "MuiFormControl-root": {
-        display: "flex",
-      },
-      ".MuiCardActions-root": {
-        /* Sidebar / Footer */
-
-        /* Auto Layout */
-
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: "12px",
-
-        position: "static",
-        width: "-webkit-fill-available",
-        height: "56px",
-        left: "0px",
-        top: "312px",
-        background: "#EEEEEE",
-        border: "1px solid #E0E0E0",
-        boxSizing: "border-box",
-        borderRadius: "0px 0px 4px 4px",
-        verticalAlign: "baseline",
-        /* Inside Auto Layout */
-
-        flex: "none",
-        order: 2,
-        alignSelf: "flex-start",
-        flexGrow: 0,
-        margin: "0px 0px",
-      },
-    },
+    };
   })(() => null);
 
   return (