From f3e6699ca51dfe652d01d1b4a5c7f6997fef2318 Mon Sep 17 00:00:00 2001
From: qvalentin <valentin.theodor@web.de>
Date: Tue, 4 Jul 2023 20:05:58 +0200
Subject: [PATCH] resizeable sidebar and meeting names on startpage

---
 frontend/src/App.tsx                        |  1 +
 frontend/src/components/meeting/Meeting.css |  4 +++
 frontend/src/components/meeting/Meeting.tsx | 36 +++++++++++++++++++--
 frontend/src/components/sidebar/Sidebar.css |  1 +
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/meeting/Meeting.css

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8fde18d..7206931 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -20,6 +20,7 @@ function App() {
           conferenceData={conferenceData}
           setConferenceData={setConferenceData}
           userInfo={userInfo}
+          usersData={roomData}
         />
       </div>
     )
diff --git a/frontend/src/components/meeting/Meeting.css b/frontend/src/components/meeting/Meeting.css
new file mode 100644
index 0000000..9cbe859
--- /dev/null
+++ b/frontend/src/components/meeting/Meeting.css
@@ -0,0 +1,4 @@
+.meeting-quickjoin {
+  text-align: center
+
+}
diff --git a/frontend/src/components/meeting/Meeting.tsx b/frontend/src/components/meeting/Meeting.tsx
index ccc2b1f..dfd4b73 100644
--- a/frontend/src/components/meeting/Meeting.tsx
+++ b/frontend/src/components/meeting/Meeting.tsx
@@ -1,19 +1,26 @@
 import { ConferenceData } from '../../background/jitsi/eventListeners'
+import { UsersData } from '../../background/types/roomData'
 import useMeetingStarted from '../../hooks/useMeetingStarted'
 import { useRoomName } from '../../hooks/useRoomName'
 import JitsiEntrypoint from '../jitsi/JitsiEntrypoint'
 import { UserInfo } from '../jitsi/types'
 import MeetingNameInput from './MeetingNameInput'
+import './Meeting.css'
 
 interface Props {
   conferenceData: ConferenceData | undefined
   setConferenceData: (newData: ConferenceData) => void
   userInfo: UserInfo
+  usersData: UsersData
 }
 
-function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
+function Meeting(props: Props) {
+  const { conferenceData, setConferenceData, userInfo, usersData } = props
+  console.log("[Rooms] meeting usersData", props)
   const [meetingStarted] = useMeetingStarted()
   const { roomName } = useRoomName()
+  const [_, setMeetingStarted] = useMeetingStarted()
+  const { updateAndSubmitRoomName: updateAndSubmitRoomName } = useRoomName()
 
   if (meetingStarted) {
     return (
@@ -26,7 +33,32 @@ function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
     )
   }
 
-  return <MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
+  return (
+    <div>
+      <MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
+      <div className="meeting-quickjoin">
+        {usersData?.roomsData.map((roomData) => {
+          return (
+            <>
+              <h3>
+                <a
+                  href="#"
+                  onClick={() => {
+                    updateAndSubmitRoomName(roomData.roomName)
+                    setMeetingStarted(true)
+                  }}
+                >
+                  {roomData.roomName}
+                </a>
+              </h3>
+              {roomData.participants.map((participant) => (
+                <div key={participant.jid}> {participant.displayName} </div>
+              ))}
+            </>
+          )
+        })}
+      </div>
+    </div>)
 }
 
 export default Meeting
diff --git a/frontend/src/components/sidebar/Sidebar.css b/frontend/src/components/sidebar/Sidebar.css
index 40a20cb..d74aba8 100644
--- a/frontend/src/components/sidebar/Sidebar.css
+++ b/frontend/src/components/sidebar/Sidebar.css
@@ -1,4 +1,5 @@
 .sidebar {
+  resize: horizontal;
   display: flex;
   flex-direction: column;
   white-space: nowrap;