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

Clean up setServerSideProps

Browse source 
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.
This commit is contained in:
Justin Edmund 2022-12-22 21:43:09 -08:00
parent a98585a334
commit 247d2a466a
8 changed files with 132 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
pages/[username].tsx
View file

@ -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: {
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 filters: FilterObject = extractFilters(query, raids)
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 = {
count: 0,
totalPages: 0,
perPage: 15
}
let meta: PaginationObject = emptyPaginationObject
// 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

33
pages/new/index.tsx
View file

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

94
pages/saved.tsx
View file

@ -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,
raid: raid ? raid.id : undefined,
recency: recency != -1 ? recency : undefined,
page: currentPage,
...filters,
},
}
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: {
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 filters: FilterObject = extractFilters(query, raids)
const params = {
params: { ...filters },
}
// Set up empty variables
let teams: Party[] | null = null
let meta: PaginationObject = {
count: 0,
totalPages: 0,
perPage: 15,
}
let meta: PaginationObject = emptyPaginationObject
// 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

91
pages/teams.tsx
View file

@ -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,
raid: raid ? raid.id : undefined,
recency: recency != -1 ? recency : undefined,
page: currentPage,
...filters,
},
}
@ -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: {
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 filters: FilterObject = extractFilters(query, raids)
const params = {
params: { ...filters },
}
// Set up empty variables
let teams: Party[] | null = null
let meta: PaginationObject = {
count: 0,
totalPages: 0,
perPage: 15,
}
let meta: PaginationObject = emptyPaginationObject
// 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

6
types/index.d.ts vendored
View file

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

6
utils/emptyStates.tsx
View file

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

26
utils/extractFilters.tsx Normal file
View file

@ -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,
}
}

30
utils/organizeRaids.tsx Normal file
View file

@ -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,
}
}