From 01af39fdfea6460a8a5d5a3993ca8e1931eeb3b0 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 28 Jan 2023 18:07:26 -0800 Subject: [PATCH] Refactor saved and extract SavedHead --- components/SavedHead/index.tsx | 25 +++++ pages/saved.tsx | 184 +++++++++++++++++++-------------- 2 files changed, 131 insertions(+), 78 deletions(-) create mode 100644 components/SavedHead/index.tsx diff --git a/components/SavedHead/index.tsx b/components/SavedHead/index.tsx new file mode 100644 index 00000000..01505e1a --- /dev/null +++ b/components/SavedHead/index.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import Head from 'next/head' +import { useTranslation } from 'next-i18next' + +const SavedHead = () => { + // Import translations + const { t } = useTranslation('common') + + return ( + + {t('page.titles.saved')} + + + + + + + + + + + ) +} + +export default SavedHead diff --git a/pages/saved.tsx b/pages/saved.tsx index 09b2ec93..0328fb19 100644 --- a/pages/saved.tsx +++ b/pages/saved.tsx @@ -1,11 +1,8 @@ import React, { useCallback, useEffect, useState } from 'react' -import Head from 'next/head' - +import InfiniteScroll from 'react-infinite-scroll-component' import { queryTypes, useQueryState } from 'next-usequerystate' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' -import InfiniteScroll from 'react-infinite-scroll-component' - import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import clonedeep from 'lodash.clonedeep' @@ -18,24 +15,35 @@ import useDidMountEffect from '~utils/useDidMountEffect' import { appState } from '~utils/appState' import { elements, allElement } from '~data/elements' import { emptyPaginationObject } from '~utils/emptyStates' -import { printError } from '~utils/reportError' +import ErrorSection from '~components/ErrorSection' import GridRep from '~components/GridRep' import GridRepCollection from '~components/GridRepCollection' import FilterBar from '~components/FilterBar' +import SavedHead from '~components/SavedHead' +import type { AxiosError } from 'axios' import type { NextApiRequest, NextApiResponse } from 'next' -import type { FilterObject, PaginationObject } from '~types' +import type { + FilterObject, + PageContextObj, + PaginationObject, + ResponseStatus, +} from '~types' interface Props { - teams?: Party[] - meta: PaginationObject - raids: Raid[] - sortedRaids: Raid[][] + context?: PageContextObj version: AppUpdate + error: boolean + status?: ResponseStatus } -const SavedRoute: React.FC = (props: Props) => { +const SavedRoute: React.FC = ({ + context, + version, + error, + status, +}: Props) => { // Set up router const router = useRouter() @@ -97,11 +105,11 @@ const SavedRoute: React.FC = (props: Props) => { // Set the initial parties from props useEffect(() => { - if (props.teams) { - setTotalPages(props.meta.totalPages) - setRecordCount(props.meta.count) - replaceResults(props.meta.count, props.teams) - appState.version = props.version + if (context && context.teams && context.pagination) { + setTotalPages(context.pagination.totalPages) + setRecordCount(context.pagination.count) + replaceResults(context.pagination.count, context.teams) + appState.version = version } setCurrentPage(1) }, []) @@ -269,6 +277,16 @@ const SavedRoute: React.FC = (props: Props) => { router.push(`/p/${shortcode}`) } + // Methods: Page component rendering + function pageHead() { + if (context && context.user) return + } + + function pageError() { + if (status) return + else return
+ } + function renderParties() { return parties.map((party, i) => { return ( @@ -291,55 +309,45 @@ const SavedRoute: React.FC = (props: Props) => { }) } - return ( -
- - {t('page.titles.saved')} - - - - - - - - - - - - -

{t('saved.title')}

- - -
- 0 ? parties.length : 0} - next={() => setCurrentPage(currentPage + 1)} - hasMore={totalPages > currentPage} - loader={ -
-

Loading...

-
- } + if (context) { + return ( +
+ {pageHead()} + - {renderParties()} - +

{t('saved.title')}

+ - {parties.length == 0 ? ( -
-

{t('saved.not_found')}

-
- ) : ( - '' - )} -
-
- ) +
+ 0 ? parties.length : 0} + next={() => setCurrentPage(currentPage + 1)} + hasMore={totalPages > currentPage} + loader={ +
+

Loading...

+
+ } + > + {renderParties()} + + + {parties.length == 0 ? ( +
+

{t('saved.not_found')}

+
+ ) : ( + '' + )} +
+
+ ) + } else return pageError() } export const getServerSidePaths = async () => { @@ -357,10 +365,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex // Set headers for server-side requests setUserToken(req, res) - try { - // Fetch latest version - const version = await fetchLatestVersion() + // Fetch latest version + const version = await fetchLatestVersion() + try { // Fetch and organize raids let { raids, sortedRaids } = await api.endpoints.raids .getAll() @@ -373,32 +381,52 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex } // Set up empty variables - let teams: Party[] | null = null - let meta: PaginationObject = emptyPaginationObject + let teams: Party[] | undefined = undefined + let pagination: 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 - meta.perPage = response.data.meta.per_page + pagination.count = response.data.meta.count + pagination.totalPages = response.data.meta.total_pages + pagination.perPage = response.data.meta.per_page + // Consolidate data into context object + const context: PageContextObj = { + teams: teams, + raids: raids, + sortedRaids: sortedRaids, + pagination: pagination, + } + + // Pass to the page component as props return { props: { - teams: teams, - meta: meta, - raids: raids, - sortedRaids: sortedRaids, + context: context, version: version, + error: false, ...(await serverSideTranslations(locale, ['common', 'roadmap'])), - // Will be passed to the page component as props }, } } catch (error) { - printError(error, 'axios') + // Extract the underlying Axios error + const axiosError = error as AxiosError + const response = axiosError.response + + // Pass to the page component as props + return { + props: { + context: null, + error: true, + status: { + code: response?.status, + text: response?.statusText, + }, + ...(await serverSideTranslations(locale, ['common', 'roadmap'])), + }, + } } } - export default SavedRoute