feat: add proper buttons to header

Quiddlee · Jan 5, 2024 · 91bb759 · 91bb759
1 parent e4b899f
commit 91bb759
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 18 deletions.
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -20,7 +20,7 @@ const Footer = () => {
       </div>
       <div className="mt-[6px] flex items-center gap-3">
         <span>2023</span>
-        <a href="https://rs.school/">
+        <a href="https://rs.school/react/">
           <img src={rsLogo} alt="" className="block w-[50px]" />
         </a>
       </div>

diff --git 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 (
     <>
-      <header className="col-start-1 col-end-2 flex w-full items-center justify-end py-2 pr-2 sm:col-end-3">
+      <header className="col-start-1 col-end-2 flex w-full items-center justify-end gap-3 py-2 pr-2 sm:col-end-3 sm:gap-8">
         {isSettings && !isMobile ? (
           <h1 style={{ viewTransitionName: 'title' }} className="mr-auto flex items-center pl-4 font-readex_pro">
             <button type="button" onClick={handleClick} className="flex h-12 w-12 items-center justify-center">
@@ -48,17 +54,27 @@ const Header = () => {
             <Link to={ROUTES.WELCOME_PAGE}>GraphiQL</Link>
           </h1>
         )}
-        <button type="button" onClick={() => logOut()}>
-          Log out
-        </button>
-        <IconButton
-          onClick={() => setIsDocsShown((prev) => !prev)}
-          data-tooltip={docsTooltip}
-          data-testid="show_docs"
-          className="tooltipElem"
-        >
-          <Icon>article</Icon>
-        </IconButton>
+        <LangSwitcher language={language} changeLanguage={changeLanguage} tip={langTip} />
+        {isHomeToShow && (
+          <IconButton data-tooltip={homeTip} className="tooltipElem" onClick={() => navigate(ROUTES.WELCOME_PAGE)}>
+            <Icon>home</Icon>
+          </IconButton>
+        )}
+        {isDocsToShow && (
+          <IconButton
+            onClick={() => setIsDocsShown((prev) => !prev)}
+            data-tooltip={docsTip}
+            data-testid="show_docs"
+            className="tooltipElem"
+          >
+            <Icon>article</Icon>
+          </IconButton>
+        )}
+        {isLogOutToShow && (
+          <IconButton onClick={() => logOut()} className="tooltipElem" data-tooltip={logOutTip}>
+            <Icon>door_open</Icon>
+          </IconButton>
+        )}
       </header>
       <DocsComp isShown={isDocsShown} setIsDocsShown={setIsDocsShown} />
     </>

diff --git a/src/components/Header/ui/LangSwitcher.tsx 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<PropsType> = ({ language, changeLanguage, tip }) => {
+  const text = language === 'en' ? 'Eng' : 'Ru';
+  const switchLang = language === 'en' ? 'ru' : 'en';
+  return (
+    <button onClick={() => changeLanguage(switchLang)} type="button" data-tooltip={tip} className="tooltipElem">
+      {text}
+    </button>
+  );
+};
+
+export default LangSwitcher;
diff --git 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
@@ -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
@@ -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
@@ -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('[email protected]');
     render(<App />);
     const showDocsBtn = screen.getByTestId('show_docs');
     expect(screen.queryByTestId('overlay')).toBeNull();