From 03a06bd84928c1639b580f25894ac9eb9f484614 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 03:36:38 -0800
Subject: [PATCH 1/3] Restructure avatar in User definitions

---
 types/User.d.ts        | 3 +--
 utils/accountState.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/types/User.d.ts b/types/User.d.ts
index fdfcedd3..b79e76f2 100644
--- a/types/User.d.ts
+++ b/types/User.d.ts
@@ -1,11 +1,10 @@
 interface User {
   id: string
   username: string
-  granblueId: number
+  granblueId: string
   avatar: {
     picture: string
     element: string
   }
   gender: number
-  private: boolean
 }
diff --git a/utils/accountState.tsx b/utils/accountState.tsx
index fe2d3249..ffe3cb60 100644
--- a/utils/accountState.tsx
+++ b/utils/accountState.tsx
@@ -2,9 +2,12 @@ import { proxy } from 'valtio'
 
 export type UserState = {
   id: string
+  granblueId: string
   username: string
-  picture: string
-  element: string
+  avatar: {
+    picture: string
+    element: string
+  }
   gender: number
   language: string
   theme: string

From 93755dfda4f05d9f11e29e66411341049f927695 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 03:37:00 -0800
Subject: [PATCH 2/3] Update avatar implementation

---
 components/AccountModal/index.tsx | 13 +++++++++----
 components/Header/index.tsx       | 10 +++++-----
 components/LoginModal/index.tsx   | 13 +++++++++----
 components/SignupModal/index.tsx  | 13 +++++++++----
 pages/_app.tsx                    |  7 +++++--
 5 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index 3cea1cca..a98afe0e 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -159,8 +159,10 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             const user = response.data
 
             const cookieObj = {
-              picture: user.avatar.picture,
-              element: user.avatar.element,
+              avatar: {
+                picture: user.avatar.picture,
+                element: user.avatar.element,
+              },
               gender: user.gender,
               language: user.language,
               theme: user.theme,
@@ -173,8 +175,11 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             accountState.account.user = {
               id: user.id,
               username: user.username,
-              picture: user.avatar.picture,
-              element: user.avatar.element,
+              granblueId: '',
+              avatar: {
+                picture: user.avatar.picture,
+                element: user.avatar.element,
+              },
               language: user.language,
               theme: user.theme,
               gender: user.gender,
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 6e5e42a2..9db1ee57 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -199,10 +199,10 @@ const Header = () => {
       image = (
         <img
           alt={user.username}
-          className={`profile ${user.element}`}
-          srcSet={`/profile/${user.picture}.png, 
-                      /profile/${user.picture}@2x.png 2x`}
-          src={`/profile/${user.picture}.png`}
+          className={`profile ${user.avatar.element}`}
+          srcSet={`/profile/${user.avatar.picture}.png, 
+                      /profile/${user.avatar.picture}@2x.png 2x`}
+          src={`/profile/${user.avatar.picture}.png`}
         />
       )
     } else {
@@ -264,7 +264,7 @@ const Header = () => {
         <AccountModal
           open={settingsModalOpen}
           username={user.username}
-          picture={user.picture}
+          picture={user.avatar.picture}
           gender={user.gender}
           language={user.language}
           theme={user.theme}
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index f42e1ed3..66fd34cf 100644
--- a/components/LoginModal/index.tsx
+++ b/components/LoginModal/index.tsx
@@ -161,8 +161,10 @@ const LoginModal = (props: Props) => {
     setCookie(
       'user',
       {
-        picture: user.avatar.picture,
-        element: user.avatar.element,
+        avatar: {
+          picture: user.avatar.picture,
+          element: user.avatar.element,
+        },
         language: user.language,
         gender: user.gender,
         theme: user.theme,
@@ -174,8 +176,11 @@ const LoginModal = (props: Props) => {
     accountState.account.user = {
       id: user.id,
       username: user.username,
-      picture: user.avatar.picture,
-      element: user.avatar.element,
+      granblueId: '',
+      avatar: {
+        picture: user.avatar.picture,
+        element: user.avatar.element,
+      },
       gender: user.gender,
       language: user.language,
       theme: user.theme,
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index c67bb12e..f8cea3f0 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -121,8 +121,10 @@ const SignupModal = (props: Props) => {
     setCookie(
       'user',
       {
-        picture: user.avatar.picture,
-        element: user.avatar.element,
+        avatar: {
+          picture: user.avatar.picture,
+          element: user.avatar.element,
+        },
         language: user.language,
         gender: user.gender,
         theme: user.theme,
@@ -134,8 +136,11 @@ const SignupModal = (props: Props) => {
     accountState.account.user = {
       id: user.id,
       username: user.username,
-      picture: user.avatar.picture,
-      element: user.avatar.element,
+      granblueId: '',
+      avatar: {
+        picture: user.avatar.picture,
+        element: user.avatar.element,
+      },
       gender: user.gender,
       language: user.language,
       theme: user.theme,
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 498851d9..cfc1806f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -32,8 +32,11 @@ function MyApp({ Component, pageProps }: AppProps) {
       accountState.account.user = {
         id: cookieData.account.userId,
         username: cookieData.account.username,
-        picture: cookieData.user.picture,
-        element: cookieData.user.element,
+        granblueId: '',
+        avatar: {
+          picture: cookieData.user.avatar.picture,
+          element: cookieData.user.avatar.element,
+        },
         gender: cookieData.user.gender,
         language: cookieData.user.language,
         theme: cookieData.user.theme,

From 7893c4c3a161a05723281b036615f7c13ad2fe80 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 03:49:24 -0800
Subject: [PATCH 3/3] Call onOpenChange when saving AccountModal

---
 components/AccountModal/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index a98afe0e..72518faa 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -186,6 +186,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             }
 
             setOpen(false)
+            if (props.onOpenChange) props.onOpenChange(false)
             changeLanguage(router, user.language)
           })
       }