made the logged not-logget menu work

deco-sites · Apr 10, 2024 · e96b27b · e96b27b
1 parent 835d64f
commit e96b27b
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 18 deletions.
diff --git a/components/header/Drawers.tsx b/components/header/Drawers.tsx
@@ -65,7 +65,14 @@ const Aside = (
 );
 
 function Drawers({ menu, searchbar, children, platform }: Props) {
-  const { displayCart, displayMenu, displaySearchDrawer } = useUI();
+  const { displayCart, displayMenu, displaySearchDrawer, user } = useUI();
+
+  console.log({ userDrawers: user.value });
+
+  //if user is not loggedin, use the public navitems in the menu
+  if (localStorage.getItem("AccessToken") == "") {
+    menu.items = menu.publicItems || [];
+  }
 
   return (
     <>

diff --git a/components/header/Header.tsx b/components/header/Header.tsx
@@ -34,6 +34,12 @@ export interface Props {
    */
   navItems?: SiteNavigationElement[] | null;
 
+  /**
+   * @title Public Navigation items
+   * @description Navigation items used both on mobile and desktop menus
+   */
+  publicNavItems?: SiteNavigationElement[] | null;
+
   /** @title Logo */
   logo?: Logo;
 
@@ -69,6 +75,28 @@ function Header({
       url: "/",
     },
   ],
+  publicNavItems = [
+    {
+      "@type": "SiteNavigationElement",
+      name: "Feminino",
+      url: "/",
+    },
+    {
+      "@type": "SiteNavigationElement",
+      name: "Masculino",
+      url: "/",
+    },
+    {
+      "@type": "SiteNavigationElement",
+      name: "Sale",
+      url: "/",
+    },
+    {
+      "@type": "SiteNavigationElement",
+      name: "Linktree",
+      url: "/",
+    },
+  ],
   logo = {
     src:
       "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/986b61d4-3847-4867-93c8-b550cb459cc7",
@@ -82,24 +110,23 @@ function Header({
   device,
 }: SectionProps<typeof loader>) {
   const platform = usePlatform();
-  const items = navItems ?? [];
 
   return (
     <>
       <header style={{ height: headerHeight }}>
         <Drawers
-          menu={{ items, logo: logoMenu }}
+          menu={{
+            items: navItems || [],
+            publicItems: publicNavItems ||
+              [],
+            logo: logoMenu,
+          }}
           searchbar={searchbar}
           platform={platform}
         >
           <div class="bg-base-100 w-full z-50">
             <Navbar
-              device={device}
-              items={items}
-              searchbar={searchbar && { ...searchbar, platform }}
               logo={logo}
-              logoPosition={logoPosition}
-              buttons={buttons}
             />
           </div>
         </Drawers>

diff --git a/components/header/Menu.tsx b/components/header/Menu.tsx
@@ -4,6 +4,7 @@ import type { SiteNavigationElement } from "apps/commerce/types.ts";
 
 export interface Props {
   items: SiteNavigationElement[];
+  publicItems?: SiteNavigationElement[];
   logo?: Logo;
 }
 

diff --git a/components/header/Navbar.tsx b/components/header/Navbar.tsx
@@ -1,6 +1,5 @@
 import type { Props as SearchbarProps } from "../../components/search/Searchbar.tsx";
 import { MenuButton, SearchButton } from "../../islands/Header/Buttons.tsx";
-import { usePlatform } from "../../sdk/usePlatform.tsx";
 import type { SiteNavigationElement } from "apps/commerce/types.ts";
 import Image from "apps/website/components/Image.tsx";
 import NavItem from "./NavItem.tsx";
@@ -9,17 +8,10 @@ import { Buttons, Logo } from "../../components/header/Header.tsx";
 
 // Make it sure to render it on the server only. DO NOT render it on an island
 function Navbar(
-  { items, searchbar, logo, buttons, logoPosition = "left", device }: {
-    items: SiteNavigationElement[];
-    searchbar?: SearchbarProps;
+  { logo }: {
     logo?: Logo;
-    buttons?: Buttons;
-    logoPosition?: "left" | "center";
-    device: "mobile" | "desktop" | "tablet";
   },
 ) {
-  const platform = usePlatform();
-
   return (
     <div
       style={{ height: navbarHeight }}

diff --git a/components/ui/PrivatePageControl.tsx b/components/ui/PrivatePageControl.tsx
@@ -10,7 +10,7 @@ export interface Props {
 }
 
 function PrivatePageControl(props: Props) {
-  const { updatedData, uploadedFile } = useUI();
+  const { updatedData, uploadedFile, user } = useUI();
 
   async function isLogged({ accessToken }: { accessToken: string }) {
     if (accessToken === "") {
@@ -28,10 +28,24 @@ function PrivatePageControl(props: Props) {
       }).then((r) => r.json());
 
       const username = response.data.Username;
+
+      user.value = {
+        id: username,
+        name: response.data.UserAttributes.find((
+          a: { Name: string; Value: string },
+        ) => a.Name === "name").Value,
+        email: response.dataProfile.email,
+        plan: response.dataProfile.plan,
+      };
+
+      console.log({ userhere: user.value });
+
       updatedData.value = response.dataProfile.updatedData;
       uploadedFile.value = response.dataProfile.uploadedFile;
 
       if (!username) {
+        user.value = null;
+        localStorage.setItem("AccessToken", "");
         window.location.href = "/";
       }
 

diff --git a/sdk/useUI.ts b/sdk/useUI.ts
@@ -5,6 +5,13 @@
 
 import { signal } from "@preact/signals";
 
+export type UserSession = {
+  id: string;
+  name: string;
+  email: string;
+  plan: string;
+};
+
 const displayCart = signal(false);
 const displayMenu = signal(false);
 const displaySearchPopup = signal(false);
@@ -16,6 +23,7 @@ const displayConfirmCancelSubscription = signal(false);
 const displayPlanLimit = signal(false);
 const updatedData = signal(true);
 const uploadedFile = signal(true);
+const user = signal<UserSession | null>(null);
 
 const state = {
   displayCart,
@@ -29,6 +37,7 @@ const state = {
   displayNewTicketModal,
   displayConfirmDeleteDoc,
   displayConfirmCancelSubscription,
+  user,
 };
 
 // Keyboard event listeners