Add routes

src/App.css

@@ -2,4 +2,13 @@ html {
     background: #f5f5f5;
     font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
     padding: 16px;
+}
+
+a {
+    text-decoration: none;
+}
+
+h1 {
+    color: #444;
+    font-weight: 500;
 }

src/App.tsx

@@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react'
 import './App.css'
 
 import Header from './Header/Header'
+import Main from './Main/Main'
 
 function App() {
     const [parties, setParties] = useState(false)
@@ -11,7 +12,7 @@ function App() {
     }, [])
 
     function getParty() {
-        fetch('http://localhost:3001')
+        fetch('http://localhost:3001/parties')
             .then(response => {
                 return response.text()
             })
@@ -54,12 +55,7 @@ function App() {
     return (
         <div>
             <Header />
-
+            <Main />
-            {parties ? parties : 'There are no parties available'}
-            <br />
-            <button onClick={createParty}>New party</button>
-            <br />
-            <button onClick={deleteParty}>Delete party</button>
         </div>
     )
 }

src/Main/Main.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Switch, Route } from 'react-router-dom'
+
+import New from '../routes/New/New'
+import Party from '../routes/Party/Party'
+import Parties from '../routes/Parties/Parties'
+
+// The Main component renders one of the three provided
+// Routes (provided that one matches). Both the /roster
+// and /schedule routes will match any pathname that starts
+// with /roster or /schedule. The / route will only match
+// when the pathname is exactly the string "/"
+const Main = () => (
+  <main>
+    <Switch>
+      <Route exact path='/' component={New} />
+      <Route exact path='/parties/' component={Parties} />
+      <Route path='/:hash' component={Party} />
+    </Switch>
+  </main>
+)
+
+export default Main

src/routes/New/New.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import WeaponGrid from '../../WeaponGrid/WeaponGrid'
+
+const New = () => (
+    <div>
+        <h1>New party</h1>
+    </div>
+)
+
+export default New

src/routes/Parties/Parties.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+interface State {
+    parties: {id: string, hash: string}[]
+}
+
+class Parties extends React.Component {
+    state: State
+    
+    constructor(props) {
+        super(props)
+        this.state = {
+            parties: []
+        }
+    }
+    getParties() {
+        fetch('http://localhost:3001/parties/')
+            .then(response => response.json())
+            .then(parties => this.setState({
+                parties: parties
+            }))
+    }
+
+    render() {
+        this.getParties()
+        const items = this.state.parties.map((party: {id: string, hash: string }) =>
+            <li key={party.id}><a href={'../' + party.hash}>{party.hash}</a></li>
+        )
+        return (
+            <div>
+                <h1>A list of parties</h1>
+                <ul>{items}</ul>
+            </div>
+        )
+    }
+}
+
+export default Parties

src/routes/Party/Party.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {withRouter} from 'react-router'
+
+class Party extends React.Component {
+    render() {
+        var hash = this.props.match.params.hash
+        return (
+            <div>
+                <h1>A specific party with hash: {hash}</h1>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Party)