Clean up setServerSideProps

Here we extracted the common methods used in pages into utils and included them, getting rid of a lot of duplicate code in the process.

pages/[username].tsx

@@ -10,15 +10,17 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import api from '~utils/api'
 import setUserToken from '~utils/setUserToken'
+import extractFilters from '~utils/extractFilters'
+import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~utils/Element'
+import { emptyPaginationObject } from '~utils/emptyStates'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
 import FilterBar from '~components/FilterBar'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
-import type { PaginationObject } from '~types'
 import type { FilterObject, PaginationObject } from '~types'
 
 interface Props {
@@ -336,32 +338,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     .getAll()
     .then((response) => organizeRaids(response.data))
 
-  // Extract recency filter
-  const recencyParam: number = parseInt(query.recency)
-
-  // Extract element filter
-  const elementParam: string = query.element
-  const teamElement: TeamElement | undefined =
-    elementParam === "all"
-      ? allElement
-      : elements.find(
-          (element) => element.name.en.toLowerCase() === elementParam
-        )
-
-  // Extract raid filter
-  const raidParam: string = query.raid
-  const raid: Raid | undefined = raids.find((r) => r.slug === raidParam)
-
   // Create filter object
-  const filters: {
+  const filters: FilterObject = extractFilters(query, raids)
-    raid?: string
-    element?: number
-    recency?: number
-  } = {}
-
-  if (recencyParam) filters.recency = recencyParam
-  if (teamElement && teamElement.id > -1) filters.element = teamElement.id
-  if (raid) filters.raid = raid.id
   const params = {
     params: { ...filters },
   }
@@ -369,20 +347,20 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set up empty variables
   let user: User | null = null
   let teams: Party[] | null = null
-  let meta: PaginationObject = {
+  let meta: PaginationObject = emptyPaginationObject
-    count: 0,
-    totalPages: 0,
-    perPage: 15
-  }
 
+  // Perform a request only if we received a username
   if (query.username) {
     const response = await api.endpoints.users.getOne({
       id: query.username,
       params,
     })
 
+    // Assign values to pass to props
     user = response.data.profile
-    teams = response.data.profile.parties
+
+    if (response.data.profile.parties) teams = response.data.profile.parties
+    else teams = []
 
     meta.count = response.data.meta.count
     meta.totalPages = response.data.meta.total_pages
@@ -396,40 +374,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
       meta: meta,
       raids: raids,
       sortedRaids: sortedRaids,
-      ...(await serverSideTranslations(locale, ["common"])),
+      ...(await serverSideTranslations(locale, ['common'])),
       // Will be passed to the page component as props
     },
   }
 }
 
-const organizeRaids = (raids: Raid[]) => {
-  // Set up empty raid for "All raids"
-  const all = {
-    id: '0',
-    name: {
-      en: 'All raids',
-      ja: '全て',
-    },
-    slug: 'all',
-    level: 0,
-    group: 0,
-    element: 0,
-  }
-
-  const numGroups = Math.max.apply(
-    Math,
-    raids.map((raid) => raid.group)
-  )
-  let groupedRaids = []
-
-  for (let i = 0; i <= numGroups; i++) {
-    groupedRaids[i] = raids.filter((raid) => raid.group == i)
-  }
-
-  return {
-    raids: raids,
-    sortedRaids: groupedRaids,
-  }
-}
-
 export default ProfileRoute

pages/new/index.tsx

@@ -4,6 +4,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Party from '~components/Party'
 
 import { appState } from '~utils/appState'
+import organizeRaids from '~utils/organizeRaids'
 import setUserToken from '~utils/setUserToken'
 import api from '~utils/api'
 
@@ -70,40 +71,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
       jobSkills: jobSkills,
       raids: raids,
       sortedRaids: sortedRaids,
-      ...(await serverSideTranslations(locale, ["common"])),
+      ...(await serverSideTranslations(locale, ['common'])),
       // Will be passed to the page component as props
     },
   }
 }
 
-const organizeRaids = (raids: Raid[]) => {
-  // Set up empty raid for "All raids"
-  const all = {
-    id: '0',
-    name: {
-      en: 'All raids',
-      ja: '全て',
-    },
-    slug: 'all',
-    level: 0,
-    group: 0,
-    element: 0,
-  }
-
-  const numGroups = Math.max.apply(
-    Math,
-    raids.map((raid) => raid.group)
-  )
-  let groupedRaids = []
-
-  for (let i = 0; i <= numGroups; i++) {
-    groupedRaids[i] = raids.filter((raid) => raid.group == i)
-  }
-
-  return {
-    raids: raids,
-    sortedRaids: groupedRaids,
-  }
-}
-
 export default NewRoute

pages/saved.tsx

@@ -11,15 +11,18 @@ import clonedeep from 'lodash.clonedeep'
 
 import api from '~utils/api'
 import setUserToken from '~utils/setUserToken'
+import extractFilters from '~utils/extractFilters'
+import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~utils/Element'
+import { emptyPaginationObject } from '~utils/emptyStates'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
 import FilterBar from '~components/FilterBar'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
-import type { PaginationObject } from '~types'
+import type { FilterObject, PaginationObject } from '~types'
 
 interface Props {
   teams?: Party[]
@@ -115,17 +118,27 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
 
   const fetchTeams = useCallback(
     ({ replace }: { replace: boolean }) => {
-      const filters = {
+      const filters: {
+        [key: string]: any
+      } = {
+        element: element !== -1 ? element : undefined,
+        raid: raid ? raid.id : undefined,
+        recency: recency !== -1 ? recency : undefined,
+        page: currentPage,
+      }
+
+      Object.keys(filters).forEach(
+        (key) => filters[key] === undefined && delete filters[key]
+      )
+
+      const params = {
         params: {
-          element: element != -1 ? element : undefined,
+          ...filters,
-          raid: raid ? raid.id : undefined,
-          recency: recency != -1 ? recency : undefined,
-          page: currentPage,
         },
       }
 
       api
-        .savedTeams({ ...filters, ...{ headers: headers } })
+        .savedTeams(params)
         .then((response) => {
           const results = response.data.results
           const meta = response.data.meta
@@ -342,45 +355,20 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     .getAll()
     .then((response) => organizeRaids(response.data))
 
-  // Extract recency filter
-  const recencyParam: number = parseInt(query.recency)
-
-  // Extract element filter
-  const elementParam: string = query.element
-  const teamElement: TeamElement | undefined =
-    elementParam === "all"
-      ? allElement
-      : elements.find(
-          (element) => element.name.en.toLowerCase() === elementParam
-        )
-
-  // Extract raid filter
-  const raidParam: string = query.raid
-  const raid: Raid | undefined = raids.find((r) => r.slug === raidParam)
-
   // Create filter object
-  const filters: {
+  const filters: FilterObject = extractFilters(query, raids)
-    raid?: string
-    element?: number
-    recency?: number
-  } = {}
-
-  if (recencyParam) filters.recency = recencyParam
-  if (teamElement && teamElement.id > -1) filters.element = teamElement.id
-  if (raid) filters.raid = raid.id
   const params = {
     params: { ...filters },
   }
 
+  // Set up empty variables
   let teams: Party[] | null = null
-  let meta: PaginationObject = {
+  let meta: PaginationObject = emptyPaginationObject
-    count: 0,
-    totalPages: 0,
-    perPage: 15,
-  }
 
   // Fetch initial set of saved parties
   const response = await api.savedTeams(params)
+
+  // Assign values to pass to props
   teams = response.data.results
   meta.count = response.data.meta.count
   meta.totalPages = response.data.meta.total_pages
@@ -392,40 +380,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
       meta: meta,
       raids: raids,
       sortedRaids: sortedRaids,
-      ...(await serverSideTranslations(locale, ["common"])),
+      ...(await serverSideTranslations(locale, ['common'])),
       // Will be passed to the page component as props
     },
   }
 }
 
-const organizeRaids = (raids: Raid[]) => {
-  // Set up empty raid for "All raids"
-  const all = {
-    id: '0',
-    name: {
-      en: 'All raids',
-      ja: '全て',
-    },
-    slug: 'all',
-    level: 0,
-    group: 0,
-    element: 0,
-  }
-
-  const numGroups = Math.max.apply(
-    Math,
-    raids.map((raid) => raid.group)
-  )
-  let groupedRaids = []
-
-  for (let i = 0; i <= numGroups; i++) {
-    groupedRaids[i] = raids.filter((raid) => raid.group == i)
-  }
-
-  return {
-    raids: raids,
-    sortedRaids: groupedRaids,
-  }
-}
-
 export default SavedRoute

pages/teams.tsx

@@ -11,15 +11,18 @@ import clonedeep from 'lodash.clonedeep'
 
 import api from '~utils/api'
 import setUserToken from '~utils/setUserToken'
+import extractFilters from '~utils/extractFilters'
+import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~utils/Element'
+import { emptyPaginationObject } from '~utils/emptyStates'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
 import FilterBar from '~components/FilterBar'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
-import type { PaginationObject } from '~types'
+import type { FilterObject, PaginationObject } from '~types'
 
 interface Props {
   teams?: Party[]
@@ -114,12 +117,22 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
 
   const fetchTeams = useCallback(
     ({ replace }: { replace: boolean }) => {
-      const filters = {
+      const filters: {
+        [key: string]: any
+      } = {
+        element: element !== -1 ? element : undefined,
+        raid: raid ? raid.id : undefined,
+        recency: recency !== -1 ? recency : undefined,
+        page: currentPage,
+      }
+
+      Object.keys(filters).forEach(
+        (key) => filters[key] === undefined && delete filters[key]
+      )
+
+      const params = {
         params: {
-          element: element != -1 ? element : undefined,
+          ...filters,
-          raid: raid ? raid.id : undefined,
-          recency: recency != -1 ? recency : undefined,
-          page: currentPage,
         },
       }
 
@@ -349,46 +362,20 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     .getAll()
     .then((response) => organizeRaids(response.data))
 
-  // Extract recency filter
-  const recencyParam: number = parseInt(query.recency)
-
-  // Extract element filter
-  const elementParam: string = query.element
-  const teamElement: TeamElement | undefined =
-    elementParam === "all"
-      ? allElement
-      : elements.find(
-          (element) => element.name.en.toLowerCase() === elementParam
-        )
-
-  // Extract raid filter
-  const raidParam: string = query.raid
-  const raid: Raid | undefined = raids.find((r) => r.slug === raidParam)
-
   // Create filter object
-  const filters: {
+  const filters: FilterObject = extractFilters(query, raids)
-    raid?: string
-    element?: number
-    recency?: number
-  } = {}
-
-  if (recencyParam) filters.recency = recencyParam
-  if (teamElement && teamElement.id > -1) filters.element = teamElement.id
-  if (raid) filters.raid = raid.id
   const params = {
     params: { ...filters },
   }
 
+  // Set up empty variables
   let teams: Party[] | null = null
-  let meta: PaginationObject = {
+  let meta: PaginationObject = emptyPaginationObject
-    count: 0,
-    totalPages: 0,
-    perPage: 15,
-  }
 
   // Fetch initial set of parties
   const response = await api.endpoints.parties.getAll(params)
 
+  // Assign values to pass to props
   teams = response.data.results
   meta.count = response.data.meta.count
   meta.totalPages = response.data.meta.total_pages
@@ -400,40 +387,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
       meta: meta,
       raids: raids,
       sortedRaids: sortedRaids,
-      ...(await serverSideTranslations(locale, ["common"])),
+      ...(await serverSideTranslations(locale, ['common'])),
       // Will be passed to the page component as props
     },
   }
 }
 
-const organizeRaids = (raids: Raid[]) => {
-  // Set up empty raid for "All raids"
-  const all = {
-    id: '0',
-    name: {
-      en: 'All raids',
-      ja: '全て',
-    },
-    slug: 'all',
-    level: 0,
-    group: 0,
-    element: 0,
-  }
-
-  const numGroups = Math.max.apply(
-    Math,
-    raids.map((raid) => raid.group)
-  )
-  let groupedRaids = []
-
-  for (let i = 0; i <= numGroups; i++) {
-    groupedRaids[i] = raids.filter((raid) => raid.group == i)
-  }
-
-  return {
-    raids: raids,
-    sortedRaids: groupedRaids,
-  }
-}
-
 export default TeamsRoute

types/index.d.ts

@@ -8,6 +8,12 @@ export type JobSkillObject = {
   3: JobSkill | undefined
 }
 
+export type FilterObject = {
+  raid?: string
+  element?: number
+  recency?: number
+}
+
 export type PaginationObject = {
   count: number
   totalPages: number

utils/emptyStates.tsx

@@ -185,3 +185,9 @@ export const emptyWeaponSeriesState: WeaponSeriesState = {
     checked: false,
   },
 }
+
+export const emptyPaginationObject = {
+  count: 0,
+  totalPages: 0,
+  perPage: 15,
+}

utils/extractFilters.tsx

@@ -0,0 +1,26 @@
+import { elements, allElement } from '~utils/Element'
+
+export default (query: { [index: string]: string }, raids: Raid[]) => {
+  // Extract recency filter
+  const recencyParam: number = parseInt(query.recency)
+
+  // Extract element filter
+  const elementParam: string = query.element
+  const teamElement: TeamElement | undefined =
+    elementParam === 'all'
+      ? allElement
+      : elements.find(
+          (element) => element.name.en.toLowerCase() === elementParam
+        )
+
+  // Extract raid filter
+  const raidParam: string = query.raid
+  const raid: Raid | undefined = raids.find((r) => r.slug === raidParam)
+
+  // Return filter object
+  return {
+    recency: recencyParam && recencyParam !== -1 ? recencyParam : undefined,
+    element: teamElement && teamElement.id > -1 ? teamElement.id : undefined,
+    raid: raid ? raid.id : undefined,
+  }
+}

utils/organizeRaids.tsx

@@ -0,0 +1,30 @@
+export default (raids: Raid[]) => {
+  console.log('organizing raids...')
+  // Set up empty raid for "All raids"
+  const all = {
+    id: '0',
+    name: {
+      en: 'All raids',
+      ja: '全て',
+    },
+    slug: 'all',
+    level: 0,
+    group: 0,
+    element: 0,
+  }
+
+  const numGroups = Math.max.apply(
+    Math,
+    raids.map((raid) => raid.group)
+  )
+  let groupedRaids = []
+
+  for (let i = 0; i <= numGroups; i++) {
+    groupedRaids[i] = raids.filter((raid) => raid.group == i)
+  }
+
+  return {
+    raids: raids,
+    sortedRaids: groupedRaids,
+  }
+}