Refactor [username] and extract ProfileHead
This commit is contained in:
parent
337808a922
commit
9e3f15c286
2 changed files with 177 additions and 122 deletions
59
components/ProfileHead/index.tsx
Normal file
59
components/ProfileHead/index.tsx
Normal 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
|
||||
|
|
@ -1,42 +1,48 @@
|
|||
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 api from '~utils/api'
|
||||
|
||||
import setUserToken from '~utils/setUserToken'
|
||||
import extractFilters from '~utils/extractFilters'
|
||||
import fetchLatestVersion from '~utils/fetchLatestVersion'
|
||||
import organizeRaids from '~utils/organizeRaids'
|
||||
import setUserToken from '~utils/setUserToken'
|
||||
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 GridRep from '~components/GridRep'
|
||||
import GridRepCollection from '~components/GridRepCollection'
|
||||
import ErrorSection from '~components/ErrorSection'
|
||||
import FilterBar from '~components/FilterBar'
|
||||
import ProfileHead from '~components/ProfileHead'
|
||||
|
||||
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 {
|
||||
user?: User
|
||||
teams?: Party[]
|
||||
meta: PaginationObject
|
||||
raids: Raid[]
|
||||
sortedRaids: Raid[][]
|
||||
context?: PageContextObj
|
||||
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
|
||||
const router = useRouter()
|
||||
const { username } = router.query
|
||||
|
|
@ -99,11 +105,11 @@ const ProfileRoute: React.FC<Props> = (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)
|
||||
}, [])
|
||||
|
|
@ -229,6 +235,16 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
|
|||
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
|
||||
|
||||
function renderParties() {
|
||||
|
|
@ -250,95 +266,54 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
|
|||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="Profile">
|
||||
<Head>
|
||||
{/* HTML */}
|
||||
<title>
|
||||
{t('page.titles.profile', { username: props.user?.username })}
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={t('page.descriptions.profile', {
|
||||
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>
|
||||
}
|
||||
if (context) {
|
||||
return (
|
||||
<div id="Profile">
|
||||
{pageHead()}
|
||||
<FilterBar
|
||||
onFilter={receiveFilters}
|
||||
scrolled={scrolled}
|
||||
element={element}
|
||||
raidSlug={raidSlug ? raidSlug : undefined}
|
||||
recency={recency}
|
||||
>
|
||||
<GridRepCollection>{renderParties()}</GridRepCollection>
|
||||
</InfiniteScroll>
|
||||
|
||||
{parties.length == 0 ? (
|
||||
<div id="NotFound">
|
||||
<h2>{t('teams.not_found')}</h2>
|
||||
<div className="UserInfo">
|
||||
<img
|
||||
alt={context.user?.avatar.picture}
|
||||
className={`profile ${context.user?.avatar.element}`}
|
||||
srcSet={`/profile/${context.user?.avatar.picture}.png,
|
||||
/profile/${context.user?.avatar.picture}@2x.png 2x`}
|
||||
src={`/profile/${context.user?.avatar.picture}.png`}
|
||||
/>
|
||||
<h1>{context.user?.username}</h1>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
</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>
|
||||
</InfiniteScroll>
|
||||
|
||||
{parties.length == 0 ? (
|
||||
<div id="NotFound">
|
||||
<h2>{t('teams.not_found')}</h2>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
} else return pageError()
|
||||
}
|
||||
|
||||
export const getServerSidePaths = async () => {
|
||||
|
|
@ -356,10 +331,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()
|
||||
|
|
@ -372,9 +347,9 @@ 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 = emptyPaginationObject
|
||||
let user: User | undefined = undefined
|
||||
let teams: Party[] | undefined = undefined
|
||||
let pagination: PaginationObject = emptyPaginationObject
|
||||
|
||||
// Perform a request only if we received a 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
|
||||
else teams = []
|
||||
|
||||
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 = {
|
||||
user: user,
|
||||
teams: teams,
|
||||
raids: raids,
|
||||
sortedRaids: sortedRaids,
|
||||
pagination: pagination,
|
||||
}
|
||||
|
||||
// Pass to the page component as props
|
||||
return {
|
||||
props: {
|
||||
user: user,
|
||||
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'])),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue