From fd42225f86e1aed62f1de1c656e8b4e0112b809f Mon Sep 17 00:00:00 2001 From: resatyildiz Date: Mon, 15 Apr 2024 17:26:43 +0300 Subject: [PATCH] fix: edit page and layout with related components --- src/app/[locale]/(unauth)/layout.tsx | 52 ++-------- src/app/[locale]/(unauth)/page.test.tsx | 6 +- src/app/[locale]/(unauth)/page.tsx | 127 ++++++++--------------- src/components/widget/LocaleSwitcher.tsx | 41 ++++++++ tests/e2e/Navigation.spec.ts | 14 +-- 5 files changed, 96 insertions(+), 144 deletions(-) create mode 100644 src/components/widget/LocaleSwitcher.tsx diff --git a/src/app/[locale]/(unauth)/layout.tsx b/src/app/[locale]/(unauth)/layout.tsx index 44d6dd2..9c65df6 100644 --- a/src/app/[locale]/(unauth)/layout.tsx +++ b/src/app/[locale]/(unauth)/layout.tsx @@ -1,7 +1,7 @@ import Link from 'next/link'; import { useTranslations } from 'next-intl'; -import LocaleSwitcher from '@/components/LocaleSwitcher'; +import LocaleSwitcher from '@/components/widget/LocaleSwitcher'; import { BaseTemplate } from '@/templates/BaseTemplate'; export default function Layout(props: { children: React.ReactNode }) { @@ -10,48 +10,14 @@ export default function Layout(props: { children: React.ReactNode }) { return ( -
  • - - {t('home_link')} - -
    • -
  • - - {t('about_link')} - -
    • -
  • - - {t('portfolio_link')} - -
    • -
  • - - GitHub - -
    • -
  • - - LinkedIn - -
    • - +
  • + + {t('home_link')} + +
    • } rightNav={
  • diff --git a/src/app/[locale]/(unauth)/page.test.tsx b/src/app/[locale]/(unauth)/page.test.tsx index b15ce9e..41c86b2 100644 --- a/src/app/[locale]/(unauth)/page.test.tsx +++ b/src/app/[locale]/(unauth)/page.test.tsx @@ -5,9 +5,9 @@ import messages from '@/locales/en.json'; import Index from './page'; -describe('Index page', () => { +describe('Index page for EN', () => { describe('Render method', () => { - it('should have h1 tag', () => { + it('should have h1 tag in en locale', () => { render( @@ -15,7 +15,7 @@ describe('Index page', () => { ); const heading = screen.getByRole('heading', { - name: /Boilerplate Code/, + name: 'Who am I?', }); expect(heading).toBeInTheDocument(); diff --git a/src/app/[locale]/(unauth)/page.tsx b/src/app/[locale]/(unauth)/page.tsx index e6304c6..2e9bc63 100644 --- a/src/app/[locale]/(unauth)/page.tsx +++ b/src/app/[locale]/(unauth)/page.tsx @@ -1,6 +1,8 @@ +import { Github, Linkedin, SunMedium, Twitter } from 'lucide-react'; +import { useTranslations } from 'next-intl'; import { getTranslations } from 'next-intl/server'; -import { Sponsors } from '@/components/Sponsors'; +import LinkBox from '@/components/ui/LinkBox'; export async function generateMetadata(props: { params: { locale: string } }) { const t = await getTranslations({ @@ -15,92 +17,47 @@ export async function generateMetadata(props: { params: { locale: string } }) { } export default function Index() { + const t = useTranslations('About'); + const rootT = useTranslations('RootLayout'); + return ( <> -

    - Explore our GitHub project for more information about{' '} - - Next.js Boilerplate - - . -

    -

    - Follow{' '} - - @Ixartz on Twitter - {' '} - for updates and more information about the boilerplate. -

    -

    - Our sponsors' exceptional support has made this project possible. - Their services integrate seamlessly with the boilerplate, and we - recommend trying them out. -

    -

    Sponsors

    - -

    - Boilerplate Code for Your Next.js Project with Tailwind CSS -

    -

    - - 🚀 - {' '} - Next.js Boilerplate is a developer-friendly starter code for Next.js - projects, built with Tailwind CSS, and TypeScript.{' '} - - ⚡️ - {' '} - Made with developer experience first: Next.js, TypeScript, ESLint, - Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, - PostCSS, Tailwind CSS, Authentication with{' '} - - Clerk - - , Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and{' '} - - Turso - - , Error Monitoring with{' '} - - Sentry - - , Logging with Pino.js and Log Management with{' '} - - Better Stack - - , Monitoring as Code with{' '} - - Checkly - - , Storybook, Multi-language (i18n), and more. -

    +

    {t('meta_title')}

    - +

    {t('about_paragraph')}

    +
    +
    {rootT('some_links')}
    +
    +
    + } + className="col-span-8" + /> + + + } + className="col-span-7" + /> + } + className="col-span-6" + /> + + + } + className="col-span-9" + /> +
    +
    ); } diff --git a/src/components/widget/LocaleSwitcher.tsx b/src/components/widget/LocaleSwitcher.tsx new file mode 100644 index 0000000..4d8c6dc --- /dev/null +++ b/src/components/widget/LocaleSwitcher.tsx @@ -0,0 +1,41 @@ +'use client'; + +import { useLocale } from 'next-intl'; + +import { usePathname, useRouter } from '@/libs/i18nNavigation'; +import { AppConfig } from '@/utils/AppConfig'; + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '../ui/DropdownMenu'; + +export default function LocaleSwitcher() { + const router = useRouter(); + const pathname = usePathname(); + const locale = useLocale(); + + const handleClick = (val: string | number) => { + router.push(pathname, { locale: val as string }); + router.refresh(); + }; + + return ( + + +
    + {locale.toUpperCase()} +
    +     + + {AppConfig.locales.map((item) => ( + handleClick(item)}> + {item.toUpperCase()} + + ))} + +     + ); +} diff --git a/tests/e2e/Navigation.spec.ts b/tests/e2e/Navigation.spec.ts index 13cd813..9941a40 100644 --- a/tests/e2e/Navigation.spec.ts +++ b/tests/e2e/Navigation.spec.ts @@ -8,23 +8,11 @@ test.describe('Navigation', () => { await expect( page.getByRole('heading', { - name: 'Boilerplate Code for Your Next.js Project with Tailwind CSS', + name: 'Who am I?', }), ).toBeVisible(); await percySnapshot(page, 'Homepage'); }); - - test('should take screenshot of the about page', async ({ page }) => { - await page.goto('/about'); - - await expect( - page.getByRole('link', { - name: 'About', - }), - ).toBeVisible(); - - await percySnapshot(page, 'About'); - }); }); });