From 8c30ea8057c8e92d949c2c0734691e70e8f42bb8 Mon Sep 17 00:00:00 2001
From: Radu Cazacu <cazacuraduic@gmail.com>
Date: Wed, 30 Aug 2023 18:41:12 +0300
Subject: [PATCH] Correct peer representation

---
 components/common/Layout/Layout.tsx           | 102 +++++++++++-------
 components/ui/workspacesBar/WorkspaceBar.tsx  |  20 ++--
 framework/redux/slices/streamHandler.slice.ts |   1 +
 pages/server/[server].tsx                     |   9 +-
 4 files changed, 73 insertions(+), 59 deletions(-)

diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx
index 1880d85..3c889c6 100644
--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@@ -53,6 +53,13 @@ export const Layout = ({ children }: Props) => {
   const current_sessions = useAppSelector(
     (state) => state.context.sessions.current_sessions
   );
+  const current_server_cid = useAppSelector(
+    (state) => state.context.sessions.current_used_session_server
+  );
+
+  console.log(current_sessions);
+
+  const peers = Object.keys(current_sessions[current_server_cid] ?? {}).length;
 
   return (
     <ApiProvider>
@@ -159,29 +166,33 @@ export const Layout = ({ children }: Props) => {
                               Your Peers
                             </div>
                             <ul role="list" className="-mx-2 mt-2 space-y-1">
-                              {Object.keys(current_sessions).map((key) => (
-                                <li key={key}>
-                                  <a
-                                    href={`/server/${currentUsedSessionCid}/${current_sessions[key]}`}
-                                    className={classNames(
-                                      key
-                                        ? 'bg-gray-800 text-white'
-                                        : 'text-gray-400 hover:text-white hover:bg-gray-800',
-                                      'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
-                                    )}
-                                  >
-                                    <span className="relative inline-block">
-                                      <img
-                                        className="h-6 w-6 rounded-full"
-                                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                                        alt=""
-                                      />
-                                      <span className="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full bg-gray-300 ring-2 ring-white" />
-                                    </span>
-                                    <span className="truncate">{key}</span>
-                                  </a>
-                                </li>
-                              ))}
+                              {peers === 0 ? (
+                                <></>
+                              ) : (
+                                Object.keys(current_sessions).map((key) => (
+                                  <li key={key}>
+                                    <a
+                                      href={`/server/${currentUsedSessionCid}/${current_sessions[key]}`}
+                                      className={classNames(
+                                        key
+                                          ? 'bg-gray-800 text-white'
+                                          : 'text-gray-400 hover:text-white hover:bg-gray-800',
+                                        'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                                      )}
+                                    >
+                                      <span className="relative inline-block">
+                                        <img
+                                          className="h-6 w-6 rounded-full"
+                                          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                          alt=""
+                                        />
+                                        <span className="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full bg-gray-300 ring-2 ring-white" />
+                                      </span>
+                                      <span className="truncate">{key}</span>
+                                    </a>
+                                  </li>
+                                ))
+                              )}
                             </ul>
                           </li>
                           <li>
@@ -292,24 +303,33 @@ export const Layout = ({ children }: Props) => {
                     Your Peers
                   </div>
                   <ul role="list" className="-mx-2 mt-2 space-y-1">
-                    {Object.keys(current_sessions).map((key) => (
-                      <li key={key}>
-                        <Link
-                          href={`/server/${currentUsedSessionCid}/${current_sessions[key]}`}
-                          className={classNames(
-                            key
-                              ? 'bg-gray-800 text-white'
-                              : 'text-gray-400 hover:text-white hover:bg-gray-800',
-                            'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
-                          )}
-                        >
-                          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">
-                            {key[0]}
-                          </span>
-                          <span className="truncate">{key}</span>
-                        </Link>
-                      </li>
-                    ))}
+                    {peers === 0 ? (
+                      <></>
+                    ) : (
+                      Object.keys(current_sessions).map((key) => (
+                        <li key={key}>
+                          <a
+                            href={`/server/${currentUsedSessionCid}/${current_sessions[key]}`}
+                            className={classNames(
+                              key
+                                ? 'bg-gray-800 text-white'
+                                : 'text-gray-400 hover:text-white hover:bg-gray-800',
+                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                            )}
+                          >
+                            <span className="relative inline-block">
+                              <img
+                                className="h-6 w-6 rounded-full"
+                                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                alt=""
+                              />
+                              <span className="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full bg-gray-300 ring-2 ring-white" />
+                            </span>
+                            <span className="truncate">{key}</span>
+                          </a>
+                        </li>
+                      ))
+                    )}
                   </ul>
                 </li>
                 {/* {sec type} */}
diff --git a/components/ui/workspacesBar/WorkspaceBar.tsx b/components/ui/workspacesBar/WorkspaceBar.tsx
index bdc7fc7..f7476d0 100644
--- a/components/ui/workspacesBar/WorkspaceBar.tsx
+++ b/components/ui/workspacesBar/WorkspaceBar.tsx
@@ -6,6 +6,7 @@ import {
 import Link from 'next/link';
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { setCurrentServer } from 'framework/redux/slices/streamHandler.slice';
+
 function WorkspaceBar({
   onOpen,
 }: {
@@ -16,16 +17,6 @@ function WorkspaceBar({
   );
 
   const dispatch = useAppDispatch();
-  const [sessionsArr, setSessions] = useState<Array<any>>([]);
-
-  useEffect(() => {
-    for (const session in sessions) {
-      setSessions((prev) => {
-        if (prev.includes(session)) return prev; // if session already exists, don't add it
-        return [...prev, session];
-      });
-    }
-  }, [sessions]);
 
   return (
     <div
@@ -40,14 +31,15 @@ function WorkspaceBar({
           <span className="text-xl font-medium leading-none text-white">+</span>
         </span>
         {Object.keys(sessions).map((key, i) => {
-          const el = sessions[key];
           return (
             <Link
-              key={el.cid}
+              key={key}
               href={{
-                pathname: `/server/${el}`,
+                pathname: `/server/${key}`,
+              }}
+              onClick={() => {
+                dispatch(setCurrentServer(key));
               }}
-              onClick={() => dispatch(setCurrentServer(el))}
             >
               <img
                 key={i}
diff --git a/framework/redux/slices/streamHandler.slice.ts b/framework/redux/slices/streamHandler.slice.ts
index 025bba3..55de12f 100644
--- a/framework/redux/slices/streamHandler.slice.ts
+++ b/framework/redux/slices/streamHandler.slice.ts
@@ -60,6 +60,7 @@ const streamExecSlice = createSlice({
         peer_connections: {};
       }> = action.payload;
 
+      console.log('Before', activeSessions);
       for (const session of activeSessions) {
         const cid = session.cid;
         const peer_connections = session.peer_connections;
diff --git a/pages/server/[server].tsx b/pages/server/[server].tsx
index 3abad07..bbf685e 100644
--- a/pages/server/[server].tsx
+++ b/pages/server/[server].tsx
@@ -1,15 +1,16 @@
 import { Layout } from '@components/common/Layout';
-import React, { useEffect } from 'react';
+import React from 'react';
 import Chat from '@components/chat';
 import { useRouter } from 'next/router';
 import { useAppSelector } from 'framework/redux/store';
 
 export default function SpecificServer({ connErr }: { connErr: string }) {
   const router = useRouter();
+  const serverCid = router.query.server;
 
-  const current_used_session_server = useAppSelector(
-    (state) => state.context.sessions.current_used_session_server
-  );
+  // const current_used_session_server = useAppSelector(
+  //   (state) => state.context.sessions.current_used_session_server
+  // );
 
   return (
     <>