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] 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,