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

Add appWithTranslation HOC to pages

Browse source
This commit is contained in:
Justin Edmund 2022-03-04 17:56:17 -08:00
parent 80089843a3
commit 62edc6ca5c
4 changed files with 52 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
pages/_app.tsx
View file

@ -1,5 +1,6 @@
import { useEffect } from 'react' import { useEffect } from 'react'
import { useCookies, CookiesProvider } from 'react-cookie' import { useCookies, CookiesProvider } from 'react-cookie'
import { appWithTranslation } from 'next-i18next'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import Layout from '~components/Layout' import Layout from '~components/Layout'
@ -37,4 +38,4 @@ function MyApp({ Component, pageProps }: AppProps) {
) )
} }
export default MyApp export default appWithTranslation(MyApp)

11
pages/new/index.tsx
View file

@ -1,6 +1,8 @@
import React from 'react' import React from 'react'
import Party from '~components/Party' import Party from '~components/Party'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
const NewRoute = () => { const NewRoute = () => {
function callback(path: string) { function callback(path: string) {
// This is scuffed, how do we do this natively? // This is scuffed, how do we do this natively?
@ -14,4 +16,13 @@ const NewRoute = () => {
) )
} }
export async function getStaticProps({ locale }: { locale: string }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
// Will be passed to the page component as props
},
}
}
export default NewRoute export default NewRoute

20
pages/p/[party].tsx
View file

@ -1,5 +1,6 @@
import React from 'react' import React from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Party from '~components/Party' import Party from '~components/Party'
@ -30,4 +31,23 @@ const PartyRoute: React.FC = () => {
// } // }
} }
export async function getStaticPaths() {
return {
paths: [
// Object variant:
{ params: { party: 'string' } },
],
fallback: true,
}
}
export async function getStaticProps({ locale }: { locale: string }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
// Will be passed to the page component as props
},
}
}
export default PartyRoute export default PartyRoute

22
pages/teams.tsx
View file

@ -1,9 +1,15 @@
import React, { useCallback, useEffect, useState } from 'react' import React, { useCallback, useEffect, useState } from 'react'
import Head from 'next/head' import Head from 'next/head'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useCookies } from 'react-cookie' import { useCookies } from 'react-cookie'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import clonedeep from 'lodash.clonedeep' import clonedeep from 'lodash.clonedeep'
import api from '~utils/api' import api from '~utils/api'
import GridRep from '~components/GridRep' import GridRep from '~components/GridRep'
@ -12,6 +18,7 @@ import FilterBar from '~components/FilterBar'
const TeamsRoute: React.FC = () => { const TeamsRoute: React.FC = () => {
const router = useRouter() const router = useRouter()
const { t } = useTranslation('common')
// Cookies // Cookies
const [cookies] = useCookies(['account']) const [cookies] = useCookies(['account'])
@ -148,7 +155,7 @@ const TeamsRoute: React.FC = () => {
return ( return (
<div id="Teams"> <div id="Teams">
<Head> <Head>
<title>Discover Teams</title> <title>{ t('teams.title') }</title>
<meta property="og:title" content="Discover Teams" /> <meta property="og:title" content="Discover Teams" />
<meta property="og:description" content="Find different Granblue Fantasy teams by raid, element or recency" /> <meta property="og:description" content="Find different Granblue Fantasy teams by raid, element or recency" />
@ -161,7 +168,7 @@ const TeamsRoute: React.FC = () => {
<meta name="twitter:description" content="Find different Granblue Fantasy teams by raid, element or recency" /> <meta name="twitter:description" content="Find different Granblue Fantasy teams by raid, element or recency" />
</Head> </Head>
<FilterBar onFilter={receiveFilters} scrolled={scrolled}> <FilterBar onFilter={receiveFilters} scrolled={scrolled}>
<h1>Discover Teams</h1> <h1>{t('teams.title')}</h1>
</FilterBar> </FilterBar>
<section> <section>
@ -188,7 +195,7 @@ const TeamsRoute: React.FC = () => {
{ (parties.length == 0) ? { (parties.length == 0) ?
<div id="NotFound"> <div id="NotFound">
<h2>{ (loading) ? 'Loading teams...' : 'No teams found' }</h2> <h2>{ (loading) ? t('teams.loading') : t('teams.not_found') }</h2>
</div> </div>
: '' } : '' }
</section> </section>
@ -196,4 +203,13 @@ const TeamsRoute: React.FC = () => {
) )
} }
export async function getStaticProps({ locale }: { locale: string }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
// Will be passed to the page component as props
},
}
}
export default TeamsRoute export default TeamsRoute