WIP feat/code-quality: Code Quality Improvements

.eslintrc.js

@@ -5,15 +5,15 @@ module.exports = {
     "react/jsx-filename-extension": [
       1,
       {
-        extensions: [".js", ".jsx"]
-      }
+        extensions: [".js", ".jsx"],
+      },
     ],
     "no-console": 0,
     "react/forbid-prop-types": [
-      true,
+      2,
       {
-        forbid: ["any"]
-      }
+        forbid: ["any"],
+      },
     ],
     "react/destructuring-assignment": 0,
     "react/no-array-index-key": 0,
@@ -24,7 +24,7 @@ module.exports = {
       {
         blankLine: "never",
         prev: ["singleline-const", "singleline-let", "singleline-var"],
-        next: ["singleline-const", "singleline-let", "singleline-var"]
+        next: ["singleline-const", "singleline-let", "singleline-var"],
       },
       {
         blankLine: "always",
@@ -35,7 +35,7 @@ module.exports = {
           "multiline-let",
           "multiline-var",
           "multiline-expression",
-          "multiline-block-like"
+          "multiline-block-like",
         ],
         next: [
           "class",
@@ -47,8 +47,8 @@ module.exports = {
           "multiline-block-like",
           "singleline-const",
           "singleline-let",
-          "singleline-var"
-        ]
+          "singleline-var",
+        ],
       },
       {
         blankLine: "always",
@@ -62,7 +62,7 @@ module.exports = {
           "multiline-block-like",
           "singleline-const",
           "singleline-let",
-          "singleline-var"
+          "singleline-var",
         ],
         next: [
           "class",
@@ -71,42 +71,42 @@ module.exports = {
           "multiline-let",
           "multiline-var",
           "multiline-expression",
-          "multiline-block-like"
-        ]
+          "multiline-block-like",
+        ],
       },
       {
         blankLine: "always",
         prev: "*",
-        next: "cjs-export"
+        next: "cjs-export",
       },
       {
         blankLine: "always",
         prev: "cjs-import",
-        next: "*"
+        next: "*",
       },
       {
         blankLine: "never",
         prev: "cjs-import",
-        next: "cjs-import"
+        next: "cjs-import",
       },
       {
         blankLine: "always",
         prev: "*",
-        next: "return"
-      }
-    ]
+        next: "return",
+      },
+    ],
   },
   env: {
     jest: true,
     browser: true,
     node: true,
-    es6: true
+    es6: true,
   },
   parserOptions: {
     ecmaVersion: 6,
     sourceType: "module",
     ecmaFeatures: {
-      jsx: true
-    }
-  }
+      jsx: true,
+    },
+  },
 };

.gitignore

@@ -15,6 +15,7 @@ package-lock.json
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -9,60 +9,57 @@
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
     "eject": "react-scripts eject",
-    "lint": "eslint \"src/**/*.{js,jsx}\""
+    "lint": "eslint \"src/**/*.{js,jsx}\"",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.15",
-    "@fortawesome/free-brands-svg-icons": "^5.7.2",
-    "@fortawesome/free-solid-svg-icons": "^5.7.2",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "bootstrap": "^4.1.1",
-    "classnames": "^2.2.6",
-    "is-url": "^1.2.4",
-    "jquery": "^3.4.0",
-    "lodash": "^4.17.15",
-    "mapbox-gl": "^0.45.0-beta.1",
-    "node-sass": "^4.12.0",
-    "popper.js": "^1.14.7",
-    "prop-types": "^15.7.2",
-    "qs-lite": "^0.0.1",
-    "query-string": "^6.2.0",
-    "react": "16.8.6",
-    "react-beautiful-dnd": "^9.0.2",
-    "react-dom": "16.8.6",
-    "react-fontawesome": "^1.6.1",
-    "react-google-maps": "^9.4.5",
-    "react-loader-spinner": "^2.3.0",
-    "react-mapbox-gl": "^3.8.0",
-    "react-read-more-less": "^0.1.6",
+    "@fortawesome/fontawesome-svg-core": "1.2.21",
+    "@fortawesome/free-brands-svg-icons": "5.10.1",
+    "@fortawesome/free-solid-svg-icons": "5.10.1",
+    "@fortawesome/react-fontawesome": "0.1.4",
+    "bootstrap": "4.3.1",
+    "classnames": "2.2.6",
+    "is-url": "1.2.4",
+    "jquery": "3.4.1",
+    "lodash": "4.17.15",
+    "node-sass": "4.12.0",
+    "popper.js": "1.15.0",
+    "prop-types": "15.7.2",
+    "query-string": "6.8.2",
+    "react": "16.9.0",
+    "react-beautiful-dnd": "11.0.5",
+    "react-dom": "16.9.0",
+    "react-fontawesome": "1.6.1",
+    "react-google-maps": "9.4.5",
+    "react-read-more-less": "0.1.6",
     "react-redux": "7.1.0",
     "react-router": "5.0.1",
     "react-router-dom": "5.0.1",
-    "react-testing-library": "^6.1.2",
-    "reactstrap": "^5.0.0",
+    "react-testing-library": "8.0.1",
+    "reactstrap": "8.0.1",
     "recompose": "0.30.0",
     "redux": "4.0.4",
-    "redux-immutable-state-invariant": "^2.1.0",
+    "redux-immutable-state-invariant": "2.1.0",
     "redux-thunk": "2.3.0",
-    "sass-loader": "^7.1.0",
-    "tabletop": "^1.5.2"
+    "sass-loader": "7.2.0",
+    "source-map-explorer": "2.0.1",
+    "tabletop": "1.5.2"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.7.2",
-    "babel-eslint": "10.0.1",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.12.1",
-    "eslint-config-airbnb": "17.1.1",
+    "@fortawesome/fontawesome-free": "5.10.1",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
+    "eslint-config-airbnb": "18.0.0",
     "eslint-config-prettier": "6.0.0",
-    "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "3.1.0",
-    "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react": "7.14.3",
     "husky": "3.0.3",
-    "jest-emotion": "^10.0.10",
+    "jest-emotion": "10.0.14",
     "lint-staged": "9.2.1",
     "prettier": "1.18.2",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.1.0"
   },
   "husky": {
     "hooks": {

src/App/AppContainer.js

@@ -27,22 +27,20 @@ function sheetIdFromPath(directory, path) {
 }
 
 class AppContainer extends Component {
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    match: PropTypes.object.isRequired,
-    isFetchingResource: PropTypes.bool.isRequired,
+  state = {
+    position: {},
+    displayFeedbackLink: false,
+    isValidPage: true,
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      position: {},
-      displayFeedbackLink: true,
-      isValidPage: true,
-    };
-  }
-
   componentDidMount() {
+    const hideFeedbackTs = localStorage.getItem("hideFeedback");
+
+    if (hideFeedbackTs === null || Date.now() > parseInt(hideFeedbackTs, 10)) {
+      localStorage.removeItem("hideFeedback");
+      this.setState({ displayFeedbackLink: true });
+    }
+    console.log(hideFeedbackTs, typeof hideFeedbackTs);
     const resourcePath = this.props.match.params.resource;
     let resourceSheetId = null;
 
@@ -62,6 +60,8 @@ class AppContainer extends Component {
   }
 
   hideFeedbackLink = () => {
+    const weekMillis = 7 * 24 * 60 * 60 * 1000;
+    localStorage.setItem("hideFeedback", Date.now() + weekMillis);
     this.setState({ displayFeedbackLink: false });
   };
 
@@ -139,6 +139,12 @@ class AppContainer extends Component {
   }
 }
 
+AppContainer.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  match: PropTypes.object.isRequired,
+  isFetchingResource: PropTypes.bool.isRequired,
+};
+
 function mapStateToProps(state) {
   const { isFetchingResource } = state;
 

src/action/actionType.js

@@ -2,8 +2,8 @@ export const LOAD_RESOURCE_DATA_START = "LOAD_RESOURCE_DATA_START";
 export const LOAD_RESOURCE_DATA_SUCCESS = "LOAD_RESOURCE_DATA_SUCCESS";
 export const LOAD_RESOURCE_DATA_FAILURE = "LOAD_RESOURCE_DATA_FAILURE";
 export const LOAD_CATEGORIES = "LOAD_CATEGORIES";
-export const FILTER_RESOURCE_BY_CATEGORIES = "FILTER_RESOURCE_BY_CATEGORIES";
-export const FILTER_RESOURCE_BY_SEARCH = "FILTER_RESOURCE_BY_SEARCH";
+export const FILTER_RESOURCES_BY_CATEGORIES = "FILTER_RESOURCES_BY_CATEGORIES";
+export const FILTER_RESOURCES_BY_SEARCH = "FILTER_RESOURCES_BY_SEARCH";
 export const ADD_SAVED_RESOURCE = "ADD_SAVED_RESOURCE";
 export const REMOVE_SAVED_RESOURCE = "REMOVE_SAVED_RESOURCE";
-export const CLEAR_SAVED_RESOURCE = "CLEAR_SAVED_RESOURCE";
+export const CLEAR_SAVED_RESOURCES = "CLEAR_SAVED_RESOURCES";

src/action/resourceDataAction.js

@@ -6,9 +6,9 @@ const loadResourceDataStart = () => ({
   isFetchingResource: true,
 });
 
-const loadResourceDataSuccess = resource => ({
+const loadResourceDataSuccess = resources => ({
   type: types.LOAD_RESOURCE_DATA_SUCCESS,
-  resource,
+  resources,
   isFetchingResource: false,
 });
 
@@ -37,11 +37,11 @@ export function loadResources(resourcePath) {
 }
 
 export function filterByCategories(filteredResource) {
-  return { type: types.FILTER_RESOURCE_BY_CATEGORIES, filteredResource };
+  return { type: types.FILTER_RESOURCES_BY_CATEGORIES, filteredResource };
 }
 
 export function filterBySearch(searchedResource) {
-  return { type: types.FILTER_RESOURCE_BY_SEARCH, searchedResource };
+  return { type: types.FILTER_RESOURCES_BY_SEARCH, searchedResource };
 }
 
 export function addSavedResource(savedResource) {
@@ -52,6 +52,6 @@ export function removeSavedResource(savedResourceIndex) {
   return { type: types.REMOVE_SAVED_RESOURCE, savedResourceIndex };
 }
 
-export function clearSavedResource() {
-  return { type: types.CLEAR_SAVED_RESOURCE };
+export function clearSavedResources() {
+  return { type: types.CLEAR_SAVED_RESOURCES };
 }