Merge pull request #177 from jedmund/fix-avatar

Fix avatar not changing in Header when changed

components/AccountModal/index.tsx

@@ -159,8 +159,10 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             const user = response.data
 
             const cookieObj = {
+              avatar: {
                 picture: user.avatar.picture,
                 element: user.avatar.element,
+              },
               gender: user.gender,
               language: user.language,
               theme: user.theme,
@@ -173,14 +175,18 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             accountState.account.user = {
               id: user.id,
               username: user.username,
+              granblueId: '',
+              avatar: {
                 picture: user.avatar.picture,
                 element: user.avatar.element,
+              },
               language: user.language,
               theme: user.theme,
               gender: user.gender,
             }
 
             setOpen(false)
+            if (props.onOpenChange) props.onOpenChange(false)
             changeLanguage(router, user.language)
           })
       }

components/Header/index.tsx

@@ -197,10 +197,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 {
@@ -262,7 +262,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}

components/LoginModal/index.tsx

@@ -161,8 +161,10 @@ const LoginModal = (props: Props) => {
     setCookie(
       'user',
       {
+        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,
+      granblueId: '',
+      avatar: {
         picture: user.avatar.picture,
         element: user.avatar.element,
+      },
       gender: user.gender,
       language: user.language,
       theme: user.theme,

components/SignupModal/index.tsx

@@ -121,8 +121,10 @@ const SignupModal = (props: Props) => {
     setCookie(
       'user',
       {
+        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,
+      granblueId: '',
+      avatar: {
         picture: user.avatar.picture,
         element: user.avatar.element,
+      },
       gender: user.gender,
       language: user.language,
       theme: user.theme,

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,

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
 }

utils/accountState.tsx

@@ -2,9 +2,12 @@ import { proxy } from 'valtio'
 
 export type UserState = {
   id: string
+  granblueId: string
   username: string
+  avatar: {
     picture: string
     element: string
+  }
   gender: number
   language: string
   theme: string