Setting up router and home view (ongoing)

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {

src/components/Router.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Router as ReactRouter, Route, Switch } from 'react-router-dom'
+import { createBrowserHistory as createHistory } from 'history'
+
+/* Site */
+import Home from 'views/Home'
+import Team from 'views/Team'
+import Member from 'views/Member'
+
+const history = createHistory()
+history.listen(location => {
+	window.scrollTo(0,0)
+})
+
+export function Router(props) {
+	return (
+		<ReactRouter history = { history }>
+			<Switch>
+				<Route exact path='/' component={Home} />
+				<Route exact path='/team' render={(props) => <Team {...props} />} />
+				<Route exact path='/member' render={(props) => <Member {...props} />} />
+			</Switch>
+		</ReactRouter>
+	)
+}
+
+// class Router extends React.Component {
+//   constructor(props) {
+//     super(props)
+//   }
+
+// 	componentDidMount() {
+// 		ReactGA.pageview(window.location.pathname)
+// 	}
+
+//   render() {
+// 		return (
+// 			<ReactRouter history = { history }>
+// 				<Switch>
+// 					<Route exact path='/' component={Home} />
+// 					<Route exact path='/featured' component={Featured} />
+// 					<Route
+// 						path="/blog"
+// 						render={({ match: { path } }) => (
+// 							<div>
+// 								<Route exact path={path} render={(props) => <Blog {...props} />} />
+// 								<Route path={`${path}/why-we-need-to-do-more-to-protect-our-children`} render={PostDoMore} />
+// 							</div>
+// 						)}
+// 					/>
+// 				</Switch>
+// 			</ReactRouter>
+// 		)
+// 	}
+// }
+
+// export default Router

src/config.json

@@ -0,0 +1,3 @@
+{
+	"api": "http://tempo-test.herokuapp.com/7d1d085e-dbee-4483-aa29-ca033ccae1e4/1"
+}

src/views/Home.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import config from '../config.json'
+
+export default function Home() {
+	// MARK: State
+	let [loading, setLoading] = useState(true)
+	let [teams, setTeams] = useState([])
+	let [members, setMembers] = useState([])
+	let [teamDetails, setTeamDetails] = useState([])
+
+	// MARK: Effects
+	// MAKR: - Load data from Tempo backend on initialization
+	useEffect(() => {
+		let fetchData = async() => {
+			setLoading(true)
+			try {
+				let result = await axios(config.api + '/team/')
+				if (result.data) {
+					setTeams(result.data)
+					console.log('Backend ok')
+				}
+				setLoading(false)
+			}
+			catch(err) {
+				setLoading(false)
+				console.log('Fetch data error: ' + err)
+			}
+		}
+
+		fetchData()
+	}, [])
+}
+