Skip to content

Commit f6670c4

Browse files
Jecomo-Alyssa-LynJecomo-Alyssa-Lyn
committed
Resolved page.tsx errors in account-settings for breadcrumbs.
1 parent d12cecf commit f6670c4

3 files changed

Lines changed: 182 additions & 181 deletions

File tree

‎apps/codebility/app/home/account-settings/_components/AccountSettingsContent.tsx‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
"use client";
2+
3+
import React, { useEffect, useState } from "react";
4+
import { useRouter } from "next/navigation";
5+
import { createClientClientComponent } from "@/utils/supabase/client";
6+
import { H1 } from "@/components/shared/dashboard";
7+
import CustomBreadcrumb from "@/components/shared/dashboard/CustomBreadcrumb";
8+
9+
import { Card, CardContent } from "@codevs/ui/card";
10+
import { Separator } from "@codevs/ui/separator";
11+
12+
import AccountSettings2FA from "./AccountSettings2FA";
13+
import AccountSettingsChangePassword from "./AccountSettingsChangePassword";
14+
import AccountSettingsDelete from "./AccountSettingsDelete";
15+
import AccountSettingsHeader from "./AccountSettingsHeader";
16+
import AccountSettingsUsername from "./AccountSettingsUsername";
17+
18+
const items = [
19+
{ label: "Settings", href: "/home/settings" },
20+
{ label: "Account Settings" },
21+
];
22+
23+
interface User {
24+
id: string;
25+
email?: string;
26+
}
27+
28+
interface AccountSettingsContentProps {
29+
showBreadcrumb?: boolean;
30+
}
31+
32+
export default function AccountSettingsContent({ showBreadcrumb = true }: AccountSettingsContentProps) {
33+
const [user, setUser] = useState<User | null>(null);
34+
const [loading, setLoading] = useState(true);
35+
const [supabase, setSupabase] = useState<any>(null);
36+
const router = useRouter();
37+
38+
useEffect(() => {
39+
const supabaseClient = createClientClientComponent();
40+
setSupabase(supabaseClient);
41+
}, []);
42+
43+
useEffect(() => {
44+
if (!supabase) return;
45+
46+
async function getUser() {
47+
try {
48+
const {
49+
data: { user: authUser },
50+
error,
51+
} = await supabase.auth.getUser();
52+
53+
if (error || !authUser) {
54+
router.push("/auth/login");
55+
return;
56+
}
57+
58+
setUser({
59+
id: authUser.id,
60+
email: authUser.email,
61+
});
62+
} catch (error) {
63+
console.error("Error getting user:", error);
64+
router.push("/auth/login");
65+
} finally {
66+
setLoading(false);
67+
}
68+
}
69+
70+
getUser();
71+
}, [router, supabase]);
72+
73+
const LoadingContent = () => (
74+
<div className="grid gap-6 lg:grid-cols-2 max-w-none">
75+
<Card className="background-box text-dark100_light900 self-start">
76+
<CardContent className="space-y-4 p-6">
77+
<div className="animate-pulse space-y-4">
78+
<div className="h-6 w-1/3 rounded bg-gray-200 dark:bg-gray-700"></div>
79+
<div className="h-4 w-2/3 rounded bg-gray-200 dark:bg-gray-700"></div>
80+
<div className="h-px w-full bg-gray-200 dark:bg-gray-700"></div>
81+
<div className="space-y-2">
82+
<div className="h-4 w-1/4 rounded bg-gray-200 dark:bg-gray-700"></div>
83+
<div className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
84+
</div>
85+
<div className="h-px w-full bg-gray-200 dark:bg-gray-700"></div>
86+
<div className="space-y-2">
87+
<div className="h-5 w-1/3 rounded bg-gray-200 dark:bg-gray-700"></div>
88+
<div className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
89+
<div className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
90+
</div>
91+
<div className="h-px w-full bg-gray-200 dark:bg-gray-700"></div>
92+
<div className="flex justify-between items-center">
93+
<div className="space-y-1">
94+
<div className="h-4 w-40 rounded bg-gray-200 dark:bg-gray-700"></div>
95+
<div className="h-3 w-56 rounded bg-gray-200 dark:bg-gray-700"></div>
96+
</div>
97+
<div className="h-9 w-24 rounded bg-gray-200 dark:bg-gray-700"></div>
98+
</div>
99+
</div>
100+
</CardContent>
101+
</Card>
102+
103+
<Card className="background-box text-dark100_light900 border border-red-600 self-start">
104+
<CardContent className="space-y-4 p-6">
105+
<div className="animate-pulse space-y-4">
106+
<div className="flex justify-between items-center">
107+
<div className="h-6 w-32 rounded bg-gray-200 dark:bg-gray-700"></div>
108+
<div className="h-4 w-4 rounded bg-gray-200 dark:bg-gray-700"></div>
109+
</div>
110+
<div className="h-4 w-3/4 rounded bg-gray-200 dark:bg-gray-700"></div>
111+
<div className="h-9 w-32 rounded bg-red-200 dark:bg-red-800"></div>
112+
</div>
113+
</CardContent>
114+
</Card>
115+
</div>
116+
);
117+
118+
if (!user) {
119+
return null; // Will redirect in useEffect
120+
}
121+
122+
return (
123+
<div className="mx-auto max-w-screen-xl">
124+
{showBreadcrumb && <CustomBreadcrumb items={items} />}
125+
126+
<div className="flex flex-col gap-4 pt-4">
127+
<H1>Account Settings</H1>
128+
<span className="text-sm text-gray-400">
129+
Manage your account credentials and security settings.
130+
</span>
131+
132+
{loading ? (
133+
<LoadingContent />
134+
) : (
135+
<div className="grid gap-6 lg:grid-cols-2 p-2">
136+
<div className="w-full h-fit space-y-2">
137+
<Card className="background-box text-dark100_light900 h-fit">
138+
<CardContent className="space-y-4">
139+
<AccountSettingsHeader email={user.email || "No email available"} />
140+
<Separator />
141+
<AccountSettingsChangePassword />
142+
<Separator />
143+
<AccountSettings2FA />
144+
</CardContent>
145+
</Card>
146+
147+
<Card className="background-box text-foreground h-fit">
148+
<CardContent className="p-6">
149+
<AccountSettingsUsername userId={user.id} />
150+
</CardContent>
151+
</Card>
152+
</div>
153+
154+
<div className="w-full h-fit space-y-2">
155+
<AccountSettingsDelete />
156+
</div>
157+
</div>
158+
)}
159+
</div>
160+
</div>
161+
);
162+
}

‎apps/codebility/app/home/account-settings/page.tsx‎

Lines changed: 4 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,9 @@
11
"use client";
22

3-
import { useEffect, useState } from "react";
4-
import { useRouter } from "next/navigation";
5-
import { createClientClientComponent } from "@/utils/supabase/client";
6-
import { H1 } from "@/components/shared/dashboard";
7-
import CustomBreadcrumb from "@/components/shared/dashboard/CustomBreadcrumb";
8-
9-
import { Card, CardContent, CardFooter } from "@codevs/ui/card";
10-
import { Separator } from "@codevs/ui/separator";
11-
12-
import AccountSettings2FA from "./_components/AccountSettings2FA";
13-
import AccountSettingsChangePassword from "./_components/AccountSettingsChangePassword";
14-
import AccountSettingsDelete from "./_components/AccountSettingsDelete";
15-
import AccountSettingsHeader from "./_components/AccountSettingsHeader";
16-
import AccountSettingsUsername from "./_components/AccountSettingsUsername";
17-
183
export const dynamic = "force-dynamic";
194

20-
const items = [
21-
{ label: "Settings", href: "/home/settings" },
22-
{ label: "Account Settings" },
23-
];
24-
25-
interface User {
26-
id: string;
27-
email?: string;
28-
}
29-
30-
export default function AccountSettingsPage({ showBreadcrumb = true }: { showBreadcrumb?: boolean }) {
31-
const [user, setUser] = useState<User | null>(null);
32-
const [loading, setLoading] = useState(true);
33-
const [supabase, setSupabase] = useState<any>(null);
34-
const router = useRouter();
35-
36-
useEffect(() => {
37-
const supabaseClient = createClientClientComponent();
38-
setSupabase(supabaseClient);
39-
}, []);
40-
41-
// Initialize Supabase client safely on the client side
42-
/* useEffect(() => {
43-
try {
44-
const client = createClientClientComponent();
45-
setSupabase(client);
46-
} catch (error) {
47-
console.error("Failed to initialize Supabase client:", error);
48-
router.push("/auth/login");
49-
}
50-
}, [router]); */
51-
52-
useEffect(() => {
53-
if (!supabase) return;
54-
55-
async function getUser() {
56-
try {
57-
const {
58-
data: { user: authUser },
59-
error,
60-
} = await supabase.auth.getUser();
61-
62-
if (error || !authUser) {
63-
router.push("/auth/login");
64-
return;
65-
}
66-
67-
setUser({
68-
id: authUser.id,
69-
email: authUser.email,
70-
});
71-
} catch (error) {
72-
console.error("Error getting user:", error);
73-
router.push("/auth/login");
74-
} finally {
75-
setLoading(false);
76-
}
77-
}
78-
79-
getUser();
80-
}, [router, supabase]);
81-
82-
const LoadingContent = () => (
83-
<div className="grid gap-6 lg:grid-cols-2 max-w-none">
84-
<Card className="background-box text-dark100_light900 self-start">
85-
<CardContent className="space-y-4 p-6">
86-
<div className="animate-pulse space-y-4">
87-
<div className="h-6 w-1/3 rounded bg-gray-200 dark:bg-gray-700"></div>
88-
<div className="h-4 w-2/3 rounded bg-gray-200 dark:bg-gray-700"></div>
89-
<div className="h-px w-full bg-gray-200 dark:bg-gray-700"></div>
90-
<div className="space-y-2">
91-
<div className="h-4 w-1/4 rounded bg-gray-200 dark:bg-gray-700"></div>
92-
<div className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
93-
</div>
94-
<div className="h-px w-full bg-gray-200 dark:bg-gray-700"></div>
95-
<div className="space-y-2">
96-
<div className="h-5 w-1/3 rounded bg-gray-200 dark:bg-gray-700"></div>
97-
<div className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
98-
<div className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
99-
</div>
100-
<div className="h-px w-full bg-gray-200 dark:bg-gray-700"></div>
101-
<div className="flex justify-between items-center">
102-
<div className="space-y-1">
103-
<div className="h-4 w-40 rounded bg-gray-200 dark:bg-gray-700"></div>
104-
<div className="h-3 w-56 rounded bg-gray-200 dark:bg-gray-700"></div>
105-
</div>
106-
<div className="h-9 w-24 rounded bg-gray-200 dark:bg-gray-700"></div>
107-
</div>
108-
</div>
109-
</CardContent>
110-
</Card>
111-
112-
<Card className="background-box text-dark100_light900 border border-red-600 self-start">
113-
<CardContent className="space-y-4 p-6">
114-
<div className="animate-pulse space-y-4">
115-
<div className="flex justify-between items-center">
116-
<div className="h-6 w-32 rounded bg-gray-200 dark:bg-gray-700"></div>
117-
<div className="h-4 w-4 rounded bg-gray-200 dark:bg-gray-700"></div>
118-
</div>
119-
<div className="h-4 w-3/4 rounded bg-gray-200 dark:bg-gray-700"></div>
120-
<div className="h-9 w-32 rounded bg-red-200 dark:bg-red-800"></div>
121-
</div>
122-
</CardContent>
123-
</Card>
124-
</div>
125-
);
126-
127-
if (!user) {
128-
return null; // Will redirect in useEffect
129-
}
130-
131-
return (
132-
<div className="mx-auto max-w-screen-xl">
133-
{showBreadcrumb && (
134-
<CustomBreadcrumb items={items} />
135-
)}
5+
import AccountSettingsContent from "./_components/AccountSettingsContent";
1366

137-
<div className="flex flex-col gap-4 pt-4">
138-
<H1>Account Settings</H1>
139-
<span className="text-sm text-gray-400">
140-
Manage your account credentials and security settings.
141-
</span>
142-
143-
{loading ? (
144-
<LoadingContent />
145-
) : (
146-
<div className="grid gap-6 lg:grid-cols-2 p-2">
147-
<Card className="background-box text-dark100_light900 h-fit">
148-
<CardContent className="space-y-4 ">
149-
<AccountSettingsHeader email={user.email || "No email available"} />
150-
<Separator />
151-
<AccountSettingsChangePassword />
152-
<Separator />
153-
<AccountSettings2FA />
154-
</CardContent>
155-
</Card>
156-
157-
<div className="w-full h-fit space-y-2">
158-
<AccountSettingsDelete />
159-
160-
<Card className="background-box text-foreground h-fit">
161-
<CardContent className="p-6">
162-
<AccountSettingsUsername userId={user.id} />
163-
</CardContent>
164-
</Card>
165-
</div>
166-
167-
168-
</div>
169-
)}
170-
</div>
171-
</div>
172-
);
173-
}
7+
export default function AccountSettingsPage() {
8+
return <AccountSettingsContent showBreadcrumb={false} />;
9+
}

‎package.json‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,6 @@
4040
"react": "^18.3.1",
4141
"react-dom": "^18.3.1"
4242
},
43-
"pnpm": {
44-
"overrides": {
45-
"@types/react": "18.3.3",
46-
"@types/react-dom": "18.3.0",
47-
"react": "^18.3.1",
48-
"react-dom": "^18.3.1",
49-
"react-signature-canvas": "npm:react-signature-canvas@1.1.0-alpha.1",
50-
"reactjs-qr-code-reader": "npm:reactjs-qr-code-reader@1.0.3",
51-
"react-smooth": "npm:react-smooth@4.0.4",
52-
"react-overlays": "npm:react-overlays@5.2.1"
53-
}
54-
},
5543
"nohoist": [
5644
"**/expo-router",
5745
"**/expo-router/**"
@@ -73,5 +61,20 @@
7361
"postcss": "^8",
7462
"react-day-picker": "8.10.1",
7563
"tailwindcss": "^4.1.16"
76-
}
64+
},
65+
"overrides": {
66+
"@types/react": "18.3.3",
67+
"@types/react-dom": "18.3.0",
68+
"react": "^18.3.1",
69+
"react-dom": "^18.3.1",
70+
"react-signature-canvas": "npm:react-signature-canvas@1.1.0-alpha.1",
71+
"reactjs-qr-code-reader": "npm:reactjs-qr-code-reader@1.0.3",
72+
"react-smooth": "npm:react-smooth@4.0.4",
73+
"react-overlays": "npm:react-overlays@5.2.1"
74+
},
75+
"workspaces": [
76+
"apps/*",
77+
"packages/*",
78+
"tooling/*"
79+
]
7780
}

0 commit comments

Comments
 (0)