add prettier and reformat project

frontend/src/hooks/useAllChat.tsx

@@ -1,6 +1,6 @@
-import { atom, useAtom } from "jotai";
+import { atom, useAtom } from 'jotai'
 import { atomWithReducer, useReducerAtom } from 'jotai/utils'
-import { User } from "../background/types/roomData";
+import { User } from '../background/types/roomData'
 
 interface ChatMessage {
   content: string
@@ -9,7 +9,9 @@ interface ChatMessage {
   timestamp: number
 }
 
-export const allChatMessagesAtom = atomWithReducer([], (list: ChatMessage[], item: ChatMessage) => list.concat(item))
+export const allChatMessagesAtom = atomWithReducer([], (list: ChatMessage[], item: ChatMessage) =>
+  list.concat(item)
+)
 
 const useAllChat = () => {
   const [chatMessages, addChatMessage] = useAtom(allChatMessagesAtom)
@@ -17,5 +19,3 @@ const useAllChat = () => {
 }
 
 export default useAllChat
-
-

frontend/src/hooks/useBackendData.ts

@@ -1,30 +1,29 @@
-import { useEffect } from "react";
-import { UserInfo } from "../components/jitsi/types";
-import useAllChat from "./useAllChat";
-import useRoomData from "./useRoomData";
-import useWebSocketConnection from "./useWebSocketConnection";
+import { useEffect } from 'react'
+import { UserInfo } from '../components/jitsi/types'
+import useAllChat from './useAllChat'
+import useRoomData from './useRoomData'
+import useWebSocketConnection from './useWebSocketConnection'
 
 function useBackendData(userInfo: UserInfo) {
-  console.log("[Rooms] useBackendData");
-  const { onMessage, sendMessage, disconnect } =
-    useWebSocketConnection(userInfo);
+  console.log('[Rooms] useBackendData')
+  const { onMessage, sendMessage, disconnect } = useWebSocketConnection(userInfo)
 
-  const { roomData, setRoomData } = useRoomData();
+  const { roomData, setRoomData } = useRoomData()
 
   const { chatMesages, addChatMessage } = useAllChat()
 
   useEffect(() => {
     onMessage((messageString) => {
-      console.log("[Rooms] message from ws", messageString);
-      const messageObject = JSON.parse(messageString);
+      console.log('[Rooms] message from ws', messageString)
+      const messageObject = JSON.parse(messageString)
 
-      !!messageObject.roomsData && setRoomData(messageObject);
-      !!messageObject.content && addChatMessage(messageObject);
-      return disconnect;
-    });
-  }, [onMessage, setRoomData, disconnect]);
+      !!messageObject.roomsData && setRoomData(messageObject)
+      !!messageObject.content && addChatMessage(messageObject)
+      return disconnect
+    })
+  }, [onMessage, setRoomData, disconnect])
 
-  return { roomData, sendMessage };
+  return { roomData, sendMessage }
 }
 
-export default useBackendData;
+export default useBackendData

frontend/src/hooks/useConferenceData.ts

@@ -1,28 +1,28 @@
-import { useState } from "react";
-import { ConferenceData } from "../background/jitsi/eventListeners";
-import { UserInfo } from "../components/jitsi/types";
+import { useState } from 'react'
+import { ConferenceData } from '../background/jitsi/eventListeners'
+import { UserInfo } from '../components/jitsi/types'
 
 function useConferenceData(
   sendMessage: (message: string) => void,
   setUserInfo: (newData: UserInfo) => void
 ) {
-  const [conferenceData, setConferenceDataLocal] = useState<ConferenceData>();
+  const [conferenceData, setConferenceDataLocal] = useState<ConferenceData>()
 
   const setConferenceData = (newData: ConferenceData) => {
-    console.log("[Rooms] set conferenceData", conferenceData);
+    console.log('[Rooms] set conferenceData', conferenceData)
     if (conferenceData?.roomName !== newData.roomName) {
       // We joined a meeting
-      sendMessage(JSON.stringify({ roomName: newData.roomName }));
+      sendMessage(JSON.stringify({ roomName: newData.roomName }))
     }
     if (conferenceData?.displayName !== newData.displayName) {
       // We updated the username
-      sendMessage(JSON.stringify({ displayName: newData.displayName }));
+      sendMessage(JSON.stringify({ displayName: newData.displayName }))
     }
-    setConferenceDataLocal(newData);
-    setUserInfo({ displayName: newData.displayName, email: "" });
-  };
+    setConferenceDataLocal(newData)
+    setUserInfo({ displayName: newData.displayName, email: '' })
+  }
 
-  return { conferenceData, setConferenceData };
+  return { conferenceData, setConferenceData }
 }
 
-export default useConferenceData;
+export default useConferenceData

frontend/src/hooks/useJitsiEventCapture.tsx

@@ -1,28 +1,28 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { DisplayNameChangeEvent } from "../background/jitsi/eventListeners";
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { DisplayNameChangeEvent } from '../background/jitsi/eventListeners'
 
 function useJitsiEventCapture(displayNameChangeHandler: Function) {
   const [displayNameChangeEvent, setDisplayNameChangeEventLocal] =
-    useState<DisplayNameChangeEvent>();
+    useState<DisplayNameChangeEvent>()
 
   const setDisplayNameChangeEvent = useCallback(
     (newValue: DisplayNameChangeEvent) => {
-      console.log("[Rooms] newValue", newValue, displayNameChangeEvent);
+      console.log('[Rooms] newValue', newValue, displayNameChangeEvent)
       if (displayNameChangeEvent != newValue) {
-        setDisplayNameChangeEventLocal(newValue);
+        setDisplayNameChangeEventLocal(newValue)
       }
     },
     [setDisplayNameChangeEventLocal]
-  );
+  )
 
   useEffect(() => {
-    console.log("[Rooms] displayNameChangeHandler", displayNameChangeEvent);
+    console.log('[Rooms] displayNameChangeHandler', displayNameChangeEvent)
     displayNameChangeHandler &&
       displayNameChangeEvent &&
-      displayNameChangeHandler(displayNameChangeEvent);
-  }, [displayNameChangeEvent]);
+      displayNameChangeHandler(displayNameChangeEvent)
+  }, [displayNameChangeEvent])
 
-  return { setDisplayNameChangeEvent };
+  return { setDisplayNameChangeEvent }
 }
 
-export default useJitsiEventCapture;
+export default useJitsiEventCapture

frontend/src/hooks/useLocalUser.ts

@@ -1,34 +1,32 @@
-import { useState } from "react";
-import { USER_COOKIE_NAME } from "../background/constants";
-import { getCookie, setCookie } from "../background/cookies";
-import { UserInfo } from "../components/jitsi/types";
+import { useState } from 'react'
+import { USER_COOKIE_NAME } from '../background/constants'
+import { getCookie, setCookie } from '../background/cookies'
+import { UserInfo } from '../components/jitsi/types'
 
 function useLocalUser() {
-  const [userInfo, setUserInfoLocal] = useState<UserInfo>(() =>
-    getUserInfoFromCookie()
-  );
+  const [userInfo, setUserInfoLocal] = useState<UserInfo>(() => getUserInfoFromCookie())
 
   const setUserInfo = (newData: UserInfo) => {
-    storeUserInfoInCookie(newData);
-    setUserInfoLocal(newData);
-  };
+    storeUserInfoInCookie(newData)
+    setUserInfoLocal(newData)
+  }
 
-  return { userInfo, setUserInfo };
+  return { userInfo, setUserInfo }
 }
 
 function getUserInfoFromCookie(): UserInfo {
-  let cookie = getCookie(USER_COOKIE_NAME);
-  console.log("[Rooms] getUserNameFromCookie", cookie);
-  if (cookie) return JSON.parse(cookie);
+  let cookie = getCookie(USER_COOKIE_NAME)
+  console.log('[Rooms] getUserNameFromCookie', cookie)
+  if (cookie) return JSON.parse(cookie)
   return {
-    displayName: "Unknown traveller",
-    email: "",
-  };
+    displayName: 'Unknown traveller',
+    email: '',
+  }
 }
 
 function storeUserInfoInCookie(userInfo: UserInfo) {
-  console.log("[Rooms] storeUserInfoInCookie", userInfo);
-  setCookie(USER_COOKIE_NAME, JSON.stringify(userInfo));
+  console.log('[Rooms] storeUserInfoInCookie', userInfo)
+  setCookie(USER_COOKIE_NAME, JSON.stringify(userInfo))
 }
 
-export default useLocalUser;
+export default useLocalUser

frontend/src/hooks/useMeetingStarted.ts

@@ -1,7 +1,7 @@
-import { atom, useAtom } from "jotai";
+import { atom, useAtom } from 'jotai'
 
 const meetingStarted = atom(false)
 
-const useMeetingStarted = () => useAtom(meetingStarted);
+const useMeetingStarted = () => useAtom(meetingStarted)
 
 export default useMeetingStarted

frontend/src/hooks/useRoomData.ts

@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { UsersData } from "../background/types/roomData";
+import { useState } from 'react'
+import { UsersData } from '../background/types/roomData'
 
 function useRoomData() {
-  const [roomData, setRoomData] = useState<UsersData>();
+  const [roomData, setRoomData] = useState<UsersData>()
 
-  return { roomData, setRoomData };
+  return { roomData, setRoomData }
 }
 
-export default useRoomData;
+export default useRoomData

frontend/src/hooks/useRoomName.ts

@@ -1,5 +1,5 @@
-import { atom, useAtom } from "jotai";
-import { useCallback, useState } from "react";
+import { atom, useAtom } from 'jotai'
+import { useCallback, useState } from 'react'
 
 const roomNameAtom = atom(getRoomNameFromUrl())
 
@@ -8,48 +8,46 @@ function useRoomName() {
 
   const updateRoomName = useCallback(
     (newName: string) => {
-      setRoomName(newName);
-      console.log("[Rooms] update room name", newName);
+      setRoomName(newName)
+      console.log('[Rooms] update room name', newName)
     },
     [setRoomName]
-  );
+  )
 
   const updateAndSubmitRoomName = useCallback(
     (newName: string) => {
-      setRoomName(newName);
-      setRoomNameInUrl(newName);
-      setRoomNameInTitle(newName);
-      console.log("[Rooms] update and submit room name", newName);
+      setRoomName(newName)
+      setRoomNameInUrl(newName)
+      setRoomNameInTitle(newName)
+      console.log('[Rooms] update and submit room name', newName)
     },
     [setRoomName]
   )
 
   const submitRoomName = useCallback(() => {
-    setRoomNameInUrl(roomName);
-    setRoomNameInTitle(roomName);
-  }, [roomName]);
+    setRoomNameInUrl(roomName)
+    setRoomNameInTitle(roomName)
+  }, [roomName])
 
-  return { roomName, updateRoomName, updateAndSubmitRoomName, submitRoomName };
+  return { roomName, updateRoomName, updateAndSubmitRoomName, submitRoomName }
 }
 
 function getRoomNameFromUrl(): string {
-  const pathName = location.pathname;
-  const roomName = pathName
-    .substring(pathName.lastIndexOf("/"), pathName.length)
-    .replace("/", "");
-  console.log("[Rooms] Got roomName from url", roomName);
-  setRoomNameInTitle(roomName);
-  return roomName;
+  const pathName = location.pathname
+  const roomName = pathName.substring(pathName.lastIndexOf('/'), pathName.length).replace('/', '')
+  console.log('[Rooms] Got roomName from url', roomName)
+  setRoomNameInTitle(roomName)
+  return roomName
 }
 
 function setRoomNameInUrl(roomName: string) {
-  history.pushState(history.state, "_", roomName);
+  history.pushState(history.state, '_', roomName)
 }
 
 function setRoomNameInTitle(roomName: string) {
   if (!!roomName) {
-    document.title = roomName;
+    document.title = roomName
   }
 }
 
-export { useRoomName };
+export { useRoomName }

frontend/src/hooks/useWebSocketConnection.ts

@@ -1,50 +1,44 @@
-import { useCallback, useState } from "react";
-import { WEBSOCKET_URL } from "../background/constants";
-import { UserInfo } from "../components/jitsi/types";
+import { useCallback, useState } from 'react'
+import { WEBSOCKET_URL } from '../background/constants'
+import { UserInfo } from '../components/jitsi/types'
 
 const createWebSocketConnection = (userInfo: UserInfo) => {
-  const webSocket = new WebSocket(WEBSOCKET_URL);
-  console.log("[Rooms] createWebSocketConnection");
-  webSocket.addEventListener("open", (_: Event) =>
-    webSocket.send(JSON.stringify(userInfo))
-  );
+  const webSocket = new WebSocket(WEBSOCKET_URL)
+  console.log('[Rooms] createWebSocketConnection')
+  webSocket.addEventListener('open', (_: Event) => webSocket.send(JSON.stringify(userInfo)))
 
-  return webSocket;
-};
+  return webSocket
+}
 
 function useWebSocketConnection(userInfo: UserInfo) {
-  console.log("[Rooms] useWebSocketConnection");
+  console.log('[Rooms] useWebSocketConnection')
 
-  const [webSocketConnection] = useState<WebSocket>(() =>
-    createWebSocketConnection(userInfo)
-  );
+  const [webSocketConnection] = useState<WebSocket>(() => createWebSocketConnection(userInfo))
 
   const sendMessage = useCallback(
     (message: string) => {
       //if the socket's open, send a message:
       if (webSocketConnection.readyState === WebSocket.OPEN) {
-        console.log("[Rooms] sending to ws", message);
-        webSocketConnection.send(message);
+        console.log('[Rooms] sending to ws', message)
+        webSocketConnection.send(message)
       }
     },
     [webSocketConnection]
-  );
+  )
 
   const onMessage = useCallback(
     (messageHandler: (messageHandler: string) => void) => {
       const wsMessageHandler = (ev: MessageEvent<any>) => {
-        messageHandler(ev.data);
-      };
-      webSocketConnection.addEventListener("message", wsMessageHandler);
+        messageHandler(ev.data)
+      }
+      webSocketConnection.addEventListener('message', wsMessageHandler)
     },
     [webSocketConnection]
-  );
+  )
 
-  const disconnect = useCallback(webSocketConnection.close, [
-    webSocketConnection,
-  ]);
+  const disconnect = useCallback(webSocketConnection.close, [webSocketConnection])
 
-  return { onMessage, sendMessage, disconnect };
+  return { onMessage, sendMessage, disconnect }
 }
 
-export default useWebSocketConnection;
+export default useWebSocketConnection