From 1e0983969690641188edf8b755798482817c8e99 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sun, 31 Dec 2023 10:55:30 +0100
Subject: [PATCH] feat: apply layout

---
 src/components/decks/decks-table.tsx          |  1 +
 .../header/user-dropdown/user-dropdown.tsx    |  6 ++++-
 src/components/layout/layout.stories.tsx      |  6 ++---
 src/components/layout/layout.tsx              | 26 +++++++++++++++++--
 src/components/ui/page/page.module.scss       |  2 +-
 src/router.tsx                                | 12 ++++++---
 6 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/decks/decks-table.tsx b/src/components/decks/decks-table.tsx
index 9207d55..d81bf9b 100644
--- a/src/components/decks/decks-table.tsx
+++ b/src/components/decks/decks-table.tsx
@@ -44,6 +44,7 @@ type Props = {
   onDeleteClick: (id: string) => void
   onEditClick: (id: string) => void
 }
+
 export const DecksTable = ({ currentUserId, decks, onDeleteClick, onEditClick }: Props) => {
   const handleEditClick = (id: string) => () => onEditClick(id)
   const handleDeleteClick = (id: string) => () => onDeleteClick(id)
diff --git a/src/components/layout/header/user-dropdown/user-dropdown.tsx b/src/components/layout/header/user-dropdown/user-dropdown.tsx
index 98fd478..cec8b80 100644
--- a/src/components/layout/header/user-dropdown/user-dropdown.tsx
+++ b/src/components/layout/header/user-dropdown/user-dropdown.tsx
@@ -16,13 +16,17 @@ import {
 import s from './user-dropdown.module.scss'
 
 export type UserDropdownProps = {
-  avatar: string
+  avatar: null | string
   email: string
   onLogout: ComponentPropsWithoutRef<typeof DropdownMenuItem>['onSelect']
   userName: string
 }
 
 export const UserDropdown = ({ avatar, email, onLogout, userName }: UserDropdownProps) => {
+  if (!avatar) {
+    avatar = `https://ui-avatars.com/api/?name=${userName.split(' ').join('+')}`
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
diff --git a/src/components/layout/layout.stories.tsx b/src/components/layout/layout.stories.tsx
index 2a67bb3..8577bd0 100644
--- a/src/components/layout/layout.stories.tsx
+++ b/src/components/layout/layout.stories.tsx
@@ -1,18 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Layout } from './'
+import { LayoutPrimitive } from './'
 
 const meta = {
   argTypes: {
     onLogout: { action: 'logout' },
   },
-  component: Layout,
+  component: LayoutPrimitive,
   parameters: {
     layout: 'fullscreen',
   },
   tags: ['autodocs'],
   title: 'Components/Layout',
-} satisfies Meta<typeof Layout>
+} satisfies Meta<typeof LayoutPrimitive>
 
 export default meta
 type Story = StoryObj<typeof meta>
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index 8946495..c0e3434 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -1,12 +1,34 @@
 import { ReactNode } from 'react'
+import { Outlet } from 'react-router-dom'
 
 import { Header, HeaderProps } from '@/components'
+import { useMeQuery } from '@/services/auth/auth.service'
 
 import s from './layout.module.scss'
 
-export type LayoutProps = { children: ReactNode } & HeaderProps
+export const Layout = () => {
+  const { data, isError, isLoading } = useMeQuery()
 
-export const Layout = ({ children, ...headerProps }: LayoutProps) => {
+  if (isLoading) {
+    return <div>loading...</div>
+  }
+
+  return (
+    <LayoutPrimitive
+      avatar={data?.avatar ?? null}
+      email={data?.email ?? ''}
+      isLoggedIn={!isError && !!data}
+      onLogout={() => {}}
+      userName={data?.name ?? ''}
+    >
+      <Outlet />
+    </LayoutPrimitive>
+  )
+}
+
+export type LayoutPrimitiveProps = { children: ReactNode } & HeaderProps
+
+export const LayoutPrimitive = ({ children, ...headerProps }: LayoutPrimitiveProps) => {
   return (
     <div className={s.layout}>
       <Header {...headerProps} />
diff --git a/src/components/ui/page/page.module.scss b/src/components/ui/page/page.module.scss
index 077066d..d659099 100644
--- a/src/components/ui/page/page.module.scss
+++ b/src/components/ui/page/page.module.scss
@@ -1,6 +1,6 @@
 .root {
   display: flex;
   justify-content: center;
+  width: 100%;
   margin-top: 36px;
-  padding-inline: 24px;
 }
diff --git a/src/router.tsx b/src/router.tsx
index d2c75c8..83a4e2f 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -6,6 +6,7 @@ import {
   createBrowserRouter,
 } from 'react-router-dom'
 
+import { Layout } from '@/components/layout'
 import { DeckPage } from '@/pages/deck-page/deck-page'
 
 import { DecksPage, SignInPage } from './pages'
@@ -36,10 +37,15 @@ const privateRoutes: RouteObject[] = [
 
 const router = createBrowserRouter([
   {
-    children: privateRoutes,
-    element: <PrivateRoutes />,
+    children: [
+      {
+        children: privateRoutes,
+        element: <PrivateRoutes />,
+      },
+      ...publicRoutes,
+    ],
+    element: <Layout />,
   },
-  ...publicRoutes,
 ])
 
 export const Router = () => {