Skip to content

Commit 86bdfad

Browse files
fforresfforres
authored
Auth improvements and my profile page (#42)
<img width="1269" alt="image" src="https://github.com/JSConfCL/tickets/assets/952992/a3a43519-90d0-4a46-83e5-f10fea0db184"> <img width="1272" alt="image" src="https://github.com/JSConfCL/tickets/assets/952992/ad98f8c7-4c7d-4452-b88e-1a7a22ccd28d">
1 parent c51150c commit 86bdfad

File tree

17 files changed

+340
-89
lines changed

17 files changed

+340
-89
lines changed

Diff for: ‎app/api/gql/gql.ts

+8
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ const documents = {
1717
types.FetchExampleEventsDocument,
1818
"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}":
1919
types.MyEventsDocument,
20+
"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}":
21+
types.MyProfileDocument,
2022
"mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {\n checkPurchaseOrderStatus(input: $input) {\n status\n tickets {\n approvalStatus\n paymentStatus\n redemptionStatus\n }\n }\n}":
2123
types.CheckPurchaseOrderStatusDocument,
2224
"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(
5355
export function graphql(
5456
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}",
5557
): (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}"];
58+
/**
59+
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
60+
*/
61+
export function graphql(
62+
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}",
63+
): (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}"];
5664
/**
5765
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
5866
*/

Diff for: ‎app/api/gql/graphql.ts

+57
Original file line numberDiff line numberDiff line change
@@ -906,6 +906,21 @@ export type MyEventsQuery = {
906906
};
907907
};
908908

909+
export type MyProfileQueryVariables = Exact<{ [key: string]: never }>;
910+
911+
export type MyProfileQuery = {
912+
me: {
913+
id: string;
914+
bio?: string | null;
915+
lastName?: string | null;
916+
username: string;
917+
imageUrl?: string | null;
918+
email?: string | null;
919+
name?: string | null;
920+
communities: Array<{ id: string; name?: string | null }>;
921+
};
922+
};
923+
909924
export type CheckPurchaseOrderStatusMutationVariables = Exact<{
910925
input: CheckForPurchaseOrderInput;
911926
}>;
@@ -1328,6 +1343,48 @@ export const MyEventsDocument = {
13281343
},
13291344
],
13301345
} as unknown as DocumentNode<MyEventsQuery, MyEventsQueryVariables>;
1346+
export const MyProfileDocument = {
1347+
kind: "Document",
1348+
definitions: [
1349+
{
1350+
kind: "OperationDefinition",
1351+
operation: "query",
1352+
name: { kind: "Name", value: "myProfile" },
1353+
selectionSet: {
1354+
kind: "SelectionSet",
1355+
selections: [
1356+
{
1357+
kind: "Field",
1358+
name: { kind: "Name", value: "me" },
1359+
selectionSet: {
1360+
kind: "SelectionSet",
1361+
selections: [
1362+
{ kind: "Field", name: { kind: "Name", value: "id" } },
1363+
{ kind: "Field", name: { kind: "Name", value: "bio" } },
1364+
{ kind: "Field", name: { kind: "Name", value: "lastName" } },
1365+
{ kind: "Field", name: { kind: "Name", value: "username" } },
1366+
{ kind: "Field", name: { kind: "Name", value: "imageUrl" } },
1367+
{ kind: "Field", name: { kind: "Name", value: "email" } },
1368+
{ kind: "Field", name: { kind: "Name", value: "name" } },
1369+
{
1370+
kind: "Field",
1371+
name: { kind: "Name", value: "communities" },
1372+
selectionSet: {
1373+
kind: "SelectionSet",
1374+
selections: [
1375+
{ kind: "Field", name: { kind: "Name", value: "id" } },
1376+
{ kind: "Field", name: { kind: "Name", value: "name" } },
1377+
],
1378+
},
1379+
},
1380+
],
1381+
},
1382+
},
1383+
],
1384+
},
1385+
},
1386+
],
1387+
} as unknown as DocumentNode<MyProfileQuery, MyProfileQueryVariables>;
13311388
export const CheckPurchaseOrderStatusDocument = {
13321389
kind: "Document",
13331390
definitions: [

Diff for: ‎app/components/Login/Login.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const Login = () => {
1515
}, []);
1616

1717
return (
18-
<div className="flex w-full max-w-lg shrink-0 flex-col gap-4 rounded-2xl bg-background p-10 shadow-xl">
18+
<div className="flex w-full max-w-lg shrink-0 flex-col gap-4 rounded-2xl border bg-background p-10 shadow-xl">
1919
<div>
2020
<h1 className="text-left text-2xl font-bold">Regístrate.</h1>
2121
<p className="text-left text-sm text-muted-foreground">

Diff for: ‎app/components/Navbar/MainNav.tsx

+1-13
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,14 @@
1-
import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
2-
import { urls } from "~/utils/urls";
3-
41
import { NavbarItem } from "./NavbarItem";
52
import type { NavBarProps } from "./types";
6-
import { buttonVariants } from "../ui/button";
73

84
export function MainNav({ items }: NavBarProps) {
9-
const user = useIsLoggedIn();
10-
const isReady = useIsAuthReady();
11-
125
return (
13-
<nav className={"items-center space-x-4 lg:space-x-6"}>
6+
<nav className={"flex flex-row items-center gap-1"}>
147
{items
158
.filter((item) => item.show)
169
.map((item) => (
1710
<NavbarItem key={`navbarItem-${item.content}`} item={item} />
1811
))}
19-
{isReady && !user ? (
20-
<a className={buttonVariants({})} href={urls.login}>
21-
Ingresar
22-
</a>
23-
) : null}
2412
</nav>
2513
);
2614
}

Diff for: ‎app/components/Navbar/MobileNav.tsx

+10-21
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
import { Menu, PackageOpen } from "lucide-react";
22
import { useState } from "react";
33

4-
import { Button, buttonVariants } from "~/components/ui/button";
4+
import { Button } from "~/components/ui/button";
55
import { ScrollArea } from "~/components/ui/scroll-area";
66
import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet";
7-
import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
8-
import { urls } from "~/utils/urls";
97

108
import { MobileLink } from "./MobileLink";
119
import { MobileNavbarItem } from "./MobileNavbarItem";
1210
import type { NavBarProps } from "./types";
1311

1412
export function MobileNav({ items }: NavBarProps) {
1513
const [open, setOpen] = useState(false);
16-
const isLoggedIn = useIsLoggedIn();
17-
const isReady = useIsAuthReady();
1814
const closeNav = () => {
1915
setOpen(false);
2016
};
@@ -37,22 +33,15 @@ export function MobileNav({ items }: NavBarProps) {
3733
<ScrollArea className="my-4 h-[calc(100vh-8rem)] px-6 pb-10">
3834
<div className="flex flex-col space-y-2">
3935
<div className="flex flex-col space-y-3 pt-6">
40-
{items.map((item) => (
41-
<MobileNavbarItem
42-
key={`mobile-${item.content}`}
43-
item={item}
44-
onNavItemClick={closeNav}
45-
/>
46-
))}
47-
{isReady && !isLoggedIn ? (
48-
<a
49-
className={buttonVariants({})}
50-
href={urls.login}
51-
onClick={closeNav}
52-
>
53-
Ingresar
54-
</a>
55-
) : null}
36+
{items
37+
.filter((item) => item.show)
38+
.map((item) => (
39+
<MobileNavbarItem
40+
key={`mobile-${item.content}`}
41+
item={item}
42+
onNavItemClick={closeNav}
43+
/>
44+
))}
5645
</div>
5746
</div>
5847
</ScrollArea>

Diff for: ‎app/components/Navbar/NavbarItem.tsx

+8-14
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Button } from "~/components/ui/button";
12
import {
23
DropdownMenu,
34
DropdownMenuContent,
@@ -10,6 +11,8 @@ import { cn } from "~/utils/utils";
1011
import type { NavbarMenuItem } from "./types";
1112

1213
export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
14+
const variant = item.variant || "link";
15+
1316
if (item.children) {
1417
return (
1518
<DropdownMenu>
@@ -58,24 +61,15 @@ export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
5861

5962
if (item.link) {
6063
return (
61-
<a
62-
href={item.link}
63-
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
64-
>
65-
{item.content}
66-
</a>
64+
<Button variant={variant} asChild>
65+
<a href={item.link}>{item.content}</a>
66+
</Button>
6767
);
6868
}
6969

7070
return (
71-
<span
72-
onClick={item.onClick}
73-
className={cn(
74-
"text-sm font-medium text-muted-foreground transition-colors hover:text-primary",
75-
item.onClick && "cursor-pointer",
76-
)}
77-
>
71+
<Button variant={variant} onClick={item.onClick}>
7872
{item.content}
79-
</span>
73+
</Button>
8074
);
8175
};

Diff for: ‎app/components/Navbar/index.tsx

+34-31
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { LogOut, PackageOpen, Settings, User as UserIcon } from "lucide-react";
1+
import {
2+
LogOut,
3+
PackageOpen,
4+
// Settings,
5+
User as UserIcon,
6+
} from "lucide-react";
27
import { useMemo } from "react";
38

49
import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
@@ -7,26 +12,18 @@ import { urls } from "~/utils/urls";
712

813
import { MainNav } from "./MainNav";
914
import { MobileNav } from "./MobileNav";
10-
import { ThemeSwitcher } from "./ThemeSwitcher";
15+
// import { ThemeSwitcher } from "./ThemeSwitcher";
1116
import type { NavbarMenuItem } from "./types";
1217

13-
const guestItems = [
14-
{
15-
content: "Eventos",
16-
show: true,
17-
link: urls.events.root,
18-
},
19-
{
20-
content: "Comunidades",
21-
show: true,
22-
link: urls.comunidades,
23-
},
24-
] satisfies NavbarMenuItem[];
25-
2618
export const Navbar = () => {
2719
const isLogged = useIsLoggedIn();
2820
const isAuthReady = useIsAuthReady();
2921

22+
console.log({
23+
isAuthReady,
24+
isLogged,
25+
});
26+
3027
const userItems = useMemo(
3128
() =>
3229
[
@@ -42,33 +39,33 @@ export const Navbar = () => {
4239
},
4340
{
4441
content: "Mis Eventos",
45-
show: true,
42+
show: isAuthReady && isLogged,
4643
link: urls.myEvents.root,
4744
},
4845
{
4946
content: "Perfil",
50-
show: true,
47+
show: isAuthReady && isLogged,
5148
children: [
5249
{
5350
content: "Mi Cuenta",
5451
show: true,
5552
icon: <UserIcon className="mr-2 size-4" />,
56-
link: urls.home,
57-
},
58-
{
59-
show: true,
60-
content: "separator",
61-
},
62-
{
63-
content: "Settings",
64-
show: true,
65-
icon: <Settings className="mr-2 size-4" />,
66-
link: urls.home,
53+
link: urls.profile.root,
6754
},
6855
{
6956
show: true,
7057
content: "separator",
7158
},
59+
// {
60+
// content: "Settings",
61+
// show: true,
62+
// icon: <Settings className="mr-2 size-4" />,
63+
// link: urls.home,
64+
// },
65+
// {
66+
// show: true,
67+
// content: "separator",
68+
// },
7269
{
7370
content: "Salir",
7471
show: isAuthReady && isLogged,
@@ -79,6 +76,12 @@ export const Navbar = () => {
7976
},
8077
],
8178
},
79+
{
80+
content: "Login",
81+
link: urls.login,
82+
variant: "secondary",
83+
show: isAuthReady && !isLogged,
84+
},
8285
] satisfies NavbarMenuItem[],
8386
[isAuthReady, isLogged],
8487
);
@@ -95,11 +98,11 @@ export const Navbar = () => {
9598
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
9699
<div className="w-full flex-1 md:w-auto md:flex-none"></div>
97100
<nav className="hidden items-center space-x-4 md:flex ">
98-
<MainNav items={isLogged ? userItems : guestItems} />
99-
<ThemeSwitcher />
101+
<MainNav items={userItems} />
102+
{/* <ThemeSwitcher /> */}
100103
</nav>
101104
</div>
102-
<MobileNav items={isLogged ? userItems : guestItems} />
105+
<MobileNav items={userItems} />
103106
</div>
104107
</header>
105108
);

Diff for: ‎app/components/Navbar/types.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export type NavbarMenuItem = {
33
show: boolean;
44
link?: string;
55
icon?: React.ReactNode;
6+
variant?: "secondary" | "link" | "default";
67
onClick?: (e: React.MouseEvent<HTMLElement>) => void;
78
children?: Array<NavbarMenuItem>;
89
};

Diff for: ‎app/components/Profile/MyProfile.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useMyProfileSuspenseQuery } from "~/components/Profile/graphql/myProfile.generated";
2+
3+
export const MyProfile = () => {
4+
const { data } = useMyProfileSuspenseQuery();
5+
6+
return (
7+
<div className="flex flex-col gap-6">
8+
<div>
9+
<h2 className="text-xl">Información personal</h2>
10+
<div className="flex items-center gap-4">
11+
<span>Nombre:</span>
12+
<span>
13+
{data.me.name} {data.me.lastName && data.me.lastName}
14+
</span>
15+
</div>
16+
</div>
17+
<div>
18+
<h2 className="text-xl">Información de contacto</h2>
19+
<div className="flex items-center gap-4">
20+
<span>Email:</span>
21+
<span>{data.me.email}</span>
22+
</div>
23+
</div>
24+
</div>
25+
);
26+
};

0 commit comments

Comments
 (0)