Auth improvements and my profile page

app/api/gql/gql.ts

@@ -17,6 +17,8 @@ const documents = {
     types.FetchExampleEventsDocument,
   "query myEvents($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}":
     types.MyEventsDocument,
+  "query myProfile {\n  me {\n    id\n    bio\n    lastName\n    username\n    imageUrl\n    email\n    name\n    communities {\n      id\n      name\n    }\n  }\n}":
+    types.MyProfileDocument,
   "mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {\n  checkPurchaseOrderStatus(input: $input) {\n    status\n    tickets {\n      approvalStatus\n      paymentStatus\n      redemptionStatus\n    }\n  }\n}":
     types.CheckPurchaseOrderStatusDocument,
   "mutation createPurchaseOrder($input: TicketClaimInput!) {\n  claimUserTicket(input: $input) {\n    __typename\n    ... on PurchaseOrder {\n      __typename\n      id\n      currency {\n        id\n      }\n      finalPrice\n      paymentLink\n      status\n      tickets {\n        id\n        approvalStatus\n        redemptionStatus\n        paymentStatus\n      }\n    }\n    ... on RedeemUserTicketError {\n      __typename\n      error\n      errorMessage\n    }\n  }\n}":
@@ -53,6 +55,12 @@ export function graphql(
 export function graphql(
   source: "query myEvents($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}",
 ): (typeof documents)["query myEvents($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "query myProfile {\n  me {\n    id\n    bio\n    lastName\n    username\n    imageUrl\n    email\n    name\n    communities {\n      id\n      name\n    }\n  }\n}",
+): (typeof documents)["query myProfile {\n  me {\n    id\n    bio\n    lastName\n    username\n    imageUrl\n    email\n    name\n    communities {\n      id\n      name\n    }\n  }\n}"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

app/api/gql/graphql.ts

@@ -906,6 +906,21 @@ export type MyEventsQuery = {
   };
 };
 
+export type MyProfileQueryVariables = Exact<{ [key: string]: never }>;
+
+export type MyProfileQuery = {
+  me: {
+    id: string;
+    bio?: string | null;
+    lastName?: string | null;
+    username: string;
+    imageUrl?: string | null;
+    email?: string | null;
+    name?: string | null;
+    communities: Array<{ id: string; name?: string | null }>;
+  };
+};
+
 export type CheckPurchaseOrderStatusMutationVariables = Exact<{
   input: CheckForPurchaseOrderInput;
 }>;
@@ -1328,6 +1343,48 @@ export const MyEventsDocument = {
     },
   ],
 } as unknown as DocumentNode<MyEventsQuery, MyEventsQueryVariables>;
+export const MyProfileDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "myProfile" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "me" },
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "bio" } },
+                { kind: "Field", name: { kind: "Name", value: "lastName" } },
+                { kind: "Field", name: { kind: "Name", value: "username" } },
+                { kind: "Field", name: { kind: "Name", value: "imageUrl" } },
+                { kind: "Field", name: { kind: "Name", value: "email" } },
+                { kind: "Field", name: { kind: "Name", value: "name" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "communities" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "id" } },
+                      { kind: "Field", name: { kind: "Name", value: "name" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<MyProfileQuery, MyProfileQueryVariables>;
 export const CheckPurchaseOrderStatusDocument = {
   kind: "Document",
   definitions: [

app/components/Login/Login.tsx

@@ -15,7 +15,7 @@ export const Login = () => {
   }, []);
 
   return (
-    <div className="flex w-full max-w-lg shrink-0 flex-col gap-4 rounded-2xl bg-background p-10 shadow-xl">
+    <div className="flex w-full max-w-lg shrink-0 flex-col gap-4 rounded-2xl border bg-background p-10 shadow-xl">
       <div>
         <h1 className="text-left text-2xl font-bold">Regístrate.</h1>
         <p className="text-left text-sm text-muted-foreground">

app/components/Navbar/MainNav.tsx

@@ -1,26 +1,14 @@
-import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
-import { urls } from "~/utils/urls";
-
 import { NavbarItem } from "./NavbarItem";
 import type { NavBarProps } from "./types";
-import { buttonVariants } from "../ui/button";
 
 export function MainNav({ items }: NavBarProps) {
-  const user = useIsLoggedIn();
-  const isReady = useIsAuthReady();
-
   return (
-    <nav className={"items-center space-x-4 lg:space-x-6"}>
+    <nav className={"flex flex-row items-center gap-1"}>
       {items
         .filter((item) => item.show)
         .map((item) => (
           <NavbarItem key={`navbarItem-${item.content}`} item={item} />
         ))}
-      {isReady && !user ? (
-        <a className={buttonVariants({})} href={urls.login}>
-          Ingresar
-        </a>
-      ) : null}
     </nav>
   );
 }

app/components/Navbar/MobileNav.tsx

@@ -1,20 +1,16 @@
 import { Menu, PackageOpen } from "lucide-react";
 import { useState } from "react";
 
-import { Button, buttonVariants } from "~/components/ui/button";
+import { Button } from "~/components/ui/button";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet";
-import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
-import { urls } from "~/utils/urls";
 
 import { MobileLink } from "./MobileLink";
 import { MobileNavbarItem } from "./MobileNavbarItem";
 import type { NavBarProps } from "./types";
 
 export function MobileNav({ items }: NavBarProps) {
   const [open, setOpen] = useState(false);
-  const isLoggedIn = useIsLoggedIn();
-  const isReady = useIsAuthReady();
   const closeNav = () => {
     setOpen(false);
   };
@@ -37,22 +33,15 @@ export function MobileNav({ items }: NavBarProps) {
         <ScrollArea className="my-4 h-[calc(100vh-8rem)] px-6 pb-10">
           <div className="flex flex-col space-y-2">
             <div className="flex flex-col space-y-3 pt-6">
-              {items.map((item) => (
-                <MobileNavbarItem
-                  key={`mobile-${item.content}`}
-                  item={item}
-                  onNavItemClick={closeNav}
-                />
-              ))}
-              {isReady && !isLoggedIn ? (
-                <a
-                  className={buttonVariants({})}
-                  href={urls.login}
-                  onClick={closeNav}
-                >
-                  Ingresar
-                </a>
-              ) : null}
+              {items
+                .filter((item) => item.show)
+                .map((item) => (
+                  <MobileNavbarItem
+                    key={`mobile-${item.content}`}
+                    item={item}
+                    onNavItemClick={closeNav}
+                  />
+                ))}
             </div>
           </div>
         </ScrollArea>

app/components/Navbar/NavbarItem.tsx

@@ -1,3 +1,4 @@
+import { Button } from "~/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,6 +11,8 @@ import { cn } from "~/utils/utils";
 import type { NavbarMenuItem } from "./types";
 
 export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
+  const variant = item.variant || "link";
+
   if (item.children) {
     return (
       <DropdownMenu>
@@ -58,24 +61,15 @@ export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
 
   if (item.link) {
     return (
-      <a
-        href={item.link}
-        className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
-      >
-        {item.content}
-      </a>
+      <Button variant={variant} asChild>
+        <a href={item.link}>{item.content}</a>
+      </Button>
     );
   }
 
   return (
-    <span
-      onClick={item.onClick}
-      className={cn(
-        "text-sm font-medium text-muted-foreground transition-colors hover:text-primary",
-        item.onClick && "cursor-pointer",
-      )}
-    >
+    <Button variant={variant} onClick={item.onClick}>
       {item.content}
-    </span>
+    </Button>
   );
 };

app/components/Navbar/index.tsx

@@ -1,4 +1,9 @@
-import { LogOut, PackageOpen, Settings, User as UserIcon } from "lucide-react";
+import {
+  LogOut,
+  PackageOpen,
+  // Settings,
+  User as UserIcon,
+} from "lucide-react";
 import { useMemo } from "react";
 
 import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
@@ -7,26 +12,18 @@ import { urls } from "~/utils/urls";
 
 import { MainNav } from "./MainNav";
 import { MobileNav } from "./MobileNav";
-import { ThemeSwitcher } from "./ThemeSwitcher";
+// import { ThemeSwitcher } from "./ThemeSwitcher";
 import type { NavbarMenuItem } from "./types";
 
-const guestItems = [
-  {
-    content: "Eventos",
-    show: true,
-    link: urls.events.root,
-  },
-  {
-    content: "Comunidades",
-    show: true,
-    link: urls.comunidades,
-  },
-] satisfies NavbarMenuItem[];
-
 export const Navbar = () => {
   const isLogged = useIsLoggedIn();
   const isAuthReady = useIsAuthReady();
 
+  console.log({
+    isAuthReady,
+    isLogged,
+  });
+
   const userItems = useMemo(
     () =>
       [
@@ -42,33 +39,33 @@ export const Navbar = () => {
         },
         {
           content: "Mis Eventos",
-          show: true,
+          show: isAuthReady && isLogged,
           link: urls.myEvents.root,
         },
         {
           content: "Perfil",
-          show: true,
+          show: isAuthReady && isLogged,
           children: [
             {
               content: "Mi Cuenta",
               show: true,
               icon: <UserIcon className="mr-2 size-4" />,
-              link: urls.home,
-            },
-            {
-              show: true,
-              content: "separator",
-            },
-            {
-              content: "Settings",
-              show: true,
-              icon: <Settings className="mr-2 size-4" />,
-              link: urls.home,
+              link: urls.profile.root,
             },
             {
               show: true,
               content: "separator",
             },
+            // {
+            //   content: "Settings",
+            //   show: true,
+            //   icon: <Settings className="mr-2 size-4" />,
+            //   link: urls.home,
+            // },
+            // {
+            //   show: true,
+            //   content: "separator",
+            // },
             {
               content: "Salir",
               show: isAuthReady && isLogged,
@@ -79,6 +76,12 @@ export const Navbar = () => {
             },
           ],
         },
+        {
+          content: "Login",
+          link: urls.login,
+          variant: "secondary",
+          show: isAuthReady && !isLogged,
+        },
       ] satisfies NavbarMenuItem[],
     [isAuthReady, isLogged],
   );
@@ -95,11 +98,11 @@ export const Navbar = () => {
         <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
           <div className="w-full flex-1 md:w-auto md:flex-none"></div>
           <nav className="hidden items-center space-x-4 md:flex ">
-            <MainNav items={isLogged ? userItems : guestItems} />
-            <ThemeSwitcher />
+            <MainNav items={userItems} />
+            {/* <ThemeSwitcher /> */}
           </nav>
         </div>
-        <MobileNav items={isLogged ? userItems : guestItems} />
+        <MobileNav items={userItems} />
       </div>
     </header>
   );

app/components/Navbar/types.d.ts

@@ -3,6 +3,7 @@ export type NavbarMenuItem = {
   show: boolean;
   link?: string;
   icon?: React.ReactNode;
+  variant?: "secondary" | "link" | "default";
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   children?: Array<NavbarMenuItem>;
 };

app/components/Profile/MyProfile.tsx

@@ -0,0 +1,26 @@
+import { useMyProfileSuspenseQuery } from "~/components/Profile/graphql/myProfile.generated";
+
+export const MyProfile = () => {
+  const { data } = useMyProfileSuspenseQuery();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h2 className="text-xl">Información personal</h2>
+        <div className="flex items-center gap-4">
+          <span>Nombre:</span>
+          <span>
+            {data.me.name} {data.me.lastName && data.me.lastName}
+          </span>
+        </div>
+      </div>
+      <div>
+        <h2 className="text-xl">Información de contacto</h2>
+        <div className="flex items-center gap-4">
+          <span>Email:</span>
+          <span>{data.me.email}</span>
+        </div>
+      </div>
+    </div>
+  );
+};