Changed how cookies are stored

We now have an account object and user object. Account stores critical information, where User is cosmetic/settings.

components/AccountModal/index.tsx

@@ -18,10 +18,12 @@ const AccountModal = () => {
     const { account } = useSnapshot(accountState)
 
     // Cookies
-    const [cookies] = useCookies(['user'])
+    const [accountCookies] = useCookies(['account'])
-    const headers = (cookies.user != null) ? {
+    const [userCookies] = useCookies(['user'])
+
+    const headers = (accountCookies.account != null) ? {
         headers: {
-            'Authorization': `Bearer ${cookies.user.access_token}`
+            'Authorization': `Bearer ${accountCookies.account.access_token}`
         }
     } : {}
     
@@ -37,9 +39,9 @@ const AccountModal = () => {
     const privateSelect = React.createRef<HTMLInputElement>()
 
     useEffect(() => {
-        if (cookies.user) setPicture(cookies.user.picture)
+        if (userCookies.user) setPicture(userCookies.user.picture)
-        if (cookies.user) setLanguage(cookies.user.language)
+        if (userCookies.user) setLanguage(userCookies.user.language)
-    }, [cookies])
+    }, [userCookies])
 
     const pictureOptions = (
             pictureData.sort((a, b) => (a.name.en > b.name.en) ? 1 : -1).map((item, i) => {
@@ -75,7 +77,7 @@ const AccountModal = () => {
             }
         }
 
-        api.endpoints.users.update(cookies.user.user_id, object, headers)
+        api.endpoints.users.update(accountCookies.account.user_id, object, headers)
             .then(response => {
                 setOpen(false)
             })

components/BottomHeader/index.tsx

@@ -26,10 +26,10 @@ const BottomHeader = () => {
     const scroll = Scroll.animateScroll;
 
     // Cookies
-    const [cookies] = useCookies(['user'])
+    const [cookies] = useCookies(['account'])
-    const headers = (cookies.user != null) ? {
+    const headers = (cookies.account != null) ? {
         headers: {
-            'Authorization': `Bearer ${cookies.user.access_token}`
+            'Authorization': `Bearer ${cookies.account.access_token}`
         }
     } : {}
 

components/CharacterGrid/index.tsx

@@ -26,10 +26,10 @@ const CharacterGrid = (props: Props) => {
     const numCharacters: number = 5
 
     // Cookies
-    const [cookies, _] = useCookies(['user'])
+    const [cookies] = useCookies(['account'])
-    const headers = (cookies.user != null) ? {
+    const headers = (cookies.account != null) ? {
         headers: {
-            'Authorization': `Bearer ${cookies.user.access_token}`
+            'Authorization': `Bearer ${cookies.account.access_token}`
         }
     } : {}
 
@@ -55,7 +55,7 @@ const CharacterGrid = (props: Props) => {
     useEffect(() => {        
         if (!loading && !firstLoadComplete) {
             // If user is logged in and matches
-            if ((cookies.user && party.user && cookies.user.user_id === party.user.id) || props.new)
+            if ((cookies.account && party.user && cookies.account.user_id === party.user.id) || props.new)
                 appState.party.editable = true
             else            
                 appState.party.editable = false

components/HeaderMenu/index.tsx

@@ -16,8 +16,8 @@ interface Props {
 }
 
 const HeaderMenu = (props: Props) => {
-    
+    const [accountCookies] = useCookies(['account'])
-    const [cookies] = useCookies()
+    const [userCookies] = useCookies(['user'])
 
     function authItems() {
         return (
@@ -25,15 +25,15 @@ const HeaderMenu = (props: Props) => {
                 <ul className="Menu auth">
                     <div className="MenuGroup">
                         <li className="MenuItem profile">
-                            <Link href={`/${cookies.user?.username}` || ''}>
+                            <Link href={`/${accountCookies.account.username}` || ''}>
                                 <div>
-                                    <span>{cookies.user?.username}</span>
+                                    <span>{accountCookies.account.username}</span>
                                     <img 
-                                        alt={cookies.user?.picture}
+                                        alt={userCookies.user.picture}
-                                        className={`profile ${cookies.user?.element}`}
+                                        className={`profile ${userCookies.user.element}`}
-                                        srcSet={`/profile/${cookies.user?.picture}.png,
+                                        srcSet={`/profile/${userCookies.user.picture}.png,
-                                                /profile/${cookies.user?.picture}@2x.png 2x`}
+                                                /profile/${userCookies.user.picture}@2x.png 2x`}
-                                        src={`/profile/${cookies.user?.picture}.png`} 
+                                        src={`/profile/${userCookies.user.picture}.png`} 
                                     />
                                 </div
                             ></Link>

components/LoginModal/index.tsx

@@ -95,7 +95,10 @@ const LoginModal = (props: Props) => {
 
         if (formValid) {
             api.login(body)
-                .then(response => response.data.user.id)
+                .then(response => {
+                    storeCookieInfo(response)
+                    return response.data.user.id
+                })
                 .then(id => fetchUserInfo(id))
                 .then(infoResponse => storeUserInfo(infoResponse))
         }
@@ -105,16 +108,25 @@ const LoginModal = (props: Props) => {
         return api.userInfo(id)
     }
 
-    function storeUserInfo(response: AxiosResponse) {
+    function storeCookieInfo(response: AxiosResponse) {
         const user = response.data.user
 
         const cookieObj = {
             user_id: user.id,
             username: user.username,
+            access_token: response.data.access_token
+        }
+
+        setCookies('account', cookieObj, { path: '/'})
+    }
+
+    function storeUserInfo(response: AxiosResponse) {
+        const user = response.data.user
+
+        const cookieObj = {
             picture: user.picture.picture,
             element: user.picture.element,
             language: user.language,
-            access_token: response.data.access_token
         }
 
         setCookies('user', cookieObj, { path: '/'})

components/Party/index.tsx

@@ -25,12 +25,12 @@ interface Props {
 
 const Party = (props: Props) => {    
     // Cookies
-    const [cookies] = useCookies(['user'])
+    const [cookies] = useCookies(['account'])
     const headers = useMemo(() => {
-        return (cookies.user != null) ? {
+        return (cookies.account != null) ? {
-            headers: { 'Authorization': `Bearer ${cookies.user.access_token}` }
+            headers: { 'Authorization': `Bearer ${cookies.account.access_token}` }
         } : {}
-    }, [cookies.user])
+    }, [cookies.account])
 
     // Set up states
     const { party } = useSnapshot(appState)
@@ -46,7 +46,7 @@ const Party = (props: Props) => {
     async function createParty(extra: boolean = false) {
         let body = {
             party: {
-                ...(cookies.user) && { user_id: cookies.user.user_id },
+                ...(cookies.account) && { user_id: cookies.account.user_id },
                 extra: extra
             }
         }

components/SummonGrid/index.tsx

@@ -27,10 +27,10 @@ const SummonGrid = (props: Props) => {
     const numSummons: number = 4
 
     // Cookies
-    const [cookies, _] = useCookies(['user'])
+    const [cookies, _] = useCookies(['account'])
-    const headers = (cookies.user != null) ? {
+    const headers = (cookies.account != null) ? {
         headers: {
-            'Authorization': `Bearer ${cookies.user.access_token}`
+            'Authorization': `Bearer ${cookies.account.access_token}`
         }
     } : {}
 

components/TopHeader/index.tsx

@@ -14,9 +14,11 @@ import HeaderMenu from '~components/HeaderMenu'
 
 const TopHeader = () => {
     // Cookies
-    const [cookies, _, removeCookie] = useCookies(['user'])
+    const [accountCookies, setAccountCookie, removeAccountCookie] = useCookies(['account'])
-    const headers = (cookies.user != null) ? {
+    const [userCookies, setUserCookies, removeUserCookie] = useCookies(['user'])
-        'Authorization': `Bearer ${cookies.user.access_token}`
+    
+    const headers = (accountCookies.account != null) ? {
+        'Authorization': `Bearer ${accountCookies.account.access_token}`
     } : {}
 
     const { account } = useSnapshot(accountState)
@@ -49,7 +51,8 @@ const TopHeader = () => {
     }
 
     function logout() {
-        removeCookie('user')
+        removeAccountCookie('account')
+        removeUserCookie('user')
 
         // Clean state
         const resetState = clonedeep(initialAccountState)

components/WeaponModal/index.tsx

@@ -34,10 +34,10 @@ interface Props {
 
 const WeaponModal = (props: Props) => {
     // Cookies
-    const [cookies, _] = useCookies(['user'])
+    const [cookies] = useCookies(['account'])
-    const headers = (cookies.user != null) ? {
+    const headers = (cookies.account != null) ? {
         headers: {
-            'Authorization': `Bearer ${cookies.user.access_token}`
+            'Authorization': `Bearer ${cookies.account.access_token}`
         }
     } : {}
     

pages/[username].tsx

@@ -13,7 +13,7 @@ const ProfileRoute: React.FC = () => {
     const router = useRouter()
     const { username } = router.query
 
-    const [cookies] = useCookies(['user'])
+    const [cookies] = useCookies(['account'])
 
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
@@ -57,7 +57,7 @@ const ProfileRoute: React.FC = () => {
                 recency: recencyInSeconds
             },
             headers: {
-                'Authorization': `Bearer ${cookies.user?.access_token}`
+                'Authorization': `Bearer ${cookies.account.access_token}`
             }
         }
 
@@ -82,7 +82,7 @@ const ProfileRoute: React.FC = () => {
                     setLoading(false)
                 })
                 .catch(error => handleError(error))
-    }, [username, element, raidId, recencyInSeconds, cookies.user, handleError])
+    }, [username, element, raidId, recencyInSeconds, cookies.account, handleError])
 
     useEffect(() => {
         fetchProfile()            

pages/_app.tsx

@@ -9,24 +9,24 @@ import { accountState } from '~utils/accountState'
 import '../styles/globals.scss'
 
 function MyApp({ Component, pageProps }: AppProps) {
-    const [cookies] = useCookies(['user'])
+    const [cookies] = useCookies(['account'])
 
     useEffect(() => {
-        if (cookies.user) {
+        if (cookies.account) {
-            console.log(`Logged in as user "${cookies.user.username}"`)
+            console.log(`Logged in as user "${cookies.account.username}"`)
 
             accountState.account.authorized = true
-            accountState.account.language = cookies.user.language
+            accountState.account.language = cookies.account.language
             accountState.account.user = {
-                id: cookies.user.user_id,
+                id: cookies.account.user_id,
-                username: cookies.user.username,
+                username: cookies.account.username,
-                picture: cookies.user.picture,
+                picture: '',
-                element: cookies.user.element
+                element: ''
             }
         } else {
             console.log(`You are not currently logged in.`)
         }
-    }, [cookies.user])
+    }, [cookies.account])
 
     return (
         <CookiesProvider>

pages/saved.tsx

@@ -14,9 +14,9 @@ const SavedRoute: React.FC = () => {
     const router = useRouter()
     
     // Cookies
-    const [cookies] = useCookies(['user'])
+    const [cookies] = useCookies(['account'])
-    const headers = (cookies.user != null) ? {
+    const headers = (cookies.account != null) ? {
-        'Authorization': `Bearer ${cookies.user.access_token}`
+        'Authorization': `Bearer ${cookies.account.access_token}`
     } : {}
 
     const [loading, setLoading] = useState(true)
@@ -50,7 +50,7 @@ const SavedRoute: React.FC = () => {
                 recency: recencyInSeconds
             },
             headers: {
-                'Authorization': `Bearer ${cookies.user.access_token}`
+                'Authorization': `Bearer ${cookies.account.access_token}`
             }
         }
 
@@ -65,7 +65,7 @@ const SavedRoute: React.FC = () => {
                 setLoading(false)
             })
             .catch(error => handleError(error))
-    }, [element, raidId, recencyInSeconds, cookies.user, handleError])
+    }, [element, raidId, recencyInSeconds, cookies.account, handleError])
 
     useEffect(() => {
         fetchTeams()           

pages/teams.tsx

@@ -14,9 +14,9 @@ const TeamsRoute: React.FC = () => {
     const router = useRouter()
 
     // Cookies
-    const [cookies] = useCookies(['user'])
+    const [cookies] = useCookies(['account'])
-    const headers = (cookies.user != null) ? {
+    const headers = (cookies.account != null) ? {
-        'Authorization': `Bearer ${cookies.user.access_token}`
+        'Authorization': `Bearer ${cookies.account.access_token}`
     } : {}
 
     const [loading, setLoading] = useState(true)
@@ -50,7 +50,7 @@ const TeamsRoute: React.FC = () => {
                 recency: recencyInSeconds
             },
             headers: {
-                'Authorization': `Bearer ${cookies.user?.access_token}`
+                'Authorization': `Bearer ${cookies.account?.access_token}`
             }
         }
 
@@ -65,7 +65,7 @@ const TeamsRoute: React.FC = () => {
                 setLoading(false)
             })
             .catch(error => handleError(error))
-    }, [element, raidId, recencyInSeconds, cookies.user, handleError])
+    }, [element, raidId, recencyInSeconds, cookies.account, handleError])
 
     useEffect(() => {
         fetchTeams()           

utils/accountState.tsx

@@ -4,13 +4,13 @@ interface AccountState {
     [key: string]: any
     
     account: {
-        authorized: boolean,
+        authorized: boolean
-        language: 'en' | 'jp',
+        language: 'en' | 'jp'
         user: {
-            id: string,
+            id: string
-            username: string,
+            username: string
-            picture: string,
+            picture: string
-            element: string,
+            element: string
         } | undefined
     }
 }