From 093077b92af7f8f008d5bdbd25833386e7c7cd3b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 11 Sep 2020 09:08:48 -0700
Subject: [PATCH] Add routes

---
 src/App.css                    |  9 ++++++++
 src/App.tsx                    | 10 +++------
 src/Main/Main.tsx              | 23 ++++++++++++++++++++
 src/routes/New/New.tsx         | 10 +++++++++
 src/routes/Parties/Parties.tsx | 38 ++++++++++++++++++++++++++++++++++
 src/routes/Party/Party.tsx     | 15 ++++++++++++++
 6 files changed, 98 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/New/New.tsx
 create mode 100644 src/routes/Parties/Parties.tsx
 create mode 100644 src/routes/Party/Party.tsx

diff --git a/src/App.css b/src/App.css
index 1264c166..9e1cda4d 100644
--- a/src/App.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 88f46ffe..64991b34 100644
--- a/src/App.tsx
+++ b/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 />
-
-            {parties ? parties : 'There are no parties available'}
-            <br />
-            <button onClick={createParty}>New party</button>
-            <br />
-            <button onClick={deleteParty}>Delete party</button>
+            <Main />
         </div>
     )
 }
diff --git a/src/Main/Main.tsx b/src/Main/Main.tsx
index e69de29b..668edee6 100644
--- a/src/Main/Main.tsx
+++ b/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
diff --git a/src/routes/New/New.tsx b/src/routes/New/New.tsx
new file mode 100644
index 00000000..bc644659
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/routes/Parties/Parties.tsx b/src/routes/Parties/Parties.tsx
new file mode 100644
index 00000000..d9fbd1dc
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/routes/Party/Party.tsx b/src/routes/Party/Party.tsx
new file mode 100644
index 00000000..503bbeac
--- /dev/null
+++ b/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)
\ No newline at end of file