Merge branch 'develop' into Feat/contestScreen

TalkySafe143 · TalkySafe143 · commit c1edb91c851e · 2026-01-22T21:50:57.000-05:00
diff --git a/.github/workflows/dependabot.yml b/.github/workflows/dependabot.yml
@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "bun"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
diff --git a/src/app/(auth)/sign-up/actions.tsx b/src/app/(auth)/sign-up/actions.tsx
@@ -1,25 +1,14 @@
 "use server";
 
 import { createClient } from "@/lib/supabase/server";
-
-const checkImage = async (url: string) => {
-  let blob_image = null;
-  try {
-    const im = await fetch(url);
-    blob_image = await im.blob();
-  } catch {
-    throw new Error("Image isn't valid");
-  }
-
-  return blob_image.type.startsWith("image/");
-};
+import { uploadAvatar } from "@/lib/supabase/storage";
 
 export async function signup(form_data: FormData) {
-  const name = form_data.get("name").toString();
-  const surname = form_data.get("surname").toString();
-  const email = form_data.get("email").toString();
-  const password = form_data.get("password").toString();
-  const avatar_url = form_data.get("avatar_url")?.toString();
+  const name = form_data.get("name")?.toString();
+  const surname = form_data.get("surname")?.toString();
+  const email = form_data.get("email")?.toString();
+  const password = form_data.get("password")?.toString();
+  const avatarFile = form_data.get("avatar") as File | null;
 
   try {
     if (!name || !surname || !email || !password) {
@@ -30,12 +19,6 @@ export async function signup(form_data: FormData) {
         "El correo electrónico debe ser de la Pontificia Universidad Javeriana.",
       );
     }
-    if (avatar_url) {
-      const validImage = await checkImage(avatar_url);
-      if (!validImage) {
-        throw new Error("El URL del avatar no apunta a una imagen válida.");
-      }
-    }
 
     const supabase = await createClient();
 
@@ -48,12 +31,28 @@ export async function signup(form_data: FormData) {
       throw new Error(error.message);
     }
 
+    if (!data.user?.id) {
+      throw new Error("Error al crear el usuario.");
+    }
+
+    // Subir avatar si se proporcionó
+    let avatarUrl: string | null = null;
+    if (avatarFile && avatarFile.size > 0) {
+      try {
+        avatarUrl = await uploadAvatar(avatarFile, data.user.id);
+      } catch (uploadError) {
+        // Si falla la subida del avatar, continuar sin él
+        console.error("Error al subir avatar:", uploadError);
+        // No lanzamos error aquí para no bloquear el registro
+      }
+    }
+
     const dbResponse = await supabase.from("student").insert([
       {
         name,
         surname,
-        avatar: avatar_url || null,
-        supabase_user_id: data.user?.id,
+        avatar: avatarUrl,
+        supabase_user_id: data.user.id,
       },
     ]);
 
diff --git a/src/app/profile/actions.ts b/src/app/profile/actions.ts
@@ -0,0 +1,39 @@
+"use server";
+
+import { uploadAvatar, deleteAvatar } from "@/lib/supabase/storage";
+import { getUser } from "@/controllers/supabase.controller";
+
+/**
+ * Server action para subir un avatar desde el cliente
+ */
+export async function uploadAvatarAction(formData: FormData) {
+  try {
+    const file = formData.get("avatar") as File;
+    const user = await getUser();
+
+    if (!user?.id) {
+      return { error: "Usuario no autenticado", url: null };
+    }
+
+    if (!file || file.size === 0) {
+      return { error: "No se proporcionó ningún archivo", url: null };
+    }
+
+    const avatarUrl = await uploadAvatar(file, user.id);
+    return { error: null, url: avatarUrl };
+  } catch (error) {
+    return { error: (error as Error).message, url: null };
+  }
+}
+
+/**
+ * Server action para eliminar un avatar
+ */
+export async function deleteAvatarAction(avatarUrl: string) {
+  try {
+    await deleteAvatar(avatarUrl);
+    return { error: null };
+  } catch (error) {
+    return { error: (error as Error).message };
+  }
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -15,7 +15,7 @@ export default function ProfilePage() {
     isEditing,
     formData,
     handleEditing,
-    handleAvatarUrlChange,
+    handleAvatarFileChange,
     handleSave,
     handleInputChange,
     setFormData,
@@ -43,7 +43,7 @@ export default function ProfilePage() {
               onEditToggle={handleEditing}
               onSave={handleSave}
               onInputChange={handleInputChange}
-              onAvatarUrlChange={handleAvatarUrlChange}
+              onAvatarFileChange={handleAvatarFileChange}
               setFormData={setFormData}
             />
           )}
diff --git a/src/components/league/contest/contestant-details.tsx b/src/components/league/contest/contestant-details.tsx
@@ -20,7 +20,10 @@ export const ContestantDetails: React.FC<ContestantDetailsProps> = ({
 }) => {
   const t = useTranslations();
   const readyText = ready ? t("Match.ready") : t("Match.not_ready");
-  const win_ratio: string = ((wins / (matches === 0 ? 1 : matches)) * 100).toFixed(2);
+  const win_ratio: string = (
+    (wins / (matches === 0 ? 1 : matches)) *
+    100
+  ).toFixed(2);
 
   const AvatarImage: ReactNode = (
     <div className="w-14 h-14 rounded-full bg-linear-to-br from-white/30 to-transparent border border-white/40 shadow-inner">
@@ -36,8 +39,9 @@ export const ContestantDetails: React.FC<ContestantDetailsProps> = ({
     <div
       className={`flex items-center ${!local_side ? "justify-end" : ""} gap-4 p-5  border border-white/20 rounded-2xl shadow-lg`}
       style={{
-        background: `radial-gradient(circle at ${local_side ? "170% 35%" : "-10% 35%"
-          }, ${local_side ? "var(--color-green-500)" : "var(--color-red-400)"}, transparent)`,
+        background: `radial-gradient(circle at ${
+          local_side ? "170% 35%" : "-10% 35%"
+        }, ${local_side ? "var(--color-green-500)" : "var(--color-red-400)"}, transparent)`,
       }}
     >
       {local_side && AvatarImage}
diff --git a/src/components/league/tree-node.tsx b/src/components/league/tree-node.tsx
@@ -20,6 +20,7 @@ export default function TreeNode({
 }: TreeNodeProps) {
   const fillColor = "#ffffff";
   const isRoot = nodeDatum.__rd3t.depth === 0;
+  const isLeaf = !nodeDatum.children || nodeDatum.children.length === 0;
   return (
     <g onClick={toggleNode}>
       <circle
@@ -38,7 +39,8 @@ export default function TreeNode({
           className="flex justify-center items-center rounded-full h-25 w-25"
           onClick={() =>
             nodeDatum.student != null &&
-            nodeDatum.student.codeforces_handle != null
+            nodeDatum.student.codeforces_handle != null &&
+            isLeaf
               ? window.open(
                   "https://codeforces.com/profile/" +
                     nodeDatum.student.codeforces_handle,
diff --git a/src/components/profile/profile-header.tsx b/src/components/profile/profile-header.tsx
@@ -1,6 +1,7 @@
 import { Student } from "@/models/student.model";
 import Link from "next/link";
-import React from "react";
+import React, { useRef } from "react";
+import { Upload, X } from "lucide-react";
 
 interface ProfileHeaderProps {
   student: Student | null;
@@ -12,18 +13,22 @@ interface ProfileHeaderProps {
     email: string;
     codeforcesHandle: string;
     avatarUrl: string | null;
+    avatarFile: File | null;
+    avatarPreview: string | null;
   };
   onEditToggle: () => void;
   onSave: () => void;
   onInputChange: (field: string, value: string) => void;
-  onAvatarUrlChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onAvatarFileChange: (file: File | null, preview: string | null) => void;
   setFormData: React.Dispatch<
     React.SetStateAction<{
       name: string;
       surname: string;
       email: string;
       codeforcesHandle: string;
       avatarUrl: string | null;
+      avatarFile: File | null;
+      avatarPreview: string | null;
     }>
   >;
 }
@@ -36,9 +41,45 @@ export const ProfileHeader = ({
   onEditToggle,
   onSave,
   onInputChange,
-  onAvatarUrlChange,
+  onAvatarFileChange,
   setFormData,
 }: ProfileHeaderProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Validar tipo de archivo
+      if (!file.type.startsWith("image/")) {
+        alert("Por favor, selecciona un archivo de imagen válido.");
+        return;
+      }
+      // Validar tamaño (1MB)
+      if (file.size > 5 * 1024 * 1024) {
+        alert("El archivo es demasiado grande. Máximo 1MB.");
+        return;
+      }
+      // Crear preview
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        onAvatarFileChange(file, reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleRemoveAvatar = () => {
+    onAvatarFileChange(null, null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  // Determinar qué imagen mostrar
+  const displayImage =
+    formData.avatarPreview ||
+    (isEditing ? formData.avatarUrl : student?.avatar) ||
+    null;
   return (
     <section className="bg-(--white) dark:bg-gray-800 rounded-xl shadow-sm border border-(--azul-niebla) dark:border-gray-700">
       <div className="p-6 border-b border-(--azul-niebla) dark:border-gray-700 flex items-center justify-start">
@@ -72,17 +113,18 @@ export const ProfileHeader = ({
         {/* Avatar editable */}
         <div className="flex flex-col items-center md:w-1/3">
           <div className="relative w-28 h-28 md:w-32 md:h-32 rounded-full overflow-hidden ring-4 ring-(--azul-niebla) dark:ring-blue-900">
-            {(isEditing ? formData.avatarUrl : student?.avatar) ? (
+            {displayImage ? (
               <img
-                src={
-                  (isEditing ? formData.avatarUrl : student?.avatar) ||
-                  undefined
-                }
+                src={displayImage}
                 alt="Avatar"
                 className="w-full h-full object-cover"
                 onError={() => {
                   if (isEditing) {
-                    setFormData((prev) => ({ ...prev, avatarUrl: null }));
+                    setFormData((prev) => ({
+                      ...prev,
+                      avatarUrl: null,
+                      avatarPreview: null,
+                    }));
                   }
                 }}
               />
@@ -97,17 +139,37 @@ export const ProfileHeader = ({
           {isEditing && (
             <div className="w-full mt-4 space-y-2">
               <input
-                type="url"
-                value={formData.avatarUrl || ""}
-                onChange={onAvatarUrlChange}
-                placeholder="www.example.com/avatar.png"
-                className="w-full px-3 py-2 rounded-lg bg-(--azul-niebla) dark:bg-gray-700 text-(--azul-noche) dark:text-white border border-(--azul-niebla) dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-(--azul-electrico) text-sm"
+                ref={fileInputRef}
+                type="file"
+                accept="image/jpeg,image/jpg,image/png,image/webp"
+                onChange={handleAvatarChange}
+                className="hidden"
+                id="avatar-upload"
               />
-              {formData.avatarUrl && (
-                <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
-                  La imagen se previsualizará arriba
-                </p>
+              <label
+                htmlFor="avatar-upload"
+                className="flex items-center justify-center gap-2 w-full px-3 py-2 rounded-lg bg-(--azul-niebla) dark:bg-gray-700 text-(--azul-noche) dark:text-white border border-(--azul-niebla) dark:border-gray-600 hover:bg-(--azul-crayon) dark:hover:bg-gray-600 cursor-pointer transition-colors text-sm font-medium"
+              >
+                <Upload className="h-4 w-4" />
+                <span>
+                  {formData.avatarFile
+                    ? formData.avatarFile.name
+                    : "Seleccionar imagen"}
+                </span>
+              </label>
+              {formData.avatarFile && (
+                <button
+                  type="button"
+                  onClick={handleRemoveAvatar}
+                  className="flex items-center justify-center gap-2 w-full px-3 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white transition-colors text-sm font-medium"
+                >
+                  <X className="h-4 w-4" />
+                  <span>Eliminar imagen</span>
+                </button>
               )}
+              <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+                Formatos: JPEG, PNG, WEBP. Máximo 1MB
+              </p>
             </div>
           )}
         </div>
diff --git a/src/components/shared/ui/avatar-menu.tsx b/src/components/shared/ui/avatar-menu.tsx
@@ -50,7 +50,7 @@ export default function AvatarMenu({ avatarUrl, userName }: AvatarMenuProps) {
         console.error("Error al cerrar sesión:", error);
       }
 
-      await queryClient.invalidateQueries({ queryKey: ["navbar-user"] });
+      queryClient.clear();
 
       router.push("/log-in");
       router.refresh();
diff --git a/src/components/sign-in/sign-in-form.tsx b/src/components/sign-in/sign-in-form.tsx
@@ -27,7 +27,7 @@ export function SignInForm() {
       return;
     }
 
-    queryClient.invalidateQueries({ queryKey: ["navbar-user"] });
+    queryClient.clear();
 
     redirect("/");
   };
diff --git a/src/components/sign-up/sign-up-form.tsx b/src/components/sign-up/sign-up-form.tsx
diff --git a/src/hooks/use-profile-data.ts b/src/hooks/use-profile-data.ts
diff --git a/src/lib/supabase/storage.ts b/src/lib/supabase/storage.ts

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ export default function AvatarMenu({ avatarUrl, userName }: AvatarMenuProps) {`
`50`	`50`	`console.error("Error al cerrar sesión:", error);`
`51`	`51`	`}`
`52`	`52`
`53`		`- await queryClient.invalidateQueries({ queryKey: ["navbar-user"] });`
	`53`	`+ queryClient.clear();`
`54`	`54`
`55`	`55`	`router.push("/log-in");`
`56`	`56`	`router.refresh();`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export function SignInForm() {`
`27`	`27`	`return;`
`28`	`28`	`}`
`29`	`29`
`30`		`- queryClient.invalidateQueries({ queryKey: ["navbar-user"] });`
	`30`	`+ queryClient.clear();`
`31`	`31`
`32`	`32`	`redirect("/");`
`33`	`33`	`};`