From 50869e1ec0d415937ca461f88832270cce11722e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 25 Sep 2020 14:50:53 -0700
Subject: [PATCH] Starts of a Profile route

---
 src/components/Main/Main.tsx |  8 +++--
 src/routes/Profile/index.tsx | 57 ++++++++++++++++++++++++++++++++++++
 src/types/GridArray.d.ts     |  1 +
 3 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/Profile/index.tsx
 create mode 100644 src/types/GridArray.d.ts

diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 8298674d..be349c66 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -3,9 +3,10 @@ import { Router, Route } from 'react-router-dom'
 
 import history from '~utils/history'
 
-import New from '~routes/New/New'
-import Party from '~routes/Party/Party'
-import Parties from '~routes/Parties/Parties'
+import New from '~routes/New'
+import Party from '~routes/Party'
+import Parties from '~routes/Parties'
+import Profile from '~routes/Profile'
 
 // The Main component renders one of the three provided
 // Routes (provided that one matches). Both the /roster
@@ -18,6 +19,7 @@ const Main = () => (
       <Route exact path='/' component={New} />
       <Route exact path='/parties/' component={Parties} />
       <Route path='/p/:hash' component={Party} />
+      <Route path='/:username' component={Profile} />
     </Router>
   </main>
 )
diff --git a/src/routes/Profile/index.tsx b/src/routes/Profile/index.tsx
new file mode 100644
index 00000000..1a41768a
--- /dev/null
+++ b/src/routes/Profile/index.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react'
+import { withCookies, useCookies } from 'react-cookie'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
+import api from '~utils/api'
+
+interface Props {
+    username: string
+}
+
+interface User {
+    id: string
+    username: string
+    granblueId: number
+}
+
+interface ProfileProps extends RouteComponentProps<Props> {}
+
+const Profile: React.FC<ProfileProps> = ({ match }) => {
+    const [cookies, setCookie] = useCookies(['user'])
+    const [user, setUser] = useState<User>({
+        id: '',
+        username: '',
+        granblueId: 0
+    })
+    const [parties, setParties] = useState<GridArray[]>([])
+
+    const username = match.params.username || ''
+
+    useEffect(() => {
+        fetchProfile(username)
+    }, [])
+
+    async function fetchProfile(username: string) {
+        api.endpoints.users.getOne({ id: username })
+            .then(response => {
+                setUser({
+                    id: response.data.user.id,
+                    username: response.data.user.username,
+                    granblueId: response.data.user.granblue_id
+                })
+                setParties(response.data.user.parties)
+            })
+    }
+
+    return (
+        <div>
+            <h1>{user.username}</h1>
+        </div>
+    )
+}
+
+export default 
+    withCookies(
+        withRouter(
+            Profile
+        )
+    )
\ No newline at end of file
diff --git a/src/types/GridArray.d.ts b/src/types/GridArray.d.ts
new file mode 100644
index 00000000..c469f749
--- /dev/null
+++ b/src/types/GridArray.d.ts
@@ -0,0 +1 @@
+type GridArray = { [key: number]: Weapon }
\ No newline at end of file