Starts of a Profile route

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 New from '~routes/New'
-import Party from '~routes/Party/Party'
+import Party from '~routes/Party'
-import Parties from '~routes/Parties/Parties'
+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>
 )

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
+        )
+    )

src/types/GridArray.d.ts

@@ -0,0 +1 @@
+type GridArray = { [key: number]: Weapon }