Migrate about, updates, and roadmap pages to App Router
- Create separate pages for about, updates, and roadmap in App Router - Use correct translation keys from common namespace (page.titles, page.descriptions) - Remove unstable_setRequestLocale as it's not needed - Each page has its own client component with segmented control navigation - Fixes 404 errors for about-related pages
This commit is contained in:
parent
72c734153d
commit
eec47f69b6
6 changed files with 315 additions and 0 deletions
99
app/[locale]/about/AboutPageClient.tsx
Normal file
99
app/[locale]/about/AboutPageClient.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { useTranslations } from 'next-intl'
|
||||||
|
import { useRouter, usePathname } from '~/i18n/navigation'
|
||||||
|
import { AboutTabs } from '~/utils/enums'
|
||||||
|
|
||||||
|
import AboutPage from '~/components/about/AboutPage'
|
||||||
|
import UpdatesPage from '~/components/about/UpdatesPage'
|
||||||
|
import RoadmapPage from '~/components/about/RoadmapPage'
|
||||||
|
import SegmentedControl from '~/components/common/SegmentedControl'
|
||||||
|
import Segment from '~/components/common/Segment'
|
||||||
|
|
||||||
|
export default function AboutPageClient() {
|
||||||
|
const t = useTranslations('common')
|
||||||
|
const router = useRouter()
|
||||||
|
const pathname = usePathname()
|
||||||
|
|
||||||
|
const [currentTab, setCurrentTab] = useState<AboutTabs>(AboutTabs.About)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const parts = pathname.split('/')
|
||||||
|
const lastPart = parts[parts.length - 1]
|
||||||
|
|
||||||
|
switch (lastPart) {
|
||||||
|
case 'about':
|
||||||
|
setCurrentTab(AboutTabs.About)
|
||||||
|
break
|
||||||
|
case 'updates':
|
||||||
|
setCurrentTab(AboutTabs.Updates)
|
||||||
|
break
|
||||||
|
case 'roadmap':
|
||||||
|
setCurrentTab(AboutTabs.Roadmap)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
setCurrentTab(AboutTabs.About)
|
||||||
|
}
|
||||||
|
}, [pathname])
|
||||||
|
|
||||||
|
function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const value = event.target.value
|
||||||
|
router.push(`/${value}`)
|
||||||
|
|
||||||
|
switch (value) {
|
||||||
|
case 'about':
|
||||||
|
setCurrentTab(AboutTabs.About)
|
||||||
|
break
|
||||||
|
case 'updates':
|
||||||
|
setCurrentTab(AboutTabs.Updates)
|
||||||
|
break
|
||||||
|
case 'roadmap':
|
||||||
|
setCurrentTab(AboutTabs.Roadmap)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentSection = () => {
|
||||||
|
switch (currentTab) {
|
||||||
|
case AboutTabs.About:
|
||||||
|
return <AboutPage />
|
||||||
|
case AboutTabs.Updates:
|
||||||
|
return <UpdatesPage />
|
||||||
|
case AboutTabs.Roadmap:
|
||||||
|
return <RoadmapPage />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<SegmentedControl blended={true}>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="about"
|
||||||
|
selected={currentTab == AboutTabs.About}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.about')}
|
||||||
|
</Segment>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="updates"
|
||||||
|
selected={currentTab == AboutTabs.Updates}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.updates')}
|
||||||
|
</Segment>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="roadmap"
|
||||||
|
selected={currentTab == AboutTabs.Roadmap}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.roadmap')}
|
||||||
|
</Segment>
|
||||||
|
</SegmentedControl>
|
||||||
|
{currentSection()}
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
28
app/[locale]/about/page.tsx
Normal file
28
app/[locale]/about/page.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Metadata } from 'next'
|
||||||
|
import { getTranslations } from 'next-intl/server'
|
||||||
|
import AboutPageClient from './AboutPageClient'
|
||||||
|
|
||||||
|
export async function generateMetadata({
|
||||||
|
params: { locale }
|
||||||
|
}: {
|
||||||
|
params: { locale: string }
|
||||||
|
}): Promise<Metadata> {
|
||||||
|
const t = await getTranslations({ locale, namespace: 'common' })
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: t('page.titles.about'),
|
||||||
|
description: t('page.descriptions.about')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function AboutPage({
|
||||||
|
params: { locale }
|
||||||
|
}: {
|
||||||
|
params: { locale: string }
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div id="About">
|
||||||
|
<AboutPageClient />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
66
app/[locale]/roadmap/RoadmapPageClient.tsx
Normal file
66
app/[locale]/roadmap/RoadmapPageClient.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { useTranslations } from 'next-intl'
|
||||||
|
import { useRouter } from '~/i18n/navigation'
|
||||||
|
import { AboutTabs } from '~/utils/enums'
|
||||||
|
|
||||||
|
import AboutPage from '~/components/about/AboutPage'
|
||||||
|
import UpdatesPage from '~/components/about/UpdatesPage'
|
||||||
|
import RoadmapPage from '~/components/about/RoadmapPage'
|
||||||
|
import SegmentedControl from '~/components/common/SegmentedControl'
|
||||||
|
import Segment from '~/components/common/Segment'
|
||||||
|
|
||||||
|
export default function RoadmapPageClient() {
|
||||||
|
const t = useTranslations('common')
|
||||||
|
const router = useRouter()
|
||||||
|
const [currentTab] = useState<AboutTabs>(AboutTabs.Roadmap)
|
||||||
|
|
||||||
|
function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const value = event.target.value
|
||||||
|
router.push(`/${value}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentSection = () => {
|
||||||
|
switch (currentTab) {
|
||||||
|
case AboutTabs.About:
|
||||||
|
return <AboutPage />
|
||||||
|
case AboutTabs.Updates:
|
||||||
|
return <UpdatesPage />
|
||||||
|
case AboutTabs.Roadmap:
|
||||||
|
return <RoadmapPage />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<SegmentedControl blended={true}>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="about"
|
||||||
|
selected={currentTab == AboutTabs.About}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.about')}
|
||||||
|
</Segment>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="updates"
|
||||||
|
selected={currentTab == AboutTabs.Updates}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.updates')}
|
||||||
|
</Segment>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="roadmap"
|
||||||
|
selected={currentTab == AboutTabs.Roadmap}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.roadmap')}
|
||||||
|
</Segment>
|
||||||
|
</SegmentedControl>
|
||||||
|
{currentSection()}
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
28
app/[locale]/roadmap/page.tsx
Normal file
28
app/[locale]/roadmap/page.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Metadata } from 'next'
|
||||||
|
import { getTranslations } from 'next-intl/server'
|
||||||
|
import RoadmapPageClient from './RoadmapPageClient'
|
||||||
|
|
||||||
|
export async function generateMetadata({
|
||||||
|
params: { locale }
|
||||||
|
}: {
|
||||||
|
params: { locale: string }
|
||||||
|
}): Promise<Metadata> {
|
||||||
|
const t = await getTranslations({ locale, namespace: 'common' })
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: t('page.titles.roadmap'),
|
||||||
|
description: t('page.descriptions.roadmap')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function RoadmapPage({
|
||||||
|
params: { locale }
|
||||||
|
}: {
|
||||||
|
params: { locale: string }
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div id="About">
|
||||||
|
<RoadmapPageClient />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
66
app/[locale]/updates/UpdatesPageClient.tsx
Normal file
66
app/[locale]/updates/UpdatesPageClient.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { useTranslations } from 'next-intl'
|
||||||
|
import { useRouter } from '~/i18n/navigation'
|
||||||
|
import { AboutTabs } from '~/utils/enums'
|
||||||
|
|
||||||
|
import AboutPage from '~/components/about/AboutPage'
|
||||||
|
import UpdatesPage from '~/components/about/UpdatesPage'
|
||||||
|
import RoadmapPage from '~/components/about/RoadmapPage'
|
||||||
|
import SegmentedControl from '~/components/common/SegmentedControl'
|
||||||
|
import Segment from '~/components/common/Segment'
|
||||||
|
|
||||||
|
export default function UpdatesPageClient() {
|
||||||
|
const t = useTranslations('common')
|
||||||
|
const router = useRouter()
|
||||||
|
const [currentTab] = useState<AboutTabs>(AboutTabs.Updates)
|
||||||
|
|
||||||
|
function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const value = event.target.value
|
||||||
|
router.push(`/${value}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentSection = () => {
|
||||||
|
switch (currentTab) {
|
||||||
|
case AboutTabs.About:
|
||||||
|
return <AboutPage />
|
||||||
|
case AboutTabs.Updates:
|
||||||
|
return <UpdatesPage />
|
||||||
|
case AboutTabs.Roadmap:
|
||||||
|
return <RoadmapPage />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<SegmentedControl blended={true}>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="about"
|
||||||
|
selected={currentTab == AboutTabs.About}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.about')}
|
||||||
|
</Segment>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="updates"
|
||||||
|
selected={currentTab == AboutTabs.Updates}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.updates')}
|
||||||
|
</Segment>
|
||||||
|
<Segment
|
||||||
|
groupName="about"
|
||||||
|
name="roadmap"
|
||||||
|
selected={currentTab == AboutTabs.Roadmap}
|
||||||
|
onClick={handleTabClicked}
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.roadmap')}
|
||||||
|
</Segment>
|
||||||
|
</SegmentedControl>
|
||||||
|
{currentSection()}
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
28
app/[locale]/updates/page.tsx
Normal file
28
app/[locale]/updates/page.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Metadata } from 'next'
|
||||||
|
import { getTranslations } from 'next-intl/server'
|
||||||
|
import UpdatesPageClient from './UpdatesPageClient'
|
||||||
|
|
||||||
|
export async function generateMetadata({
|
||||||
|
params: { locale }
|
||||||
|
}: {
|
||||||
|
params: { locale: string }
|
||||||
|
}): Promise<Metadata> {
|
||||||
|
const t = await getTranslations({ locale, namespace: 'common' })
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: t('page.titles.updates'),
|
||||||
|
description: t('page.descriptions.updates')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function UpdatesPage({
|
||||||
|
params: { locale }
|
||||||
|
}: {
|
||||||
|
params: { locale: string }
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div id="About">
|
||||||
|
<UpdatesPageClient />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue