From b68cca53a7b8f2c94ecf87d29f96d2c45d662dbf Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 23 Feb 2022 19:22:56 -0800
Subject: [PATCH 01/20] Create Raid.d.ts

---
 types/Raid.d.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 types/Raid.d.ts

diff --git a/types/Raid.d.ts b/types/Raid.d.ts
new file mode 100644
index 00000000..7512b944
--- /dev/null
+++ b/types/Raid.d.ts
@@ -0,0 +1,9 @@
+interface Raid {
+    id: string
+    name: { 
+        en: string
+        jp: string
+    }
+    level: number
+    group: number
+}
\ No newline at end of file

From 094d2e83d6ad28278fce14842923e62d265968b8 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 23 Feb 2022 19:23:04 -0800
Subject: [PATCH 02/20] Add party details to state

---
 utils/appState.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/utils/appState.tsx b/utils/appState.tsx
index 8ed49ba3..d3266802 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -6,6 +6,12 @@ interface AppState {
     party: {
         id: string | undefined,
         editable: boolean,
+        name: {
+            en: string,
+            jp: string
+        } | undefined,
+        description: string | undefined,
+        raid: Raid | undefined,
         element: number,
         extra: boolean
     },
@@ -30,6 +36,9 @@ export const initialAppState: AppState = {
     party: {
         id: undefined,
         editable: false,
+        name: undefined,
+        description: undefined,
+        raid: undefined,
         element: 0,
         extra: false
     },

From 45c133f4508ec3d295aff3e18ac46f19bd9b4648 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 23 Feb 2022 19:23:19 -0800
Subject: [PATCH 03/20] Change the sent param for the extra toggle

---
 components/Party/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 20ccb684..5da6cb26 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -38,7 +38,7 @@ const Party = (props: Props) => {
         let body = {
             party: {
                 ...(cookies.user) && { user_id: cookies.user.user_id },
-                is_extra: extra
+                extra: extra
             }
         }
 
@@ -51,7 +51,7 @@ const Party = (props: Props) => {
 
         if (party.id) {
             api.endpoints.parties.update(party.id, {
-                'party': { 'is_extra': event.target.checked }
+                'party': { 'extra': event.target.checked }
             }, headers)
         }
     }

From 0a096e9dc016d6cef45737d9ccc7d37df4213f6b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 23 Feb 2022 19:23:31 -0800
Subject: [PATCH 04/20] Store party details in state when data is fetched

---
 components/CharacterGrid/index.tsx | 13 +++++++++++++
 components/SummonGrid/index.tsx    | 13 +++++++++++++
 components/WeaponGrid/index.tsx    | 13 +++++++++++++
 3 files changed, 39 insertions(+)

diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index 4a1eb463..e8b63548 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -78,6 +78,19 @@ const CharacterGrid = (props: Props) => {
         // Store the important party and state-keeping values
         appState.party.id = party.id
 
+        // Store the party's user-generated details
+        if (party.name) {
+            appState.party.name = {
+                en: party.name.en,
+                jp: party.name.jp
+            }
+        }
+        if (party.description)
+            appState.party.description = party.description
+
+        if (party.raid)
+            appState.raid = party.raid
+
         setFound(true)
         setLoading(false)
 
diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx
index 5f472e31..7a5c1437 100644
--- a/components/SummonGrid/index.tsx
+++ b/components/SummonGrid/index.tsx
@@ -88,6 +88,19 @@ const SummonGrid = (props: Props) => {
         // Store the important party and state-keeping values
         appState.party.id = party.id
 
+        // Store the party's user-generated details
+        if (party.name) {
+            appState.party.name = {
+                en: party.name.en,
+                jp: party.name.jp
+            }
+        }
+        if (party.description)
+            appState.party.description = party.description
+
+        if (party.raid)
+            appState.raid = party.raid
+
         setFound(true)
         setLoading(false)
 
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx
index 0be9798a..55727517 100644
--- a/components/WeaponGrid/index.tsx
+++ b/components/WeaponGrid/index.tsx
@@ -85,6 +85,19 @@ const WeaponGrid = (props: Props) => {
         appState.party.id = party.id
         appState.party.extra = party.is_extra
 
+        // Store the party's user-generated details
+        if (party.name) {
+            appState.party.name = {
+                en: party.name.en,
+                jp: party.name.jp
+            }
+        }
+        if (party.description)
+            appState.party.description = party.description
+
+        if (party.raid)
+            appState.raid = party.raid
+
         setFound(true)
         setLoading(false)
 

From c4ec4f76cfd48e263918e0cd2cf92f3ee65c489b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:13:30 -0800
Subject: [PATCH 05/20] Add endpoint for raids

---
 utils/api.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/utils/api.tsx b/utils/api.tsx
index e1d02c37..4817829a 100644
--- a/utils/api.tsx
+++ b/utils/api.tsx
@@ -4,7 +4,7 @@ interface Entity {
     name: string
 }
 
-type CollectionEndpoint = ({ query }: { query: AxiosRequestConfig }) => Promise<AxiosResponse<any>>
+type CollectionEndpoint = (headers?: {}) => Promise<AxiosResponse<any>>
 type IdEndpoint = ({ id }: { id: string }) => Promise<AxiosResponse<any>>
 type IdWithObjectEndpoint = ({ id, object }: { id: string, object: string }) => Promise<AxiosResponse<any>>
 type PostEndpoint = (object: {}, headers?: {}) => Promise<AxiosResponse<any>>
@@ -41,7 +41,7 @@ class Api {
         const resourceUrl = `${this.url}/${name}`
 
         return {
-            getAll:  ({ query }: { query: AxiosRequestConfig }) => axios.get(resourceUrl, { params: { query }}),
+            getAll:  (headers?: {}) => axios.get(resourceUrl, headers),
             getOne:  ({ id }: { id: string }) => axios.get(`${resourceUrl}/${id}/`),
             getOneWithObject:  ({ id, object }: { id: string, object: string }) => axios.get(`${resourceUrl}/${id}/${object}`),
             create:  (object: {}, headers?: {}) => axios.post(resourceUrl, object, headers),
@@ -88,5 +88,6 @@ api.createEntity( { name: 'parties' })
 api.createEntity( { name: 'characters' })
 api.createEntity( { name: 'weapons' })
 api.createEntity( { name: 'summons' })
+api.createEntity( { name: 'raids' })
 
 export default api
\ No newline at end of file

From 64b26470ac0ef598e3f68c8e5dadff9462972026 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:13:37 -0800
Subject: [PATCH 06/20] Add react-scroll

---
 package-lock.json | 60 ++++++++++++++++++++++++++++++++++++++++++-----
 package.json      |  2 ++
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6e89a89d..e8da421c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "react-cookie": "^4.1.1",
         "react-dom": "^17.0.2",
         "react-i18next": "^11.15.3",
+        "react-scroll": "^1.8.5",
         "sass": "^1.49.0",
         "valtio": "^1.3.0"
       },
@@ -33,6 +34,7 @@
         "@types/node": "17.0.11",
         "@types/react": "17.0.38",
         "@types/react-dom": "^17.0.11",
+        "@types/react-scroll": "^1.8.3",
         "eslint": "8.7.0",
         "eslint-config-next": "12.0.8",
         "eslint-plugin-valtio": "^0.4.1",
@@ -3093,6 +3095,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-scroll": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.8.3.tgz",
+      "integrity": "sha512-Xt0+Y58pwrIv+vRFxcyKDoo0gBWBR2eNMJ4XRMhQpZdGUtmjnszPi/wFEJSAY+5r83ypJsSA+hOpSc3hRpYlWw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -5330,6 +5341,11 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5792,7 +5808,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5802,8 +5817,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/proxy-compare": {
       "version": "2.0.2",
@@ -5957,6 +5971,19 @@
         }
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.5.tgz",
+      "integrity": "sha512-VcYFWDV2yGeuqeVCt3vxWTGWT4yCcefXOgvNZ16hSD0QTFzNNWiyZKWAVEgmz22PTKJlwRkspALaFI5+cr73OQ==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
@@ -8943,6 +8970,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-scroll": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.8.3.tgz",
+      "integrity": "sha512-Xt0+Y58pwrIv+vRFxcyKDoo0gBWBR2eNMJ4XRMhQpZdGUtmjnszPi/wFEJSAY+5r83ypJsSA+hOpSc3hRpYlWw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -10594,6 +10630,11 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -10918,7 +10959,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -10928,8 +10968,7 @@
         "react-is": {
           "version": "16.13.1",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-          "dev": true
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         }
       }
     },
@@ -11020,6 +11059,15 @@
         "tslib": "^1.0.0"
       }
     },
+    "react-scroll": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.5.tgz",
+      "integrity": "sha512-VcYFWDV2yGeuqeVCt3vxWTGWT4yCcefXOgvNZ16hSD0QTFzNNWiyZKWAVEgmz22PTKJlwRkspALaFI5+cr73OQ==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-style-singleton": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
diff --git a/package.json b/package.json
index 712aaf27..fa87c27b 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.3",
+    "react-scroll": "^1.8.5",
     "sass": "^1.49.0",
     "valtio": "^1.3.0"
   },
@@ -38,6 +39,7 @@
     "@types/node": "17.0.11",
     "@types/react": "17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@types/react-scroll": "^1.8.3",
     "eslint": "8.7.0",
     "eslint-config-next": "12.0.8",
     "eslint-plugin-valtio": "^0.4.1",

From f778fd2cf8e8a382bcc030690bbeceb3093181d8 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:13:47 -0800
Subject: [PATCH 07/20] Add element to Raid type

---
 types/Raid.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/types/Raid.d.ts b/types/Raid.d.ts
index 7512b944..0540c8d6 100644
--- a/types/Raid.d.ts
+++ b/types/Raid.d.ts
@@ -6,4 +6,5 @@ interface Raid {
     }
     level: number
     group: number
+    element: TeamElement
 }
\ No newline at end of file

From 662062b6222a592c42cfe9bc3908606591514544 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:13:56 -0800
Subject: [PATCH 08/20] Fix arrow SVG

---
 public/icons/Arrow.svg | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/icons/Arrow.svg b/public/icons/Arrow.svg
index 29cead04..61369665 100644
--- a/public/icons/Arrow.svg
+++ b/public/icons/Arrow.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.3121 4.60937C2.09636 4.43701 1.78173 4.47219 1.60937 4.68793C1.43701 4.90368 1.47219 5.2183 1.68793 5.39066L6.68107 9.37966C6.75234 9.4366 6.8344 9.47089 6.91856 9.48351C7.05774 9.51055 7.20746 9.47854 7.32678 9.38296L12.311 5.39025C12.5265 5.21761 12.5613 4.90294 12.3886 4.68742C12.216 4.4719 11.9013 4.43714 11.6858 4.60979L7.00557 8.35897L2.3121 4.60937Z" >
+<svg viewBox="0 0 14 14" fill="#444" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.3121 4.60937C2.09636 4.43701 1.78173 4.47219 1.60937 4.68793C1.43701 4.90368 1.47219 5.2183 1.68793 5.39066L6.68107 9.37966C6.75234 9.4366 6.8344 9.47089 6.91856 9.48351C7.05774 9.51055 7.20746 9.47854 7.32678 9.38296L12.311 5.39025C12.5265 5.21761 12.5613 4.90294 12.3886 4.68742C12.216 4.4719 11.9013 4.43714 11.6858 4.60979L7.00557 8.35897L2.3121 4.60937Z" />
 </svg>

From f0cf09dc316e5e0b8060e95e44837f6cbec5b28a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:14:32 -0800
Subject: [PATCH 09/20] Remove user-generated details

This goes somewhere else
---
 components/CharacterGrid/index.tsx | 13 -------------
 components/SummonGrid/index.tsx    | 13 -------------
 components/WeaponGrid/index.tsx    | 13 -------------
 3 files changed, 39 deletions(-)

diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index e8b63548..4a1eb463 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -78,19 +78,6 @@ const CharacterGrid = (props: Props) => {
         // Store the important party and state-keeping values
         appState.party.id = party.id
 
-        // Store the party's user-generated details
-        if (party.name) {
-            appState.party.name = {
-                en: party.name.en,
-                jp: party.name.jp
-            }
-        }
-        if (party.description)
-            appState.party.description = party.description
-
-        if (party.raid)
-            appState.raid = party.raid
-
         setFound(true)
         setLoading(false)
 
diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx
index 7a5c1437..5f472e31 100644
--- a/components/SummonGrid/index.tsx
+++ b/components/SummonGrid/index.tsx
@@ -88,19 +88,6 @@ const SummonGrid = (props: Props) => {
         // Store the important party and state-keeping values
         appState.party.id = party.id
 
-        // Store the party's user-generated details
-        if (party.name) {
-            appState.party.name = {
-                en: party.name.en,
-                jp: party.name.jp
-            }
-        }
-        if (party.description)
-            appState.party.description = party.description
-
-        if (party.raid)
-            appState.raid = party.raid
-
         setFound(true)
         setLoading(false)
 
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx
index 55727517..0be9798a 100644
--- a/components/WeaponGrid/index.tsx
+++ b/components/WeaponGrid/index.tsx
@@ -85,19 +85,6 @@ const WeaponGrid = (props: Props) => {
         appState.party.id = party.id
         appState.party.extra = party.is_extra
 
-        // Store the party's user-generated details
-        if (party.name) {
-            appState.party.name = {
-                en: party.name.en,
-                jp: party.name.jp
-            }
-        }
-        if (party.description)
-            appState.party.description = party.description
-
-        if (party.raid)
-            appState.raid = party.raid
-
         setFound(true)
         setLoading(false)
 

From e00a07d10cef0bb76ffc3571c2fc553f6bc77f1d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:15:08 -0800
Subject: [PATCH 10/20] Various styling fixes and adjustments

---
 components/Button/index.scss                | 4 ++++
 components/Party/index.scss                 | 5 ++++-
 components/PartySegmentedControl/index.scss | 1 +
 components/SegmentedControl/index.scss      | 1 -
 components/WeaponGrid/index.scss            | 4 ++++
 5 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/Button/index.scss b/components/Button/index.scss
index 666d1800..0b4b88d0 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -61,6 +61,10 @@
         }
     }
 
+    &.Active {
+        background: white;
+    }
+
     &.btn-blue {
         background: $blue;
         color: #8b8b8b;
diff --git a/components/Party/index.scss b/components/Party/index.scss
index 558ffbe9..77ab6f2b 100644
--- a/components/Party/index.scss
+++ b/components/Party/index.scss
@@ -1,4 +1,7 @@
-.Extra {
+#Party {
+    margin-bottom: $unit * 4;
+}
+#Party .Extra {
     color: #888;
     display: flex;
     font-weight: 500;
diff --git a/components/PartySegmentedControl/index.scss b/components/PartySegmentedControl/index.scss
index 96b9f789..a161a3ca 100644
--- a/components/PartySegmentedControl/index.scss
+++ b/components/PartySegmentedControl/index.scss
@@ -3,6 +3,7 @@
     gap: 58px;
     justify-content: center;
     margin: 0 auto;
+    margin-bottom: $unit * 3;
     max-width: 760px;
     position: relative;
 }
diff --git a/components/SegmentedControl/index.scss b/components/SegmentedControl/index.scss
index 7051099a..2ae75feb 100644
--- a/components/SegmentedControl/index.scss
+++ b/components/SegmentedControl/index.scss
@@ -1,7 +1,6 @@
 .SegmentedControlWrapper {
     display: flex;
     justify-content: center;
-    margin-bottom: $unit * 3;
 }
 
 .SegmentedControl {
diff --git a/components/WeaponGrid/index.scss b/components/WeaponGrid/index.scss
index 7c37255b..26ea7f7d 100644
--- a/components/WeaponGrid/index.scss
+++ b/components/WeaponGrid/index.scss
@@ -21,6 +21,10 @@
             margin-bottom: $unit * 2;
             margin-right: $unit * 2;
         }
+
+        &:nth-last-child(-n+3) {
+            margin-bottom: 0;
+        }
     }
     
     .grid_weapons > *:nth-child(3n+3) {

From fe14c38fd97c4d4c26afc5121c33f7d462e79e1f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:15:23 -0800
Subject: [PATCH 11/20] Fix name in state and add detailsVisible flag

---
 utils/appState.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/utils/appState.tsx b/utils/appState.tsx
index d3266802..7b7d8592 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -6,10 +6,8 @@ interface AppState {
     party: {
         id: string | undefined,
         editable: boolean,
-        name: {
-            en: string,
-            jp: string
-        } | undefined,
+        detailsVisible: boolean,
+        name: string | undefined,
         description: string | undefined,
         raid: Raid | undefined,
         element: number,
@@ -36,6 +34,7 @@ export const initialAppState: AppState = {
     party: {
         id: undefined,
         editable: false,
+        detailsVisible: false,
         name: undefined,
         description: undefined,
         raid: undefined,

From f9857eb77233a69d01e673d75f80a66e9f0f61c7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:18:28 -0800
Subject: [PATCH 12/20] Add components for textareas and text limited fields

---
 components/CharLimitedFieldset/index.scss | 29 ++++++++++++
 components/CharLimitedFieldset/index.tsx  | 54 +++++++++++++++++++++++
 components/TextFieldset/index.scss        |  5 +++
 components/TextFieldset/index.tsx         | 33 ++++++++++++++
 4 files changed, 121 insertions(+)
 create mode 100644 components/CharLimitedFieldset/index.scss
 create mode 100644 components/CharLimitedFieldset/index.tsx
 create mode 100644 components/TextFieldset/index.scss
 create mode 100644 components/TextFieldset/index.tsx

diff --git a/components/CharLimitedFieldset/index.scss b/components/CharLimitedFieldset/index.scss
new file mode 100644
index 00000000..5755fd4a
--- /dev/null
+++ b/components/CharLimitedFieldset/index.scss
@@ -0,0 +1,29 @@
+.Limited {
+    background: white;
+    border-radius: 6px;
+    border: 2px solid transparent;
+    box-sizing: border-box;
+    display: flex;
+    gap: $unit;
+    padding-right: $unit * 2;
+
+    &:focus-within {
+        border: 2px solid #275DC5;
+        box-shadow: 0 2px rgba(255, 255, 255, 1);
+    }
+
+    .Counter {
+        color: $grey-50;
+        font-weight: $bold;
+        line-height: 42px;
+    }
+
+    .Input {
+        background: transparent;
+        border-radius: 0;
+
+        &:focus {
+            outline: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/CharLimitedFieldset/index.tsx b/components/CharLimitedFieldset/index.tsx
new file mode 100644
index 00000000..aefd8ab6
--- /dev/null
+++ b/components/CharLimitedFieldset/index.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+import './index.scss'
+
+interface Props {
+    fieldName: string
+    placeholder: string
+    value?: string
+    limit: number
+    error: string
+    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const CharLimitedFieldset = React.forwardRef<HTMLInputElement, Props>(function fieldSet(props, ref) {
+    const fieldType = (['password', 'confirm_password'].includes(props.fieldName)) ? 'password' : 'text'
+
+    const [currentCount, setCurrentCount] = useState(0)
+
+    useEffect(() => {
+        setCurrentCount((props.value) ? props.limit - props.value.length : props.limit)
+    }, [props.limit, props.value])
+
+    function onChange(event: React.ChangeEvent<HTMLInputElement>) {
+        setCurrentCount(props.limit - event.currentTarget.value.length)
+        if (props.onChange) props.onChange(event)
+    }
+
+    return (
+        <fieldset className="Fieldset">
+            <div className="Limited">
+                <input
+                    autoComplete="off"
+                    className="Input" 
+                    type={fieldType}
+                    name={props.fieldName} 
+                    placeholder={props.placeholder}
+                    defaultValue={props.value || ''}
+                    onBlur={props.onBlur}
+                    onChange={onChange}
+                    maxLength={props.limit}
+                    ref={ref}
+                    formNoValidate
+                />
+                <span className="Counter">{currentCount}</span>
+            </div>
+            {
+                props.error.length > 0 && 
+                <p className='InputError'>{props.error}</p>
+            }
+        </fieldset>
+    )
+})
+
+export default CharLimitedFieldset
\ No newline at end of file
diff --git a/components/TextFieldset/index.scss b/components/TextFieldset/index.scss
new file mode 100644
index 00000000..f84fe540
--- /dev/null
+++ b/components/TextFieldset/index.scss
@@ -0,0 +1,5 @@
+.Fieldset textarea {
+    color: $grey-00;
+    font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 21px;
+}
\ No newline at end of file
diff --git a/components/TextFieldset/index.tsx b/components/TextFieldset/index.tsx
new file mode 100644
index 00000000..63b80c61
--- /dev/null
+++ b/components/TextFieldset/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import './index.scss'
+
+interface Props {
+    fieldName: string
+    placeholder: string
+    value?: string
+    error: string
+    onBlur?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const TextFieldset = React.forwardRef<HTMLTextAreaElement, Props>(function fieldSet(props, ref) {
+    return (
+        <fieldset className="Fieldset">
+            <textarea
+                className="Input" 
+                name={props.fieldName} 
+                placeholder={props.placeholder}
+                defaultValue={props.value || ''}
+                onBlur={props.onBlur}
+                onChange={props.onChange}
+                ref={ref}
+            />
+            {
+                props.error.length > 0 && 
+                <p className='InputError'>{props.error}</p>
+            }
+        </fieldset>
+    )
+})
+
+export default TextFieldset
\ No newline at end of file

From 7e6e1209ddac25c20929b11f383d296adeca5351 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:18:39 -0800
Subject: [PATCH 13/20] Add active prop

---
 components/Button/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/Button/index.tsx b/components/Button/index.tsx
index d355730f..4db0290f 100644
--- a/components/Button/index.tsx
+++ b/components/Button/index.tsx
@@ -14,6 +14,7 @@ import './index.scss'
 import { ButtonType } from '~utils/enums'
 
 interface Props {
+    active: boolean
     disabled: boolean
     icon: string | null
     type: ButtonType
@@ -26,6 +27,7 @@ interface State {
 
 class Button extends React.Component<Props, State> {
     static defaultProps: Props = {
+        active: false,
         disabled: false,
         icon: null,
         type: ButtonType.Base,
@@ -65,6 +67,7 @@ class Button extends React.Component<Props, State> {
 
         const classes = classNames({
             Button: true,
+            'Active': this.props.active,
             'btn-pressed': this.state.isPressed,
             'btn-disabled': this.props.disabled,
             'destructive': this.props.type == ButtonType.Destructive

From 7df3da2d346bb556860def5b997e4a44a81799ff Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:18:56 -0800
Subject: [PATCH 14/20] Add raid dropdown component

---
 components/RaidDropdown/index.scss |  0
 components/RaidDropdown/index.tsx  | 84 ++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 components/RaidDropdown/index.scss
 create mode 100644 components/RaidDropdown/index.tsx

diff --git a/components/RaidDropdown/index.scss b/components/RaidDropdown/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx
new file mode 100644
index 00000000..4a6bc3d0
--- /dev/null
+++ b/components/RaidDropdown/index.tsx
@@ -0,0 +1,84 @@
+import { group } from 'console'
+import React, { useEffect, useState } from 'react'
+import { useCookies } from 'react-cookie'
+import api from '~utils/api'
+
+import './index.scss'
+
+// Props
+interface Props {}
+
+const RaidDropdown = (props: Props) => {
+    const [cookies, _] = useCookies(['user'])
+    const headers = (cookies.user != null) ? {
+        headers: { 'Authorization': `Bearer ${cookies.user.access_token}` }
+    } : {}
+
+    const [raids, setRaids] = useState<Raid[][]>()
+    const raidGroups = [
+        'Assorted',
+        'Omega',
+        'T1 Summons',
+        'T2 Summons',
+        'Primarchs',
+        'Nightmare',
+        'Omega (Impossible)',
+        'Omega II',
+        'Tier 1 Summons (Impossible)',
+        'Tier 3 Summons',
+        'Ennead',
+        'Malice',
+        '6-Star Raids',
+        'Six-Dragons',
+        'Nightmare (Impossible)',
+        'Astral',
+        'Super Ultimate'
+    ]
+
+    useEffect(() => {
+        fetchRaids()
+    }, [])
+    
+    function fetchRaids() {
+        api.endpoints.raids.getAll(headers)
+            .then((response) => {
+                organizeRaids(response.data.map((r: any) => r.raid))
+            })
+    }
+
+    function organizeRaids(raids: Raid[]) {
+        const numGroups = Math.max.apply(Math, raids.map(raid => raid.group))
+        let groupedRaids = []
+
+        for (let i = 0; i <= numGroups; i++) {
+            groupedRaids[i] = raids.filter(raid => raid.group == i)
+        }
+
+        setRaids(groupedRaids)
+    }
+
+    function raidGroup(index: number) {
+        const options = raids && raids.length > 0 && raids[index].length > 0 && 
+            raids[index].sort((a, b) => a.element - b.element).map((item, i) => {
+                return (
+                    <option key={i} value={item.id}>{item.name.en}</option>
+                )
+            })
+        
+        return (
+            <optgroup key={index} label={raidGroups[index]}>
+                {options}
+            </optgroup>
+        )
+    } 
+
+    return (
+        <select>
+            { Array.from(Array(raids?.length)).map((x, i) => {
+                return raidGroup(i)
+            })}
+        </select>
+    )
+}
+
+export default RaidDropdown

From 32f864baa654d96d758887ddb6191259ba733f7f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:19:15 -0800
Subject: [PATCH 15/20] Implement read-only and editable views for party
 details

---
 components/BottomHeader/index.tsx  |  19 ++++-
 components/Party/index.tsx         |  50 +++++++++++++-
 components/PartyDetails/index.scss |  87 +++++++++++++++++++++++
 components/PartyDetails/index.tsx  | 107 +++++++++++++++++++++++++++++
 4 files changed, 258 insertions(+), 5 deletions(-)
 create mode 100644 components/PartyDetails/index.scss
 create mode 100644 components/PartyDetails/index.tsx

diff --git a/components/BottomHeader/index.tsx b/components/BottomHeader/index.tsx
index ef9b4272..31f6cab4 100644
--- a/components/BottomHeader/index.tsx
+++ b/components/BottomHeader/index.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import { useCookies } from 'react-cookie'
 import { useSnapshot } from 'valtio'
 import clonedeep from 'lodash.clonedeep'
+import * as Scroll from 'react-scroll'
 
 import * as AlertDialog from '@radix-ui/react-alert-dialog'
 
@@ -21,6 +22,7 @@ const BottomHeader = () => {
     const app = useSnapshot(appState)
 
     const router = useRouter()
+    const scroll = Scroll.animateScroll;
 
     // Cookies
     const [cookies] = useCookies(['user'])
@@ -30,6 +32,15 @@ const BottomHeader = () => {
         }
     } : {}
 
+    function toggleDetails() {
+        appState.party.detailsVisible = !appState.party.detailsVisible
+
+        if (appState.party.detailsVisible)
+            scroll.scrollToBottom()
+        else
+            scroll.scrollToTop()
+    }
+
     function deleteTeam(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
         if (appState.party.editable && appState.party.id) {
             api.endpoints.parties.destroy(appState.party.id, headers)
@@ -53,9 +64,11 @@ const BottomHeader = () => {
     }
 
     const leftNav = () => {
-        return (
-            <Button icon="edit" click={() => {}}>Add more info</Button>
-        )
+        if (app.party.detailsVisible) {
+            return (<Button icon="edit" active={true} click={toggleDetails}>Hide info</Button>)
+        } else {
+            return (<Button icon="edit" click={toggleDetails}>Edit info</Button>)
+        }
     }
 
     const rightNav = () => {
diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 5da6cb26..63ac7bee 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { useSnapshot } from 'valtio'
 import { useCookies } from 'react-cookie'
 
-
 import PartySegmentedControl from '~components/PartySegmentedControl'
+import PartyDetails from '~components/PartyDetails'
 import WeaponGrid from '~components/WeaponGrid'
 import SummonGrid from '~components/SummonGrid'
 import CharacterGrid from '~components/CharacterGrid'
@@ -13,6 +13,7 @@ import { appState } from '~utils/appState'
 import { GridType, TeamElement } from '~utils/enums'
 
 import './index.scss'
+import { AxiosResponse } from 'axios'
 
 // Props
 interface Props {
@@ -33,6 +34,13 @@ const Party = (props: Props) => {
     const { party } = useSnapshot(appState)
     const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
 
+    // Fetch data from the server
+    useEffect(() => {
+        const shortcode = (props.slug) ? props.slug : undefined
+        if (shortcode) fetchDetails(shortcode)
+        else appState.party.editable = true
+    }, [props.slug])
+
     // Methods: Creating a new party
     async function createParty(extra: boolean = false) {
         let body = {
@@ -76,6 +84,39 @@ const Party = (props: Props) => {
         }
     }
 
+    // Methods: Fetch party details
+    function fetchDetails(shortcode: string) {
+        return api.endpoints.parties.getOne({ id: shortcode })
+            .then(response => processResult(response))
+            .catch(error => processError(error))
+    }
+
+    function processResult(response: AxiosResponse) {
+        // Store the response
+        const party = response.data.party
+
+        // Store the party's user-generated details
+        if (party.name)
+            appState.party.name = party.name
+
+        if (party.description)
+            appState.party.description = party.description
+
+        if (party.raid)
+            appState.party.raid = party.raid
+    }
+
+    function processError(error: any) {
+        if (error.response != null) {
+            if (error.response.status == 404) {
+                // setFound(false)
+                // setLoading(false)
+            }
+        } else {
+            console.error(error)
+        }
+    }
+
     // Render: JSX components
     const navigation = (
         <PartySegmentedControl
@@ -123,7 +164,12 @@ const Party = (props: Props) => {
     return (
         <div>
             { navigation }
-            { currentGrid() }
+            <section id="Party">
+                { currentGrid() }
+            </section>
+            { <PartyDetails
+                editable={party.editable}
+            />}
         </div>
     )
 }
diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss
new file mode 100644
index 00000000..abc7bed8
--- /dev/null
+++ b/components/PartyDetails/index.scss
@@ -0,0 +1,87 @@
+.Details {
+    display: none; // This breaks transition, find a workaround
+    opacity: 0;
+    margin: 0 auto;
+    max-width: $unit * 95;
+    position: relative;
+
+    &.Editable {
+        top: $unit;
+        height: 0;
+        z-index: 2;
+        transition: opacity 0.2s ease-in-out, 
+                    top 0.2s ease-in-out;
+
+
+        &.Visible {
+            display: block;
+            height: auto;
+            margin-bottom: 40vh;
+            opacity: 1;
+            top: 0;
+        }
+    
+        fieldset {
+            display: block;
+            width: 100%;
+    
+            textarea {
+                min-height: $unit * 20;
+                width: 100%;
+            }
+        }
+
+        select {
+            appearance: none;
+            background-image: url('/icons/Arrow.svg');
+            background-repeat: no-repeat;
+            background-position-y: center;
+            background-position-x: 98%;
+            background-size: $unit * 1.5;
+            border: none;
+            border-radius: 6px;
+            color: $grey-00;
+            margin-bottom: $unit;
+            font-size: $font-regular;
+            padding: 0 ($unit * 2);
+            height: $unit * 6;
+            width: 100%;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &.ReadOnly {
+        top: $unit * -1;
+        transition: opacity 0.2s ease-in-out, 
+                    top 0.2s ease-in-out;
+
+        &.Visible {
+            display: block;
+            height: auto;
+            opacity: 1;
+            top: 0;
+        }
+
+        h1 {
+            font-size: $font-xlarge;
+            font-weight: $normal;
+            text-align: left;
+            margin-bottom: $unit;
+        }
+
+        .Raid {
+            color: $grey-50;
+            font-size: $font-regular;
+            font-weight: $medium;
+            margin-bottom: $unit * 2;
+        }
+
+        p {
+            font-size: $font-regular;
+            line-height: $font-regular * 1.2;
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
new file mode 100644
index 00000000..5ff4347b
--- /dev/null
+++ b/components/PartyDetails/index.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react'
+import { useSnapshot } from 'valtio'
+import classNames from 'classnames'
+
+import CharLimitedFieldset from '~components/CharLimitedFieldset'
+import TextFieldset from '~components/TextFieldset'
+
+import { appState } from '~utils/appState'
+
+import './index.scss'
+import RaidDropdown from '~components/RaidDropdown'
+
+// Props
+interface Props {
+    editable: boolean
+}
+
+const PartyDetails = (props: Props) => {
+    const appSnapshot = useSnapshot(appState)
+
+    const nameInput = React.createRef<HTMLInputElement>()
+    const descriptionInput = React.createRef<HTMLTextAreaElement>()
+
+    const readOnlyClasses = classNames({
+        'Details': true,
+        'ReadOnly': true,
+        'Visible': !appSnapshot.party.detailsVisible
+    })
+
+    const editableClasses = classNames({
+        'Details': true,
+        'Editable': true,
+        'Visible': appSnapshot.party.detailsVisible
+    })
+
+    const [errors, setErrors] = useState<{ [key: string]: string }>({
+        name: '',
+        description: ''
+    })
+
+    function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+        console.log(event)
+
+        event.preventDefault()
+
+        const { name, value } = event.target
+        let newErrors = errors
+
+        setErrors(newErrors)
+    }
+
+    function handleTextAreaChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+        event.preventDefault()
+
+        const { name, value } = event.target
+        let newErrors = errors
+
+        setErrors(newErrors)
+    }
+
+    const editable = (
+        <section className={editableClasses}>
+            <CharLimitedFieldset 
+                fieldName="name"
+                placeholder="Name your team"
+                value={appSnapshot.party.name}
+                limit={50}
+                onBlur={ () => {} }
+                onChange={handleInputChange}
+                error={errors.name}
+                ref={nameInput}
+            />
+            <RaidDropdown />
+            <select>
+                <option>Belial</option>
+                <option>Beelzebub</option>
+                <option>Lucifer (Hard)</option>
+            </select>
+            <TextFieldset 
+                fieldName="name"
+                placeholder={"Write your notes here\n\n\nWatch out for the 50% trigger!\nMake sure to click Fediel’s 1 first\nGood luck with RNG!"}
+                value={appSnapshot.party.description}
+                onBlur={ () => {} }
+                onChange={handleTextAreaChange}
+                error={errors.description}
+                ref={descriptionInput}
+            />
+        </section>
+    )
+
+    const readOnly = (
+        <section className={readOnlyClasses}>
+            <h1>{ (appSnapshot.party.name) ? appSnapshot.party.name : 'No title' }</h1>
+            { (appSnapshot.party.raid) ? <div className="Raid">{appSnapshot.party.raid.name.en}</div> : '' }
+            <p>{ (appSnapshot.party.description) ? appSnapshot.party.description : '' }</p>
+        </section>
+    )
+
+    return (
+        <div>
+            {readOnly}
+            {editable}
+        </div>
+    )
+}
+
+export default PartyDetails

From ed59762c71f42806288867bda70198819e37384b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:19:21 -0800
Subject: [PATCH 16/20] Add value prop

---
 components/Fieldset/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Fieldset/index.tsx b/components/Fieldset/index.tsx
index 5b22247d..b8a98e39 100644
--- a/components/Fieldset/index.tsx
+++ b/components/Fieldset/index.tsx
@@ -4,6 +4,7 @@ import './index.scss'
 interface Props {
     fieldName: string
     placeholder: string
+    value?: string
     error: string
     onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -17,9 +18,10 @@ const Fieldset = React.forwardRef<HTMLInputElement, Props>(function fieldSet(pro
             <input
                 autoComplete="off"
                 className="Input" 
-                name={props.fieldName} 
                 type={fieldType}
+                name={props.fieldName} 
                 placeholder={props.placeholder}
+                defaultValue={props.value || ''}
                 onBlur={props.onBlur}
                 onChange={props.onChange}
                 ref={ref}

From 499dde433e740be94f2e8e440c2e711df7866589 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 26 Feb 2022 15:53:32 -0800
Subject: [PATCH 17/20] Save raids in state

---
 utils/appState.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/utils/appState.tsx b/utils/appState.tsx
index 7b7d8592..e8059c4a 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -27,7 +27,8 @@ interface AppState {
     },
     search: {
         sourceItem: GridCharacter | GridWeapon | GridSummon | undefined
-    }
+    },
+    raids: Raid[]
 }
 
 export const initialAppState: AppState = {
@@ -55,7 +56,8 @@ export const initialAppState: AppState = {
     },
     search: {
         sourceItem: undefined
-    }
+    },
+    raids: []
 }
 
 export const appState = proxy(initialAppState)
\ No newline at end of file

From 68a6e037f2e4168f60771d2215cfa7b5d7756508 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 26 Feb 2022 15:53:46 -0800
Subject: [PATCH 18/20] Cleanup

---
 components/SignupModal/index.tsx | 4 ++--
 components/WeaponGrid/index.tsx  | 4 +++-
 pages/p/[party].tsx              | 4 +---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index 137217a8..ee6e15b4 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -57,7 +57,7 @@ const SignupModal = (props: Props) => {
 
                     setErrors(newErrors)
                 }, (error) => {
-                    console.log(error)
+                    console.error(error)
                 })
         }
     }
@@ -88,7 +88,7 @@ const SignupModal = (props: Props) => {
 
                     props.close()
                 }, (error) => {
-                    console.log(error)
+                    console.error(error)
                 })
         }
     }
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx
index 0be9798a..c5d1c5e0 100644
--- a/components/WeaponGrid/index.tsx
+++ b/components/WeaponGrid/index.tsx
@@ -70,6 +70,8 @@ const WeaponGrid = (props: Props) => {
     }
 
     function processResult(response: AxiosResponse) {
+        console.log("Retrieved data from server...")
+
         // Store the response
         const party = response.data.party
             
@@ -252,7 +254,7 @@ const WeaponGrid = (props: Props) => {
 
     const extraGridElement = (
         <ExtraWeapons 
-            grid={appState.grid.weapons.allWeapons} 
+            grid={grid.weapons.allWeapons} 
             editable={party.editable} 
             offset={numWeapons}
             updateObject={receiveWeaponFromSearch}
diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx
index 1ac9a3d9..9bbad2e0 100644
--- a/pages/p/[party].tsx
+++ b/pages/p/[party].tsx
@@ -2,11 +2,9 @@ import React from 'react'
 import { useRouter } from 'next/router'
 
 import Party from '~components/Party'
-import * as AlertDialog  from '@radix-ui/react-alert-dialog'
 
 const PartyRoute: React.FC = () => {
-    const router = useRouter()
-    const { party: slug } = router.query
+    const { party: slug } = useRouter().query
 
     return (
         <div id="Content">

From 45ef4e569bbd176e2c748e73e448588855cea80d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 26 Feb 2022 15:55:20 -0800
Subject: [PATCH 19/20] Add flat raid list and callbacks

The flat raid list is so that we can quickly find which raid was selected, since otherwise they're in option groups
---
 components/RaidDropdown/index.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx
index 4a6bc3d0..61a1372d 100644
--- a/components/RaidDropdown/index.tsx
+++ b/components/RaidDropdown/index.tsx
@@ -1,20 +1,26 @@
-import { group } from 'console'
 import React, { useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
+
+import { appState } from '~utils/appState'
 import api from '~utils/api'
 
 import './index.scss'
 
 // Props
-interface Props {}
+interface Props {
+    selected?: string
+    onBlur: (event: React.ChangeEvent<HTMLSelectElement>) => void
+}
 
-const RaidDropdown = (props: Props) => {
+const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(function fieldSet(props, ref) {
     const [cookies, _] = useCookies(['user'])
     const headers = (cookies.user != null) ? {
         headers: { 'Authorization': `Bearer ${cookies.user.access_token}` }
     } : {}
 
     const [raids, setRaids] = useState<Raid[][]>()
+    const [flatRaids, setFlatRaids] = useState<Raid[]>()
+
     const raidGroups = [
         'Assorted',
         'Omega',
@@ -42,7 +48,10 @@ const RaidDropdown = (props: Props) => {
     function fetchRaids() {
         api.endpoints.raids.getAll(headers)
             .then((response) => {
-                organizeRaids(response.data.map((r: any) => r.raid))
+                const raids = response.data.map((r: any) => r.raid)
+                
+                appState.raids = raids
+                organizeRaids(raids)
             })
     }
 
@@ -70,15 +79,15 @@ const RaidDropdown = (props: Props) => {
                 {options}
             </optgroup>
         )
-    } 
-
+    }
+    
     return (
-        <select>
+        <select key={props.selected} defaultValue={props.selected} onBlur={props.onBlur} ref={ref}>
             { Array.from(Array(raids?.length)).map((x, i) => {
                 return raidGroup(i)
             })}
         </select>
     )
-}
+})
 
 export default RaidDropdown

From aae67b08af832f06f64de86d1b82474a93e46d63 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 26 Feb 2022 15:55:45 -0800
Subject: [PATCH 20/20] Add hooks to send data back to the server

---
 components/Party/index.tsx        | 45 ++++++++++++++++++++++---------
 components/PartyDetails/index.tsx | 27 ++++++++++++-------
 2 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 63ac7bee..913ed776 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -37,8 +37,11 @@ const Party = (props: Props) => {
     // Fetch data from the server
     useEffect(() => {
         const shortcode = (props.slug) ? props.slug : undefined
-        if (shortcode) fetchDetails(shortcode)
-        else appState.party.editable = true
+
+        if (shortcode)
+            fetchDetails(shortcode)
+        else
+            appState.party.editable = true
     }, [props.slug])
 
     // Methods: Creating a new party
@@ -53,7 +56,7 @@ const Party = (props: Props) => {
         return await api.endpoints.parties.create(body, headers)
     }
 
-    // Methods: Updating the party's extra flag
+    // Methods: Updating the party's details
     function checkboxChanged(event: React.ChangeEvent<HTMLInputElement>) {
         appState.party.extra = event.target.checked
 
@@ -64,6 +67,27 @@ const Party = (props: Props) => {
         }
     }
 
+    function updateDetails(name?: string, description?: string, raid?: Raid) {
+        if (appState.party.name !== name ||
+            appState.party.description !== description ||
+            appState.party.raid?.id !== raid?.id) {
+                if (appState.party.id)
+                    api.endpoints.parties.update(appState.party.id, {
+                        'party': {
+                            'name': name,
+                            'description': description,
+                            'raid_id': raid?.id
+                        }
+                    }, headers)
+                    .then(() => {
+                        appState.party.name = name
+                        appState.party.description = description
+                        appState.party.raid = raid
+                    })
+            }
+
+    }
+
     // Methods: Navigating with segmented control
     function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
         switch(event.target.value) {
@@ -92,18 +116,12 @@ const Party = (props: Props) => {
     }
 
     function processResult(response: AxiosResponse) {
-        // Store the response
-        const party = response.data.party
+        appState.party.id = response.data.party.id
 
         // Store the party's user-generated details
-        if (party.name)
-            appState.party.name = party.name
-
-        if (party.description)
-            appState.party.description = party.description
-
-        if (party.raid)
-            appState.party.raid = party.raid
+        appState.party.name = response.data.party.name
+        appState.party.description = response.data.party.description
+        appState.party.raid = response.data.party.raid
     }
 
     function processError(error: any) {
@@ -169,6 +187,7 @@ const Party = (props: Props) => {
             </section>
             { <PartyDetails
                 editable={party.editable}
+                updateCallback={updateDetails}
             />}
         </div>
     )
diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index 5ff4347b..bd92744c 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -13,6 +13,7 @@ import RaidDropdown from '~components/RaidDropdown'
 // Props
 interface Props {
     editable: boolean
+    updateCallback: (name?: string, description?: string, raid?: Raid) => void
 }
 
 const PartyDetails = (props: Props) => {
@@ -20,6 +21,7 @@ const PartyDetails = (props: Props) => {
 
     const nameInput = React.createRef<HTMLInputElement>()
     const descriptionInput = React.createRef<HTMLTextAreaElement>()
+    const raidSelect = React.createRef<HTMLSelectElement>()
 
     const readOnlyClasses = classNames({
         'Details': true,
@@ -39,8 +41,6 @@ const PartyDetails = (props: Props) => {
     })
 
     function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-        console.log(event)
-
         event.preventDefault()
 
         const { name, value } = event.target
@@ -58,6 +58,14 @@ const PartyDetails = (props: Props) => {
         setErrors(newErrors)
     }
 
+    function updateDetails(event: React.ChangeEvent) {
+        const nameValue = nameInput.current?.value
+        const descriptionValue = descriptionInput.current?.value
+        const raid = appSnapshot.raids.find(raid => raid.id == raidSelect.current?.value)
+
+        props.updateCallback(nameValue, descriptionValue, raid)
+    }
+
     const editable = (
         <section className={editableClasses}>
             <CharLimitedFieldset 
@@ -65,22 +73,21 @@ const PartyDetails = (props: Props) => {
                 placeholder="Name your team"
                 value={appSnapshot.party.name}
                 limit={50}
-                onBlur={ () => {} }
+                onBlur={updateDetails}
                 onChange={handleInputChange}
                 error={errors.name}
                 ref={nameInput}
             />
-            <RaidDropdown />
-            <select>
-                <option>Belial</option>
-                <option>Beelzebub</option>
-                <option>Lucifer (Hard)</option>
-            </select>
+            <RaidDropdown 
+                selected={appSnapshot.party.raid?.id || ''}
+                onBlur={updateDetails}
+                ref={raidSelect}
+            />
             <TextFieldset 
                 fieldName="name"
                 placeholder={"Write your notes here\n\n\nWatch out for the 50% trigger!\nMake sure to click Fediel’s 1 first\nGood luck with RNG!"}
                 value={appSnapshot.party.description}
-                onBlur={ () => {} }
+                onBlur={updateDetails}
                 onChange={handleTextAreaChange}
                 error={errors.description}
                 ref={descriptionInput}