Skip to content
This repository was archived by the owner on Oct 7, 2025. It is now read-only.

Commit 2f349ef

Browse files
MFarabi619MFarabi619
committed
feat(ui/portal/qr): complete route
1 parent 6588b7b commit 2f349ef

File tree

5 files changed

+192
-37
lines changed

5 files changed

+192
-37
lines changed

‎apps/portal/app/routes/qr.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,43 @@ import { useLoaderData } from '@remix-run/react'
77

88
export const loader: LoaderFunction = async ({ request }) => {
99
const cookie = request.headers.get('Cookie')
10-
1110
const baseUrl
12-
= process.env.NODE_ENV === 'development'
13-
? 'http://localhost:8000'
14-
: 'https://axiom.cuhacking.ca'
11+
= process.env.NODE_ENV === 'development'
12+
? 'http://localhost:8000'
13+
: 'https://axiom.cuhacking.ca'
1514

16-
const API_URL = baseUrl
1715
try {
18-
const res = await fetch(`${API_URL}/api/users/me`, {
16+
const userRes = await fetch(`${baseUrl}/api/users/me`, {
1917
credentials: 'include',
2018
headers: { Cookie: cookie || '' },
2119
})
2220

23-
if (!res.ok) {
21+
if (!userRes.ok) {
2422
throw new Error('Not Authenticated')
2523
}
2624

27-
const { user } = await res.json()
25+
const { user } = await userRes.json()
2826

29-
if (!user) {
27+
if (!user || !user.agreedToTerms) {
3028
return redirect('/')
3129
}
3230

33-
if (!user.agreedToTerms) {
34-
return redirect('/')
35-
}
31+
const eventsRes = await fetch(`${baseUrl}/api/events`, {
32+
credentials: 'include',
33+
headers: { Cookie: cookie || '' },
34+
})
35+
36+
const { events } = await eventsRes.json()
3637

37-
return { user, cookie, API_URL }
38+
return { user, events }
3839
}
3940
catch {
4041
return redirect('/')
4142
}
4243
}
4344

4445
export default function QR() {
45-
const { user } = useLoaderData< { user: UserDetails, cookie: string }>()
46+
const { user, events } = useLoaderData<{ user: UserDetails, events: any }>()
4647

47-
return (
48-
<QrPage user={user} />
49-
)
48+
return <QrPage user={user} events={events} />
5049
}

‎libs/db/collections/models/Users.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@ export const Users: CollectionConfig = {
268268
},
269269
access: {
270270
admin: isOrganizerOrSponsor,
271-
read: () => true,
271+
read: authenticated,
272272
create: authenticated,
273273
update: authenticated,
274274
delete: isSuperAdmin,

‎libs/portal/pages/qr.tsx‎

Lines changed: 104 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,111 @@
11
import { Layout } from '@cuhacking/portal/ui/layout'
2+
/* import { Scanner } from "@yudiel/react-qr-scanner"; */
3+
import { Button } from '@cuhacking/shared/ui/button'
4+
import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
5+
import { cn } from '@cuhacking/shared/utils/cn'
6+
import * as TabsPrimitive from '@radix-ui/react-tabs'
7+
import { CodeXml, User } from 'lucide-react'
28
import { QRCodeCanvas } from 'qrcode.react'
39

4-
export function QrPage({ user }) {
5-
/* console.log(user) */
6-
const qrValue = 'https://yourwebsite.com' // Change this to your desired URL or text
10+
import * as React from 'react'
11+
12+
const Tabs = TabsPrimitive.Root
13+
14+
const TabsList = React.forwardRef<
15+
React.ElementRef<typeof TabsPrimitive.List>,
16+
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
17+
>(({ className, ...props }, ref) => (
18+
<TabsPrimitive.List
19+
ref={ref}
20+
className={cn(
21+
'inline-flex h-9 items-center justify-center rounded-lg p-1',
22+
className,
23+
)}
24+
{...props}
25+
/>
26+
))
27+
TabsList.displayName = TabsPrimitive.List.displayName
28+
29+
const TabsTrigger = React.forwardRef<
30+
React.ElementRef<typeof TabsPrimitive.Trigger>,
31+
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
32+
>(({ className, ...props }, ref) => (
33+
<TabsPrimitive.Trigger
34+
ref={ref}
35+
className={cn(
36+
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-black data-[state=active]:shadow',
37+
className,
38+
)}
39+
{...props}
40+
/>
41+
))
42+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
43+
44+
const TabsContent = React.forwardRef<
45+
React.ElementRef<typeof TabsPrimitive.Content>,
46+
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
47+
>(({ className, ...props }, ref) => (
48+
<TabsPrimitive.Content
49+
ref={ref}
50+
className={cn(
51+
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
52+
className,
53+
)}
54+
{...props}
55+
/>
56+
))
57+
TabsContent.displayName = TabsPrimitive.Content.displayName
58+
59+
export { Tabs, TabsContent, TabsList, TabsTrigger }
60+
61+
export function QrPage({
62+
user,
63+
/* events */
64+
}) {
65+
const qrValue = 'https://yourwebsite.com'
66+
/* console.log(events); */
67+
768
return (
8-
<Layout isCompleteProfile={false}>
9-
<section className="max-w-screen-xl mx-auto gap-5 p-5 sm:px-10 py-40 pt-20">
10-
<div>
11-
<QRCodeCanvas value={qrValue} size={200} />
12-
Hi
13-
{' '}
14-
{user.preferredDisplayName}
15-
{' '}
16-
ur doing great!
17-
</div>
18-
</section>
69+
<Layout isCompleteProfile>
70+
<div className="w-full flex justify-center items-center h-screen">
71+
<section className="mx-auto space-y-5">
72+
<GlassmorphicCard className="flex flex-col items-center justify-center mx-auto space-y-2 p-5">
73+
<Tabs defaultValue="qr" className="w-screen-sm">
74+
<TabsList>
75+
<TabsTrigger value="qr">
76+
<User />
77+
{' '}
78+
QR Code
79+
</TabsTrigger>
80+
<TabsTrigger value="scanner">
81+
<CodeXml />
82+
{' '}
83+
Scanner
84+
</TabsTrigger>
85+
</TabsList>
86+
<TabsContent value="qr">
87+
<GlassmorphicCard className="flex flex-col items-center justify-center mx-auto space-y-2 p-5">
88+
<QRCodeCanvas value={qrValue} size={200} />
89+
</GlassmorphicCard>
90+
</TabsContent>
91+
<TabsContent value="scanner">
92+
{/* <Scanner onScan={(result) => console.log(result)} /> */}
93+
</TabsContent>
94+
</Tabs>
95+
</GlassmorphicCard>
96+
97+
<GlassmorphicCard className="flex justify-center mx-auto p-5">
98+
<span className="text-lg font-semibold">
99+
Hi
100+
{' '}
101+
{user.preferredDisplayName}
102+
! ur doing great! 🥗✨ Looking for
103+
QR code ...
104+
</span>
105+
</GlassmorphicCard>
106+
<Button>Confirm</Button>
107+
</section>
108+
</div>
19109
</Layout>
20110
)
21111
}

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
"@radix-ui/react-select": "^2.1.6",
6767
"@radix-ui/react-separator": "^1.1.2",
6868
"@radix-ui/react-slot": "^1.1.2",
69+
"@radix-ui/react-tabs": "^1.1.3",
6970
"@radix-ui/react-tooltip": "^1.1.8",
7071
"@radix-ui/react-visually-hidden": "^1.1.2",
7172
"@react-email/components": "0.0.32",
@@ -80,6 +81,7 @@
8081
"@tailwindcss/postcss": "4.0.6",
8182
"@tailwindcss/vite": "^4.0.6",
8283
"@xstate/react": "^5.0.2",
84+
"@yudiel/react-qr-scanner": "^2.2.1",
8385
"better-auth": "^1.1.21",
8486
"clsx": "^2.1.1",
8587
"cmdk": "^1.0.4",

0 commit comments

Comments
 (0)