refactor: Frontend VideoGrid and UI

src/components/StyledGridComponents.tsx

@@ -1,5 +1,18 @@
 import styled from 'styled-components';
 
+const UIWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const UITogglesWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: -20px;
+`;
+
 const VideoGridWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -8,6 +21,20 @@ const VideoGridWrapper = styled.div`
   height: 100%;
 `;
 
+const RTCComponentsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 30px 10px 30px 10px;
+  max-height: 100vh;
+  position: relative; /* Change this to relative */
+  width: 70%;
+  border: 2px solid #888;
+  border-radius: 10px;
+  background-color: #1a1a1a;
+`;
+
 const VideoGridContainer = styled.div`
   display: grid;
   grid-gap: 10px;
@@ -29,4 +56,11 @@ const VideoGridItem = styled.div`
   border-radius: 10px;
 `;
 
-export { VideoGridWrapper, VideoGridContainer, VideoGridItem };
+export {
+  UIWrapper,
+  UITogglesWrapper,
+  RTCComponentsWrapper,
+  VideoGridWrapper,
+  VideoGridContainer,
+  VideoGridItem,
+};

src/components/ToggleButton.tsx → src/components/StyledUIComponents.tsx

@@ -1,5 +1,19 @@
 import styled, { keyframes } from 'styled-components';
 
+const UIWrapper = styled.div`
+  position: relative; /* Set the position to relative */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 6px;
+  align-items: center;
+  padding: 8px;
+  background-color: rgba(154, 154, 154, 0.5);
+  border-radius: 30px;
+  bottom: 2%;
+  backdrop-filter: blur(2px);
+`;
+
 const breatheAnimation = keyframes`
   0% { transform: scale(1) }
   30% { transform: scale(1.2) }
@@ -59,4 +73,4 @@ const ToggledOnImage = styled(ToggleImage)`
   }
 `;
 
-export { ToggleButton, ToggleImage, ToggledOffImage, ToggledOnImage };
+export { UIWrapper, ToggleButton, ToggleImage, ToggledOffImage, ToggledOnImage };

src/components/UI.tsx

@@ -1,20 +1,11 @@
 import { useState } from 'react';
-import styled from 'styled-components';
-import { ToggleButton, ToggledOffImage, ToggledOnImage } from './ToggleButton';
-
-const UIWrapper = styled.div`
-  position: relative; /* Set the position to relative */
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 6px;
-  align-items: center;
-  padding: 8px;
-  background-color: rgba(154, 154, 154, 0.5);
-  border-radius: 30px;
-  bottom: 2%;
-  backdrop-filter: blur(2px);
-`;
+import UIButton from './UIButton';
+import {
+  UIWrapper,
+  ToggleButton,
+  ToggledOffImage,
+  ToggledOnImage,
+} from './StyledUIComponents';
 
 const UI = ({
   onToggleChat,
@@ -54,55 +45,40 @@ const UI = ({
 
   return (
     <UIWrapper>
-      <ToggleButton onClick={toggleMuted} data-circle="true">
-        <ToggledOffImage
-          src="./src/assets/mic.png"
-          data-is-toggled={isMuted.toString()}
-        />
-        <ToggledOnImage
-          src="./src/assets/ui_muted.png"
-          data-is-toggled={isMuted.toString()}
-        />
-      </ToggleButton>
+      <UIButton
+        onToggleState={toggleMuted}
+        isState={isMuted}
+        offImage="./src/assets/mic.png"
+        onImage="./src/assets/ui_muted.png"
+        dataCircle="true"
+      />
 
-      <ToggleButton onClick={toggleHidden} data-circle="true">
-        <ToggledOffImage
-          src="./src/assets/cam.png"
-          data-is-toggled={isHidden.toString()}
-        />
-        <ToggledOnImage
-          src="./src/assets/ui_cam_hidden.png"
-          data-is-toggled={isHidden.toString()}
-        />
-      </ToggleButton>
+      <UIButton
+        onToggleState={toggleHidden}
+        isState={isHidden}
+        offImage="./src/assets/cam.png"
+        onImage="./src/assets/ui_cam_hidden.png"
+        dataCircle="true"
+      />
 
-      <ToggleButton onClick={toggleIsChatShown} data-circle="true">
-        <ToggledOffImage
-          src="./src/assets/chat.png"
-          data-is-toggled={isChatShown.toString()}
-        />
-        <ToggledOnImage
-          src="./src/assets/ui_chat_shown.png"
-          data-is-toggled={isChatShown.toString()}
-        />
-      </ToggleButton>
+      <UIButton
+        onToggleState={toggleIsChatShown}
+        isState={isChatShown}
+        offImage="./src/assets/chat.png"
+        onImage="./src/assets/ui_chat_shown.png"
+        dataCircle="true"
+      />
 
-      <ToggleButton
-        onClick={toggleIsConnected}
-        data-width="70px"
-        data-bg-color="#01ce4c"
-        data-toggled-bg-color="red"
+      <UIButton
+        onToggleState={toggleIsConnected}
+        isState={isConnected}
+        offImage="./src/assets/connect.png"
+        onImage="./src/assets/disconnect.png"
+        dataWidth="70px"
+        dataBgColor="#01ce4c"
+        dataToggledBgColor="red"
         className={isConnected ? 'toggled' : ''}
-      >
-        <ToggledOffImage
-          src="./src/assets/connect.png"
-          data-is-toggled={isConnected.toString()}
-        />
-        <ToggledOnImage
-          src="./src/assets/disconnect.png"
-          data-is-toggled={isConnected.toString()}
-        />
-      </ToggleButton>
+      />
     </UIWrapper>
   );
 };

src/components/UIButton.tsx

@@ -0,0 +1,45 @@
+import {
+  ToggleButton,
+  ToggledOffImage,
+  ToggledOnImage,
+} from './StyledUIComponents';
+
+interface buttonProps {
+  onToggleState: () => void;
+  isState: boolean;
+  offImage: string;
+  onImage: string;
+  dataCircle?: string;
+  'data-width'?: string;
+  'data-bg-color'?: string;
+  'data-toggled-bg-color'?: string;
+  className?: string;
+}
+
+const UIButton = ({
+  onToggleState,
+  isState,
+  offImage,
+  onImage,
+  dataCircle,
+  dataWidth,
+  dataBgColor,
+  dataToggledBgColor,
+  className,
+}: buttonProps) => {
+  return (
+    <ToggleButton
+      onClick={onToggleState}
+      data-circle={dataCircle}
+      data-width={dataWidth}
+      data-bg-color={dataBgColor}
+      data-toggled-bg-color={dataToggledBgColor}
+      className={className}
+    >
+      <ToggledOffImage src={offImage} data-is-toggled={isState.toString()} />
+      <ToggledOnImage src={onImage} data-is-toggled={isState.toString()} />
+    </ToggleButton>
+  );
+};
+
+export default UIButton;

src/components/VideoGrid.jsx

@@ -2,42 +2,16 @@ import React, { useState } from 'react';
 import SelfVideo from './SelfVideo';
 import PeerVideo from './PeerVideo';
 import {
+  UIWrapper,
+  UITogglesWrapper,
   VideoGridWrapper,
   VideoGridContainer,
   VideoGridItem,
+  RTCComponentsWrapper,
 } from './StyledGridComponents';
 import UI from './UI';
 import Chat from './Chat';
 
-import styled from 'styled-components';
-
-const UIWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const UITogglesWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: -20px;
-`;
-
-const RTCComponentsWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 30px 10px 30px 10px;
-  max-height: 100vh;
-  position: relative; /* Change this to relative */
-  width: 70%;
-  border: 2px solid #888;
-  border-radius: 10px;
-  background-color: #1a1a1a;
-`;
-
 const VideoGrid = ({
   consumers,
   clientConnection,
@@ -52,7 +26,6 @@ const VideoGrid = ({
 }) => {
   const [isChatShown, setIsChatShown] = useState(false);
   const consumerCount = consumers.size;
-  // const consumerCount = consumers.length;
   let columns = 1;
   let rows = 1;
 
@@ -79,7 +52,6 @@ const VideoGrid = ({
 
   const handleToggleChat = (value) => {
     setIsChatShown(value);
-    console.log('toggling chat');
   };
 
   return (