Documentation: Tsdoc comments in whole codebase

src/App.tsx

@@ -48,6 +48,23 @@ import EventDashboardScreen from 'components/EventDashboardScreen/EventDashboard
 
 const { setItem } = useLocalStorage();
 
+/**
+ * This is the main function for our application. It sets up all the routes and components,
+ * defining how the user can navigate through the app. The function uses React Router's `Routes`
+ * and `Route` components to map different URL paths to corresponding screens and components.
+ *
+ * ## Important Details
+ * - **UseEffect Hook**: This hook checks user authentication status using the `CHECK_AUTH` GraphQL query.
+ * - **Plugins**: It dynamically loads additional routes for any installed plugins.
+ * - **Routes**:
+ *   - The root route ("/") takes the user to the `LoginPage`.
+ *   - Protected routes are wrapped with the `SecuredRoute` component to ensure they are only accessible to authenticated users.
+ *   - Admin and Super Admin routes allow access to organization and user management screens.
+ *   - User portal routes allow end-users to interact with organizations, settings, chat, events, etc.
+ *
+ * @returns  The rendered routes and components of the application.
+ */
+
 function app(): JSX.Element {
   /*const { updatePluginLinks, updateInstalled } = bindActionCreators(
     actionCreators,

src/components/ActionItems/ActionItemsContainer.tsx

@@ -29,6 +29,28 @@ import ActionItemPreviewModal from '../../screens/OrganizationActionItems/Action
 import ActionItemDeleteModal from '../../screens/OrganizationActionItems/ActionItemDeleteModal';
 import { Link } from 'react-router-dom';
 
+/**
+ * ActionItemsContainer component is responsible for displaying, managing, and updating action items
+ * related to either an organization or an event. It provides a UI for previewing, updating, and deleting
+ * action items, as well as changing their status.
+ *
+ * @param props - The component props
+ * @param actionItemsConnection - Specifies the connection type (Organization or Event) to determine the context of the action items.
+ * @param actionItemsData - Array of action item data to be displayed.
+ * @param membersData - Array of member data for the organization.
+ * @param actionItemsRefetch - Function to refetch the action items data.
+ *
+ * @example
+ * ```tsx
+ * <ActionItemsContainer
+ *   actionItemsConnection="Organization"
+ *   actionItemsData={actionItems}
+ *   membersData={members}
+ *   actionItemsRefetch={refetchActionItems}
+ * />
+ * ```
+ * This example renders the `ActionItemsContainer` component with organization connection, providing the necessary action items and members data along with a refetch function.
+ */
 function actionItemsContainer({
   actionItemsConnection,
   actionItemsData,
@@ -40,11 +62,13 @@ function actionItemsContainer({
   membersData: InterfaceMemberInfo[] | undefined;
   actionItemsRefetch: () => void;
 }): JSX.Element {
+  // Translation hooks for localized text
   const { t } = useTranslation('translation', {
     keyPrefix: 'organizationActionItems',
   });
   const { t: tCommon } = useTranslation('common');
 
+  // State hooks for controlling modals and action item properties
   const [actionItemPreviewModalIsOpen, setActionItemPreviewModalIsOpen] =
     useState(false);
   const [actionItemUpdateModalIsOpen, setActionItemUpdateModalIsOpen] =
@@ -69,30 +93,53 @@ function actionItemsContainer({
     isCompleted: false,
   });
 
+  /**
+   * Opens the preview modal for the selected action item.
+   *
+   * @param actionItem - The action item to be previewed.
+   */
   const showPreviewModal = (actionItem: InterfaceActionItemInfo): void => {
     setActionItemState(actionItem);
     setActionItemPreviewModalIsOpen(true);
   };
 
+  /**
+   * Toggles the update modal visibility.
+   */
   const showUpdateModal = (): void => {
     setActionItemUpdateModalIsOpen(!actionItemUpdateModalIsOpen);
   };
 
+  /**
+   * Hides the preview modal.
+   */
   const hidePreviewModal = (): void => {
     setActionItemPreviewModalIsOpen(false);
   };
 
+  /**
+   * Hides the update modal and resets the action item ID.
+   */
   const hideUpdateModal = (): void => {
     setActionItemId('');
     setActionItemUpdateModalIsOpen(!actionItemUpdateModalIsOpen);
   };
 
+  /**
+   * Toggles the delete modal visibility.
+   */
   const toggleDeleteModal = (): void => {
     setActionItemDeleteModalIsOpen(!actionItemDeleteModalIsOpen);
   };
 
+  // Apollo Client mutations for updating and deleting action items
   const [updateActionItem] = useMutation(UPDATE_ACTION_ITEM_MUTATION);
 
+  /**
+   * Handles the form submission for updating an action item.
+   *
+   * @param  e - The form submission event.
+   */
   const updateActionItemHandler = async (
     e: ChangeEvent<HTMLFormElement>,
   ): Promise<void> => {
@@ -122,6 +169,10 @@ function actionItemsContainer({
   };
 
   const [removeActionItem] = useMutation(DELETE_ACTION_ITEM_MUTATION);
+
+  /**
+   * Handles the action item deletion.
+   */
   const deleteActionItemHandler = async (): Promise<void> => {
     try {
       await removeActionItem({
@@ -141,11 +192,21 @@ function actionItemsContainer({
     }
   };
 
+  /**
+   * Handles the edit button click and opens the update modal with the action item data.
+   *
+   * @param actionItem - The action item to be edited.
+   */
   const handleEditClick = (actionItem: InterfaceActionItemInfo): void => {
     setActionItemState(actionItem);
     showUpdateModal();
   };
 
+  /**
+   * Handles the action item status change and updates the state accordingly.
+   *
+   * @param actionItem - The action item whose status is being changed.
+   */
   const handleActionItemStatusChange = (
     actionItem: InterfaceActionItemInfo,
   ): void => {
@@ -155,10 +216,18 @@ function actionItemsContainer({
     setActionItemStatusModal(true);
   };
 
+  /**
+   * Hides the action item status modal.
+   */
   const hideActionItemStatusModal = (): void => {
     setActionItemStatusModal(false);
   };
 
+  /**
+   * Sets the state with the action item data.
+   *
+   * @param actionItem - The action item data.
+   */
   const setActionItemState = (actionItem: InterfaceActionItemInfo): void => {
     setFormState({
       ...formState,

src/components/ActionItems/ActionItemsModal.tsx

@@ -4,23 +4,49 @@ import styles from 'components/ActionItems/ActionItemsWrapper.module.css';
 import { ActionItemsModalBody } from './ActionItemsModalBody';
 import { useTranslation } from 'react-i18next';
 
+/**
+ * Interface defining the props for the ActionItemsModal component.
+ */
 export interface InterfaceModalProp {
   show: boolean;
   eventId: string;
   orgId: string;
   handleClose: () => void;
 }
 
+/**
+ * ActionItemsModal component displays a modal containing action items for a specific event within an organization.
+ * It includes a header with a title and a body that renders the ActionItemsModalBody component.
+ *
+ * @param props - The props for the ActionItemsModal component.
+ * @param show - Indicates whether the modal is visible.
+ * @param eventId - Event ID related to the action items.
+ * @param orgId - Organization ID related to the action items.
+ * @param handleClose - Function to handle closing the modal.
+ *
+ *
+ * @example
+ * ```tsx
+ * <ActionItemsModal
+ *   show={true}
+ *   eventId="event123"
+ *   orgId="org456"
+ *   handleClose={() => setShowModal(false)}
+ * />
+ * ```
+ * This example renders the `ActionItemsModal` component with the modal shown, using specific event and organization IDs, and a function to handle closing the modal.
+ */
 export const ActionItemsModal = (props: InterfaceModalProp): JSX.Element => {
+  const { show, eventId, orgId, handleClose } = props;
   const { t } = useTranslation('translation', {
     keyPrefix: 'organizationActionItems',
   });
 
   return (
     <>
       <Modal
-        show={props.show}
-        onHide={props.handleClose}
+        show={show}
+        onHide={handleClose}
         backdrop="static"
         centered
         dialogClassName={styles.actionItemsModal}
@@ -31,10 +57,7 @@ export const ActionItemsModal = (props: InterfaceModalProp): JSX.Element => {
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <ActionItemsModalBody
-            organizationId={props.orgId}
-            eventId={props.eventId}
-          />
+          <ActionItemsModalBody organizationId={orgId} eventId={eventId} />
         </Modal.Body>
       </Modal>
     </>

src/components/ActionItems/ActionItemsModalBody.tsx

@@ -23,28 +23,47 @@ import { toast } from 'react-toastify';
 import ActionItemCreateModal from 'screens/OrganizationActionItems/ActionItemCreateModal';
 import { useTranslation } from 'react-i18next';
 
+/**
+ * Component displaying the body of the Action Items modal.
+ * Fetches and displays action items, members, and action item categories related to a specific event within an organization.
+ *
+ * @param organizationId - The ID of the organization.
+ * @param eventId - The ID of the event.
+ *
+ *
+ * @example
+ * ```tsx
+ * <ActionItemsModalBody organizationId="org123" eventId="event456" />
+ * ```
+ * This example renders the `ActionItemsModalBody` component with the provided organization and event IDs.
+ */
 export const ActionItemsModalBody = ({
   organizationId,
   eventId,
 }: {
   organizationId: string;
   eventId: string;
 }): JSX.Element => {
+  // Setting up translation
   const { t } = useTranslation('translation', {
     keyPrefix: 'organizationActionItems',
   });
   const { t: tCommon } = useTranslation('common');
 
+  // State to manage due date
   const [dueDate, setDueDate] = useState<Date | null>(new Date());
+  // State to manage the visibility of the action item creation modal
   const [actionItemCreateModalIsOpen, setActionItemCreateModalIsOpen] =
     useState(false);
 
+  // State to manage form inputs
   const [formState, setFormState] = useState({
     actionItemCategoryId: '',
     assigneeId: '',
     preCompletionNotes: '',
   });
 
+  // Query to fetch action item categories
   const {
     data: actionItemCategoriesData,
     loading: actionItemCategoriesLoading,
@@ -60,6 +79,7 @@ export const ActionItemsModalBody = ({
     notifyOnNetworkStatusChange: true,
   });
 
+  // Query to fetch members list
   const {
     data: membersData,
     loading: membersLoading,
@@ -72,6 +92,7 @@ export const ActionItemsModalBody = ({
     variables: { id: organizationId },
   });
 
+  // Query to fetch action items list
   const {
     data: actionItemsData,
     loading: actionItemsLoading,
@@ -91,8 +112,14 @@ export const ActionItemsModalBody = ({
     notifyOnNetworkStatusChange: true,
   });
 
+  // Mutation to create a new action item
   const [createActionItem] = useMutation(CREATE_ACTION_ITEM_MUTATION);
 
+  /**
+   * Handles the creation of a new action item.
+   *
+   * @param e - The change event from the form submission.
+   */
   const createActionItemHandler = async (
     e: ChangeEvent<HTMLFormElement>,
   ): Promise<void> => {
@@ -108,6 +135,7 @@ export const ActionItemsModalBody = ({
         },
       });
 
+      // Resetting form state and due date after successful creation
       setFormState({
         assigneeId: '',
         actionItemCategoryId: '',
@@ -116,6 +144,7 @@ export const ActionItemsModalBody = ({
 
       setDueDate(new Date());
 
+      // Refetching the action items list to update the UI
       actionItemsRefetch();
       hideCreateModal();
       toast.success(t('successfulCreation'));
@@ -127,18 +156,26 @@ export const ActionItemsModalBody = ({
     }
   };
 
+  /**
+   * Shows the create action item modal.
+   */
   const showCreateModal = (): void => {
     setActionItemCreateModalIsOpen(!actionItemCreateModalIsOpen);
   };
 
+  /**
+   * Hides the create action item modal.
+   */
   const hideCreateModal = (): void => {
     setActionItemCreateModalIsOpen(!actionItemCreateModalIsOpen);
   };
 
+  // Showing loader while data is being fetched
   if (actionItemCategoriesLoading || membersLoading || actionItemsLoading) {
     return <Loader size="xl" />;
   }
 
+  // Showing error message if any of the queries fail
   if (actionItemCategoriesError || membersError || actionItemsError) {
     return (
       <div className={styles.message}>
@@ -162,11 +199,13 @@ export const ActionItemsModalBody = ({
     );
   }
 
+  // Filtering out disabled action item categories
   const actionItemCategories =
     actionItemCategoriesData?.actionItemCategoriesByOrganization.filter(
       (category) => !category.isDisabled,
     );
 
+  // Counting the number of completed action items
   const completedActionItemsCount =
     actionItemsData?.actionItemsByOrganization.reduce(
       (acc, item) => (item.isCompleted === true ? acc + 1 : acc),