diff --git a/pages/[username].tsx b/pages/[username].tsx index 52c4d7e7..0767c736 100644 --- a/pages/[username].tsx +++ b/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: { - 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 diff --git a/pages/new/index.tsx b/pages/new/index.tsx index 3fe1eb74..e8777df7 100644 --- a/pages/new/index.tsx +++ b/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' @@ -53,7 +54,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex let { raids, sortedRaids } = await api.endpoints.raids .getAll() .then((response) => organizeRaids(response.data)) - + let jobs = await api.endpoints.jobs .getAll() .then((response) => { @@ -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 diff --git a/pages/saved.tsx b/pages/saved.tsx index 7fa2880b..90fdc6ff 100644 --- a/pages/saved.tsx +++ b/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) => { 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 diff --git a/pages/teams.tsx b/pages/teams.tsx index 7cb40316..5e6aca13 100644 --- a/pages/teams.tsx +++ b/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) => { 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 diff --git a/types/index.d.ts b/types/index.d.ts index 6c448c56..3f8f6723 100644 --- a/types/index.d.ts +++ b/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 diff --git a/utils/emptyStates.tsx b/utils/emptyStates.tsx index 973d389e..ae134f44 100644 --- a/utils/emptyStates.tsx +++ b/utils/emptyStates.tsx @@ -185,3 +185,9 @@ export const emptyWeaponSeriesState: WeaponSeriesState = { checked: false, }, } + +export const emptyPaginationObject = { + count: 0, + totalPages: 0, + perPage: 15, +} diff --git a/utils/extractFilters.tsx b/utils/extractFilters.tsx new file mode 100644 index 00000000..efcba098 --- /dev/null +++ b/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, + } +} diff --git a/utils/organizeRaids.tsx b/utils/organizeRaids.tsx new file mode 100644 index 00000000..5462e1df --- /dev/null +++ b/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, + } +}