Refactor setUserToken into two methods

This refactors `setUserToken` into `accountCookie`, which just returns a cookie if it exists, and `setHeaders`, which sets the Axios header defaults.

Then, we update the calls in all the required files.

components/LoginModal/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import axios, { AxiosError, AxiosResponse } from 'axios'
 
 import api from '~utils/api'
-import setUserToken from '~utils/setUserToken'
+import { setHeaders } from '~utils/userToken'
 import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
@@ -147,7 +147,7 @@ const LoginModal = (props: Props) => {
     setCookie('account', cookieObj, { path: '/', expires: expiresAt })
 
     // Set Axios default headers
-    setUserToken()
+    setHeaders()
   }
 
   function storeUserInfo(response: AxiosResponse) {

components/SignupModal/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
 
 import api from '~utils/api'
-import setUserToken from '~utils/setUserToken'
+import { setHeaders } from '~utils/userToken'
 import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
@@ -103,7 +103,7 @@ const SignupModal = (props: Props) => {
     setCookie('account', cookieObj, { path: '/', expires: expiresAt })
 
     // Set Axios default headers
-    setUserToken()
+    setHeaders()
   }
 
   function fetchUserInfo(id: string) {

pages/[username].tsx

@@ -9,7 +9,7 @@ import api from '~utils/api'
 import extractFilters from '~utils/extractFilters'
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
-import setUserToken from '~utils/setUserToken'
+import { setHeaders } from '~utils/userToken'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { appState } from '~utils/appState'
 import { elements, allElement } from '~data/elements'
@@ -329,7 +329,7 @@ export const getServerSidePaths = async () => {
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
   // Set headers for server-side requests
-  setUserToken(req, res)
+  setHeaders(req, res)
 
   // Fetch latest version
   const version = await fetchLatestVersion()

pages/_app.tsx

@@ -7,7 +7,7 @@ import type { AppProps } from 'next/app'
 import Layout from '~components/Layout'
 
 import { accountState } from '~utils/accountState'
-import setUserToken from '~utils/setUserToken'
+import { setHeaders } from '~utils/userToken'
 
 import '../styles/globals.scss'
 import { ToastProvider, Viewport } from '@radix-ui/react-toast'
@@ -23,9 +23,9 @@ function MyApp({ Component, pageProps }: AppProps) {
   }
 
   useEffect(() => {
-    setUserToken()
 
     if (accountCookie) {
+    setHeaders()
       console.log(`Logged in as user "${cookieData.account.username}"`)
 
       accountState.account.authorized = true

pages/about.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import { AboutTabs } from '~utils/enums'
-import setUserToken from '~utils/setUserToken'
+import { setHeaders } from '~utils/userToken'
 
 import AboutPage from '~components/AboutPage'
 import UpdatesPage from '~components/UpdatesPage'
@@ -160,7 +160,7 @@ export const getServerSidePaths = async () => {
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
   // Set headers for server-side requests
-  setUserToken(req, res)
+  setHeaders(req, res)
 
   // Fetch and organize raids
   return {

pages/new/index.tsx

@@ -10,7 +10,7 @@ import NewHead from '~components/NewHead'
 import api from '~utils/api'
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
-import setUserToken from '~utils/setUserToken'
+import { accountCookie, setHeaders } from '~utils/userToken'
 import { appState, initialAppState } from '~utils/appState'
 import { groupWeaponKeys } from '~utils/groupWeaponKeys'
 
@@ -119,8 +119,8 @@ export const getServerSidePaths = async () => {
 
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
-  // Set headers for server-side requests
+  // Set headers for API calls
-  setUserToken(req, res)
+  setHeaders(req, res)
 
   // Fetch latest version
   const version = await fetchLatestVersion()

pages/p/[party].tsx

@@ -10,7 +10,7 @@ import api from '~utils/api'
 import elementEmoji from '~utils/elementEmoji'
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
-import setUserToken from '~utils/setUserToken'
+import { setHeaders } from '~utils/userToken'
 import { appState } from '~utils/appState'
 import { groupWeaponKeys } from '~utils/groupWeaponKeys'
 
@@ -108,7 +108,7 @@ export const getServerSidePaths = async () => {
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
   // Set headers for server-side requests
-  setUserToken(req, res)
+  setHeaders(req, res)
 
   // Fetch latest version
   const version = await fetchLatestVersion()

pages/saved.tsx

@@ -7,7 +7,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import clonedeep from 'lodash.clonedeep'
 
 import api from '~utils/api'
-import setUserToken from '~utils/setUserToken'
+import { setHeaders } from '~utils/userToken'
 import extractFilters from '~utils/extractFilters'
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
@@ -363,7 +363,7 @@ export const getServerSidePaths = async () => {
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
   // Set headers for server-side requests
-  setUserToken(req, res)
+  setHeaders(req, res)
 
   // Fetch latest version
   const version = await fetchLatestVersion()

pages/teams.tsx

@@ -7,7 +7,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import clonedeep from 'lodash.clonedeep'
 
 import api from '~utils/api'
-import setUserToken from '~utils/setUserToken'
+import { setHeaders } from '~utils/userToken'
 import extractFilters from '~utils/extractFilters'
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
@@ -363,7 +363,7 @@ export const getServerSidePaths = async () => {
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
   // Set headers for server-side requests
-  setUserToken(req, res)
+  setHeaders(req, res)
 
   // Fetch latest version
   const version = await fetchLatestVersion()

utils/userToken.tsx

@@ -2,17 +2,24 @@ import axios from 'axios'
 import { getCookie } from 'cookies-next'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
-export default (
+export const accountCookie = (
   req: NextApiRequest | undefined = undefined,
   res: NextApiResponse | undefined = undefined
 ) => {
-  // Set up cookies
   const options = req && res ? { req, res } : {}
   const cookie = getCookie('account', options)
+  return cookie ? cookie : undefined
+}
+
+export const setHeaders = (
+  req: NextApiRequest | undefined = undefined,
+  res: NextApiResponse | undefined = undefined
+) => {
+  const cookie = accountCookie(req, res)
   if (cookie) {
-    axios.defaults.headers.common['Authorization'] = `Bearer ${
+    const parsed = JSON.parse(cookie as string)
-      JSON.parse(cookie as string).token
+    if (parsed.token)
-    }`
+      axios.defaults.headers.common['Authorization'] = `Bearer ${parsed.token}`
   } else {
     delete axios.defaults.headers.common['Authorization']
   }