From 42477667464c847d8486b48ae615dec682fe5221 Mon Sep 17 00:00:00 2001 From: Maximus Date: Sat, 20 Aug 2022 14:42:47 +0300 Subject: [PATCH] replace our header to parts folder, remove deprecated header --- src/components/Header.tsx | 163 --------------------- src/components/parts/Header.tsx | 250 +++++++++++++++++++------------- 2 files changed, 150 insertions(+), 263 deletions(-) delete mode 100644 src/components/Header.tsx diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index d9934f5..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import classNames from "classnames"; -import { useState } from "react"; -/* -------------------------------------------------------------------------- */ -/* Components */ -/* -------------------------------------------------------------------------- */ -import ContextMenuAction from "./ContextMenuAction"; -import ContextMenu from "./ContextMenu"; -import Logofreeland from "./Logofreeland"; -import { Button } from "./Button/Button"; -import Avatar from "./Avatar"; -import Navbar from "./Navbar"; -import Bell from "./Bell"; -import Logo from "./Logo"; -import Link from "./Link"; - -/* -------------------------------------------------------------------------- */ -/* Icons */ -/* -------------------------------------------------------------------------- */ -import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg"; -import { ReactComponent as SVGFolder } from "assets/svg/folder.svg"; -import { ReactComponent as SVGFile } from "assets/svg/file.svg"; -import { ReactComponent as SVGEye } from "assets/svg/eye.svg"; - -const Header = () => { - const [authenticated, setAuthenticated] = useState(false); - const onClick = () => setAuthenticated(true); - - /* -------------------------------------------------------------------------- */ - /* Implement Header Component */ - /* -------------------------------------------------------------------------- */ - return ( -
- {/* Logo and Menu */} -
- {/* Logo - start - className="w-7 sm:w-10 " /> */} - - - - - {/* Logo - end - */} - - {/* Menu( Create new - My library - About ) Start */} -
- {/* Link Create now - start - */} - - Create new - - {/* Link Create now - end - */} - - {/* Dropdown Menu My library - start - */} - - console.log("My publications")} - icon={} - > - - console.log("My Favorites")} - icon={} - > - - console.log("My Collections")} - icon={} - > - - console.log("Recent Viewed")} - icon={} - > - - {/* Dropdown Menu My library - End - */} - - {/* Dropdown Menu About - start - */} - - console.log("About Freeland")} - > - - console.log("Contact Us")} - > - - console.log("Help")} - > - - {/* Dropdown Menu About - End - */} -
- {/* Menu( Create new - My library - About ) End */} -
- - {/* Sign in - Sign up - Notification - Avatar - Burger */} -
- {!authenticated - ? [ - , - , - ] - : [ - , - - , - ]} - {/* Burger component will be shown for the small screens */} - -
-
- ); -}; - -export default Header; diff --git a/src/components/parts/Header.tsx b/src/components/parts/Header.tsx index 99650bb..253f05a 100644 --- a/src/components/parts/Header.tsx +++ b/src/components/parts/Header.tsx @@ -1,113 +1,163 @@ -/* -------------------------------------------------------------------------- */ -/* Libs */ -/* -------------------------------------------------------------------------- */ -import React, { useEffect } from "react"; -import { useNavigate } from "react-router-dom"; +import classNames from "classnames"; +import { useState } from "react"; /* -------------------------------------------------------------------------- */ /* Components */ /* -------------------------------------------------------------------------- */ -import ContextMenu from "components/containers/contextmenu/ContextMenu"; -import Logotype from "components/Logotype"; -import Avatar from "components/containers/Avatar"; -import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction"; -/* -------------------------------------------------------------------------- */ -/* SVG */ -/* -------------------------------------------------------------------------- */ -/* -------------------------------------------------------------------------- */ -/* Hooks */ -/* -------------------------------------------------------------------------- */ -import { useUserStore } from "user/data/userSlice"; -import { useUserViewModel } from "user/controller/userViewModel"; -import { useUIStore } from "ui/data/uiSlice"; -import { useUIViewModel } from "ui/controller/uiViewModel"; -import { useTranslation } from "react-i18next"; -import ServicesNavigationContext from "services/views/ServicesNavigationContext"; -import { useAuthStore } from "auth/data/authSlice"; -import { useAuthViewModel } from "auth/controller/useAuthViewModel"; +import ContextMenuAction from "../ContextMenuAction"; +import ContextMenu from "../ContextMenu"; +import Logofreeland from "../Logofreeland"; +import { Button } from "../Button/Button"; +import Avatar from "../Avatar"; +import Navbar from "../Navbar"; +import Bell from "./Bell"; +import Logo from "../Logo"; +import Link from "./Link"; /* -------------------------------------------------------------------------- */ -/* Main application header */ +/* Icons */ /* -------------------------------------------------------------------------- */ -type Props = { - title?: string; -} -/** - * Main application header - * @return {JSX.Element} - */ -export default function Header({title}: Props) { +import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg"; +import { ReactComponent as SVGFolder } from "assets/svg/folder.svg"; +import { ReactComponent as SVGFile } from "assets/svg/file.svg"; +import { ReactComponent as SVGEye } from "assets/svg/eye.svg"; - const {t} = useTranslation(); - const userStore = useUserStore(); - const uiStore = useUIStore(); - const authStore = useAuthStore(); - const {signOut} = useAuthViewModel(authStore); - const { user, isLoading, getUser } = useUserViewModel(userStore); - const { showSearchbar } = useUIViewModel(uiStore); +const Header = () => { + const [authenticated, setAuthenticated] = useState(false); + const onClick = () => setAuthenticated(true); - useEffect(() => { - getUser(); - }, [getUser]); - - const navigate = useNavigate(); + /* -------------------------------------------------------------------------- */ + /* Implement Header Component */ + /* -------------------------------------------------------------------------- */ return ( -
-
- - -
-
- - } - className="absolute w-full min-h-14 sm:w-80 -bottom-3 - sm:top-auto sm:bottom-auto right-0 - mt-5 z-10 sm:transform -translate-1/2 - origin-top-center flex flex-col items-center justify-center !pt-8" + {/* Logo and Menu */} +
+ {/* Logo - start - className="w-7 sm:w-10 " /> */} + + + + + {/* Logo - end - */} + + {/* Menu( Create new - My library - About ) Start */} +
- -
- -
-
- {isLoading - ? " " - : t("hellousr", { - username: [user?.lastname, user?.firstname].join(" "), - })} -
-
- {isLoading ? " " : user?.email} -
- { - navigate('/personal-information'); - }} - disabled={isLoading} - className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors" - caption="Account settings" - - /> - { - navigate(""); - }} - disabled={isLoading} - className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors" - caption={t("account.connect")} - - /> - - + {/* Link Create now - start - */} + + Create new + + {/* Link Create now - end - */} + + {/* Dropdown Menu My library - start - */} + + console.log("My publications")} + icon={} + > + + console.log("My Favorites")} + icon={} + > + + console.log("My Collections")} + icon={} + > + + console.log("Recent Viewed")} + icon={} + > + + {/* Dropdown Menu My library - End - */} + + {/* Dropdown Menu About - start - */} + + console.log("About Freeland")} + > + + console.log("Contact Us")} + > + + console.log("Help")} + > + + {/* Dropdown Menu About - End - */} +
+ {/* Menu( Create new - My library - About ) End */}
-
+ + {/* Sign in - Sign up - Notification - Avatar - Burger */} +
+ {!authenticated + ? [ + , + , + ] + : [ + , + + , + ]} + {/* Burger component will be shown for the small screens */} + +
+ ); -} +}; + +export default Header;