Merge branch 'dev' into feature/finalReadme

Author: InvectivusTaco

CHANGE_LOG.md

@@ -9,7 +9,7 @@
 
 - **Developer Improvement:**
   - Fixed testing suite compatability issues and added 30 new tests for new features
-  - Added 264 JSDoc comment blocks throughout the codebase
+  - Added 273 JSDoc comment blocks throughout the codebase
 - **User Features:**
   - **Material UI Components:**
     - Integrated 49 new, pre-styled Material UI components

__tests__/BottomTabs.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect } from 'vitest';
 import {
   fireEvent,
   render,
@@ -26,19 +26,18 @@ import store from '../app/src/redux/store';
 
 describe('Bottom Panel Render test', () => {
   it('should render all six tabs', () => {
-   const { unmount } = render(
+    const { unmount } = render(
       <Provider store={store}>
         <BottomTabs />
       </Provider>
     );
-    expect(screen.getAllByRole('tab')).toHaveLength(8);
+    expect(screen.getAllByRole('tab')).toHaveLength(7);
     expect(screen.getByText('Component Tree')).toBeDefined();
     expect(screen.getByText('Creation Panel')).toBeDefined();
     expect(screen.getByText('Customization')).toBeDefined();
     expect(screen.getByText('CSS Editor')).toBeDefined();
     expect(screen.getByText('Context Manager')).toBeDefined();
     expect(screen.getByText('State Manager')).toBeDefined();
-    expect(screen.getByText('MUI Props')).toBeDefined();
     unmount();
   });
 });
@@ -54,9 +53,7 @@ describe('Creation Panel', () => {
     fireEvent.click(screen.getByText('Create'));
 
     await waitFor(() => {
-      expect(
-        screen.getByText('Component name cannot be blank.')
-      ).toBeDefined();
+      expect(screen.getByText('Component name cannot be blank.')).toBeDefined();
     });
     unmount();
   });
@@ -83,7 +80,7 @@ describe('Creation Panel', () => {
     });
     unmount();
   });
-})
+});
 
 describe('HTML Panel', () => {
   it('should invalidate empty field in HTML Tag tag', async () => {
@@ -211,10 +208,14 @@ describe('Customization Panel', () => {
     );
     expect(screen.getByText('Parent Component:')).toBeDefined();
     expect(screen.getByText('App')).toBeDefined();
-    expect(screen.getByText('Drag or click an html element to the canvas to see what happens!')).toBeDefined();
+    expect(
+      screen.getByText(
+        'Drag or click an html element to the canvas to see what happens!'
+      )
+    ).toBeDefined();
     unmount();
   });
-})
+});
 
 describe('Canvas', () => {
   it('Should render all buttons and inputs when Canvas has element', async () => {
@@ -224,7 +225,7 @@ describe('Canvas', () => {
           <DndProvider backend={HTML5Backend}>
             <DragDropPanel />
             <MainContainer />
-            <CustomizationPanel isThemeLight={true}/>
+            <CustomizationPanel isThemeLight={true} />
           </DndProvider>
         </BrowserRouter>
       </Provider>

app/src/components/bottom/BottomTabs.tsx

@@ -11,7 +11,6 @@ import StylesEditor from './StylesEditor';
 import Tree from '../../tree/TreeChart';
 import ContextManager from '../ContextAPIManager/ContextManager';
 import StateManager from '../StateManagement/StateManagement';
-import MUIProps from './MUIProps';
 import makeStyles from '@mui/styles/makeStyles';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
@@ -91,9 +90,9 @@ const BottomTabs = (props): JSX.Element => {
               indicator: classes.tabsIndicator
             }}
             variant="scrollable"
-            scrollButtons="auto" 
+            scrollButtons="auto"
           >
-            <Tab 
+            <Tab
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Live Chat"
               onClick={showBottomPanel}
@@ -132,11 +131,6 @@ const BottomTabs = (props): JSX.Element => {
               label="State Manager"
               onClick={showBottomPanel}
             />
-            <Tab
-              classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-              label="MUI Props"
-              onClick={showBottomPanel}
-            />
           </Tabs>
 
           <div className={classes.projectTypeWrapper}>
@@ -177,8 +171,13 @@ const BottomTabs = (props): JSX.Element => {
           {tab === 3 && <StylesEditor theme={theme} setTheme={setTheme} />}
           {tab === 4 && <Tree data={components} />}
           {tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
-          {tab === 6 && (<StateManager theme={theme} setTheme={setTheme} isThemeLight={isThemeLight} />)}
-          {tab === 7 && <MUIProps theme={theme} setTheme={setTheme} />}  
+          {tab === 6 && (
+            <StateManager
+              theme={theme}
+              setTheme={setTheme}
+              isThemeLight={isThemeLight}
+            />
+          )}
         </div>
       </div>
     </MeetingProvider>

app/src/components/bottom/ChatRoom.tsx

@@ -5,6 +5,40 @@ import { emitEvent } from '../../helperFunctions/socket';
 import Videomeeting from './VideoMeeting';
 import { Send } from '@mui/icons-material';
 
+/**
+ * Chatroom component for handling and displaying chat messages within a collaboration room.
+ * This component integrates with the Redux store to access and manage chat-related states such as user details, room code, and messages.
+ * It also provides a real-time chat interface that allows users to send messages that are displayed in a styled format based on the sender.
+ *
+ * @component
+ * @example
+ * return <Chatroom />
+ *
+ * @returns {JSX.Element} The Chatroom component with interactive chat and video meeting functionalities.
+ *
+ * Props:
+ * - userName (string): The current user's name.
+ * - roomCode (string): The unique code for the current chat room.
+ * - messages (array): An array of message objects that contains details like message type, sender's username, and the message content.
+ * - userJoinCollabRoom (boolean): A boolean state that indicates whether the user has joined a collaborative room.
+ *
+ * Redux State:
+ * - userName (string): The user's name fetched from the Redux store.
+ * - roomCode (string): The room code for the current session.
+ * - messages (array): List of messages in the current chat room.
+ * - userJoinCollabRoom (boolean): Indicates if the user has joined a collaboration room, affecting visibility of certain UI elements.
+ *
+ * Styles:
+ * - wrapperStyles: Styles for the main message container.
+ * - inputContainerStyles: Styles for the input container.
+ * - inputStyles: Styles for the text input where users type their messages.
+ * - buttonStyles: Styles for the send button.
+ *
+ * Functions:
+ * - handleSubmit: Handles the submission of the chat form to send a message.
+ * - handleMessageContainerStyle: Returns styling for message bubbles based on the message type and sender.
+ * - renderMessages: Maps through the `messages` array and renders each message using specific styles.
+ */
 const Chatroom = (props): JSX.Element => {
   const { userName, roomCode, messages, userJoinCollabRoom } = useSelector(
     (store: RootState) => store.roomSlice

app/src/components/bottom/MUIProps.tsx

@@ -21,6 +21,47 @@ import VideocamIcon from '@mui/icons-material/Videocam';
 import VideocamOffIcon from '@mui/icons-material/VideocamOff';
 import VideoMeetingControl from './VideoMeetingControl';
 
+/**
+ * Videomeeting component that integrates video and audio functionalities for a meeting using VideoSDK.
+ * It handles user interactions such as joining/leaving a meeting, enabling/disabling the microphone, and camera.
+ * It uses the `useMeeting` and `useParticipant` hooks from the VideoSDK to manage meeting states and participant data.
+ *
+ * @component
+ * @example
+ * return <Videomeeting />
+ *
+ * @returns {JSX.Element} The Videomeeting component providing video and audio interaction within a meeting environment.
+ *
+ * Redux State:
+ * - meetingId (string): The unique identifier for the current meeting.
+ * - userJoinCollabRoom (boolean): Indicates if the user has joined a collaborative room.
+ * - userJoinMeetingStatus (string | null): Represents the current user's meeting join status.
+ * - meetingParticipants (array): Array of participant IDs currently in the meeting.
+ * - useMic (boolean): State to track if the user's microphone is active.
+ * - useWebcam (boolean): State to track if the user's webcam is active.
+ *
+ * Props:
+ * - meetingId (string): Unique identifier for the meeting.
+ * - userJoinCollabRoom (boolean): Indicates whether the user has joined a collaboration room.
+ * - userJoinMeetingStatus (string | null): Indicates the user's current status in the meeting.
+ * - meetingParticipants (array): IDs of participants in the meeting.
+ * - useMic (boolean): Indicates if the microphone is being used.
+ * - useWebcam (boolean): Indicates if the webcam is active.
+ *
+ * Functions:
+ * - onMeetingLeave(): Handles actions when leaving a meeting, such as updating Redux states.
+ * - handleUserInfoStyle(isLocalParticipant: boolean): Provides styling for user information based on whether the participant is local.
+ * - ParticipantView({ participantId, isLocalParticipant }): Renders individual participant views including video and audio components.
+ * - MeetingView({ onMeetingLeave }): Manages the entire meeting view, including joining and leaving functionalities, and displaying all participants.
+ * - TurnOffCameraDisplay(): Displays an icon when the camera is turned off.
+ *
+ * Hooks:
+ * - useMemo: Used for memoizing the video stream creation.
+ * - useEffect: Handles side effects related to microphone stream management.
+ * - useRef: References to HTML audio elements for real-time audio playback.
+ * - useDispatch: To dispatch Redux actions.
+ * - useSelector: To access Redux state.
+ */
 const Videomeeting = (props): JSX.Element => {
   const dispatch = useDispatch();
   const {

app/src/components/bottom/VideoMeeting.tsx

@@ -22,7 +22,40 @@ enum ButtonType {
   WEBCAM = 'Webcam'
 }
 
-const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
+/**
+ * VideoMeetingControl is a component that provides user interface controls for managing video and audio settings
+ * during a video meeting. It includes buttons to toggle microphone and webcam states, and to leave the meeting.
+ * This component utilizes the VideoSDK's `useMeeting` hook for control functionality and interacts with Redux to manage
+ * application state.
+ *
+ * @component
+ * @example
+ * const props = {
+ *   userJoinMeetingStatus: 'JOINED',
+ *   useWebcam: true,
+ *   useMic: true
+ * }
+ * return <VideoMeetingControl {...props} />
+ *
+ * @param {Object} props - The props object.
+ * @param {string} props.userJoinMeetingStatus - Current status of the user's meeting join process.
+ * @param {boolean} props.useWebcam - Indicates whether the webcam is currently activated.
+ * @param {boolean} props.useMic - Indicates whether the microphone is currently activated.
+ *
+ * Redux State:
+ * - userJoinMeetingStatus (string): Reflects whether the user has joined the meeting.
+ * - useMic (boolean): State to track if the user's microphone is active.
+ * - useWebcam (boolean): State to track if the user's webcam is active.
+ *
+ * Functions:
+ * - handleButtonHover(button: string, hovered: boolean): Manages hover state changes for control buttons.
+ * - toggleMic(): Toggles the microphone on or off.
+ * - toggleWebcam(): Toggles the webcam on or off.
+ * - leave(): Function from useMeeting hook that is called to leave the meeting.
+ *
+ * @returns {JSX.Element | null} Renders the control bar with microphone, webcam, and call end buttons, or null if the user has not joined.
+ */
+const VideoMeetingControl: React.FC<VideoMeetingControlProps> = (): JSX.Element | null => {
   const { leave, toggleMic, toggleWebcam } = useMeeting();
 
   const [callEndHovered, setCallEndHovered] = useState(false);

app/src/components/bottom/VideoMeetingControl.tsx

@@ -7,6 +7,29 @@ import appStateReducer from './slice/appStateSlice';
 import styleReducer from './slice/styleSlice';
 import roomReducer from './slice/roomSlice';
 
+/**
+ * Combines individual reducers into a single root reducer to be used in the Redux store configuration.
+ * This rootReducer integrates various features of the application such as code preview, context management,
+ * application state, styling properties, and room functionalities into the Redux state management.
+ *
+ * Each reducer manages a specific aspect of the application's state:
+ * - `codePreviewSlice`: Manages state related to code previews in the application.
+ * - `contextSlice`: Handles state for contextual information within the application.
+ * - `appState`: Manages general application state and settings.
+ * - `styleSlice`: Controls style-related state, likely for dynamic styling in the app.
+ * - `roomSlice`: Manages state related to room and meeting functionalities.
+ *
+ * @module rootReducer
+ * @function
+ * @example
+ * import rootReducer from './reducers/rootReducer';
+ *
+ * const store = configureStore({
+ *   reducer: rootReducer
+ * });
+ *
+ * @returns {Reducer<CombinedState>} The combined reducer containing all individual slice reducers, ready to be used in the Redux store.
+ */
 const rootReducer = combineReducers({
   codePreviewSlice: codePreviewReducer,
   contextSlice: contextReducer,

app/src/redux/reducers/rootReducer.ts

@@ -5,8 +5,29 @@ const initialState = {
   input: ``
 };
 
-//realtime updates for the code preview
-
+/**
+ * `codePreviewSlice` manages the state of the code preview functionality in the application.
+ * It handles real-time updates to the code editor and input fields. This slice is essential for functionalities
+ * that require storing and retrieving user-entered code and associated input for execution or display purposes.
+ *
+ * @module codePreviewSlice
+ * @type {Slice}
+ *
+ * @typedef {Object} CodePreviewState
+ * @property {string} code - The current code stored in the state, typically representing the code written in an editor.
+ * @property {string} input - Additional input or parameters associated with the code that might affect its execution or presentation.
+ *
+ * Actions:
+ * - codePreviewSave: Updates the `code` property in the state with new content.
+ * - codePreviewInput: Updates the `input` property in the state with new content.
+ * - codePreviewCooperative: Merges provided payload into the existing state in a cooperative manner.
+ *
+ * @example
+ * dispatch(codePreviewSave("function example() { return 'Hello, world!'; }"));
+ * dispatch(codePreviewInput("Example input"));
+ *
+ * @returns {Reducer<CodePreviewState>} The reducer for this slice of state, handling updates to code and input properties.
+ */
 const codePreviewSlice = createSlice({
   name: 'codePreview',
   initialState,