fixing images in profile and add aside room

app/(auth)/login/_lib/_actions/session.ts

@@ -12,6 +12,19 @@ export async function createSession(token: string) {
   });
 }
 
+export async function createPendingPath(path: string) {
+  (await cookies()).set('pendingPath', path, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 60 * 60 * 24 * 1, // 1 dia
+  });
+}
+
+export async function deletePendingPath() {
+  (await cookies()).delete('pendingPath');
+}
+
 export async function deleteSession() {
   (await cookies()).delete('session');
 }

app/(protected)/dashboard/_apis/messages.ts

@@ -5,6 +5,7 @@ import { IMessage } from '@/app/_lib/_interfaces/IMessage';
 export const getRoomMessages = async (roomId: string) => {
   try {
     const res = await myAxios.get<IMessage[]>(`/api/v1/chat/rooms/${roomId}/messages`);
+    console.log('Fetched room messages:', res.data);
     return res.data;
   } catch (error) {
     console.error('Error fetching room messages:', error);

app/_components/AsideDashboard.tsx

@@ -47,17 +47,15 @@ export default function AsideDashboard() {
             </ul>
           </nav>
           <div className="flex flex-col justify-center items-center gap-5">
-            <div className="flex items-center gap-2 w-full">
-              <Image
+            <div className="flex flex-col gap-2 w-full">
+              {/* <Image
                 width={50}
                 height={50}
                 alt="image of user"
                 src="https://picsum.photos/400/300"
                 className="rounded-full w-12 h-12 object-cover"
-              />
-              <div>
-                <h3 className="font-semibold">{user?.displayName}</h3>
-              </div>
+              /> */}
+              <h3 className="font-semibold text-center">{user?.displayName}</h3>
             </div>
             <button
               className="bg-purple rounded p-2 w-[80%] cursor-pointer font-bold"

app/_components/AsideRoom.tsx

@@ -1,9 +1,64 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import { getRoomsImIn } from '../(protected)/dashboard/_apis/rooms';
+import { getAllChats } from '../(protected)/dashboard/_apis/chats';
+import LoadingEmoji from './LoadingEmoji';
+import Link from 'next/link';
+
 export default function AsideRoom() {
+  const { data: rooms, isLoading } = useQuery({
+    queryKey: ['my-rooms'],
+    queryFn: getRoomsImIn,
+  });
+
+  const { data: chats, isLoading: chatsLoading } = useQuery({
+    queryKey: ['all-chats-dashboard'],
+    queryFn: getAllChats,
+  });
+
+  if (chatsLoading || isLoading) {
+    return (
+      <aside className="hidden lg:flex flex-col w-60 bg-semidarkpurple h-full border-r border-gray-700">
+        <div className="flex flex-col p-4 overflow-y-auto">
+          <LoadingEmoji />
+        </div>
+      </aside>
+    );
+  }
+
   return (
     <aside className="hidden lg:flex flex-col w-60 bg-semidarkpurple h-full border-r border-gray-700">
       <div className="flex flex-col p-4 overflow-y-auto">
-        {/* Aquí puedes agregar la lista de salas de chat */}
-        <p className="text-gray-400">Lista de salas de chat aquí</p>
+        <h2 className="font-bold text-lg">Chats directos</h2>
+        {chats && chats.length > 0 ? (
+          <ul className="list-none">
+            {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>{chat.lastMessage.content}</p>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-gray-400">Aun no tienes conversaciones</p>
+        )}
+        <h2 className="font-bold text-lg">Salas</h2>
+        {rooms && rooms.length > 0 ? (
+          <ul className="list-none">
+            {rooms.map(room => (
+              <li key={room.id} className="text-white p-2 bg-purple-2 rounded-lg mb-2">
+                <Link href={`/dashboard/room/${room.id}`}>
+                  <p className="font-bold truncate">{room.name}</p>
+                  <p>{room.lastMessage.content}</p>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-gray-400">Aun no tienes conversaciones</p>
+        )}
       </div>
     </aside>
   );

middleware.ts

@@ -1,5 +1,6 @@
 import { cookies } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
+import { createPendingPath, deletePendingPath } from './app/(auth)/login/_lib/_actions/session';
 const protectedRoutes = ['/dashboard'];
 const publicRoutes = ['/login', '/login-gest'];
 
@@ -14,9 +15,18 @@ export default async function middleware(req: NextRequest) {
   const session = cookie ? cookie : null;
 
   if (isProtectedRoute && !session) {
+    await createPendingPath(path);
     return NextResponse.redirect(new URL('/login', req.url));
   }
 
+  // Obtener la ruta pendiente
+  const pendingPath = (await cookies()).get('pendingPath')?.value;
+  if (pendingPath && session) {
+    console.log('Redirigiendo a la ruta pendiente:', pendingPath);
+    await deletePendingPath();
+    return NextResponse.redirect(new URL(pendingPath, req.url));
+  }
+
   if (isPublicRoute && session) {
     return NextResponse.redirect(new URL('/dashboard', req.url));
   }