granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed how cookies are stored

Browse source 
We now have an account object and user object. Account stores critical information, where User is cosmetic/settings.
This commit is contained in:
Justin Edmund 2022-03-04 06:31:21 -08:00
parent 46e17f7172
commit 0ff255d71e
14 changed files with 86 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/AccountModal/index.tsx
View file

@ -18,10 +18,12 @@ const AccountModal = () => {
const { account } = useSnapshot(accountState)
// Cookies
const [cookies] = useCookies(['user'])
const headers = (cookies.user != null) ? {
const [accountCookies] = useCookies(['account'])
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 (cookies.user) setLanguage(cookies.user.language)
}, [cookies])
if (userCookies.user) setPicture(userCookies.user.picture)
if (userCookies.user) setLanguage(userCookies.user.language)
}, [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)
})

6
components/BottomHeader/index.tsx
View file

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

8
components/CharacterGrid/index.tsx
View file

@ -26,10 +26,10 @@ const CharacterGrid = (props: Props) => {
const numCharacters: number = 5
// Cookies
const [cookies, _] = useCookies(['user'])
const headers = (cookies.user != null) ? {
const [cookies] = useCookies(['account'])
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

18
components/HeaderMenu/index.tsx
View file

@ -16,8 +16,8 @@ interface Props {
}
const HeaderMenu = (props: Props) => {
const [cookies] = useCookies()
const [accountCookies] = useCookies(['account'])
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}
className={`profile ${cookies.user?.element}`}
srcSet={`/profile/${cookies.user?.picture}.png,
/profile/${cookies.user?.picture}@2x.png 2x`}
src={`/profile/${cookies.user?.picture}.png`}
alt={userCookies.user.picture}
className={`profile ${userCookies.user.element}`}
srcSet={`/profile/${userCookies.user.picture}.png,
/profile/${userCookies.user.picture}@2x.png 2x`}
src={`/profile/${userCookies.user.picture}.png`}
/>
</div
></Link>

18
components/LoginModal/index.tsx
View file

@ -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: '/'})

10
components/Party/index.tsx
View file

@ -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) ? {
headers: { 'Authorization': `Bearer ${cookies.user.access_token}` }
return (cookies.account != null) ? {
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
}
}

6
components/SummonGrid/index.tsx
View file

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

11
components/TopHeader/index.tsx
View file

@ -14,9 +14,11 @@ import HeaderMenu from '~components/HeaderMenu'
const TopHeader = () => {
// Cookies
const [cookies, _, removeCookie] = useCookies(['user'])
const headers = (cookies.user != null) ? {
'Authorization': `Bearer ${cookies.user.access_token}`
const [accountCookies, setAccountCookie, removeAccountCookie] = useCookies(['account'])
const [userCookies, setUserCookies, removeUserCookie] = useCookies(['user'])
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)

6
components/WeaponModal/index.tsx
View file

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

6
pages/[username].tsx
View file

@ -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()

18
pages/_app.tsx
View file

@ -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) {
console.log(`Logged in as user "${cookies.user.username}"`)
if (cookies.account) {
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,
username: cookies.user.username,
picture: cookies.user.picture,
element: cookies.user.element
id: cookies.account.user_id,
username: cookies.account.username,
picture: '',
element: ''
}
} else {
console.log(`You are not currently logged in.`)
}
}, [cookies.user])
}, [cookies.account])
return (
<CookiesProvider>

10
pages/saved.tsx
View file

@ -14,9 +14,9 @@ const SavedRoute: React.FC = () => {
const router = useRouter()
// Cookies
const [cookies] = useCookies(['user'])
const headers = (cookies.user != null) ? {
'Authorization': `Bearer ${cookies.user.access_token}`
const [cookies] = useCookies(['account'])
const headers = (cookies.account != null) ? {
'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()

10
pages/teams.tsx
View file

@ -14,9 +14,9 @@ const TeamsRoute: React.FC = () => {
const router = useRouter()
// Cookies
const [cookies] = useCookies(['user'])
const headers = (cookies.user != null) ? {
'Authorization': `Bearer ${cookies.user.access_token}`
const [cookies] = useCookies(['account'])
const headers = (cookies.account != null) ? {
'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()

12
utils/accountState.tsx
View file

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