Tweaked ESLint + Prettier configs; Fleshed out some Router logic

.eslintrc.json

@@ -5,8 +5,8 @@
         "node": true
     },
     "extends": [
-	"eslint:recommended",
-        "plugin:react/recommended"
+        "plugin:react/recommended",
+	"prettier"
     ],
     "globals": {
         "Atomics": "readonly",
@@ -27,6 +27,6 @@
     "rules": {
 	 "react-hooks/rules-of-hooks": "error",
     	 "react-hooks/exhaustive-deps": "warn",
-	 "prettier/prettier": "error"
+	 "prettier/prettier": ["error"]
     }
 }

.prettierrc

@@ -0,0 +1,10 @@
+{
+    "arrowParens": "always",
+    "jsxSingleQuote": true,
+    "semi": false,
+    "singleQuote": true,
+    "jsxBracketSameLine": true,
+    "bracketSpacing": false,
+    "tabWidth": 3,
+    "printWidth": 120
+}

package.json

@@ -43,6 +43,7 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.4.0",
-    "node-sass": "^4.13.1"
+    "node-sass": "^4.13.1",
+    "prettier": "^1.19.1"
   }
 }

src/components/Header.js

@@ -1,10 +1,13 @@
 import React, {useState, useContext, useEffect, useCallback, useMemo} from 'react'
+import {Link} from 'react-router-dom'
 import '../styles/header.css'
 
 export default function Header() {
    return (
       <header>
-         <h1>Slide News</h1>
+         <h1>
+            <Link to='/'>Slide News</Link>
+         </h1>
       </header>
    )
 }

src/components/Intro.js

@@ -1,6 +1,11 @@
 import React, {useState, useContext, useEffect, useCallback, useMemo} from 'react'
+import {Link} from 'react-router-dom'
 import '../styles/intro.css'
 
 export default function Intro() {
-   return <div>Customize your news...</div>
+   return (
+      <div>
+         <Link to='/customize'>Customize your news...</Link>
+      </div>
+   )
 }

src/components/MainApp.js

@@ -2,23 +2,51 @@ import React, {Component} from 'react'
 import Header from './Header'
 import Footer from './Footer'
 import Intro from './Intro'
-const moment = require('moment')
+import {BrowserRouter as Router, Link, Switch, Route, Redirect} from 'react-router-dom'
+// const moment = require('moment')
 
 export class MainApp extends Component {
    constructor(props) {
       super(props)
-      this.state = {}
+      this.state = {newUser: true}
    }
 
    render() {
       return (
-         <React.Fragment>
-            <Header />
-            <Intro />
-            <Footer />
-         </React.Fragment>
+         <Router>
+            <Switch>
+               <Route exact path='/'>
+                  {!this.state.newUser ? <Redirect exact from='/' to='/news' /> : <Home />}
+               </Route>
+               <Route exact path='/customize' component={Customize} />
+               <Route exact path='/news' component={News} />
+            </Switch>
+         </Router>
       )
    }
 }
 
+const Home = () => (
+   <React.Fragment>
+      <Header />
+      <Intro />
+      <Footer />
+   </React.Fragment>
+)
+
+const Customize = () => (
+   <React.Fragment>
+      <Header />
+      <Footer />
+   </React.Fragment>
+)
+
+const News = () => (
+   <React.Fragment>
+      <Header />
+      <div>Will add main news component here</div>
+      <Footer />
+   </React.Fragment>
+)
+
 export default MainApp

src/scss/footer.scss

@@ -1,3 +1,3 @@
 footer {
-    border: 1px solid red
-}
+  border: 1px solid red;
+}

src/scss/header.scss

@@ -1,6 +1,11 @@
 header {
-    h1 {
-        border: 1px solid green;
-        font-size: 100px;
+  h1 {
+    border: 1px solid green;
+    font-size: 100px;
+    a,
+    a:visited {
+      color: black;
+      text-decoration: none;
     }
-}
+  }
+}

src/scss/intro.scss

@@ -1,4 +1,3 @@
 div {
-    border: 1px solid orange;
-
-}
+  border: 1px solid purple;
+}

src/styles/header.css

@@ -1,3 +1,7 @@
 header h1 {
   border: 1px solid green;
   font-size: 100px; }
+  header h1 a,
+  header h1 a:visited {
+    color: black;
+    text-decoration: none; }

src/styles/intro.css

@@ -1,2 +1,2 @@
 div {
-  border: 1px solid orange; }
+  border: 1px solid purple; }