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

Refactor [username] and extract ProfileHead

Browse source
This commit is contained in:
Justin Edmund 2023-01-28 17:58:12 -08:00
parent 337808a922
commit 9e3f15c286
2 changed files with 177 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
components/ProfileHead/index.tsx Normal file
View file

@ -0,0 +1,59 @@
import React from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
interface Props {
user: User
}
const ProfileHead = ({ user }: Props) => {
// Import translations
const { t } = useTranslation('common')
return (
<Head>
{/* HTML */}
<title>{t('page.titles.profile', { username: user.username })}</title>
<meta
name="description"
content={t('page.descriptions.profile', {
username: user.username,
})}
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */}
<meta
property="og:title"
content={t('page.titles.profile', { username: user.username })}
/>
<meta
property="og:description"
content={t('page.descriptions.profile', {
username: user.username,
})}
/>
<meta
property="og:url"
content={`https://app.granblue.team/${user.username}`}
/>
<meta property="og:type" content="website" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" />
<meta
name="twitter:title"
content={t('page.titles.profile', { username: user.username })}
/>
<meta
name="twitter:description"
content={t('page.descriptions.profile', {
username: user.username,
})}
/>
</Head>
)
}
export default ProfileHead

240
pages/[username].tsx
View file

@ -1,42 +1,48 @@
import React, { useCallback, useEffect, useState } from 'react' 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 { queryTypes, useQueryState } from 'next-usequerystate'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import InfiniteScroll from 'react-infinite-scroll-component'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import api from '~utils/api' import api from '~utils/api'
import setUserToken from '~utils/setUserToken'
import extractFilters from '~utils/extractFilters' import extractFilters from '~utils/extractFilters'
import fetchLatestVersion from '~utils/fetchLatestVersion' import fetchLatestVersion from '~utils/fetchLatestVersion'
import organizeRaids from '~utils/organizeRaids' import organizeRaids from '~utils/organizeRaids'
import setUserToken from '~utils/setUserToken'
import useDidMountEffect from '~utils/useDidMountEffect' import useDidMountEffect from '~utils/useDidMountEffect'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import { elements, allElement } from '~data/elements' import { elements, allElement } from '~data/elements'
import { emptyPaginationObject } from '~utils/emptyStates' import { emptyPaginationObject } from '~utils/emptyStates'
import { printError } from '~utils/reportError'
import GridRep from '~components/GridRep' import GridRep from '~components/GridRep'
import GridRepCollection from '~components/GridRepCollection' import GridRepCollection from '~components/GridRepCollection'
import ErrorSection from '~components/ErrorSection'
import FilterBar from '~components/FilterBar' import FilterBar from '~components/FilterBar'
import ProfileHead from '~components/ProfileHead'
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next'
import type { FilterObject, PaginationObject } from '~types' import type {
FilterObject,
PageContextObj,
PaginationObject,
ResponseStatus,
} from '~types'
import { AxiosError } from 'axios'
interface Props { interface Props {
user?: User context?: PageContextObj
teams?: Party[]
meta: PaginationObject
raids: Raid[]
sortedRaids: Raid[][]
version: AppUpdate version: AppUpdate
error: boolean
status?: ResponseStatus
} }
const ProfileRoute: React.FC<Props> = (props: Props) => { const ProfileRoute: React.FC<Props> = ({
context,
version,
error,
status,
}: Props) => {
// Set up router // Set up router
const router = useRouter() const router = useRouter()
const { username } = router.query const { username } = router.query
@ -99,11 +105,11 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
// Set the initial parties from props // Set the initial parties from props
useEffect(() => { useEffect(() => {
if (props.teams) { if (context && context.teams && context.pagination) {
setTotalPages(props.meta.totalPages) setTotalPages(context.pagination.totalPages)
setRecordCount(props.meta.count) setRecordCount(context.pagination.count)
replaceResults(props.meta.count, props.teams) replaceResults(context.pagination.count, context.teams)
appState.version = props.version appState.version = version
} }
setCurrentPage(1) setCurrentPage(1)
}, []) }, [])
@ -229,6 +235,16 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
router.push(`/p/${shortcode}`) router.push(`/p/${shortcode}`)
} }
// Methods: Page component rendering
function pageHead() {
if (context && context.user) return <ProfileHead user={context.user} />
}
function pageError() {
if (status) return <ErrorSection status={status} />
else return <div />
}
// TODO: Add save functions // TODO: Add save functions
function renderParties() { function renderParties() {
@ -250,95 +266,54 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
}) })
} }
return ( if (context) {
<div id="Profile"> return (
<Head> <div id="Profile">
{/* HTML */} {pageHead()}
<title> <FilterBar
{t('page.titles.profile', { username: props.user?.username })} onFilter={receiveFilters}
</title> scrolled={scrolled}
<meta element={element}
name="description" raidSlug={raidSlug ? raidSlug : undefined}
content={t('page.descriptions.profile', { recency={recency}
username: props.user?.username,
})}
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */}
<meta
property="og:title"
content={t('page.titles.profile', { username: props.user?.username })}
/>
<meta
property="og:description"
content={t('page.descriptions.profile', {
username: props.user?.username,
})}
/>
<meta
property="og:url"
content={`https://app.granblue.team/${props.user?.username}`}
/>
<meta property="og:type" content="website" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" />
<meta
name="twitter:title"
content={t('page.titles.profile', { username: props.user?.username })}
/>
<meta
name="twitter:description"
content={t('page.descriptions.profile', {
username: props.user?.username,
})}
/>
</Head>
<FilterBar
onFilter={receiveFilters}
scrolled={scrolled}
element={element}
raidSlug={raidSlug ? raidSlug : undefined}
recency={recency}
>
<div className="UserInfo">
<img
alt={props.user?.avatar.picture}
className={`profile ${props.user?.avatar.element}`}
srcSet={`/profile/${props.user?.avatar.picture}.png,
/profile/${props.user?.avatar.picture}@2x.png 2x`}
src={`/profile/${props.user?.avatar.picture}.png`}
/>
<h1>{props.user?.username}</h1>
</div>
</FilterBar>
<section>
<InfiniteScroll
dataLength={parties && parties.length > 0 ? parties.length : 0}
next={() => setCurrentPage(currentPage + 1)}
hasMore={totalPages > currentPage}
loader={
<div id="NotFound">
<h2>Loading...</h2>
</div>
}
> >
<GridRepCollection>{renderParties()}</GridRepCollection> <div className="UserInfo">
</InfiniteScroll> <img
alt={context.user?.avatar.picture}
{parties.length == 0 ? ( className={`profile ${context.user?.avatar.element}`}
<div id="NotFound"> srcSet={`/profile/${context.user?.avatar.picture}.png,
<h2>{t('teams.not_found')}</h2> /profile/${context.user?.avatar.picture}@2x.png 2x`}
src={`/profile/${context.user?.avatar.picture}.png`}
/>
<h1>{context.user?.username}</h1>
</div> </div>
) : ( </FilterBar>
''
)} <section>
</section> <InfiniteScroll
</div> dataLength={parties && parties.length > 0 ? parties.length : 0}
) next={() => setCurrentPage(currentPage + 1)}
hasMore={totalPages > currentPage}
loader={
<div id="NotFound">
<h2>Loading...</h2>
</div>
}
>
<GridRepCollection>{renderParties()}</GridRepCollection>
</InfiniteScroll>
{parties.length == 0 ? (
<div id="NotFound">
<h2>{t('teams.not_found')}</h2>
</div>
) : (
''
)}
</section>
</div>
)
} else return pageError()
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {
@ -356,10 +331,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
// Set headers for server-side requests // Set headers for server-side requests
setUserToken(req, res) setUserToken(req, res)
try { // Fetch latest version
// Fetch latest version const version = await fetchLatestVersion()
const version = await fetchLatestVersion()
try {
// Fetch and organize raids // Fetch and organize raids
let { raids, sortedRaids } = await api.endpoints.raids let { raids, sortedRaids } = await api.endpoints.raids
.getAll() .getAll()
@ -372,9 +347,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
} }
// Set up empty variables // Set up empty variables
let user: User | null = null let user: User | undefined = undefined
let teams: Party[] | null = null let teams: Party[] | undefined = undefined
let meta: PaginationObject = emptyPaginationObject let pagination: PaginationObject = emptyPaginationObject
// Perform a request only if we received a username // Perform a request only if we received a username
if (query.username) { if (query.username) {
@ -389,25 +364,46 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
if (response.data.profile.parties) teams = response.data.profile.parties if (response.data.profile.parties) teams = response.data.profile.parties
else teams = [] else teams = []
meta.count = response.data.meta.count pagination.count = response.data.meta.count
meta.totalPages = response.data.meta.total_pages pagination.totalPages = response.data.meta.total_pages
meta.perPage = response.data.meta.per_page pagination.perPage = response.data.meta.per_page
} }
// Consolidate data into context object
const context: PageContextObj = {
user: user,
teams: teams,
raids: raids,
sortedRaids: sortedRaids,
pagination: pagination,
}
// Pass to the page component as props
return { return {
props: { props: {
user: user, context: context,
teams: teams,
meta: meta,
raids: raids,
sortedRaids: sortedRaids,
version: version, version: version,
error: false,
...(await serverSideTranslations(locale, ['common', 'roadmap'])), ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
// Will be passed to the page component as props
}, },
} }
} catch (error) { } 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'])),
},
}
} }
} }