From 91bb759746f0a6f4a8b1d55e7271be1ca7d4bc04 Mon Sep 17 00:00:00 2001 From: Tedzury Date: Fri, 5 Jan 2024 18:01:18 +0300 Subject: [PATCH] feat: add proper buttons to header --- src/components/Footer/Footer.tsx | 2 +- src/components/Header/Header.tsx | 46 +++++++++++++++-------- src/components/Header/ui/LangSwitcher.tsx | 19 ++++++++++ src/locales/en.ts | 5 ++- src/locales/ru.ts | 5 ++- src/shared/ui/FilledButton.tsx | 12 ++++++ src/test/docsComponent/DocsComp.test.tsx | 2 + 7 files changed, 73 insertions(+), 18 deletions(-) create mode 100644 src/components/Header/ui/LangSwitcher.tsx create mode 100644 src/shared/ui/FilledButton.tsx diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 68d2e54..e050024 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -20,7 +20,7 @@ const Footer = () => {
2023 - +
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index f4991a7..28a8fe5 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -11,24 +11,30 @@ import ROUTES from '@shared/constants/routes'; import viewTransition from '@shared/lib/helpers/viewTransition'; import useScreen from '@shared/lib/hooks/useScreen'; +import LangSwitcher from './ui/LangSwitcher'; + const Header = () => { const [isDocsShown, setIsDocsShown] = useState(false); - const { translation } = useLanguage(); + const { translation, language, changeLanguage } = useLanguage(); const { pathname } = useLocation(); const isSettings = pathname.slice(1) === ROUTES.SETTINGS; const navigate = useNavigate(); const isMobile = useScreen() === 'mobile'; - const { logOut } = useAuth(); + const { logOut, isAuth } = useAuth(); - const docsTooltip = translation.mainLayout.header.tooltips.docs; + const { docsTip, logOutTip, langTip, homeTip } = translation.mainLayout.header.tooltips; function handleClick() { viewTransition(() => navigate(-1)); } + const isDocsToShow = isAuth; + const isLogOutToShow = isAuth; + const isHomeToShow = pathname !== '/'; + return ( <> -
+
{isSettings && !isMobile ? (

)} - - setIsDocsShown((prev) => !prev)} - data-tooltip={docsTooltip} - data-testid="show_docs" - className="tooltipElem" - > - article - + + {isHomeToShow && ( + navigate(ROUTES.WELCOME_PAGE)}> + home + + )} + {isDocsToShow && ( + setIsDocsShown((prev) => !prev)} + data-tooltip={docsTip} + data-testid="show_docs" + className="tooltipElem" + > + article + + )} + {isLogOutToShow && ( + logOut()} className="tooltipElem" data-tooltip={logOutTip}> + door_open + + )}
diff --git a/src/components/Header/ui/LangSwitcher.tsx b/src/components/Header/ui/LangSwitcher.tsx new file mode 100644 index 0000000..b32c751 --- /dev/null +++ b/src/components/Header/ui/LangSwitcher.tsx @@ -0,0 +1,19 @@ +import { FC } from 'react'; + +type PropsType = { + language: string; + changeLanguage: (lang: 'en' | 'ru') => void; + tip: string; +}; + +const LangSwitcher: FC = ({ language, changeLanguage, tip }) => { + const text = language === 'en' ? 'Eng' : 'Ru'; + const switchLang = language === 'en' ? 'ru' : 'en'; + return ( + + ); +}; + +export default LangSwitcher; diff --git a/src/locales/en.ts b/src/locales/en.ts index 3591241..df4b9c5 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -95,7 +95,10 @@ const en = { mainLayout: { header: { tooltips: { - docs: 'Show docs', + docsTip: 'Show docs', + logOutTip: 'Log out', + langTip: 'Change lang', + homeTip: 'Home', }, }, }, diff --git a/src/locales/ru.ts b/src/locales/ru.ts index e94f5ad..4ed2366 100644 --- a/src/locales/ru.ts +++ b/src/locales/ru.ts @@ -96,7 +96,10 @@ const ru = { mainLayout: { header: { tooltips: { - docs: 'Документация', + docsTip: 'Документация', + logOutTip: 'Выйти', + langTip: 'Сменить язык', + homeTip: 'Домой', }, }, }, diff --git a/src/shared/ui/FilledButton.tsx b/src/shared/ui/FilledButton.tsx new file mode 100644 index 0000000..a1dc64d --- /dev/null +++ b/src/shared/ui/FilledButton.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import { createComponent } from '@lit/react'; +import { MdFilledButton } from '@material/web/button/filled-button'; + +const FilledButton = createComponent({ + react: React, + tagName: 'md-filled-button', + elementClass: MdFilledButton, +}); + +export default FilledButton; diff --git a/src/test/docsComponent/DocsComp.test.tsx b/src/test/docsComponent/DocsComp.test.tsx index 0d66710..83059f0 100644 --- a/src/test/docsComponent/DocsComp.test.tsx +++ b/src/test/docsComponent/DocsComp.test.tsx @@ -2,9 +2,11 @@ import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '@test import { describe, expect, it } from 'vitest'; import App from '@/app/App'; +import { prepareAuthCookie } from '@/shared/helpers/cookieHandlers'; describe('Testing for docs component', () => { it('Should render docs components after clicking on show docs btn', async () => { + document.cookie = prepareAuthCookie('test@gmail.com'); render(); const showDocsBtn = screen.getByTestId('show_docs'); expect(screen.queryByTestId('overlay')).toBeNull();