From d32293995be073d92f00833ceadc071062dbfcea Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 31 Jan 2023 00:18:54 -0800 Subject: [PATCH] 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 | 4 ++-- components/SignupModal/index.tsx | 4 ++-- pages/[username].tsx | 4 ++-- pages/_app.tsx | 4 ++-- pages/about.tsx | 4 ++-- pages/new/index.tsx | 6 +++--- pages/p/[party].tsx | 4 ++-- pages/saved.tsx | 4 ++-- pages/teams.tsx | 4 ++-- utils/{setUserToken.tsx => userToken.tsx} | 17 ++++++++++++----- 10 files changed, 31 insertions(+), 24 deletions(-) rename utils/{setUserToken.tsx => userToken.tsx} (51%) diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx index 66fd34cf..5386f114 100644 --- a/components/LoginModal/index.tsx +++ b/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) { diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx index f8cea3f0..eff5f9a3 100644 --- a/components/SignupModal/index.tsx +++ b/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) { diff --git a/pages/[username].tsx b/pages/[username].tsx index 0b13f655..cf60511a 100644 --- a/pages/[username].tsx +++ b/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() diff --git a/pages/_app.tsx b/pages/_app.tsx index cfc1806f..200d7665 100644 --- a/pages/_app.tsx +++ b/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 diff --git a/pages/about.tsx b/pages/about.tsx index 179e1d53..06258b18 100644 --- a/pages/about.tsx +++ b/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 { diff --git a/pages/new/index.tsx b/pages/new/index.tsx index e03a3cfa..f78b6225 100644 --- a/pages/new/index.tsx +++ b/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 - setUserToken(req, res) + // Set headers for API calls + setHeaders(req, res) // Fetch latest version const version = await fetchLatestVersion() diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index 3a85a1fc..1b22b046 100644 --- a/pages/p/[party].tsx +++ b/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() diff --git a/pages/saved.tsx b/pages/saved.tsx index 0328fb19..db375c10 100644 --- a/pages/saved.tsx +++ b/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() diff --git a/pages/teams.tsx b/pages/teams.tsx index 199cb1a3..6b875587 100644 --- a/pages/teams.tsx +++ b/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() diff --git a/utils/setUserToken.tsx b/utils/userToken.tsx similarity index 51% rename from utils/setUserToken.tsx rename to utils/userToken.tsx index 004a2bc6..9e989028 100644 --- a/utils/setUserToken.tsx +++ b/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 ${ - JSON.parse(cookie as string).token - }` + const parsed = JSON.parse(cookie as string) + if (parsed.token) + axios.defaults.headers.common['Authorization'] = `Bearer ${parsed.token}` } else { delete axios.defaults.headers.common['Authorization'] }