Implement setUserToken util function

This function sets axios's default headers to be included before all queries.

We need to call `setUserToken` in _app.tsx so that the defaults are set before every client-side call, and we also need to call it in every instance of `setServerSideProps`.

As a result, wherever we use `getCookies` and construct a `headers` object, we can remove it. Right now, we've only removed it on the top-level pages.

pages/[username].tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import Head from 'next/head'
 
-import { getCookie } from 'cookies-next'
 import { queryTypes, useQueryState } from 'next-usequerystate'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -10,6 +9,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import api from '~utils/api'
+import setUserToken from '~utils/setUserToken'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~utils/Element'
 
@@ -19,6 +19,7 @@ import FilterBar from '~components/FilterBar'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { PaginationObject } from '~types'
+import type { FilterObject, PaginationObject } from '~types'
 
 interface Props {
   user?: User
@@ -29,15 +30,6 @@ interface Props {
 }
 
 const ProfileRoute: React.FC<Props> = (props: Props) => {
-  // Set up cookies
-  const cookie = getCookie('account')
-  const accountData: AccountCookie = cookie
-    ? JSON.parse(cookie as string)
-    : null
-  const headers = accountData
-    ? { Authorization: `Bearer ${accountData.token}` }
-    : {}
-
   // Set up router
   const router = useRouter()
   const { username } = router.query
@@ -139,7 +131,7 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
         api.endpoints.users
           .getOne({
             id: username,
-            params: { ...filters, ...{ headers: headers } },
+            params: { ...filters },
           })
           .then((response) => {
             const results = response.data.profile.parties
@@ -336,18 +328,12 @@ export const getServerSidePaths = async () => {
 
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
-  // Cookies
+  // Set headers for server-side requests
-  const cookie = getCookie("account", { req, res })
+  setUserToken(req, res)
-  const accountData: AccountCookie = cookie
-    ? JSON.parse(cookie as string)
-    : null
-
-  const headers = accountData
-    ? { headers: { Authorization: `Bearer ${accountData.token}` } }
-    : {}
 
+  // Fetch and organize raids
   let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll({ params: headers })
+    .getAll()
     .then((response) => organizeRaids(response.data))
 
   // Extract recency filter
@@ -376,8 +362,11 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   if (recencyParam) filters.recency = recencyParam
   if (teamElement && teamElement.id > -1) filters.element = teamElement.id
   if (raid) filters.raid = raid.id
+  const params = {
+    params: { ...filters },
+  }
 
-  // Fetch initial set of parties here
+  // Set up empty variables
   let user: User | null = null
   let teams: Party[] | null = null
   let meta: PaginationObject = {
@@ -389,10 +378,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   if (query.username) {
     const response = await api.endpoints.users.getOne({
       id: query.username,
-      params: {
+      params,
-        ...filters,
-      },
-      ...headers,
     })
 
     user = response.data.profile

pages/_app.tsx

@@ -7,6 +7,7 @@ import type { AppProps } from 'next/app'
 import Layout from '~components/Layout'
 
 import { accountState } from '~utils/accountState'
+import setUserToken from '~utils/setUserToken'
 
 import '../styles/globals.scss'
 
@@ -15,6 +16,8 @@ function MyApp({ Component, pageProps }: AppProps) {
   const cookieData: AccountCookie = cookie ? JSON.parse(cookie as string) : null
 
   useEffect(() => {
+    setUserToken()
+
     if (cookie) {
       console.log(`Logged in as user "${cookieData.username}"`)
 

pages/new/index.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
-import { getCookie } from 'cookies-next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import Party from '~components/Party'
 
 import { appState } from '~utils/appState'
+import setUserToken from '~utils/setUserToken'
 import api from '~utils/api'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
@@ -47,27 +47,23 @@ export const getServerSidePaths = async () => {
 
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
-  // Cookies
+  // Set headers for server-side requests
-  const cookie = getCookie("account", { req, res })
+  setUserToken(req, res)
-  const accountData: AccountCookie = cookie
-    ? JSON.parse(cookie as string)
-    : null
-
-  const headers = accountData
-    ? { headers: { Authorization: `Bearer ${accountData.token}` } }
-    : {}
 
   let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll({ params: headers })
+    .getAll()
     .then((response) => organizeRaids(response.data))
   
   let jobs = await api.endpoints.jobs
-    .getAll({ params: headers })
+    .getAll()
-    .then((response) => { return response.data })
+    .then((response) => {
-  
+      return response.data
-  let jobSkills = await api.allSkills(headers)
+    })
-    .then((response) => { return response.data })
+
-  
+  let jobSkills = await api.allSkills().then((response) => {
+    return response.data
+  })
+
   return {
     props: {
       jobs: jobs,

pages/saved.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import Head from 'next/head'
 
-import { getCookie } from 'cookies-next'
 import { queryTypes, useQueryState } from 'next-usequerystate'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -11,6 +10,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import clonedeep from 'lodash.clonedeep'
 
 import api from '~utils/api'
+import setUserToken from '~utils/setUserToken'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~utils/Element'
 
@@ -29,15 +29,6 @@ interface Props {
 }
 
 const SavedRoute: React.FC<Props> = (props: Props) => {
-  // Set up cookies
-  const cookie = getCookie('account')
-  const accountData: AccountCookie = cookie
-    ? JSON.parse(cookie as string)
-    : null
-  const headers = accountData
-    ? { Authorization: `Bearer ${accountData.token}` }
-    : {}
-
   // Set up router
   const router = useRouter()
 
@@ -219,7 +210,7 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
   }
 
   function saveFavorite(teamId: string) {
-    api.saveTeam({ id: teamId, params: headers }).then((response) => {
+    api.saveTeam({ id: teamId }).then((response) => {
       if (response.status == 201) {
         const index = parties.findIndex((p) => p.id === teamId)
         const party = parties[index]
@@ -235,7 +226,7 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
   }
 
   function unsaveFavorite(teamId: string) {
-    api.unsaveTeam({ id: teamId, params: headers }).then((response) => {
+    api.unsaveTeam({ id: teamId }).then((response) => {
       if (response.status == 200) {
         const index = parties.findIndex((p) => p.id === teamId)
         const party = parties[index]
@@ -343,18 +334,12 @@ export const getServerSidePaths = async () => {
 
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
-  // Cookies
+  // Set headers for server-side requests
-  const cookie = getCookie("account", { req, res })
+  setUserToken(req, res)
-  const accountData: AccountCookie = cookie
-    ? JSON.parse(cookie as string)
-    : null
 
-  const headers = accountData
+  // Fetch and organize raids
-    ? { headers: { Authorization: `Bearer ${accountData.token}` } }
-    : {}
-  
   let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll({ params: headers })
+    .getAll()
     .then((response) => organizeRaids(response.data))
 
   // Extract recency filter
@@ -383,6 +368,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   if (recencyParam) filters.recency = recencyParam
   if (teamElement && teamElement.id > -1) filters.element = teamElement.id
   if (raid) filters.raid = raid.id
+  const params = {
+    params: { ...filters },
+  }
 
   let teams: Party[] | null = null
   let meta: PaginationObject = {
@@ -391,14 +379,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     perPage: 15,
   }
 
-  // Fetch initial set of parties here
+  // Fetch initial set of saved parties
-  const response = await api.savedTeams({
+  const response = await api.savedTeams(params)
-    params: {
-      ...filters,
-    },
-    ...headers
-  })
-  
   teams = response.data.results
   meta.count = response.data.meta.count
   meta.totalPages = response.data.meta.total_pages

pages/teams.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import Head from 'next/head'
 
-import { getCookie } from 'cookies-next'
 import { queryTypes, useQueryState } from 'next-usequerystate'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -11,6 +10,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import clonedeep from 'lodash.clonedeep'
 
 import api from '~utils/api'
+import setUserToken from '~utils/setUserToken'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~utils/Element'
 
@@ -28,15 +28,6 @@ interface Props {
 }
 
 const TeamsRoute: React.FC<Props> = (props: Props) => {
-  // Set up cookies
-  const cookie = getCookie('account')
-  const accountData: AccountCookie = cookie
-    ? JSON.parse(cookie as string)
-    : null
-  const headers = accountData
-    ? { Authorization: `Bearer ${accountData.token}` }
-    : {}
-
   // Set up router
   const router = useRouter()
 
@@ -133,7 +124,7 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
       }
 
       api.endpoints.parties
-        .getAll({ ...filters, ...{ headers: headers } })
+        .getAll(params)
         .then((response) => {
           const results = response.data.results
           const meta = response.data.meta
@@ -218,7 +209,7 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
   }
 
   function saveFavorite(teamId: string) {
-    api.saveTeam({ id: teamId, params: headers }).then((response) => {
+    api.saveTeam({ id: teamId }).then((response) => {
       if (response.status == 201) {
         const index = parties.findIndex((p) => p.id === teamId)
         const party = parties[index]
@@ -234,7 +225,7 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
   }
 
   function unsaveFavorite(teamId: string) {
-    api.unsaveTeam({ id: teamId, params: headers }).then((response) => {
+    api.unsaveTeam({ id: teamId }).then((response) => {
       if (response.status == 200) {
         const index = parties.findIndex((p) => p.id === teamId)
         const party = parties[index]
@@ -350,18 +341,12 @@ export const getServerSidePaths = async () => {
 
 // prettier-ignore
 export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
-  // Cookies
+  // Set headers for server-side requests
-  const cookie = getCookie("account", { req, res })
+  setUserToken(req, res)
-  const accountData: AccountCookie = cookie
-    ? JSON.parse(cookie as string)
-    : null
-
-  const headers = accountData
-    ? { headers: { Authorization: `Bearer ${accountData.token}` } }
-    : {}
 
+  // Fetch and organize raids
   let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll({ params: headers })
+    .getAll()
     .then((response) => organizeRaids(response.data))
 
   // Extract recency filter
@@ -390,6 +375,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   if (recencyParam) filters.recency = recencyParam
   if (teamElement && teamElement.id > -1) filters.element = teamElement.id
   if (raid) filters.raid = raid.id
+  const params = {
+    params: { ...filters },
+  }
 
   let teams: Party[] | null = null
   let meta: PaginationObject = {
@@ -398,13 +386,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     perPage: 15,
   }
 
-  // Fetch initial set of parties here
+  // Fetch initial set of parties
-  const response = await api.endpoints.parties.getAll({
+  const response = await api.endpoints.parties.getAll(params)
-    params: {
-      ...filters,
-    },
-    ...headers,
-  })
 
   teams = response.data.results
   meta.count = response.data.meta.count

utils/api.tsx

@@ -104,7 +104,7 @@ class Api {
     return axios.put(resourceUrl, params)
   }
 
-  allSkills(params: {}) {
+  allSkills(params?: {}) {
     const resourceUrl = `${this.url}/jobs/skills`
     return axios.get(resourceUrl, params)
   }

utils/setUserToken.tsx

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