From db66161d81a86bdea3be089a47f75220aa56cbd0 Mon Sep 17 00:00:00 2001 From: Yevhen Odynets Date: Sat, 27 Apr 2024 00:40:27 +0300 Subject: [PATCH] added admin layout --- actions/logout.ts | 8 + .../(protected)/_components/navbar.tsx | 47 ++++ app/[locale]/(protected)/cabinet/page.tsx | 20 +- app/[locale]/(protected)/layout.tsx | 17 ++ app/[locale]/layout.tsx | 21 +- components/auth/logout-button.tsx | 21 ++ components/auth/user-button.tsx | 35 +++ components/locale-switcher.tsx | 8 +- components/ui/avatar.tsx | 50 +++++ components/ui/dropdown-menu.tsx | 200 ++++++++++++++++++ config/auth.ts | 2 +- hooks/useCurrentUser.ts | 7 + package-lock.json | 152 +++++++++++++ package.json | 2 + styles/locale-switcher.module.scss | 12 -- 15 files changed, 566 insertions(+), 36 deletions(-) create mode 100644 actions/logout.ts create mode 100644 app/[locale]/(protected)/_components/navbar.tsx create mode 100644 app/[locale]/(protected)/layout.tsx create mode 100644 components/auth/logout-button.tsx create mode 100644 components/auth/user-button.tsx create mode 100644 components/ui/avatar.tsx create mode 100644 components/ui/dropdown-menu.tsx create mode 100644 hooks/useCurrentUser.ts delete mode 100644 styles/locale-switcher.module.scss diff --git a/actions/logout.ts b/actions/logout.ts new file mode 100644 index 0000000..093539e --- /dev/null +++ b/actions/logout.ts @@ -0,0 +1,8 @@ +'use server' + +import { signOut } from '@/config/auth' + +export const logout = async () => { + // do something separately from js client bundle prior logging out + await signOut() +} \ No newline at end of file diff --git a/app/[locale]/(protected)/_components/navbar.tsx b/app/[locale]/(protected)/_components/navbar.tsx new file mode 100644 index 0000000..c9fa979 --- /dev/null +++ b/app/[locale]/(protected)/_components/navbar.tsx @@ -0,0 +1,47 @@ +// eslint-disable-next-line validate-filename/naming-rules +'use client' + +import { Button } from '@/components/ui/button' +import Link from 'next/link' +import { USER_PROFILE_URL } from '@/config/routes' +import { usePathname } from 'next/navigation' +import UserButton from '@/components/auth/user-button' +import LocaleSwitcher from '@/components/locale-switcher' + +const Navbar = () => { + const pathname = usePathname() + // + return ( + + ) +} + +export default Navbar diff --git a/app/[locale]/(protected)/cabinet/page.tsx b/app/[locale]/(protected)/cabinet/page.tsx index e4ef8af..2941f4e 100644 --- a/app/[locale]/(protected)/cabinet/page.tsx +++ b/app/[locale]/(protected)/cabinet/page.tsx @@ -1,17 +1,15 @@ -import { auth, signOut } from '@/config/auth' +'use client' -const CabinetPage = async () => { - const session = await auth() +import { logout } from '@/actions/logout' +import { useCurrentUser } from '@/hooks/useCurrentUser' + +const CabinetPage = () => { + const user = useCurrentUser() + const btnOnClick = () => logout() return ( -
- {JSON.stringify(session)} -
{ - 'use server' - await signOut() - }}> - -
+
+
) } diff --git a/app/[locale]/(protected)/layout.tsx b/app/[locale]/(protected)/layout.tsx new file mode 100644 index 0000000..5d057b2 --- /dev/null +++ b/app/[locale]/(protected)/layout.tsx @@ -0,0 +1,17 @@ +import Navbar from '@/app/[locale]/(protected)/_components/navbar' + +interface ProtectedLayoutProps { + children: React.ReactNode; +} + +const ProtectedLayout = ({ children }: ProtectedLayoutProps) => { + return ( +
+ + {children} +
+ ) +} + +export default ProtectedLayout diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 9de5407..5b9f0b7 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -4,6 +4,8 @@ import { ReactElement } from 'react' import { I18nProviderClient } from '@/locales/client' import { lc } from '@/lib/utils' import './globals.css' +import { SessionProvider } from 'next-auth/react' +import { auth } from '@/config/auth' const inter = Inter({ subsets: ['cyrillic'] }) @@ -15,13 +17,16 @@ type RootLayoutProps = { params: { locale: string }; children: ReactElement; } -export default function RootLayout ({ params: { locale }, children }: Readonly) { +export default async function RootLayout ({ params: { locale }, children }: Readonly) { + const session = await auth() - return ( - - - {children} - - - ) + return ( + + + + {children} + + + + ) } diff --git a/components/auth/logout-button.tsx b/components/auth/logout-button.tsx new file mode 100644 index 0000000..4261585 --- /dev/null +++ b/components/auth/logout-button.tsx @@ -0,0 +1,21 @@ +'use client' + +import { logout } from '@/actions/logout' + +interface LogoutButtonProps { + children?: React.ReactNode +} + +const LogoutButton = ({ children }: LogoutButtonProps) => { + const onClick = () => logout() + + return ( + + {children} + + ) +} + +export default LogoutButton + + diff --git a/components/auth/user-button.tsx b/components/auth/user-button.tsx new file mode 100644 index 0000000..eaa18b5 --- /dev/null +++ b/components/auth/user-button.tsx @@ -0,0 +1,35 @@ +'use client' + +import { useCurrentUser } from '@/hooks/useCurrentUser' +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { FaUser } from 'react-icons/fa6' +import { IoExitOutline } from 'react-icons/io5' +import LogoutButton from '@/components/auth/logout-button' + +const UserButton = () => { + const user = useCurrentUser() + + return ( + + + + + + + + + + + + + + Logout + + + + + ) +} + +export default UserButton diff --git a/components/locale-switcher.tsx b/components/locale-switcher.tsx index ee48414..3dd6250 100644 --- a/components/locale-switcher.tsx +++ b/components/locale-switcher.tsx @@ -3,18 +3,18 @@ import { useChangeLocale, useCurrentLocale } from '@/locales/client' import { LC, type loc } from '@/config/locales' import { ChangeEvent } from 'react' -import styles from '@/styles/locale-switcher.module.scss' export default function LocaleSwitcher () { const changeLocale = useChangeLocale() const locale = useCurrentLocale() const selectHandler = (e: ChangeEvent) => changeLocale(e.target.value as loc) - +// {cn(styles['yo-locale-switcher'], 'pr-4')} return (//@ts-ignore - ) diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..f69a0d6 --- /dev/null +++ b/components/ui/dropdown-menu.tsx @@ -0,0 +1,200 @@ +"use client" + +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { Check, ChevronRight, Circle } from "lucide-react" + +import { cn } from "@/lib/utils" + +const DropdownMenu = DropdownMenuPrimitive.Root + +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger + +const DropdownMenuGroup = DropdownMenuPrimitive.Group + +const DropdownMenuPortal = DropdownMenuPrimitive.Portal + +const DropdownMenuSub = DropdownMenuPrimitive.Sub + +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup + +const DropdownMenuSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName + +const DropdownMenuSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName + +const DropdownMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + + +)) +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName + +const DropdownMenuCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName + +const DropdownMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName + +const DropdownMenuLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName + +const DropdownMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName + +const DropdownMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, +} diff --git a/config/auth.ts b/config/auth.ts index b55ced2..ea736b4 100644 --- a/config/auth.ts +++ b/config/auth.ts @@ -11,7 +11,7 @@ import { getTwoFactorConfirmationByUserId } from '@/data/two-factor-confirmation declare module 'next-auth' { interface Session { - user: { role: UserRole, locale: loc } + user: { role: UserRole, locale: loc, image?: string } } } diff --git a/hooks/useCurrentUser.ts b/hooks/useCurrentUser.ts new file mode 100644 index 0000000..d04e5e7 --- /dev/null +++ b/hooks/useCurrentUser.ts @@ -0,0 +1,7 @@ +import { useSession } from 'next-auth/react' + +export const useCurrentUser = () => { + const session = useSession() + + return session.data?.user +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 796b4eb..838e34a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "@auth/prisma-adapter": "^1.5.2", "@hookform/resolvers": "^3.3.4", "@prisma/client": "^5.12.1", + "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", @@ -1104,6 +1106,32 @@ } } }, + "node_modules/@radix-ui/react-avatar": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz", + "integrity": "sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", @@ -1208,6 +1236,35 @@ } } }, + "node_modules/@radix-ui/react-dropdown-menu": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz", + "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-menu": "2.0.6", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-focus-guards": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz", @@ -1291,6 +1348,46 @@ } } }, + "node_modules/@radix-ui/react-menu": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz", + "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popper": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz", @@ -1346,6 +1443,30 @@ } } }, + "node_modules/@radix-ui/react-presence": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", + "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-primitive": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", @@ -1369,6 +1490,37 @@ } } }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz", + "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-select": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz", diff --git a/package.json b/package.json index 3af3010..87136bb 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "@auth/prisma-adapter": "^1.5.2", "@hookform/resolvers": "^3.3.4", "@prisma/client": "^5.12.1", + "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", diff --git a/styles/locale-switcher.module.scss b/styles/locale-switcher.module.scss deleted file mode 100644 index d4242ab..0000000 --- a/styles/locale-switcher.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.yo-locale-switcher { - appearance: none; - display: block; - text-align: center; - padding: 0; - color: darkblue; - //width: 2.5rem; - //height: 2.5rem; - border-radius: 2px; - margin: .5rem 1rem; - font-size: .75rem; -} \ No newline at end of file