Finalized route validation + component support for localStorage

.eslintrc.json

@@ -6,7 +6,9 @@
     },
     "extends": [
         "plugin:react/recommended",
-	"prettier"
+	"prettier",
+        "plugin:security/recommended",
+        "plugin:node"
     ],
     "globals": {
         "Atomics": "readonly",
@@ -22,11 +24,22 @@
     "plugins": [
         "react",
 	"react-hooks",
-	"prettier"
+	"prettier",
+        "security",
+        "node"
     ],
     "rules": {
 	 "react-hooks/rules-of-hooks": "error",
     	 "react-hooks/exhaustive-deps": "warn",
-	 "prettier/prettier": ["error"]
+	 "prettier/prettier": ["error"],
+         "node/exports-style": ["warn", "module.exports"],
+        "node/file-extension-in-import": ["warn", "always"],
+        "node/prefer-global/buffer": ["warn", "always"],
+        "node/prefer-global/console": ["warn", "always"],
+        "node/prefer-global/process": ["warn", "always"],
+        "node/prefer-global/url-search-params": ["warn", "always"],
+        "node/prefer-global/url": ["warn", "always"],
+        "node/prefer-promises/dns": "warn",
+        "node/prefer-promises/fs": "warn"
     }
 }

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "engines": {
-    "npm": "6.13.4",
-    "node": "10.19.0"
+    "npm": ">=6.0.0",
+    "node": ">=10.0.0"
   },
   "dependencies": {
     "@hapi/joi": "^17.1.0",
@@ -40,9 +40,11 @@
   "devDependencies": {
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.4.0",
+    "eslint-plugin-security": "^1.4.0",
     "immutable": "^4.0.0-rc.12",
     "mongoose": "^5.9.3",
     "node-sass": "^4.13.1",

src/components/Customize.js

@@ -1,29 +1,28 @@
 import React, {useState, useEffect} from 'react'
-import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
-import Header from './static/Header'
-import Footer from './static/Footer'
-import News from './News'
-import TopicsCheckbox from './static/TopicsCheckbox'
-import SourcesCheckbox from './static/SourcesCheckbox'
-import RefreshIntervals from './static/RefreshIntervals'
+import {Link} from 'react-router-dom'
+import News from './News.js'
+import Header from './static/Header.js'
+import Footer from './static/Footer.js'
+import TopicsCheckbox from './static/TopicsCheckbox.js'
+import SourcesCheckbox from './static/SourcesCheckbox.js'
+import RefreshIntervals from './static/RefreshIntervals.js'
+import {lsTest} from '../helpers/storageCheck.js'
 // import '../styles/customize.css'
 
 export default function Customize() {
    const [myOptions, setMyOptions] = useState({})
 
+   useEffect(() => {
+      browserSet()
+   }, [myOptions])
+
    return (
       <React.Fragment>
          <Header />
          <TopicsCheckbox handler={setTopics} />
          <SourcesCheckbox handler={setSources} />
          <RefreshIntervals handler={setInterval} />
-         <Link
-            to={{
-               pathname: '/news',
-               state: {
-                  options: myOptions
-               }
-            }}>
+         <Link to='/news'>
             <button className='go'> GO </button>
          </Link>
          <Footer />
@@ -39,4 +38,12 @@ export default function Customize() {
    function setInterval(arr) {
       setMyOptions({...myOptions, myInterval: arr})
    }
+
+   function browserSet() {
+      if (Object.keys(myOptions).length !== 0) {
+         lsTest()
+            ? window.localStorage.setItem('myNews', JSON.stringify(myOptions))
+            : alert("Please enable your web browser's local storage to use this app!")
+      }
+   }
 }