Merge pull request #54 from mrepol742/master

feat: added support for avatar from 0auth2 provider and disable sentry on non production env

Author: mrepol742

app/(public)/leaderboard/[slug]/page.tsx

@@ -1,14 +1,20 @@
 import { createClient } from "../../../lib/supabase/server";
-import LeaderboardTable, { NonNullableMember } from "../../../components/LeaderboardTable";
+import LeaderboardTable, {
+  NonNullableMember,
+} from "../../../components/LeaderboardTable";
 import LeaderboardHeader from "@/app/components/leaderboard/Header";
 import Footer from "@/app/components/layout/Footer";
 import CTA from "@/app/components/layout/CTA";
+import { getUserWithProfile } from "@/app/lib/supabase/help/user";
 
 export default async function LeaderboardPage(props: {
   params: Promise<{ slug: string }>;
 }) {
-  const { slug } = await props.params;
-  const supabase = await createClient();
+  const [{ user }, { slug }, supabase] = await Promise.all([
+    getUserWithProfile(),
+    props.params,
+    createClient(),
+  ]);
 
   const { data: leaderboard } = await supabase
     .from("leaderboards")
@@ -32,10 +38,6 @@ export default async function LeaderboardPage(props: {
     .select("*")
     .eq("leaderboard_id", leaderboard.id);
 
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-
   const isOwner = user?.id === leaderboard.owner_id;
 
   if (error) {

app/(public)/leaderboard/page.tsx

@@ -4,6 +4,7 @@ import Footer from "@/app/components/layout/Footer";
 import CTA from "@/app/components/layout/CTA";
 import Image from "next/image";
 import { Metadata } from "next";
+import { getUserWithProfile } from "@/app/lib/supabase/help/user";
 
 export const metadata: Metadata = {
   title: "Leaderboards - DevPulse",
@@ -54,17 +55,14 @@ export const metadata: Metadata = {
 export default async function Leaderboards() {
   const supabase = await createClient();
 
-  const [leaderboardsResult, userResult] = await Promise.all([
+  const [{ data, error }, { user }] = await Promise.all([
     supabase
       .from("leaderboards")
       .select("id, name, slug")
       .order("created_at", { ascending: false }),
-    supabase.auth.getUser(),
+    getUserWithProfile(),
   ]);
 
-  const { data, error } = leaderboardsResult;
-  const { data: user } = userResult;
-
   if (error) {
     return (
       <div className="glass-card h-full flex items-center justify-center">

app/(user)/dashboard/layout.tsx

@@ -14,7 +14,11 @@ export default async function Layout({
   const name = user?.user_metadata?.name || email.split("@")[0];
 
   return (
-    <DashboardLayout email={email} name={name} role={profile?.role || "user"}>
+    <DashboardLayout
+      email={email}
+      name={name}
+      role={profile?.role || "user"}
+    >
       {children}
     </DashboardLayout>
   );

app/(user)/dashboard/page.tsx

@@ -18,6 +18,11 @@ export default async function Dashboard() {
 
   const email = profile?.email || user.email!;
   const name = user?.user_metadata?.name || email.split("@")[0];
+  const prefferedAvatar =
+    user?.user_metadata?.avatar_url ||
+    user?.user_metadata?.picture ||
+    user?.user_metadata?.avatar ||
+    null;
 
-  return <Stats name={name} email={email} />;
+  return <Stats name={name} email={email} avatar={prefferedAvatar} />;
 }

app/components/dashboard/Settings/Profile.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { createClient } from "../../../lib/supabase/client";
 import { toast } from "react-toastify";
 import type { User } from "@supabase/supabase-js";
+import Image from "next/image";
 
 export default function UserProfile({ user }: { user: User }) {
   const supabase = createClient();
@@ -12,6 +13,11 @@ export default function UserProfile({ user }: { user: User }) {
   );
   const [name, setName] = useState(originalName);
   const [loading, setLoading] = useState(false);
+  const prefferedAvatar =
+    user?.user_metadata?.avatar_url ||
+    user?.user_metadata?.picture ||
+    user?.user_metadata?.avatar ||
+    null;
 
   const isEdited = name !== originalName;
 
@@ -56,6 +62,14 @@ export default function UserProfile({ user }: { user: User }) {
         Profile
       </h3>
 
+      <Image
+        src={prefferedAvatar}
+        alt="User Avatar"
+        width={80}
+        height={80}
+        className="rounded-full mb-4"
+      />
+
       <label className="text-sm text-gray-400 font-medium">Email</label>
       <input
         type="email"

app/components/dashboard/Settings/ResetPassword.tsx

@@ -67,6 +67,10 @@ export default function ResetPassword({ user }: { user: User }) {
           Reset Password
         </h3>
 
+        <p className="text-gray-400 mb-4 text-sm">
+          You will receive an email with instructions to reset your password.
+        </p>
+
         <button type="submit" disabled={loading} className="btn-primary">
           Send Reset Email
         </button>