code linting and cleanup

Author: reverentgeek

.eslintrc.js

@@ -0,0 +1,12 @@
+"use strict";
+
+module.exports = {
+    extends: [ 
+		"reverentgeek/browser", 
+		"reverentgeek/blog",
+	    "plugin:react/recommended" 
+	],
+	rules: {
+		"no-var": [ "error" ]
+	}
+};

package-lock.json

@@ -37,5 +37,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^6.8.0",
+    "eslint-config-reverentgeek": "^2.1.2",
+    "eslint-plugin-react": "^7.19.0"
   }
 }

package.json

@@ -1,14 +1,14 @@
-import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import AppWithRouterAccess from './AppWithRouterAccess';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import AppWithRouterAccess from "./AppWithRouterAccess";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 const App = () => {
   return (
     <Router>
       <AppWithRouterAccess/>
     </Router>
   );
-}
+};
 
-export default App;
+export default App;

src/App.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+test( "renders learn react link", () => {
+  const { getByText } = render( <App /> );
+  const linkElement = getByText( /learn react/i );
+  expect( linkElement ).toBeInTheDocument();
+} );

src/App.test.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import { Route, useHistory } from 'react-router-dom';
-import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
-import Home from './Pages/Home';
-import Game from './Pages/Game'
-import Login from './Pages/Login'
+import React from "react";
+import { Route, useHistory } from "react-router-dom";
+import { Security, SecureRoute, LoginCallback } from "@okta/okta-react";
+import Home from "./Pages/Home";
+import Game from "./Pages/Game";
+import Login from "./Pages/Login";
 
 const AppWithRouterAccess = () => {
   const history = useHistory();
   const onAuthRequired = () => {
-    history.push('/login');
+    history.push( "/login" );
   };
 
   const baseDomain = process.env.REACT_APP_OKTA_URL_BASE;
-  const issuer = baseDomain + '/oauth2/default'
+  const issuer = baseDomain + "/oauth2/default";
   const clientId = process.env.REACT_APP_OKTA_CLIENTID;
-  const redirect = process.env.REACT_APP_OKTA_APP_BASE_URL + '/implicit/callback';
+  const redirect = process.env.REACT_APP_OKTA_APP_BASE_URL + "/implicit/callback";
 
   return (
     <Security issuer={issuer}
@@ -29,4 +29,4 @@ const AppWithRouterAccess = () => {
     </Security>
   );
 };
-export default AppWithRouterAccess;
+export default AppWithRouterAccess;

src/AppWithRouterAccess.jsx

@@ -1,28 +1,28 @@
-import React from 'react';
+import React from "react";
 
-import '../cards.css';
+import "../cards.css";
 
-const Card = ({ card }) => {
+const Card = ( { card } ) => {
 
-    var content;
+  let content;
 
-    if (card.visible) {
-        var cardClass = "card rank-" + card.rank.toLowerCase() + " " + card.suit;
-        content =
+  if ( card.visible ) {
+    const cardClass = "card rank-" + card.rank.toLowerCase() + " " + card.suit;
+    content =
             <div className={cardClass}>
-                <div className="rank">{card.rank}</div>
-                <div className="suit"></div>
+              <div className="rank">{card.rank}</div>
+              <div className="suit"></div>
             </ div>;
-    }
-    else {
-        content = <div className="card back">*</div>
-    }
+  }
+  else {
+    content = <div className="card back">*</div>;
+  }
 
-    return (
-        <div className="playingCards faceImages">
-            {content}
-        </div>
-    );
+  return (
+    <div className="playingCards faceImages">
+      {content}
+    </div>
+  );
 };
 
-export default Card;
+export default Card;