Skip to content

finished JSDoc comments, removed MUIProp tab for future feature branch #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGE_LOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announ
- **MUI Components**: Material UI can now be used to Create / Style your Applications
- **UI Updates**: The UI now features a more modern and user friendly experience to reflect the newly added Components.
- **DX Updates**: Migrated from Jest to Vitest to allow better compatibility, as well as to reduce complexity and streamline the Development Workflow.
- **JS DOCS**: Added 264 JSDoc comment blocks throughout the codebase.
- **JS DOCS**: Added 273 JSDoc comment blocks throughout the codebase.
- **Cleanup**: Removed unused code, fixed bugs, and made major performance improvements.
- **And more:** See the [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions, as well as plans for upcoming features!

Expand Down
23 changes: 12 additions & 11 deletions __tests__/BottomTabs.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @vitest-environment jsdom

import { describe, it, expect } from 'vitest'
import { describe, it, expect } from 'vitest';
import {
fireEvent,
render,
Expand All @@ -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();
});
});
Expand All @@ -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();
});
Expand All @@ -83,7 +80,7 @@ describe('Creation Panel', () => {
});
unmount();
});
})
});

describe('HTML Panel', () => {
it('should invalidate empty field in HTML Tag tag', async () => {
Expand Down Expand Up @@ -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 () => {
Expand All @@ -224,7 +225,7 @@ describe('Canvas', () => {
<DndProvider backend={HTML5Backend}>
<DragDropPanel />
<MainContainer />
<CustomizationPanel isThemeLight={true}/>
<CustomizationPanel isThemeLight={true} />
</DndProvider>
</BrowserRouter>
</Provider>
Expand Down
19 changes: 9 additions & 10 deletions app/src/components/bottom/BottomTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -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>
Expand Down
34 changes: 34 additions & 0 deletions app/src/components/bottom/ChatRoom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
47 changes: 0 additions & 47 deletions app/src/components/bottom/MUIProps.tsx

This file was deleted.

41 changes: 41 additions & 0 deletions app/src/components/bottom/VideoMeeting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
35 changes: 34 additions & 1 deletion app/src/components/bottom/VideoMeetingControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
23 changes: 23 additions & 0 deletions app/src/redux/reducers/rootReducer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
25 changes: 23 additions & 2 deletions app/src/redux/reducers/slice/codePreviewSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading