Justin Edmund
73395efee8
## Summary
- Migrated about, updates, and roadmap pages from Pages Router to App
Router
- Fixed profile page data loading and display
- Created API route handlers for proxying backend calls
- Fixed translation format issues with next-intl
## Changes
- Created new App Router pages under `/app/[locale]/`
- Fixed translation interpolation from `{{variable}}` to `{variable}`
format
- Added API routes for characters, raids, summons, and weapons
- Fixed infinite recursion in ChangelogUnit by renaming fetch function
- Converted from useTranslation to useTranslations hook
## Test plan
- [x] About page loads and displays correctly
- [x] Updates page fetches and displays changelog data
- [x] Roadmap page renders without errors
- [x] Profile page shows user teams correctly
- [x] All translations render properly
🤖 Generated with [Claude Code](https://claude.ai/code)
---------
Co-authored-by: Claude <noreply@anthropic.com>
99 lines
No EOL
2.6 KiB
TypeScript
99 lines
No EOL
2.6 KiB
TypeScript
'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>
|
|
)
|
|
} |