From 2b7af522c7eeec76d8fce14b217fa59deb39001f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Paj=C4=85k?= Date: Wed, 8 Jan 2025 16:51:11 +0100 Subject: [PATCH 1/2] refactor: combine navigation configs --- apps/web/app/assets/svgs/dashboard.svg | 6 +- apps/web/app/assets/svgs/hat.svg | 3 + apps/web/app/assets/svgs/index.ts | 2 + apps/web/app/assets/svgs/multi.svg | 3 + .../app/components/Navigation/Navigation.tsx | 9 +- .../Navigation/NavigationFooter.tsx | 83 +------------------ apps/web/app/config/navigationConfig.ts | 30 ++++++- apps/web/app/modules/Admin/Admin.layout.tsx | 8 +- .../modules/Courses/Lesson/Lesson.layout.tsx | 10 ++- .../modules/Dashboard/Dashboard.layout.tsx | 10 ++- 10 files changed, 64 insertions(+), 100 deletions(-) create mode 100644 apps/web/app/assets/svgs/hat.svg create mode 100644 apps/web/app/assets/svgs/multi.svg diff --git a/apps/web/app/assets/svgs/dashboard.svg b/apps/web/app/assets/svgs/dashboard.svg index e35286277..e04440082 100644 --- a/apps/web/app/assets/svgs/dashboard.svg +++ b/apps/web/app/assets/svgs/dashboard.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/apps/web/app/assets/svgs/hat.svg b/apps/web/app/assets/svgs/hat.svg new file mode 100644 index 000000000..7fa7a5cef --- /dev/null +++ b/apps/web/app/assets/svgs/hat.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/app/assets/svgs/index.ts b/apps/web/app/assets/svgs/index.ts index fbace28ba..f50881d40 100644 --- a/apps/web/app/assets/svgs/index.ts +++ b/apps/web/app/assets/svgs/index.ts @@ -28,6 +28,8 @@ export { default as UploadImageIcon } from "./upload-image.svg?react"; export { default as User } from "./user.svg?react"; export { default as Warning } from "./warning.svg?react"; export { default as Admin } from "./admin.svg?react"; +export { default as Hat } from "./hat.svg?react"; +export { default as Multi } from "./multi.svg?react"; export { default as Success } from "./success.svg?react"; export { default as CourseEmptyState } from "./course-empty-state.svg?react"; diff --git a/apps/web/app/assets/svgs/multi.svg b/apps/web/app/assets/svgs/multi.svg new file mode 100644 index 000000000..c85ac3756 --- /dev/null +++ b/apps/web/app/assets/svgs/multi.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/app/components/Navigation/Navigation.tsx b/apps/web/app/components/Navigation/Navigation.tsx index ef593fbdd..570232826 100644 --- a/apps/web/app/components/Navigation/Navigation.tsx +++ b/apps/web/app/components/Navigation/Navigation.tsx @@ -14,7 +14,7 @@ type DashboardNavigationProps = { menuItems: MenuItemType[] }; export function Navigation({ menuItems }: DashboardNavigationProps) { const { isMobileNavOpen, setIsMobileNavOpen } = useMobileNavigation(); - const { isAdmin, isTeacher, role } = useUserRole(); + const { role } = useUserRole(); return (
@@ -33,12 +33,7 @@ export function Navigation({ menuItems }: DashboardNavigationProps) { role={role} setIsMobileNavOpen={setIsMobileNavOpen} /> - +
diff --git a/apps/web/app/components/Navigation/NavigationFooter.tsx b/apps/web/app/components/Navigation/NavigationFooter.tsx index c6a5fa204..cacf5c987 100644 --- a/apps/web/app/components/Navigation/NavigationFooter.tsx +++ b/apps/web/app/components/Navigation/NavigationFooter.tsx @@ -1,66 +1,25 @@ -import { NavLink, useLocation } from "@remix-run/react"; -import { capitalize } from "lodash-es"; +import { NavLink } from "@remix-run/react"; import { type Dispatch, type SetStateAction, startTransition } from "react"; import { useLogoutUser } from "~/api/mutations"; -import { Gravatar } from "~/components/Gravatar"; import { Icon } from "~/components/Icon"; -import { Avatar } from "~/components/ui/avatar"; import { Separator } from "~/components/ui/separator"; import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip"; import { cn } from "~/lib/utils"; -import { useCurrentUserStore } from "~/modules/common/store/useCurrentUserStore"; type NavigationFooterProps = { - isAdmin: boolean; - isTeacher: boolean; - role: string; setIsMobileNavOpen: Dispatch>; }; -export function NavigationFooter({ - isAdmin, - isTeacher, - role, - setIsMobileNavOpen, -}: NavigationFooterProps) { - const { currentUser } = useCurrentUserStore(); +export function NavigationFooter({ setIsMobileNavOpen }: NavigationFooterProps) { const { mutate: logout } = useLogoutUser(); - const { pathname } = useLocation(); - const isAdminRoute = pathname.startsWith("/admin"); - - const isAllowed = isAdmin || isTeacher; return (
    • - {isAllowed && ( -
  • - - - setIsMobileNavOpen(false)} - className="flex w-full items-center gap-x-3 rounded-lg bg-white px-4 py-3.5 text-neutral-900 2xl:p-2" - to={isAdminRoute ? "/" : "/admin/courses"} - > - - - {isAdminRoute ? "Dashboard" : <>{capitalize(role)} panel}{" "} - - - - - {isAdminRoute ? "Dashboard" : <>{capitalize(role)} panel} - - -
    • - )} -
  • +
    • -
  • - setIsMobileNavOpen(false)} - to={`/teachers/${currentUser?.id}`} - className={({ isActive }) => - cn("flex w-full items-center gap-x-3 rounded-lg px-4 py-3.5 2xl:p-2", { - "bg-primary-700 text-white": isActive, - "bg-white text-neutral-900": !isActive, - }) - } - > - - Profile - -
    • -
  • -
    - - - -
    -

    - {currentUser?.firstName} {currentUser?.lastName} -

    -

    {currentUser?.email}

    -
    -
    -
    • -
  • +