Bbuddy
/
bbuddy-ui
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix ssr window

This commit is contained in:
SD 2024-06-22 20:03:56 +04:00
parent 6c875cdf39
commit 5303bb895d
7 changed files with 50 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/[locale]/account/(account)/messages/page.tsx
View File

@ -1,18 +1,11 @@
'use client'
import React, { Suspense } from 'react'; import React, { Suspense } from 'react';
import type { Metadata } from 'next';
import { useTranslations } from 'next-intl';
import { Link } from '../../../../../navigation'; import { Link } from '../../../../../navigation';
import { CustomInput } from '../../../../../components/view/CustomInput'; import { CustomInput } from '../../../../../components/view/CustomInput';
import { i18nText } from '../../../../../i18nKeys'; import { i18nText } from '../../../../../i18nKeys';
export const metadata: Metadata = {
title: 'Bbuddy - Account - Messages',
description: 'Bbuddy desc messages'
};
export default function Messages({ params: { locale } }: { params: { locale: string } }) { export default function Messages({ params: { locale } }: { params: { locale: string } }) {
const t = useTranslations('Account.Messages');
return ( return (
<> <>
<ol className="breadcrumb"> <ol className="breadcrumb">

22
src/app/[locale]/account/layout.tsx
View File

@ -1,18 +1,14 @@
'use client'; 'use client';
import { ReactNode, useEffect } from 'react'; import { ReactNode } from 'react';
import { redirect, notFound } from 'next/navigation'; import dynamic from 'next/dynamic';
import { useLocalStorage } from '../../../hooks/useLocalStorage';
import { AUTH_TOKEN_KEY } from '../../../constants/common';
export default function AccountLayout({ children }: { children: ReactNode }) { const Account = dynamic(() => import('../../../components/Account/AccountWrapper'), { ssr: false });
const [token] = useLocalStorage(AUTH_TOKEN_KEY, '');
useEffect(() => { export default function AccountBaseLayout({ children }: { children: ReactNode }) {
if(!token){ return (
notFound(); <Account>
} {children}
}, []); </Account>
);
return children;
}; };

6
src/app/layout.tsx
View File

@ -1,4 +1,5 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import type { Metadata } from 'next';
import { comfortaa, inter } from './fonts'; import { comfortaa, inter } from './fonts';
import '../styles/style.scss'; import '../styles/style.scss';
@ -7,6 +8,11 @@ type RootLayoutProps = {
params: { locale: string }; params: { locale: string };
}; };
export const metadata: Metadata = {
title: 'Bbuddy',
description: 'Bbuddy'
};
export default function RootLayout({ children, params: { locale } }: RootLayoutProps) { export default function RootLayout({ children, params: { locale } }: RootLayoutProps) {
return ( return (
<html lang={locale} className={`${comfortaa.variable} ${inter.variable}`}> <html lang={locale} className={`${comfortaa.variable} ${inter.variable}`}>

20
src/components/Account/AccountWrapper.tsx Normal file
View File

@ -0,0 +1,20 @@
'use client'
import { ReactNode, useEffect } from 'react';
import { notFound } from 'next/navigation';
import { AUTH_TOKEN_KEY } from '../../constants/common';
import { useLocalStorage } from '../../hooks/useLocalStorage';
function AccountWrapper ({ children }: { children: ReactNode }) {
const [token] = useLocalStorage(AUTH_TOKEN_KEY, '');
useEffect(() => {
if(!token){
return notFound();
}
}, []);
return children;
}
export default AccountWrapper;

8
src/components/Page/Header/HeaderAuthLinks.tsx
View File

@ -14,10 +14,10 @@ type HeaderAuthLinksProps = {
separatorClass?: string; separatorClass?: string;
}; };
export const HeaderAuthLinks: FC<HeaderAuthLinksProps> = ({ function HeaderAuthLinks ({
locale, locale,
separatorClass = 'b-header__nav__list__line' separatorClass = 'b-header__nav__list__line'
}) => { }: HeaderAuthLinksProps) {
const [isOpenModal, setIsOpenModal] = useState<boolean>(false); const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
const [mode, setMode] = useState<'enter' | 'register' | 'reset' | 'finish'>('enter'); const [mode, setMode] = useState<'enter' | 'register' | 'reset' | 'finish'>('enter');
const selectedLayoutSegment = useSelectedLayoutSegment(); const selectedLayoutSegment = useSelectedLayoutSegment();
@ -75,4 +75,6 @@ export const HeaderAuthLinks: FC<HeaderAuthLinksProps> = ({
/> />
</> </>
); );
}; }
export default HeaderAuthLinks;

6
src/components/Page/Header/HeaderMenu.tsx
View File

@ -2,14 +2,16 @@
import React from 'react'; import React from 'react';
import { useSelectedLayoutSegment } from 'next/navigation'; import { useSelectedLayoutSegment } from 'next/navigation';
import dynamic from 'next/dynamic';
import { Link } from '../../../navigation'; import { Link } from '../../../navigation';
import { HeaderAuthLinks } from './HeaderAuthLinks';
type HeaderMenuProps = { type HeaderMenuProps = {
locale: string; locale: string;
linkConfig: { path: string, title: string }[]; linkConfig: { path: string, title: string }[];
}; };
const AuthLinks = dynamic(() => import('./HeaderAuthLinks'), { ssr: false });
export const HeaderMenu = ({ export const HeaderMenu = ({
locale, locale,
linkConfig linkConfig
@ -26,7 +28,7 @@ export const HeaderMenu = ({
<Link href={`/${path}` as any} className={pathname === path ? 'active' : ''}>{title}</Link> <Link href={`/${path}` as any} className={pathname === path ? 'active' : ''}>{title}</Link>
</li> </li>
))} ))}
<HeaderAuthLinks locale={locale} /> <AuthLinks locale={locale} />
</ul> </ul>
</nav> </nav>
</div> </div>

6
src/components/Page/Header/HeaderMobileMenu.tsx
View File

@ -1,8 +1,8 @@
'use client' 'use client'
import React, { FC, useState } from 'react'; import React, { FC, useState } from 'react';
import dynamic from 'next/dynamic';
import { useSelectedLayoutSegment } from 'next/navigation'; import { useSelectedLayoutSegment } from 'next/navigation';
import { HeaderAuthLinks } from './HeaderAuthLinks';
import { Link } from '../../../navigation'; import { Link } from '../../../navigation';
type HeaderMenuMobileProps = { type HeaderMenuMobileProps = {
@ -10,6 +10,8 @@ type HeaderMenuMobileProps = {
linkConfig: { path: string, title: string }[]; linkConfig: { path: string, title: string }[];
}; };
const AuthLinks = dynamic(() => import('./HeaderAuthLinks'), { ssr: false });
export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({ export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({
locale, locale,
linkConfig linkConfig
@ -35,7 +37,7 @@ export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({
<img className="img-default" src="/images/avatar.png" alt=""/> <img className="img-default" src="/images/avatar.png" alt=""/>
</div> </div>
<ul className="menu-mobile__header__nav"> <ul className="menu-mobile__header__nav">
<HeaderAuthLinks <AuthLinks
separatorClass="menu-mobile__header__nav__line" separatorClass="menu-mobile__header__nav__line"
locale={locale} locale={locale}
/> />