Parchat · DanilsGit · Jun 25, 2025 · Jun 25, 2025
diff --git a/app/(auth)/login-gest/page.tsx b/app/(auth)/login-gest/page.tsx
diff --git a/app/(auth)/page.tsx b/app/(auth)/page.tsx
@@ -19,7 +19,7 @@ export default function Home() {
             Transmite tu mensaje en segundos con tus compañeros de trabajo, estudio, viaje, fiesta y
             completos desconocidos.
           </p>
-          <Link href="/login-gest">
+          <Link href="/login">
             <div className="px-4 py-2 inline-block bg-indigo-500 text-white rounded-lg hover:bg-indigo-400 hover:shadow-lg hover:scale-105 transform transition duration-300 ease-in-out">
               Ingresar a una Sala
             </div>

diff --git a/app/(protected)/dashboard/_components/RoomSearch.tsx b/app/(protected)/dashboard/_components/RoomSearch.tsx
@@ -2,42 +2,30 @@
 
 import LoadingEmoji from '@/app/_components/LoadingEmoji';
 import { RoomIcon } from '@/app/_ui/icons';
-import { useQuery } from '@tanstack/react-query';
-import { getAllRooms } from '../_apis/rooms';
 import RoomList from './RoomList';
+import { useGetPublicRooms } from '../_hooks/useGetPublicRooms';
 
 export default function RoomSearch() {
-  const { data: rooms, isLoading } = useQuery({
-    queryKey: ['all-rooms-dashboard'],
-    queryFn: getAllRooms,
-  });
+  const { isLoading, fileteredRooms, handleSubmit } = useGetPublicRooms();
 
   if (isLoading) return <LoadingEmoji />;
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const form = e.currentTarget;
-    const searchValue = form.search.value;
-
-    // Aquí puedes manejar la búsqueda con el valor de searchValue
-    console.log('Buscando sala:', searchValue);
-  };
-
   return (
     <>
-      <form className="w-full flex justify-center items-center" onSubmit={handleSubmit}>
+      <form className="w-full flex justify-center items-center">
         <input
           type="text"
           placeholder="Buscar sala"
           className="w-full border border-violet-400 px-4 py-2 flex-11/12 outline-none rounded-l-md"
           name="search"
+          onChange={handleSubmit}
         />
         <button className="flex justify-center items-center w-full bg-purple text-white cursor-pointer flex-1/12 h-full rounded-r-md">
           <RoomIcon width={30} height={30} />
         </button>
       </form>
-      {rooms ? (
-        <RoomList rooms={rooms} />
+      {fileteredRooms ? (
+        <RoomList rooms={fileteredRooms} />
       ) : (
         <div className="w-full h-full flex justify-center items-center">
           <h2 className="text-lg text-gray-500">No encontramos salas</h2>

diff --git a/app/(protected)/dashboard/_hooks/useGetPublicRooms.ts b/app/(protected)/dashboard/_hooks/useGetPublicRooms.ts
@@ -0,0 +1,42 @@
+import { IRoom } from '@/app/_lib/_interfaces/IRoom';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { getAllRooms } from '../_apis/rooms';
+
+export const useGetPublicRooms = () => {
+  const { data: rooms, isLoading } = useQuery({
+    queryKey: ['all-rooms-dashboard'],
+    queryFn: getAllRooms,
+  });
+
+  const [fileteredRooms, setFilteredRooms] = useState<IRoom[] | undefined>(rooms);
+
+  useEffect(() => {
+    if (rooms) {
+      setFilteredRooms(rooms);
+    }
+  }, [rooms]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const searchValue = e.currentTarget.value;
+
+    // Aquí puedes manejar la búsqueda con el valor de searchValue
+    if (searchValue.trim() === '' || !rooms) {
+      setFilteredRooms(rooms);
+      return;
+    }
+
+    const filtered = rooms.filter(room =>
+      room.name.toLowerCase().includes(searchValue.toLowerCase())
+    );
+
+    setFilteredRooms(filtered.length > 0 ? filtered : []);
+  };
+
+  return {
+    isLoading,
+    fileteredRooms,
+    handleSubmit,
+  };
+};
diff --git a/app/(protected)/dashboard/room/[id]/page.tsx b/app/(protected)/dashboard/room/[id]/page.tsx
@@ -5,6 +5,7 @@ import LoadingEmoji from '@/app/_components/LoadingEmoji';
 import { use } from 'react';
 import { getRoomById } from '../../_apis/rooms';
 import { useRoomMessages } from '../hooks/useRoomMessages';
+import { toast } from 'react-toastify';
 
 interface RouterProps {
   params: Promise<{
@@ -23,11 +24,28 @@ export default function RoomPage({ params }: RouterProps) {
 
   if (loading || roomLoading) return <LoadingEmoji />;
 
+  const handleCopyUrl = () => {
+    const url = `${window.location.origin}/dashboard/room/${id}`;
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        toast.success('URL copiada al portapapeles');
+      })
+      .catch(() => {
+        toast.error('Error al copiar la URL');
+      });
+  };
+
   return (
     <div className="grid grid-rows-[auto_1fr_auto] w-full h-full overflow-auto">
-      <div className="p-2 lg:p-4 bg-semidarkpurple w-full">
-        <h2 className="text-lg lg:text-2xl font-bold">{room?.name}</h2>
-        <p className="text-xs">{room?.isPrivate ? 'Privada' : 'Pública'}</p>
+      <div className="p-2 lg:p-4 bg-semidarkpurple w-full flex items-center justify-between">
+        <div>
+          <h2 className="text-lg lg:text-2xl font-bold">{room?.name}</h2>
+          <p className="text-xs">{room?.isPrivate ? 'Privada' : 'Pública'}</p>
+        </div>
+        <div className="cursor-pointer">
+          <button onClick={handleCopyUrl}>📋</button>
+        </div>
       </div>
       {room && <MessagesList room={room} initial_messages={messages ?? []} />}
     </div>

diff --git a/app/_components/AsideDashboard.tsx b/app/_components/AsideDashboard.tsx
@@ -22,7 +22,15 @@ export default function AsideDashboard() {
       {!isMobileLg && (
         <aside className="hidden lg:flex lg:flex-col justify-around h-100vh bg-darkblue text-white p-5">
           <div>
-            <h1>Parchat</h1>
+            <Link href={`/dashboard`}>
+              <Image
+                width={300}
+                height={300}
+                alt="logo of the app"
+                src="/parchat-logo.png"
+                className="object-cover mb-5 p-5"
+              />
+            </Link>
           </div>
           <nav>
             <ul className="flex flex-col gap-10">

diff --git a/app/_components/AsideRoom.tsx b/app/_components/AsideRoom.tsx
@@ -35,7 +35,7 @@ export default function AsideRoom() {
             {chats.map(chat => (
               <li key={chat.id} className="text-white p-2 bg-purple-2 rounded-lg mb-2">
                 <Link href={`/dashboard/chat/${chat.id}`}>
-                  <p className="font-bold">{chat.lastMessage?.displayName}</p>
+                  <p className="font-bold truncate">{chat.displayNames[0]}</p>
                   <p className="truncate">{chat.lastMessage?.content}</p>
                 </Link>
               </li>

diff --git a/app/_components/Footer.tsx b/app/_components/Footer.tsx
@@ -14,33 +14,33 @@ export default function Footer() {
         </div>
         <div className="flex flex-col sm:flex-row w-full justify-end flex-wrap gap-10 lg:gap-32">
           <div className="text-center flex flex-col gap-2">
-            <h3 className="font-semibold">Stacks</h3>
+            <h3 className="font-semibold">Equipo orgulloso</h3>
             <ul className="space-y-3">
-              <li>Sobre Nosotros</li>
-              <li>Otros Proyectos</li>
+              <li>Somos univallunos</li>
+              <li>Otros Proyectos en Github!</li>
               <li>
                 <a
                   href="https://github.com/Parchat"
                   className="text-white hover:text-purple-400 transition-colors duration-300"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  GitHub
+                  GitHub Parchat
                 </a>
               </li>
             </ul>
           </div>
           <div className="text-center flex flex-col gap-2">
-            <h3 className="font-semibold">Info</h3>
+            <h3 className="font-semibold">En las salas puedes</h3>
             <ul className="space-y-3">
-              <li>Información</li>
-              <li>Salas</li>
+              <li>Buscar</li>
+              <li>Crear</li>
               <li>
                 <Link
                   href="/login"
                   className="text-white hover:text-purple-400 transition-colors duration-300"
                 >
-                  Únete
+                  Unirse
                 </Link>
               </li>
             </ul>

diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx
@@ -1,10 +1,8 @@
 'use client';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useState } from 'react';
 
 export default function Header() {
-  const [opened, setOpened] = useState(false);
   return (
     <header>
       {/* Mobile */}
@@ -17,62 +15,15 @@ export default function Header() {
             <Link href="/login" className="bg-purple rounded p-2">
               Parchemos
             </Link>
-            <Link href="/login-gest">Invitado</Link>
-            <button onClick={() => setOpened(!opened)} className="text-white w-5">
-              {opened ? 'X' : '☰'}
-            </button>
           </div>
         </div>
-        <div
-          className={`${opened ? 'top-[10dvh]' : 'top-[-20dvh]'} transition-all duration-1000 ease-in-out w-[100dvw] h-[20dvh] bg-darkblue absolute z-10 border-t-2 border-t-purple border-b-2 border-b-purple`}
-        >
-          <ul className="flex flex-col justify-evenly items-center h-full w-full">
-            <li>
-              <Link href="/">Información</Link>
-            </li>
-            <li>
-              <Link href="/">Salas</Link>
-            </li>
-            <li>
-              <Link href="/">Contacto</Link>
-            </li>
-          </ul>
-        </div>
       </div>
 
       {/* Desktop */}
       <div className="w-full justify-between items-center gap-5 p-4 px-8 font-semibold text-white text-[14px] hidden sm:flex">
-        <Link href="/" className="items-center gap-4 hidden lg:block">
+        <Link href="/" className="items-center gap-4 block">
           <Image src="/w-logo.png" alt="ParChat Logo" width={160} height={20} draggable={false} />
         </Link>
-        <div className="flex">
-          <ul className="flex justify-between gap-12 text-slate-300">
-            <li>
-              <Link
-                href="/"
-                className="hover:text-violet-300 hover:tracking-wider transition-all duration-300"
-              >
-                Información
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="/"
-                className="hover:text-violet-300 hover:tracking-wider transition-all duration-300"
-              >
-                Salas
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="/"
-                className="hover:text-violet-300 hover:tracking-wider transition-all duration-300"
-              >
-                Contacto
-              </Link>
-            </li>
-          </ul>
-        </div>
         <div className="flex items-center gap-8">
           <Link
             href="/login"

diff --git a/public/parchat-logo.png b/public/parchat-logo.png