- {props.image ? (
-
- ) : (
-
- )}
-
-
{props.name}
-
- Owner:
- {props.firstName}
-
-
- {props.lastName}
-
-
-
+
+
+
+ {props.image ? (
+
+ ) : (
+
+ )}
+
+
{props.name}
+
+ Owner:
+ {props.firstName}
+
+
+ {props.lastName}
+
+
-
-
-
+
+
);
}
-export {};
-export default organizationCard;
+export default OrganizationCard;
diff --git a/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx b/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx
index 2a9f03a9be..dd65c8649e 100644
--- a/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx
+++ b/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx
@@ -6,12 +6,11 @@ describe('Testing the Organization Cards', () => {
test('should render props and text elements test for the page component', () => {
const props = {
id: '123',
- key: '456',
image: 'https://via.placeholder.com/80',
name: 'Sample',
};
- render(
);
+ render(
);
expect(screen.getByText(props.name)).toBeInTheDocument();
});
@@ -19,12 +18,11 @@ describe('Testing the Organization Cards', () => {
test('Should render text elements when props value is not passed', () => {
const props = {
id: '123',
- key: '456',
image: '',
name: 'Sample',
};
- render(
);
+ render(
);
expect(screen.getByText(props.name)).toBeInTheDocument();
});
diff --git a/src/components/OrganizationCardStart/OrganizationCardStart.tsx b/src/components/OrganizationCardStart/OrganizationCardStart.tsx
index 4fdbc0edb2..298fb13db9 100644
--- a/src/components/OrganizationCardStart/OrganizationCardStart.tsx
+++ b/src/components/OrganizationCardStart/OrganizationCardStart.tsx
@@ -2,12 +2,19 @@ import React from 'react';
import styles from './OrganizationCardStart.module.css';
interface InterfaceOrganizationCardStartProps {
- key: any;
image: string;
id: string;
name: string;
}
+/**
+ * Component to display a simplified card for an organization.
+ *
+ * @param image - URL of the organization's image.
+ * @param id - Unique identifier for the organization.
+ * @param name - Name of the organization.
+ * @returns JSX element representing the organization card.
+ */
function organizationCardStart(
props: InterfaceOrganizationCardStartProps,
): JSX.Element {
diff --git a/src/components/OrganizationDashCards/CardItem.tsx b/src/components/OrganizationDashCards/CardItem.tsx
index b020f1885f..a7cfaa0f57 100644
--- a/src/components/OrganizationDashCards/CardItem.tsx
+++ b/src/components/OrganizationDashCards/CardItem.tsx
@@ -1,13 +1,16 @@
import React from 'react';
-import { ReactComponent as EventsIcon } from 'assets/svgs/cardItemEvent.svg';
-import { ReactComponent as PostsIcon } from 'assets/svgs/post.svg';
-import { ReactComponent as MarkerIcon } from 'assets/svgs/cardItemLocation.svg';
-import { ReactComponent as DateIcon } from 'assets/svgs/cardItemDate.svg';
-import { ReactComponent as UserIcon } from 'assets/svgs/user.svg';
+import EventsIcon from 'assets/svgs/cardItemEvent.svg?react';
+import PostsIcon from 'assets/svgs/post.svg?react';
+import MarkerIcon from 'assets/svgs/cardItemLocation.svg?react';
+import DateIcon from 'assets/svgs/cardItemDate.svg?react';
+import UserIcon from 'assets/svgs/user.svg?react';
import dayjs from 'dayjs';
import styles from './CardItem.module.css';
import { PersonAddAlt1Rounded } from '@mui/icons-material';
+/**
+ * Interface for the CardItem component's props.
+ */
export interface InterfaceCardItem {
type: 'Event' | 'Post' | 'MembershipRequest';
title: string;
@@ -18,6 +21,12 @@ export interface InterfaceCardItem {
location?: string;
}
+/**
+ * Component to display a card item with various types such as Event, Post, or MembershipRequest.
+ *
+ * @param props - Props for the CardItem component.
+ * @returns JSX element representing the card item.
+ */
const cardItem = (props: InterfaceCardItem): JSX.Element => {
const { creator, type, title, startdate, time, enddate, location } = props;
return (
diff --git a/src/components/OrganizationDashCards/CardItemLoading.tsx b/src/components/OrganizationDashCards/CardItemLoading.tsx
index 923128c2f2..2c57bb70b3 100644
--- a/src/components/OrganizationDashCards/CardItemLoading.tsx
+++ b/src/components/OrganizationDashCards/CardItemLoading.tsx
@@ -1,6 +1,10 @@
import React from 'react';
import styles from './CardItem.module.css';
+/**
+ * CardItemLoading component is a loading state for the card item. It is used when the data is being fetched.
+ * @returns JSX.Element
+ */
const cardItemLoading = (): JSX.Element => {
return (
<>
diff --git a/src/components/OrganizationDashCards/DashboardCard.tsx b/src/components/OrganizationDashCards/DashboardCard.tsx
index 4ad8fe8849..4a29eafc57 100644
--- a/src/components/OrganizationDashCards/DashboardCard.tsx
+++ b/src/components/OrganizationDashCards/DashboardCard.tsx
@@ -3,6 +3,13 @@ import { Card, Row } from 'react-bootstrap';
import Col from 'react-bootstrap/Col';
import styles from './Dashboardcard.module.css';
+/** Dashboard card component is used to display the card with icon, title and count.
+ * @param icon - Icon for the card
+ * @param title - Title for the card
+ * @param count - Count for the card
+ * @returns Dashboard card component
+ *
+ */
const dashBoardCard = (props: {
icon: React.ReactNode;
title: string;
diff --git a/src/components/OrganizationDashCards/DashboardCardLoading.tsx b/src/components/OrganizationDashCards/DashboardCardLoading.tsx
index 5b596f32b2..b37c1e2065 100644
--- a/src/components/OrganizationDashCards/DashboardCardLoading.tsx
+++ b/src/components/OrganizationDashCards/DashboardCardLoading.tsx
@@ -3,6 +3,10 @@ import { Card, Row } from 'react-bootstrap';
import Col from 'react-bootstrap/Col';
import styles from './Dashboardcard.module.css';
+/**
+ * Dashboard card loading component is a loading state for the dashboard card. It is used when the data is being fetched.
+ * @returns JSX.Element
+ */
const dashBoardCardLoading = (): JSX.Element => {
return (
diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx
index a8f9d16b9c..7bd2119a82 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.tsx
+++ b/src/components/OrganizationScreen/OrganizationScreen.tsx
@@ -1,42 +1,65 @@
import LeftDrawerOrg from 'components/LeftDrawerOrg/LeftDrawerOrg';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
import { updateTargets } from 'state/action-creators';
+import { useAppDispatch } from 'state/hooks';
import type { RootState } from 'state/reducers';
import type { TargetsType } from 'state/reducers/routesReducer';
import styles from './OrganizationScreen.module.css';
import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
import { Button } from 'react-bootstrap';
+import type { InterfaceMapType } from 'utils/interfaces';
+/**
+ * Component for the organization screen
+ *
+ * This component displays the organization screen and handles the layout
+ * including a side drawer, header, and main content area. It adjusts
+ * the layout based on the screen size and shows the appropriate content
+ * based on the route.
+ *
+ * @returns JSX.Element representing the organization screen
+ */
const OrganizationScreen = (): JSX.Element => {
+ // Get the current location to determine the translation key
const location = useLocation();
const titleKey: string | undefined = map[location.pathname.split('/')[1]];
const { t } = useTranslation('translation', { keyPrefix: titleKey });
+
+ // State to manage visibility of the side drawer
const [hideDrawer, setHideDrawer] = useState(null);
+
+ // Get the organization ID from the URL parameters
const { orgId } = useParams();
+ // If no organization ID is found, navigate back to the home page
if (!orgId) {
return ;
}
+ // Get the application routes from the Redux store
const appRoutes: {
targets: TargetsType[];
} = useSelector((state: RootState) => state.appRoutes);
const { targets } = appRoutes;
- const dispatch = useDispatch();
+ const dispatch = useAppDispatch();
+
+ // Update targets whenever the organization ID changes
useEffect(() => {
dispatch(updateTargets(orgId));
}, [orgId]); // Added orgId to the dependency array
+ // Handle screen resizing to show/hide the side drawer
const handleResize = (): void => {
if (window.innerWidth <= 820) {
setHideDrawer(!hideDrawer);
}
};
+ // Set up event listener for window resize
useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize);
@@ -100,13 +123,13 @@ const OrganizationScreen = (): JSX.Element => {
export default OrganizationScreen;
-interface InterfaceMapType {
- [key: string]: string;
-}
-
+/**
+ * Mapping object to get translation keys based on route
+ */
const map: InterfaceMapType = {
orgdash: 'dashboard',
orgpeople: 'organizationPeople',
+ orgtags: 'organizationTags',
requests: 'requests',
orgads: 'advertisement',
member: 'memberDetail',
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index ce7192e2a4..637492a289 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -8,19 +8,35 @@ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import LastPageIcon from '@mui/icons-material/LastPage';
interface InterfaceTablePaginationActionsProps {
- count: number;
- page: number;
- rowsPerPage: number;
+ count: number; // Total number of items
+ page: number; // Current page index
+ rowsPerPage: number; // Number of items per page
onPageChange: (
event: React.MouseEvent,
- newPage: number,
- ) => void;
+ newPage: number, // New page index to navigate to
+ ) => void; // Callback function for page changes
}
+/**
+ * Pagination component for navigating between pages in a table.
+ *
+ * This component provides buttons to navigate to the first page, previous page,
+ * next page, and last page of a table. The visibility and functionality of the
+ * buttons are controlled based on the current page and the total number of items.
+ *
+ * @param props - Component properties.
+ * @returns The rendered component.
+ */
function pagination(props: InterfaceTablePaginationActionsProps): JSX.Element {
const theme = useTheme();
const { count, page, rowsPerPage, onPageChange } = props;
+ /**
+ * Handles the event when the "First Page" button is clicked.
+ * Navigates to the first page (page 0).
+ *
+ * @param event - The click event.
+ */
/* istanbul ignore next */
const handleFirstPageButtonClick = (
event: React.MouseEvent,
@@ -28,12 +44,25 @@ function pagination(props: InterfaceTablePaginationActionsProps): JSX.Element {
onPageChange(event, 0);
};
+ /**
+ * Handles the event when the "Previous Page" button is clicked.
+ * Navigates to the previous page.
+ *
+ * @param event - The click event.
+ */
const handleBackButtonClick = (
event: React.MouseEvent,
): void => {
onPageChange(event, page - 1);
};
+ /**
+ * Handles the event when the "Next Page" button is clicked.
+ * Navigates to the next page.
+ *
+ * @param event - The click event.
+ */
+
/* istanbul ignore next */
const handleNextButtonClick = (
event: React.MouseEvent,
@@ -41,6 +70,12 @@ function pagination(props: InterfaceTablePaginationActionsProps): JSX.Element {
onPageChange(event, page + 1);
};
+ /**
+ * Handles the event when the "Last Page" button is clicked.
+ * Navigates to the last page.
+ *
+ * @param event - The click event.
+ */
/* istanbul ignore next */
const handleLastPageButtonClick = (
event: React.MouseEvent,
diff --git a/src/components/PaginationList/PaginationList.tsx b/src/components/PaginationList/PaginationList.tsx
index 3c0928f7fb..430e8ba1aa 100644
--- a/src/components/PaginationList/PaginationList.tsx
+++ b/src/components/PaginationList/PaginationList.tsx
@@ -17,8 +17,24 @@ interface InterfacePropsInterface {
event: React.ChangeEvent,
) => void;
}
+/**
+ * A component that provides pagination controls for a table.
+ * It uses different pagination styles based on screen size.
+ *
+ * @param count - The total number of rows in the table.
+ * @param rowsPerPage - The number of rows displayed per page.
+ * @param page - The current page number.
+ * @param onPageChange - Callback function to handle page changes.
+ * @param onRowsPerPageChange - Callback function to handle changes in rows per page.
+ */
-const PaginationList = (props: InterfacePropsInterface): JSX.Element => {
+const PaginationList = ({
+ count,
+ rowsPerPage,
+ page,
+ onPageChange,
+ onRowsPerPageChange,
+}: InterfacePropsInterface): JSX.Element => {
const { t } = useTranslation('translation', {
keyPrefix: 'paginationList',
});
@@ -34,24 +50,23 @@ const PaginationList = (props: InterfacePropsInterface): JSX.Element => {
}}
rowsPerPageOptions={[]}
colSpan={5}
- count={props.count}
- rowsPerPage={props.rowsPerPage}
- page={props.page}
+ count={count}
+ rowsPerPage={rowsPerPage}
+ page={page}
SelectProps={{
inputProps: {
'aria-label': 'rows per page',
},
native: true,
}}
- onPageChange={props.onPageChange}
- onRowsPerPageChange={props.onRowsPerPageChange}
+ onPageChange={onPageChange}
+ onRowsPerPageChange={onRowsPerPageChange}
ActionsComponent={Pagination}
/>
{
]}
data-testid={'table-pagination'}
colSpan={4}
- count={props.count}
- rowsPerPage={props.rowsPerPage}
- page={props.page}
+ count={count}
+ rowsPerPage={rowsPerPage}
+ page={page}
SelectProps={{
inputProps: {
'aria-label': 'rows per page',
},
native: true,
}}
- onPageChange={props.onPageChange}
- onRowsPerPageChange={props.onRowsPerPageChange}
+ onPageChange={onPageChange}
+ onRowsPerPageChange={onRowsPerPageChange}
ActionsComponent={Pagination}
labelRowsPerPage={t('rowsPerPage')}
/>
diff --git a/src/components/ProfileDropdown/ProfileDropdown.test.tsx b/src/components/ProfileDropdown/ProfileDropdown.test.tsx
index 0efef50591..82ce420aea 100644
--- a/src/components/ProfileDropdown/ProfileDropdown.test.tsx
+++ b/src/components/ProfileDropdown/ProfileDropdown.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { BrowserRouter } from 'react-router-dom';
import ProfileDropdown from './ProfileDropdown';
diff --git a/src/components/ProfileDropdown/ProfileDropdown.tsx b/src/components/ProfileDropdown/ProfileDropdown.tsx
index 28c96a988c..27fb6951c7 100644
--- a/src/components/ProfileDropdown/ProfileDropdown.tsx
+++ b/src/components/ProfileDropdown/ProfileDropdown.tsx
@@ -8,6 +8,18 @@ import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
import { useMutation } from '@apollo/client';
import { useTranslation } from 'react-i18next';
+/**
+ * Renders a profile dropdown menu for the user.
+ *
+ * This component displays the user's profile picture or an avatar, their name (truncated if necessary),
+ * and their role (SuperAdmin, Admin, or User). It provides options to view the profile or log out.
+ *
+ * - If a user image is available, it displays that; otherwise, it shows an avatar.
+ * - The displayed name is truncated if it exceeds a specified length.
+ * - The logout function revokes the refresh token and clears local storage before redirecting to the home page.
+ *
+ * @returns JSX.Element - The profile dropdown menu.
+ */
const profileDropdown = (): JSX.Element => {
const { t: tCommon } = useTranslation('common');
const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
diff --git a/src/components/RecurrenceOptions/CustomRecurrenceModal.tsx b/src/components/RecurrenceOptions/CustomRecurrenceModal.tsx
index c1aecaa854..deb1a03dab 100644
--- a/src/components/RecurrenceOptions/CustomRecurrenceModal.tsx
+++ b/src/components/RecurrenceOptions/CustomRecurrenceModal.tsx
@@ -23,6 +23,9 @@ import type {
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
+/**
+ * Props for the CustomRecurrenceModal component.
+ */
interface InterfaceCustomRecurrenceModalProps {
recurrenceRuleState: InterfaceRecurrenceRuleState;
recurrenceRuleText: string;
@@ -38,6 +41,16 @@ interface InterfaceCustomRecurrenceModalProps {
tCommon: (key: string) => string;
}
+/**
+ * A modal for setting up custom recurrence rules.
+ *
+ * This component allows users to configure how often an event should repeat, and
+ * when it should end. It includes options for daily, weekly, monthly, and yearly
+ * recurrence, as well as specific end options.
+ *
+ * @param props - The props object containing various configurations and state management functions.
+ * @returns The JSX element representing the CustomRecurrenceModal.
+ */
const CustomRecurrenceModal: React.FC = ({
recurrenceRuleState,
recurrenceRuleText,
@@ -67,6 +80,13 @@ const CustomRecurrenceModal: React.FC = ({
}
}, [recurrenceRuleState]);
+ /**
+ * Handles changes to the recurrence end option.
+ *
+ * Updates the recurrence rule state based on the selected option.
+ *
+ * @param e - The event object from the radio button change.
+ */
const handleRecurrenceEndOptionChange = (
e: React.ChangeEvent,
): void => {
@@ -95,6 +115,13 @@ const CustomRecurrenceModal: React.FC = ({
}
};
+ /**
+ * Handles clicks on day buttons for weekly recurrence.
+ *
+ * Toggles the selected state of a day button in the weekly recurrence setup.
+ *
+ * @param day - The day of the week to toggle.
+ */
const handleDayClick = (day: WeekDays): void => {
if (weekDays !== undefined && weekDays.includes(day)) {
setRecurrenceRuleState({
@@ -111,6 +138,9 @@ const CustomRecurrenceModal: React.FC = ({
}
};
+ /**
+ * Toggles the visibility of the custom recurrence modal.
+ */
const handleCustomRecurrenceSubmit = (): void => {
setCustomRecurrenceModalIsOpen(!customRecurrenceModalIsOpen);
};
diff --git a/src/components/RecurrenceOptions/RecurrenceOptions.tsx b/src/components/RecurrenceOptions/RecurrenceOptions.tsx
index f3a4e61226..f1772f1b08 100644
--- a/src/components/RecurrenceOptions/RecurrenceOptions.tsx
+++ b/src/components/RecurrenceOptions/RecurrenceOptions.tsx
@@ -21,7 +21,31 @@ interface InterfaceRecurrenceOptionsProps {
t: (key: string) => string;
tCommon: (key: string) => string;
}
-
+/**
+ * Renders a dropdown menu for selecting recurrence options.
+ *
+ * This component allows users to choose various recurrence rules (daily, weekly, monthly, yearly) for a given event.
+ * It displays the current recurrence rule text and provides options to modify it, including a custom recurrence modal.
+ *
+ * The dropdown menu includes options for:
+ * - Daily recurrence
+ * - Weekly recurrence (including a specific day of the week or Monday to Friday)
+ * - Monthly recurrence (on a specific day or occurrence)
+ * - Yearly recurrence
+ * - Custom recurrence (opens a modal for advanced settings)
+ *
+ * The displayed recurrence rule text is truncated if it exceeds a specified length, with an overlay showing the full text on hover.
+ *
+ * @param props - The properties to configure the recurrence options dropdown.
+ * @param recurrenceRuleState - The current state of the recurrence rule.
+ * @param recurrenceRuleText - The text describing the current recurrence rule.
+ * @param setRecurrenceRuleState - A function to update the recurrence rule state.
+ * @param popover - A JSX element used for displaying additional information on hover.
+ * @param t - A function for translating text.
+ * @param tCommon - A function for translating common text.
+ *
+ * @returns JSX.Element - The recurrence options dropdown and the custom recurrence modal.
+ */
const RecurrenceOptions: React.FC = ({
recurrenceRuleState,
recurrenceRuleText,
diff --git a/src/components/RequestsTableItem/RequestsTableItem.test.tsx b/src/components/RequestsTableItem/RequestsTableItem.test.tsx
index 866abc7f68..bbd895300b 100644
--- a/src/components/RequestsTableItem/RequestsTableItem.test.tsx
+++ b/src/components/RequestsTableItem/RequestsTableItem.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { StaticMockLink } from 'utils/StaticMockLink';
import i18nForTest from 'utils/i18nForTest';
diff --git a/src/components/RequestsTableItem/RequestsTableItem.tsx b/src/components/RequestsTableItem/RequestsTableItem.tsx
index 9c4c042324..07feb5d289 100644
--- a/src/components/RequestsTableItem/RequestsTableItem.tsx
+++ b/src/components/RequestsTableItem/RequestsTableItem.tsx
@@ -10,6 +10,9 @@ import { toast } from 'react-toastify';
import { errorHandler } from 'utils/errorHandler';
import styles from './RequestsTableItem.module.css';
+/**
+ * Represents a membership request in the requests table.
+ */
export interface InterfaceRequestsListItem {
_id: string;
user: {
@@ -19,18 +22,40 @@ export interface InterfaceRequestsListItem {
};
}
+/**
+ * Props for the RequestsTableItem component.
+ *
+ */
type Props = {
request: InterfaceRequestsListItem;
index: number;
resetAndRefetch: () => void;
};
+/**
+ * Renders a table row item for a membership request.
+ *
+ * This component displays user details and provides buttons to accept or reject
+ * the membership request. It also handles showing success or error messages using
+ * toast notifications.
+ *
+ * @param props - The props object containing request details, index, and state reset function.
+ * @returns The JSX element representing the RequestsTableItem.
+ */
const RequestsTableItem = (props: Props): JSX.Element => {
const { t } = useTranslation('translation', { keyPrefix: 'requests' });
const { request, index, resetAndRefetch } = props;
const [acceptUser] = useMutation(ACCEPT_ORGANIZATION_REQUEST_MUTATION);
const [rejectUser] = useMutation(REJECT_ORGANIZATION_REQUEST_MUTATION);
+ /**
+ * Handles the acceptance of a membership request.
+ *
+ * Sends a mutation request to accept the user and shows a success message if successful.
+ * It also triggers a state reset and refetch.
+ *
+ * @param membershipRequestId - The ID of the membership request to accept.
+ */
const handleAcceptUser = async (
membershipRequestId: string,
): Promise => {
@@ -42,15 +67,23 @@ const RequestsTableItem = (props: Props): JSX.Element => {
});
/* istanbul ignore next */
if (data) {
- toast.success(t('acceptedSuccessfully'));
+ toast.success(t('acceptedSuccessfully') as string);
resetAndRefetch();
}
- } catch (error: any) {
+ } catch (error: unknown) {
/* istanbul ignore next */
errorHandler(t, error);
}
};
+ /**
+ * Handles the rejection of a membership request.
+ *
+ * Sends a mutation request to reject the user and shows a success message if successful.
+ * It also triggers a state reset and refetch.
+ *
+ * @param membershipRequestId - The ID of the membership request to reject.
+ */
const handleRejectUser = async (
membershipRequestId: string,
): Promise => {
@@ -62,10 +95,10 @@ const RequestsTableItem = (props: Props): JSX.Element => {
});
/* istanbul ignore next */
if (data) {
- toast.success(t('rejectedSuccessfully'));
+ toast.success(t('rejectedSuccessfully') as string);
resetAndRefetch();
}
- } catch (error: any) {
+ } catch (error: unknown) {
/* istanbul ignore next */
errorHandler(t, error);
}
diff --git a/src/components/SecuredRoute/SecuredRoute.tsx b/src/components/SecuredRoute/SecuredRoute.tsx
index 4bf361eb77..1119800215 100644
--- a/src/components/SecuredRoute/SecuredRoute.tsx
+++ b/src/components/SecuredRoute/SecuredRoute.tsx
@@ -5,9 +5,18 @@ import PageNotFound from 'screens/PageNotFound/PageNotFound';
import useLocalStorage from 'utils/useLocalstorage';
const { getItem, setItem } = useLocalStorage();
+/**
+ * A route guard that checks if the user is logged in and has the necessary permissions.
+ *
+ * If the user is logged in and has an admin role set, it renders the child routes.
+ * Otherwise, it redirects to the home page or shows a 404 page if admin role is not set.
+ *
+ * @returns The JSX element representing the secured route.
+ */
const SecuredRoute = (): JSX.Element => {
const isLoggedIn = getItem('IsLoggedIn');
const adminFor = getItem('AdminFor');
+
return isLoggedIn === 'TRUE' ? (
<>{adminFor != null ? : }
) : (
@@ -15,21 +24,26 @@ const SecuredRoute = (): JSX.Element => {
);
};
+// Time constants for session timeout and inactivity interval
const timeoutMinutes = 15;
const timeoutMilliseconds = timeoutMinutes * 60 * 1000;
const inactiveIntervalMin = 1;
const inactiveIntervalMilsec = inactiveIntervalMin * 60 * 1000;
+
let lastActive: number = Date.now();
+// Update lastActive timestamp on mouse movement
document.addEventListener('mousemove', () => {
lastActive = Date.now();
});
+// Check for inactivity and handle session timeout
setInterval(() => {
const currentTime = Date.now();
const timeSinceLastActive = currentTime - lastActive;
+ // If inactive for longer than the timeout period, show a warning and log out
if (timeSinceLastActive > timeoutMilliseconds) {
toast.warn('Kindly relogin as sessison has expired');
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
index f7191289eb..948dc334f7 100644
--- a/src/components/SuperAdminScreen/SuperAdminScreen.tsx
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
@@ -6,12 +6,21 @@ import { Outlet, useLocation } from 'react-router-dom';
import styles from './SuperAdminScreen.module.css';
import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+/**
+ * The SuperAdminScreen component manages the layout for the Super Admin screen,
+ * including handling the sidebar visibility and page title based on the current route.
+ *
+ * @returns The JSX element representing the Super Admin screen layout.
+ */
const superAdminScreen = (): JSX.Element => {
const location = useLocation();
const titleKey = map[location.pathname.split('/')[1]];
const { t } = useTranslation('translation', { keyPrefix: titleKey });
const [hideDrawer, setHideDrawer] = useState(null);
+ /**
+ * Handles resizing of the window to show or hide the sidebar.
+ */
const handleResize = (): void => {
if (window.innerWidth <= 820) {
setHideDrawer(!hideDrawer);
@@ -74,6 +83,9 @@ const superAdminScreen = (): JSX.Element => {
export default superAdminScreen;
+/**
+ * Map of route segments to translation keys for page titles.
+ */
const map: Record<
string,
'orgList' | 'requests' | 'users' | 'memberDetail' | 'communityProfile'
diff --git a/src/components/TableLoader/TableLoader.tsx b/src/components/TableLoader/TableLoader.tsx
index 6d99d6fe3f..631b13d514 100644
--- a/src/components/TableLoader/TableLoader.tsx
+++ b/src/components/TableLoader/TableLoader.tsx
@@ -8,6 +8,18 @@ export interface InterfaceTableLoader {
noOfCols?: number;
}
+/**
+ * The TableLoader component displays a loading skeleton for tables.
+ * It shows a specified number of rows and columns as placeholders
+ * with a shimmering effect to indicate loading content.
+ *
+ * @param props - The properties for the TableLoader component.
+ * @param noOfRows - The number of rows to display.
+ * @param headerTitles - Optional. The titles for the table headers.
+ * @param noOfCols - Optional. The number of columns if headerTitles is not provided.
+ *
+ * @returns The JSX element representing the table loader.
+ */
const tableLoader = (props: InterfaceTableLoader): JSX.Element => {
const { noOfRows, headerTitles, noOfCols } = props;
diff --git a/src/components/UserListCard/UserListCard.test.tsx b/src/components/UserListCard/UserListCard.test.tsx
index 9f59bb92ce..e2ad552507 100644
--- a/src/components/UserListCard/UserListCard.test.tsx
+++ b/src/components/UserListCard/UserListCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
@@ -14,7 +14,7 @@ const MOCKS = [
{
request: {
query: ADD_ADMIN_MUTATION,
- variable: { userid: '784', orgid: '554' },
+ variables: { userid: '784', orgid: '554' },
},
result: {
data: {
@@ -28,6 +28,7 @@ const MOCKS = [
},
];
const link = new StaticMockLink(MOCKS, true);
+
async function wait(ms = 100): Promise {
await act(() => {
return new Promise((resolve) => {
@@ -41,7 +42,6 @@ describe('Testing User List Card', () => {
test('Should render props and text elements test for the page component', async () => {
const props = {
- key: 123,
id: '456',
};
@@ -49,7 +49,7 @@ describe('Testing User List Card', () => {
-
+
,
@@ -62,7 +62,6 @@ describe('Testing User List Card', () => {
test('Should render text elements when props value is not passed', async () => {
const props = {
- key: 123,
id: '456',
};
@@ -70,7 +69,7 @@ describe('Testing User List Card', () => {
-
+
,
diff --git a/src/components/UserListCard/UserListCard.tsx b/src/components/UserListCard/UserListCard.tsx
index 5954e22e6c..76ad110ea1 100644
--- a/src/components/UserListCard/UserListCard.tsx
+++ b/src/components/UserListCard/UserListCard.tsx
@@ -14,6 +14,16 @@ interface InterfaceUserListCardProps {
id: string;
}
+/**
+ * The UserListCard component allows for adding a user as an admin in a specific organization.
+ * It uses a button to trigger a mutation for updating the user's role.
+ *
+ * @param props - The properties for the UserListCard component.
+ * @param key - The unique key for the component (although not used here).
+ * @param id - The ID of the user to be promoted to admin.
+ *
+ * @returns The JSX element representing the user list card.
+ */
function userListCard(props: InterfaceUserListCardProps): JSX.Element {
const { orgId: currentUrl } = useParams();
const [adda] = useMutation(ADD_ADMIN_MUTATION);
@@ -22,6 +32,10 @@ function userListCard(props: InterfaceUserListCardProps): JSX.Element {
keyPrefix: 'userListCard',
});
+ /**
+ * Handles adding a user as an admin.
+ * It performs a mutation and handles success or failure accordingly.
+ */
const addAdmin = async (): Promise => {
try {
const { data } = await adda({
@@ -33,12 +47,12 @@ function userListCard(props: InterfaceUserListCardProps): JSX.Element {
/* istanbul ignore next */
if (data) {
- toast.success(t('addedAsAdmin'));
+ toast.success(t('addedAsAdmin') as string);
setTimeout(() => {
window.location.reload();
}, 2000);
}
- } catch (error: any) {
+ } catch (error: unknown) {
/* istanbul ignore next */
errorHandler(t, error);
}
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx b/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx
index 4fcbb18070..65f5e40f76 100644
--- a/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx
+++ b/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
@@ -20,7 +20,7 @@ const MOCKS = [
{
request: {
query: UPDATE_USER_PASSWORD_MUTATION,
- variable: {
+ variables: {
previousPassword: 'anshgoyal',
newPassword: 'anshgoyalansh',
confirmNewPassword: 'anshgoyalansh',
@@ -49,15 +49,10 @@ async function wait(ms = 5): Promise {
}
describe('Testing User Password Update', () => {
- const props = {
- key: '123',
- id: '1',
- };
-
const formData = {
previousPassword: 'Palisadoes',
newPassword: 'ThePalisadoesFoundation',
- wrongPassword: 'This is wrong passoword',
+ wrongPassword: 'This is wrong password',
confirmNewPassword: 'ThePalisadoesFoundation',
};
@@ -67,7 +62,7 @@ describe('Testing User Password Update', () => {
render(
-
+
,
);
@@ -102,7 +97,7 @@ describe('Testing User Password Update', () => {
render(
-
+
,
);
@@ -117,7 +112,7 @@ describe('Testing User Password Update', () => {
render(
-
+
,
);
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx b/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
index f9cb899f2d..1ea75811c1 100644
--- a/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
+++ b/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
@@ -11,6 +11,15 @@ interface InterfaceUserPasswordUpdateProps {
id: string;
}
+/**
+ * UserUpdate component allows users to update their passwords.
+ * It handles form submission and communicates with the backend to update the user's password.
+ *
+ * @param props - The properties for the UserUpdate component.
+ * @param id - The ID of the user whose password is being updated.
+ *
+ * @returns The JSX element for updating user password.
+ */
const UserUpdate: React.FC<
InterfaceUserPasswordUpdateProps
> = (): JSX.Element => {
@@ -26,18 +35,22 @@ const UserUpdate: React.FC<
const [login] = useMutation(UPDATE_USER_PASSWORD_MUTATION);
+ /**
+ * Handles the password update process.
+ * It validates the form inputs and performs the mutation to update the password.
+ */
const loginLink = async (): Promise => {
if (
!formState.previousPassword ||
!formState.newPassword ||
!formState.confirmNewPassword
) {
- toast.error(t('passCantBeEmpty'));
+ toast.error(t('passCantBeEmpty') as string);
return;
}
if (formState.newPassword !== formState.confirmNewPassword) {
- toast.error(t('passNoMatch'));
+ toast.error(t('passNoMatch') as string);
return;
}
@@ -51,7 +64,9 @@ const UserUpdate: React.FC<
});
/* istanbul ignore next */
if (data) {
- toast.success(tCommon('updatedSuccessfully', { item: 'Password' }));
+ toast.success(
+ tCommon('updatedSuccessfully', { item: 'Password' }) as string,
+ );
setTimeout(() => {
window.location.reload();
}, 2000);
@@ -64,6 +79,10 @@ const UserUpdate: React.FC<
}
};
+ /**
+ * Handles canceling the update process.
+ * It reloads the page to reset any changes.
+ */
/* istanbul ignore next */
const cancelUpdate = (): void => {
window.location.reload();
diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx b/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx
index 7d72837767..c4fd4eadaf 100644
--- a/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx
+++ b/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx
@@ -801,7 +801,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
await wait();
});
- test('Test send message direct chat', async () => {
+ test('send message direct chat', async () => {
setItem('userId', '2');
const mocks = [
SEND_MESSAGE_TO_DIRECT_CHAT_MOCK,
@@ -864,7 +864,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
await wait();
});
- test('Test send message group chat', async () => {
+ test('send message group chat', async () => {
const mocks = [
SEND_MESSAGE_TO_GROUP_CHAT_MOCK,
...DIRECT_CHAT_BY_ID_QUERY_MOCK,
diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.tsx b/src/components/UserPortal/ChatRoom/ChatRoom.tsx
index d29de8b766..dd36a93d8f 100644
--- a/src/components/UserPortal/ChatRoom/ChatRoom.tsx
+++ b/src/components/UserPortal/ChatRoom/ChatRoom.tsx
@@ -24,6 +24,18 @@ interface InterfaceChatRoomProps {
selectedChatType: string;
}
+/**
+ * A chat room component that displays messages and a message input field.
+ *
+ * This component shows a list of messages between the user and a selected contact.
+ * If no contact is selected, it displays a placeholder with an icon and a message asking the user to select a contact.
+ *
+ * @param props - The properties passed to the component.
+ * @param selectedContact - The ID or name of the currently selected contact. If empty, a placeholder is shown.
+ *
+ * @returns The rendered chat room component.
+ */
+
type DirectMessage = {
_id: string;
createdAt: Date;
@@ -68,6 +80,7 @@ type Chat = {
};
export default function chatRoom(props: InterfaceChatRoomProps): JSX.Element {
+ // Translation hook for text in different languages
const { t } = useTranslation('translation', {
keyPrefix: 'userChatRoom',
});
@@ -87,6 +100,13 @@ export default function chatRoom(props: InterfaceChatRoomProps): JSX.Element {
const [directChat, setDirectChat] = useState();
const [groupChat, setGroupChat] = useState();
+ /**
+ * Handles changes to the new message input field.
+ *
+ * Updates the state with the current value of the input field whenever it changes.
+ *
+ * @param e - The event triggered by the input field change.
+ */
const handleNewMessageChange = (e: ChangeEvent): void => {
const newMessageValue = e.target.value;
setNewMessage(newMessageValue);
diff --git a/src/components/UserPortal/CommentCard/CommentCard.test.tsx b/src/components/UserPortal/CommentCard/CommentCard.test.tsx
index 35b81167fc..f02e5a606a 100644
--- a/src/components/UserPortal/CommentCard/CommentCard.test.tsx
+++ b/src/components/UserPortal/CommentCard/CommentCard.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
diff --git a/src/components/UserPortal/CommentCard/CommentCard.tsx b/src/components/UserPortal/CommentCard/CommentCard.tsx
index 57cc6a1cf4..9e8c46d241 100644
--- a/src/components/UserPortal/CommentCard/CommentCard.tsx
+++ b/src/components/UserPortal/CommentCard/CommentCard.tsx
@@ -27,19 +27,55 @@ interface InterfaceCommentCardProps {
handleDislikeComment: (commentId: string) => void;
}
+/**
+ * Displays a card for a single comment with options to like or dislike the comment.
+ *
+ * Shows the commenter's name, the comment text, and the number of likes.
+ * Allows the user to like or dislike the comment. The button icon changes based on whether the comment is liked by the user.
+ *
+ * @param props - The properties passed to the component.
+ * @param id - The unique identifier of the comment.
+ * @param creator - Information about the creator of the comment.
+ * @param id - The unique identifier of the creator.
+ * @param firstName - The first name of the creator.
+ * @param lastName - The last name of the creator.
+ * @param email - The email address of the creator.
+ * @param likeCount - The current number of likes for the comment.
+ * @param likedBy - An array of users who have liked the comment.
+ * @param text - The text content of the comment.
+ * @param handleLikeComment - Function to call when the user likes the comment.
+ * @param handleDislikeComment - Function to call when the user dislikes the comment.
+ *
+ * @returns The rendered comment card component.
+ */
function commentCard(props: InterfaceCommentCardProps): JSX.Element {
+ // Full name of the comment creator
const creatorName = `${props.creator.firstName} ${props.creator.lastName}`;
+ // Hook to get user ID from local storage
const { getItem } = useLocalStorage();
const userId = getItem('userId');
+
+ // Check if the current user has liked the comment
const likedByUser = props.likedBy.some((likedBy) => likedBy.id === userId);
+ // State to track the number of likes and if the comment is liked by the user
const [likes, setLikes] = React.useState(props.likeCount);
const [isLikedByUser, setIsLikedByUser] = React.useState(likedByUser);
+
+ // Mutation hooks for liking and unliking comments
const [likeComment, { loading: likeLoading }] = useMutation(LIKE_COMMENT);
const [unlikeComment, { loading: unlikeLoading }] =
useMutation(UNLIKE_COMMENT);
+ /**
+ * Toggles the like status of the comment.
+ *
+ * If the comment is already liked by the user, it will be unliked. Otherwise, it will be liked.
+ * Updates the number of likes and the like status accordingly.
+ *
+ * @returns A promise that resolves when the like/unlike operation is complete.
+ */
const handleToggleLike = async (): Promise => {
if (isLikedByUser) {
try {
@@ -54,9 +90,9 @@ function commentCard(props: InterfaceCommentCardProps): JSX.Element {
setIsLikedByUser(false);
props.handleDislikeComment(props.id);
}
- } catch (error: any) {
+ } catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
} else {
try {
@@ -71,9 +107,9 @@ function commentCard(props: InterfaceCommentCardProps): JSX.Element {
setIsLikedByUser(true);
props.handleLikeComment(props.id);
}
- } catch (error: any) {
+ } catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
}
};
diff --git a/src/components/UserPortal/ContactCard/ContactCard.test.tsx b/src/components/UserPortal/ContactCard/ContactCard.test.tsx
index 7f55196bb0..03136387a7 100644
--- a/src/components/UserPortal/ContactCard/ContactCard.test.tsx
+++ b/src/components/UserPortal/ContactCard/ContactCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/ContactCard/ContactCard.tsx b/src/components/UserPortal/ContactCard/ContactCard.tsx
index 69221e7583..cd135a9e01 100644
--- a/src/components/UserPortal/ContactCard/ContactCard.tsx
+++ b/src/components/UserPortal/ContactCard/ContactCard.tsx
@@ -13,16 +13,43 @@ interface InterfaceContactCardProps {
setSelectedChatType: React.Dispatch>;
}
+/**
+ * Displays a card for a contact in a contact list.
+ *
+ * Shows the contact's name, email, and an image or avatar.
+ * The card changes background color based on whether it is selected.
+ * Clicking on the card sets it as the selected contact and updates the contact name.
+ *
+ * @param props - The properties passed to the component.
+ * @param id - The unique identifier of the contact.
+ * @param firstName - The first name of the contact.
+ * @param lastName - The last name of the contact.
+ * @param email - The email address of the contact.
+ * @param image - The URL of the contact's image.
+ * @param selectedContact - The ID of the currently selected contact.
+ * @param setSelectedContact - Function to set the ID of the selected contact.
+ * @param setSelectedContactName - Function to set the name of the selected contact.
+ *
+ * @returns The rendered contact card component.
+ */
function contactCard(props: InterfaceContactCardProps): JSX.Element {
+ // Full name of the contact
+
+ /**
+ * Updates the selected contact and its name when the card is clicked.
+ */
+
const handleSelectedContactChange = (): void => {
props.setSelectedContact(props.id);
props.setSelectedChatType(props.type);
};
+ // State to track if the contact card is selected
const [isSelected, setIsSelected] = React.useState(
props.selectedContact === props.id,
);
+ // Update selection state when the selected contact changes
React.useEffect(() => {
setIsSelected(props.selectedContact === props.id);
}, [props.selectedContact]);
diff --git a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx
index b8c1dd86fb..338b890a2a 100644
--- a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx
+++ b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx
@@ -2107,7 +2107,7 @@ describe('Testing Create Direct Chat Modal [User Portal]', () => {
})),
});
- test('Test open and close create new direct chat modal', async () => {
+ test('open and close create new direct chat modal', async () => {
const mock = [
...GROUP_CHAT_BY_ID_QUERY_MOCK,
...DIRECT_CHAT_BY_ID_QUERY_MOCK,
@@ -2157,7 +2157,7 @@ describe('Testing Create Direct Chat Modal [User Portal]', () => {
fireEvent.click(closeButton);
});
- test('Test create new direct chat', async () => {
+ test('create new direct chat', async () => {
setItem('userId', '1');
const mock = [
CREATE_DIRECT_CHAT_MOCK,
diff --git a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx
index 565dfd422f..2f16dd4b0f 100644
--- a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx
+++ b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx
@@ -19,9 +19,18 @@ import { Search } from '@mui/icons-material';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
+/**
+ * Props for the CreateDirectChat component.
+ */
interface InterfaceCreateDirectChatProps {
toggleCreateDirectChatModal: () => void;
createDirectChatModalisOpen: boolean;
+ /**
+ * Function to refetch the contact list.
+ *
+ * @param variables - Optional variables to filter the contact list.
+ * @returns Promise with ApolloQueryResult.
+ */
contactRefetch: (
variables?:
| Partial<{
@@ -31,6 +40,9 @@ interface InterfaceCreateDirectChatProps {
) => Promise>;
}
+/**
+ * Styled table cell with custom styles.
+ */
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: ['#31bb6b', '!important'],
@@ -41,6 +53,9 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
},
}));
+/**
+ * Styled table row with custom styles.
+ */
const StyledTableRow = styled(TableRow)(() => ({
'&:last-child td, &:last-child th': {
border: 0,
@@ -49,6 +64,12 @@ const StyledTableRow = styled(TableRow)(() => ({
const { getItem } = useLocalStorage();
+/**
+ * Component for creating a direct chat with a selected user.
+ *
+ * @param props - The props for the CreateDirectChat component.
+ * @returns JSX.Element
+ */
export default function groupChat({
toggleCreateDirectChatModal,
createDirectChatModalisOpen,
@@ -66,6 +87,12 @@ export default function groupChat({
const [createDirectChat] = useMutation(CREATE_DIRECT_CHAT);
+ /**
+ * Handles the creation of a direct chat with a selected user.
+ *
+ * @param id - The ID of the user to start a direct chat with.
+ * @returns Promise
+ */
const handleCreateDirectChat = async (id: string): Promise => {
console.log(organizationId);
await createDirectChat({
@@ -89,6 +116,12 @@ export default function groupChat({
},
});
+ /**
+ * Handles changes in the user search input and refetches the user list.
+ *
+ * @param e - The form event.
+ * @returns void
+ */
const handleUserModalSearchChange = (e: React.FormEvent): void => {
e.preventDefault();
/* istanbul ignore next */
diff --git a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx
index 3898653f47..77447dc29c 100644
--- a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx
+++ b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx
@@ -2543,7 +2543,7 @@ describe('Testing Create Direct Chat Modal [User Portal]', () => {
})),
});
- test('Test open and close create new direct chat modal', async () => {
+ test('open and close create new direct chat modal', async () => {
const mock = [
...USER_JOINED_ORG_MOCK,
...GROUP_CHAT_BY_ID_QUERY_MOCK,
@@ -2580,7 +2580,7 @@ describe('Testing Create Direct Chat Modal [User Portal]', () => {
fireEvent.click(closeButton);
});
- test('Test create new group chat', async () => {
+ test('create new group chat', async () => {
const mock = [
...CREATE_GROUP_CHAT_MOCK,
...USER_JOINED_ORG_MOCK,
@@ -2657,7 +2657,7 @@ describe('Testing Create Direct Chat Modal [User Portal]', () => {
});
}, 3000);
- test('Test add and remove user ', async () => {
+ test('add and remove user', async () => {
setItem('userId', '1');
const mock = [
...USER_JOINED_ORG_MOCK,
diff --git a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx
index 29884fc2bd..3c0af847fb 100644
--- a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx
+++ b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx
@@ -87,6 +87,13 @@ const StyledTableRow = styled(TableRow)(() => ({
const { getItem } = useLocalStorage();
+/**
+ *
+ * @param toggleCreateGroupChatModal - function to toggle the create group chat modal
+ * @param createGroupChatModalisOpen - boolean to check if the create group chat modal is open
+ * @param groupChatListRefetch - function to refetch the group chat list
+ * @returns - returns the create group chat modal
+ */
export default function CreateGroupChat({
toggleCreateGroupChatModal,
createGroupChatModalisOpen,
diff --git a/src/components/UserPortal/DonationCard/DonationCard.test.tsx b/src/components/UserPortal/DonationCard/DonationCard.test.tsx
index 4e49ed8b26..cddf62dd6c 100644
--- a/src/components/UserPortal/DonationCard/DonationCard.test.tsx
+++ b/src/components/UserPortal/DonationCard/DonationCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render } from '@testing-library/react';
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/DonationCard/DonationCard.tsx b/src/components/UserPortal/DonationCard/DonationCard.tsx
index 696c5fb57b..63082f6acf 100644
--- a/src/components/UserPortal/DonationCard/DonationCard.tsx
+++ b/src/components/UserPortal/DonationCard/DonationCard.tsx
@@ -3,8 +3,24 @@ import styles from './DonationCard.module.css';
import { type InterfaceDonationCardProps } from 'screens/UserPortal/Donate/Donate';
import { Button } from 'react-bootstrap';
+/**
+ * Displays a card with details about a donation.
+ *
+ * Shows the donor's name, the amount donated, and the date of the donation.
+ * Includes a button to view more details about the donation.
+ *
+ * @param props - The properties passed to the component.
+ * @param name - The name of the donor.
+ * @param amount - The amount donated.
+ * @param updatedAt - The date of the donation, in ISO format.
+ *
+ * @returns The rendered donation card component.
+ */
function donationCard(props: InterfaceDonationCardProps): JSX.Element {
+ // Create a date object from the donation date string
const date = new Date(props.updatedAt);
+
+ // Format the date into a readable string
const formattedDate = new Intl.DateTimeFormat('en-US', {
weekday: 'short',
year: 'numeric',
diff --git a/src/components/UserPortal/EventCard/EventCard.tsx b/src/components/UserPortal/EventCard/EventCard.tsx
index db8cd69785..e93138ce42 100644
--- a/src/components/UserPortal/EventCard/EventCard.tsx
+++ b/src/components/UserPortal/EventCard/EventCard.tsx
@@ -35,21 +35,59 @@ interface InterfaceEventCardProps {
}[];
}
+/**
+ * Displays information about an event and provides an option to register for it.
+ *
+ * Shows the event's title, description, location, start and end dates and times,
+ * creator's name, and registration status. Includes a button to register for the event
+ * if the user is not already registered.
+ *
+ * @param props - The properties for the event card.
+ * @param id - The unique identifier of the event.
+ * @param title - The title of the event.
+ * @param description - A description of the event.
+ * @param location - The location where the event will take place.
+ * @param startDate - The start date of the event in ISO format.
+ * @param endDate - The end date of the event in ISO format.
+ * @param isRegisterable - Indicates if the event can be registered for.
+ * @param isPublic - Indicates if the event is public.
+ * @param endTime - The end time of the event in HH:mm:ss format.
+ * @param startTime - The start time of the event in HH:mm:ss format.
+ * @param recurring - Indicates if the event is recurring.
+ * @param allDay - Indicates if the event lasts all day.
+ * @param creator - The creator of the event with their name and ID.
+ * @param registrants - A list of registrants with their IDs.
+ *
+ * @returns The event card component.
+ */
function eventCard(props: InterfaceEventCardProps): JSX.Element {
+ // Extract the translation functions
const { t } = useTranslation('translation', {
keyPrefix: 'userEventCard',
});
const { t: tCommon } = useTranslation('common');
+
+ // Get user ID from local storage
const { getItem } = useLocalStorage();
const userId = getItem('userId');
+
+ // Create a full name for the event creator
const creatorName = `${props.creator.firstName} ${props.creator.lastName}`;
+
+ // Check if the user is initially registered for the event
const isInitiallyRegistered = props.registrants.some(
(registrant) => registrant.id === userId,
);
+ // Set up the mutation for registering for the event
const [registerEventMutation, { loading }] = useMutation(REGISTER_EVENT);
const [isRegistered, setIsRegistered] = React.useState(isInitiallyRegistered);
+ /**
+ * Handles registering for the event.
+ * If the user is not already registered, sends a mutation request to register.
+ * Displays a success or error message based on the result.
+ */
const handleRegister = async (): Promise => {
if (!isRegistered) {
try {
@@ -65,7 +103,7 @@ function eventCard(props: InterfaceEventCardProps): JSX.Element {
}
} catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
}
};
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
index dba4286290..ba13fe346d 100644
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
@@ -250,7 +250,7 @@ describe('Testing OrganizationCard Component [User Portal]', () => {
fireEvent.click(screen.getByTestId('joinBtn'));
await wait();
- expect(toast.success).toHaveBeenCalledWith('users.MembershipRequestSent');
+ expect(toast.success).toHaveBeenCalledWith('MembershipRequestSent');
});
test('send membership request to public org', async () => {
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
index fdb2d040d9..e1c2c23beb 100644
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
@@ -48,6 +48,26 @@ interface InterfaceOrganizationCardProps {
}[];
}
+/**
+ * Displays an organization card with options to join or manage membership.
+ *
+ * Shows the organization's name, image, description, address, number of admins and members,
+ * and provides buttons for joining, withdrawing membership requests, or visiting the organization page.
+ *
+ * @param props - The properties for the organization card.
+ * @param id - The unique identifier of the organization.
+ * @param name - The name of the organization.
+ * @param image - The URL of the organization's image.
+ * @param description - A description of the organization.
+ * @param admins - The list of admins with their IDs.
+ * @param members - The list of members with their IDs.
+ * @param address - The address of the organization including city, country code, line1, postal code, and state.
+ * @param membershipRequestStatus - The status of the membership request (accepted, pending, or empty).
+ * @param userRegistrationRequired - Indicates if user registration is required to join the organization.
+ * @param membershipRequests - The list of membership requests with user IDs.
+ *
+ * @returns The organization card component.
+ */
const userId: string | null = getItem('userId');
function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
@@ -58,6 +78,7 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
const navigate = useNavigate();
+ // Mutations for handling organization memberships
const [sendMembershipRequest] = useMutation(SEND_MEMBERSHIP_REQUEST, {
refetchQueries: [
{ query: USER_ORGANIZATION_CONNECTION, variables: { id: props.id } },
@@ -77,6 +98,10 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
variables: { id: userId },
});
+ /**
+ * Handles joining the organization. Sends a membership request if registration is required,
+ * otherwise joins the public organization directly. Displays success or error messages.
+ */
async function joinOrganization(): Promise {
try {
if (props.userRegistrationRequired) {
@@ -85,28 +110,31 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
organizationId: props.id,
},
});
- toast.success(t('MembershipRequestSent'));
+ toast.success(t('MembershipRequestSent') as string);
} else {
await joinPublicOrganization({
variables: {
organizationId: props.id,
},
});
- toast.success(t('orgJoined'));
+ toast.success(t('orgJoined') as string);
}
refetch();
} catch (error: unknown) {
/* istanbul ignore next */
if (error instanceof Error) {
if (error.message === 'User is already a member') {
- toast.error(t('AlreadyJoined'));
+ toast.error(t('AlreadyJoined') as string);
} else {
- toast.error(t('errorOccured'));
+ toast.error(t('errorOccured') as string);
}
}
}
}
+ /**
+ * Handles withdrawing a membership request. Finds the request for the current user and cancels it.
+ */
async function withdrawMembershipRequest(): Promise {
const membershipRequest = props.membershipRequests.find(
(request) => request.user._id === userId,
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
index 027234b641..038ff626df 100644
--- a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
import 'jest-localstorage-mock';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter, Router } from 'react-router-dom';
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
index 90cd75a83c..34022fcfcf 100644
--- a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import styles from './OrganizationNavbar.module.css';
-import TalawaImage from 'assets/images/talawa-logo-200x200.png';
+import TalawaImage from 'assets/images/talawa-logo-600x600.png';
import { Container, Dropdown, Nav, Navbar, Offcanvas } from 'react-bootstrap';
import { languages } from 'utils/languages';
import i18next from 'i18next';
@@ -26,6 +26,21 @@ type Plugin = {
translated: string;
view: boolean;
};
+
+/**
+ * Displays the organization navbar with navigation options, user settings, and language selection.
+ *
+ * The navbar includes:
+ * - Organization branding and name.
+ * - Navigation links for various plugins based on user permissions.
+ * - Language dropdown for changing the interface language.
+ * - User dropdown for accessing settings and logging out.
+ *
+ * @param props - The properties for the navbar.
+ * @param currentPage - The current page identifier for highlighting the active navigation link.
+ *
+ * @returns The organization navbar component.
+ */
function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
const { t } = useTranslation('translation', {
keyPrefix: 'userNavbar',
@@ -37,7 +52,7 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
const [organizationDetails, setOrganizationDetails] = React.useState<{
name: string;
}>({ name: '' });
- // const dropDirection: DropDirection = screen.width > 767 ? 'start' : 'down';
+
const dropDirection: DropDirection = 'start';
const { orgId: organizationId } = useParams();
@@ -53,6 +68,9 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
const { getItem, setItem } = useLocalStorage();
+ /**
+ * Handles user logout by clearing local storage and redirecting to the home page.
+ */
/* istanbul ignore next */
const handleLogout = (): void => {
localStorage.clear();
@@ -60,6 +78,7 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
};
const userName = getItem('name');
+
React.useEffect(() => {
if (data) {
setOrganizationDetails({ name: data.organizationsConnection[0].name });
@@ -67,6 +86,7 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
}, [data]);
const homeLink = `/user/organization/${organizationId}`;
+
let plugins: Plugin[] = [
{
pluginName: 'People',
@@ -97,15 +117,14 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
// view: true,
// },
];
+
if (getItem('talawaPlugins')) {
const talawaPlugins: string = getItem('talawaPlugins') || '{}';
plugins = JSON.parse(talawaPlugins);
}
- const { data: updatedPluginData } = useSubscription(
- PLUGIN_SUBSCRIPTION,
- // { variables: { } }
- );
+ const { data: updatedPluginData } = useSubscription(PLUGIN_SUBSCRIPTION);
+
function getPluginIndex(pluginName: string, pluginsArray: Plugin[]): number {
return pluginsArray.findIndex((plugin) => plugin.pluginName === pluginName);
}
@@ -129,6 +148,7 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
}
}
}
+
return (
diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
index c5fbcf335e..c08240462a 100644
--- a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
+++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx
index ede5e0a103..796d30d568 100644
--- a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx
+++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx
@@ -17,14 +17,30 @@ import type {
InterfaceQueryOrganizationEventListItem,
InterfaceMemberInfo,
} from 'utils/interfaces';
-import { skip } from 'node:test';
+/**
+ * OrganizationSidebar displays the sidebar for an organization, showing a list of members and events.
+ *
+ * This component fetches and displays:
+ * - The top 3 members of the organization with their images and names.
+ * - The top 3 upcoming events for the organization with their titles, start, and end dates.
+ *
+ * It includes:
+ * - A link to view all members.
+ * - A link to view all events.
+ *
+ * The sidebar handles loading states and displays appropriate messages while data is being fetched.
+ *
+ * @returns JSX.Element representing the organization sidebar.
+ */
export default function organizationSidebar(): JSX.Element {
+ // Translation functions for different namespaces
const { t } = useTranslation('translation', {
keyPrefix: 'organizationSidebar',
});
const { t: tCommon } = useTranslation('common');
+ // Extract the organization ID from the URL parameters
const { orgId: organizationId } = useParams();
const [members, setMembers] = React.useState<
InterfaceMemberInfo[] | undefined
@@ -35,28 +51,35 @@ export default function organizationSidebar(): JSX.Element {
const eventsLink = `/user/events/${organizationId}`;
const peopleLink = `/user/people/${organizationId}`;
+ // Query to fetch members of the organization
const { data: memberData, loading: memberLoading } = useQuery(
ORGANIZATIONS_MEMBER_CONNECTION_LIST,
{
variables: {
orgId: organizationId,
- first: 3,
- skip: 0,
+ first: 3, // Fetch top 3 members
+ skip: 0, // No offset
},
},
);
+ // Query to fetch events of the organization
const { data: eventsData, loading: eventsLoading } = useQuery(
ORGANIZATION_EVENT_CONNECTION_LIST,
{
variables: {
organization_id: organizationId,
- first: 3,
- skip: 0,
+ first: 3, // Fetch top 3 upcoming events
+ skip: 0, // No offset
},
},
);
+ /**
+ * Effect hook to update members state when memberData is fetched.
+ *
+ * Sets the members state with the data from the query.
+ */
/* istanbul ignore next */
useEffect(() => {
if (memberData) {
@@ -64,6 +87,11 @@ export default function organizationSidebar(): JSX.Element {
}
}, [memberData]);
+ /**
+ * Effect hook to update events state when eventsData is fetched.
+ *
+ * Sets the events state with the data from the query.
+ */
/* istanbul ignore next */
useEffect(() => {
if (eventsData) {
@@ -73,6 +101,7 @@ export default function organizationSidebar(): JSX.Element {
return (
+ {/* Members section */}
{tCommon('members')}
@@ -109,12 +138,15 @@ export default function organizationSidebar(): JSX.Element {
)}
+ {/* Link to view all members */}
{t('viewAll')}
+
+ {/* Events section */}
{t('events')}
@@ -155,6 +187,8 @@ export default function organizationSidebar(): JSX.Element {
)}
)}
+
+ {/* Link to view all events */}
{t('viewAll')}
diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx b/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
index 5cadfa923b..fd5d6c7f93 100644
--- a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
+++ b/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render } from '@testing-library/react';
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.tsx b/src/components/UserPortal/PeopleCard/PeopleCard.tsx
index ec06122359..e6b6088801 100644
--- a/src/components/UserPortal/PeopleCard/PeopleCard.tsx
+++ b/src/components/UserPortal/PeopleCard/PeopleCard.tsx
@@ -2,6 +2,9 @@ import React from 'react';
import aboutImg from 'assets/images/defaultImg.png';
import styles from './PeopleCard.module.css';
+/**
+ * Props interface for the PeopleCard component.
+ */
interface InterfaceOrganizationCardProps {
id: string;
name: string;
@@ -11,15 +14,32 @@ interface InterfaceOrganizationCardProps {
sno: string;
}
+/**
+ * PeopleCard component displays information about a person within an organization.
+ *
+ * It includes:
+ * - An image of the person or a default image if none is provided.
+ * - The serial number of the person.
+ * - The person's name.
+ * - The person's email address.
+ * - The person's role within the organization, styled with a border.
+ *
+ * @param props - The properties passed to the component.
+ * @returns JSX.Element representing a card with the person's details.
+ */
function peopleCard(props: InterfaceOrganizationCardProps): JSX.Element {
+ // Determine the image URL; use default image if no image URL is provided
const imageUrl = props.image ? props.image : aboutImg;
return (
+ {/* Container for serial number and image */}
+ {/* Serial number */}
{props.sno}
+ {/* Person's image */}
+ {/* Person's name */}
{props.name}
+ {/* Person's email */}
{props.email}
+ {/* Person's role with additional styling */}
{props.role}
diff --git a/src/components/UserPortal/PostCard/PostCard.test.tsx b/src/components/UserPortal/PostCard/PostCard.test.tsx
index 64f6670223..f7d9217308 100644
--- a/src/components/UserPortal/PostCard/PostCard.test.tsx
+++ b/src/components/UserPortal/PostCard/PostCard.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx
index d1bfbb1391..f8fcdaebca 100644
--- a/src/components/UserPortal/PostCard/PostCard.tsx
+++ b/src/components/UserPortal/PostCard/PostCard.tsx
@@ -53,6 +53,19 @@ interface InterfaceCommentCardProps {
handleDislikeComment: (commentId: string) => void;
}
+/**
+ * PostCard component displays an individual post, including its details, interactions, and comments.
+ *
+ * The component allows users to:
+ * - View the post's details in a modal.
+ * - Edit or delete the post.
+ * - Like or unlike the post.
+ * - Add comments to the post.
+ * - Like or dislike individual comments.
+ *
+ * @param props - The properties passed to the component including post details, comments, and related actions.
+ * @returns JSX.Element representing a post card with interactive features.
+ */
export default function postCard(props: InterfacePostCard): JSX.Element {
const { t } = useTranslation('translation', {
keyPrefix: 'postCard',
@@ -61,8 +74,12 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
const { getItem } = useLocalStorage();
+ // Retrieve user ID from local storage
const userId = getItem('userId');
+ // Check if the post is liked by the current user
const likedByUser = props.likedBy.some((likedBy) => likedBy.id === userId);
+
+ // State variables
const [comments, setComments] = React.useState(props.comments);
const [numComments, setNumComments] = React.useState(props.commentCount);
@@ -73,8 +90,10 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
const [showEditPost, setShowEditPost] = React.useState(false);
const [postContent, setPostContent] = React.useState
(props.text);
+ // Post creator's full name
const postCreator = `${props.creator.firstName} ${props.creator.lastName}`;
+ // GraphQL mutations
const [likePost, { loading: likeLoading }] = useMutation(LIKE_POST);
const [unLikePost, { loading: unlikeLoading }] = useMutation(UNLIKE_POST);
const [create, { loading: commentLoading }] =
@@ -82,12 +101,18 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
const [editPost] = useMutation(UPDATE_POST_MUTATION);
const [deletePost] = useMutation(DELETE_POST_MUTATION);
+ // Toggle the view post modal
const toggleViewPost = (): void => setViewPost(!viewPost);
+
+ // Toggle the edit post modal
const toggleEditPost = (): void => setShowEditPost(!showEditPost);
+
+ // Handle input changes for the post content
const handlePostInput = (e: React.ChangeEvent): void => {
setPostContent(e.target.value);
};
+ // Toggle like or unlike the post
const handleToggleLike = async (): Promise => {
if (isLikedByUser) {
try {
@@ -103,7 +128,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
}
} catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
} else {
try {
@@ -119,11 +144,12 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
}
} catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
}
};
+ // Handle changes to the comment input field
const handleCommentInput = (
event: React.ChangeEvent,
): void => {
@@ -131,6 +157,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
setCommentInput(comment);
};
+ // Dislike a comment
const handleDislikeComment = (commentId: string): void => {
const updatedComments = comments.map((comment) => {
let updatedComment = { ...comment };
@@ -148,6 +175,8 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
});
setComments(updatedComments);
};
+
+ // Like a comment
const handleLikeComment = (commentId: string): void => {
const updatedComments = comments.map((comment) => {
let updatedComment = { ...comment };
@@ -166,6 +195,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
setComments(updatedComments);
};
+ // Create a new comment
const createComment = async (): Promise => {
try {
const { data: createEventData } = await create({
@@ -203,6 +233,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
}
};
+ // Edit the post
const handleEditPost = (): void => {
try {
editPost({
@@ -212,14 +243,16 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
},
});
- props.fetchPosts();
+ props.fetchPosts(); // Refresh the posts
toggleEditPost();
- toast.success(tCommon('updatedSuccessfully', { item: 'Post' }));
+ toast.success(tCommon('updatedSuccessfully', { item: 'Post' }) as string);
} catch (error: unknown) {
/* istanbul ignore next */
errorHandler(t, error);
}
};
+
+ // Delete the post
const handleDeletePost = (): void => {
try {
deletePost({
@@ -228,7 +261,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
},
});
- props.fetchPosts();
+ props.fetchPosts(); // Refresh the posts
toast.success('Successfully deleted the Post.');
} catch (error: unknown) {
/* istanbul ignore next */
diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
index b5d753551c..6ec8ec5de7 100644
--- a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
+++ b/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, waitFor } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.tsx
index 72ee107217..c1af98f367 100644
--- a/src/components/UserPortal/PromotedPost/PromotedPost.tsx
+++ b/src/components/UserPortal/PromotedPost/PromotedPost.tsx
@@ -2,11 +2,24 @@ import React from 'react';
import { Card } from 'react-bootstrap';
import styles from './PromotedPost.module.css';
import StarPurple500Icon from '@mui/icons-material/StarPurple500';
+
interface InterfacePostCardProps {
id: string;
image: string;
title: string;
}
+
+/**
+ * PromotedPost component displays a card representing promoted content.
+ *
+ * This component includes:
+ * - A header with a star icon indicating the content is promoted.
+ * - A title and description of the promoted content.
+ * - An optional image associated with the promoted content.
+ *
+ * @param props - Properties passed to the component including an image, title, and ID.
+ * @returns JSX.Element representing a card with promoted content.
+ */
export default function promotedPost(
props: InterfacePostCardProps,
): JSX.Element {
@@ -15,13 +28,17 @@ export default function promotedPost(
+ {/* Icon indicating promoted content */}
{'Promoted Content'}
+ {/* Display the title of the promoted content */}
{props.title}
+ {/* Display a brief description or the title again */}
{props.title}
+ {/* Conditionally render the image if provided */}
{props.image && (
)}
diff --git a/src/components/UserPortal/Register/Register.test.tsx b/src/components/UserPortal/Register/Register.test.tsx
index cdcfb9ebc0..f9929a0588 100644
--- a/src/components/UserPortal/Register/Register.test.tsx
+++ b/src/components/UserPortal/Register/Register.test.tsx
@@ -1,6 +1,6 @@
import type { SetStateAction } from 'react';
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/Register/Register.tsx b/src/components/UserPortal/Register/Register.tsx
index a9a4a52d85..11a810c955 100644
--- a/src/components/UserPortal/Register/Register.tsx
+++ b/src/components/UserPortal/Register/Register.tsx
@@ -13,21 +13,30 @@ import { toast } from 'react-toastify';
import { errorHandler } from 'utils/errorHandler';
interface InterfaceRegisterProps {
+ /**
+ * Function to change the current mode (e.g., from register to login).
+ */
setCurrentMode: React.Dispatch>;
}
export default function register(props: InterfaceRegisterProps): JSX.Element {
const { setCurrentMode } = props;
+ // Translation hooks for user registration and common text
const { t } = useTranslation('translation', { keyPrefix: 'userRegister' });
const { t: tCommon } = useTranslation('common');
+ /**
+ * Changes the mode to login when invoked.
+ */
const handleModeChangeToLogin = (): void => {
setCurrentMode('login');
};
+ // Mutation hook for user registration
const [registerMutation] = useMutation(SIGNUP_MUTATION);
+ // State to manage the registration form variables
const [registerVariables, setRegisterVariables] = React.useState({
firstName: '',
lastName: '',
@@ -36,6 +45,9 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
confirmPassword: '',
});
+ /**
+ * Handles the registration process by validating inputs and invoking the mutation.
+ */
const handleRegister = async (): Promise => {
if (
!(
@@ -45,11 +57,11 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
registerVariables.lastName
)
) {
- toast.error(t('invalidDetailsMessage'));
+ toast.error(t('invalidDetailsMessage') as string); // Error if fields are missing
} else if (
registerVariables.password !== registerVariables.confirmPassword
) {
- toast.error(t('passwordNotMatch'));
+ toast.error(t('passwordNotMatch') as string); // Error if passwords do not match
} else {
try {
await registerMutation({
@@ -61,8 +73,9 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
},
});
- toast.success(t('afterRegister'));
+ toast.success(t('afterRegister') as string); // Success message
+ // Reset form fields
/* istanbul ignore next */
setRegisterVariables({
firstName: '',
@@ -72,33 +85,47 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
confirmPassword: '',
});
} catch (error: unknown) {
+ // Handle any errors during registration
/* istanbul ignore next */
errorHandler(t, error);
}
}
};
+ /**
+ * Updates the state with the first name input value.
+ * @param e - Change event from the input element
+ */
/* istanbul ignore next */
const handleFirstName = (e: ChangeEvent): void => {
const firstName = e.target.value;
-
setRegisterVariables({ ...registerVariables, firstName });
};
+ /**
+ * Updates the state with the last name input value.
+ * @param e - Change event from the input element
+ */
/* istanbul ignore next */
const handleLastName = (e: ChangeEvent): void => {
const lastName = e.target.value;
-
setRegisterVariables({ ...registerVariables, lastName });
};
+ /**
+ * Updates the state with the email input value.
+ * @param e - Change event from the input element
+ */
/* istanbul ignore next */
const handleEmailChange = (e: ChangeEvent): void => {
const email = e.target.value;
-
setRegisterVariables({ ...registerVariables, email });
};
+ /**
+ * Updates the state with the password input value.
+ * @param e - Change event from the input element
+ */
/* istanbul ignore next */
const handlePasswordChange = (e: ChangeEvent): void => {
const password = e.target.value;
@@ -106,6 +133,10 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
setRegisterVariables({ ...registerVariables, password });
};
+ /**
+ * Updates the state with the confirm password input value.
+ * @param e - Change event from the input element
+ */
/* istanbul ignore next */
const handleConfirmPasswordChange = (
e: ChangeEvent,
diff --git a/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx
index f21047579d..21d091dad6 100644
--- a/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx
+++ b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx
@@ -3,10 +3,23 @@ import { Navigate, Outlet } from 'react-router-dom';
import PageNotFound from 'screens/PageNotFound/PageNotFound';
import useLocalStorage from 'utils/useLocalstorage';
+/**
+ * A component that guards routes by checking if the user is logged in.
+ * If the user is logged in and does not have 'AdminFor' set, the child routes are rendered.
+ * If the user is not logged in, they are redirected to the homepage.
+ * If the user is logged in but has 'AdminFor' set, a 404 page is shown.
+ *
+ * @returns JSX.Element - Rendered component based on user authentication and role.
+ */
const SecuredRouteForUser = (): JSX.Element => {
+ // Custom hook to interact with local storage
const { getItem } = useLocalStorage();
+
+ // Check if the user is logged in and the role of the user
const isLoggedIn = getItem('IsLoggedIn');
const adminFor = getItem('AdminFor');
+
+ // Conditional rendering based on authentication status and role
return isLoggedIn === 'TRUE' ? (
<>{adminFor == undefined ? : }
) : (
diff --git a/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx b/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
index 5a2e815af4..5c436705cd 100644
--- a/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
+++ b/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
import type { RenderResult } from '@testing-library/react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import userEvent from '@testing-library/user-event';
import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
diff --git a/src/components/UserPortal/StartPostModal/StartPostModal.tsx b/src/components/UserPortal/StartPostModal/StartPostModal.tsx
index 91f3563147..d48b8425fa 100644
--- a/src/components/UserPortal/StartPostModal/StartPostModal.tsx
+++ b/src/components/UserPortal/StartPostModal/StartPostModal.tsx
@@ -20,6 +20,23 @@ interface InterfaceStartPostModalProps {
img: string | null;
}
+/**
+ * A modal component for creating a new post.
+ *
+ * This modal includes:
+ * - A form where users can input the content of the post.
+ * - A preview of the image if provided.
+ * - User's profile image and name displayed in the modal header.
+ *
+ * @param show - Whether the modal is visible.
+ * @param onHide - Function to call when the modal is hidden.
+ * @param fetchPosts - Function to refresh the posts after creating a new one.
+ * @param userData - User data to display in the modal header.
+ * @param organizationId - The ID of the organization for the post.
+ * @param img - The URL of the image to be included in the post.
+ *
+ * @returns JSX.Element - The rendered modal component.
+ */
const startPostModal = ({
show,
onHide,
@@ -28,20 +45,36 @@ const startPostModal = ({
organizationId,
img,
}: InterfaceStartPostModalProps): JSX.Element => {
+ // Translation hook for internationalization
const { t } = useTranslation('translation', { keyPrefix: 'home' });
+
+ // State to manage the content of the post
const [postContent, setPostContent] = useState('');
+ // Mutation hook for creating a new post
const [createPost] = useMutation(CREATE_POST_MUTATION);
+ /**
+ * Updates the state with the content of the post as the user types.
+ *
+ * @param e - Change event from the textarea input.
+ */
const handlePostInput = (e: ChangeEvent): void => {
setPostContent(e.target.value);
};
+ /**
+ * Hides the modal and clears the post content.
+ */
const handleHide = (): void => {
setPostContent('');
onHide();
};
+ /**
+ * Handles the creation of a new post by calling the mutation.
+ * Displays a toast notification based on the outcome.
+ */
const handlePost = async (): Promise => {
try {
if (!postContent) {
@@ -60,7 +93,7 @@ const startPostModal = ({
/* istanbul ignore next */
if (data) {
toast.dismiss();
- toast.success(t('postNowVisibleInFeed'));
+ toast.success(t('postNowVisibleInFeed') as string);
fetchPosts();
handleHide();
}
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
index 59e3585aa0..8c3447f25a 100644
--- a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
index f58c061440..4160b00aad 100644
--- a/src/components/UserPortal/UserNavbar/UserNavbar.tsx
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import styles from './UserNavbar.module.css';
-import TalawaImage from 'assets/images/talawa-logo-200x200.png';
+import TalawaImage from 'assets/images/talawa-logo-600x600.png';
import { Container, Dropdown, Navbar } from 'react-bootstrap';
import { languages } from 'utils/languages';
import i18next from 'i18next';
@@ -13,24 +13,45 @@ import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
import { useNavigate } from 'react-router-dom';
import useLocalStorage from 'utils/useLocalstorage';
+/**
+ * Navbar component for user-specific actions and settings.
+ *
+ * This component provides:
+ * - A branding image and name.
+ * - A dropdown for language selection.
+ * - A dropdown for user actions including profile settings and logout.
+ *
+ * @returns JSX.Element - The rendered Navbar component.
+ */
function userNavbar(): JSX.Element {
+ // Hook for local storage operations
const { getItem } = useLocalStorage();
+
+ // Hook for programmatic navigation
const navigate = useNavigate();
+ // Translation hook for internationalization
const { t } = useTranslation('translation', {
keyPrefix: 'userNavbar',
});
const { t: tCommon } = useTranslation('common');
+ // Mutation hook for revoking the refresh token
const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
+ // State for managing the current language code
const [currentLanguageCode, setCurrentLanguageCode] = React.useState(
/* istanbul ignore next */
cookies.get('i18next') || 'en',
);
+ // Retrieve the username from local storage
const userName = getItem('name');
+ /**
+ * Handles user logout by revoking the refresh token and clearing local storage.
+ * Redirects to the home page after logout.
+ */
/* istanbul ignore next */
const handleLogout = (): void => {
revokeRefreshToken();
@@ -41,6 +62,7 @@ function userNavbar(): JSX.Element {
return (
+ {/* Navbar brand with logo and name */}
![]()
{t('talawa')}
+ {/* Navbar toggle button for responsive design */}
+
+ {/* Navbar collapsible content */}
+ {/* Dropdown for language selection */}
+ {/* Dropdown for user actions */}
+ {/* Display the user's name */}
{userName}
+ {/* Link to user settings */}
navigate('/user/settings')}
className={styles.link}
>
{tCommon('settings')}
+ {/* Logout button */}
{tCommon('logout')}
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
index 2984604951..7218bc745c 100644
--- a/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import type { RenderResult } from '@testing-library/react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
@@ -19,14 +19,17 @@ import useLocalStorage from 'utils/useLocalstorage';
const { setItem } = useLocalStorage();
const resizeWindow = (width: number): void => {
- window.innerWidth = width;
- fireEvent(window, new Event('resize'));
+ act(() => {
+ window.innerWidth = width;
+ fireEvent(window, new Event('resize'));
+ });
};
const props = {
hideDrawer: true,
setHideDrawer: jest.fn(),
};
+
const MOCKS = [
{
request: {
@@ -366,38 +369,48 @@ describe('Testing UserSidebar Component [User Portal]', () => {
});
test('Component should be rendered properly', async () => {
- renderUserSidebar('properId', link);
- await wait();
+ await act(async () => {
+ renderUserSidebar('properId', link);
+ await wait();
+ });
});
test('Component should be rendered properly when userImage is present', async () => {
- renderUserSidebar('imagePresent', link);
- await wait();
+ await act(async () => {
+ renderUserSidebar('imagePresent', link);
+ await wait();
+ });
});
test('Component should be rendered properly when organizationImage is present', async () => {
- renderUserSidebar('imagePresent', link);
- await wait();
+ await act(async () => {
+ renderUserSidebar('imagePresent', link);
+ await wait();
+ });
});
test('Component should be rendered properly when joinedOrganizations list is empty', async () => {
- renderUserSidebar('orgEmpty', link);
- await wait();
+ await act(async () => {
+ renderUserSidebar('orgEmpty', link);
+ await wait();
+ });
});
- test('Testing Drawer when the screen size is less than or equal to 820px', () => {
- resizeWindow(800);
- render(
-
-
-
-
-
-
-
-
- ,
- );
+ test('Testing Drawer when the screen size is less than or equal to 820px', async () => {
+ await act(async () => {
+ resizeWindow(800);
+ render(
+
+
+
+
+
+
+
+
+ ,
+ );
+ });
expect(screen.getByText('My Organizations')).toBeInTheDocument();
expect(screen.getByText('Settings')).toBeInTheDocument();
expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
@@ -405,13 +418,21 @@ describe('Testing UserSidebar Component [User Portal]', () => {
const orgsBtn = screen.getAllByTestId(/orgsBtn/i);
- orgsBtn[0].click();
- expect(
- orgsBtn[0].className.includes('text-white btn btn-success'),
- ).toBeTruthy();
- settingsBtn.click();
- expect(
- settingsBtn.className.includes('text-white btn btn-success'),
- ).toBeTruthy();
+ act(() => {
+ orgsBtn[0].click();
+ });
+ await waitFor(() =>
+ expect(
+ orgsBtn[0].className.includes('text-white btn btn-success'),
+ ).toBeTruthy(),
+ );
+ act(() => {
+ settingsBtn.click();
+ });
+ await waitFor(() =>
+ expect(
+ settingsBtn.className.includes('text-white btn btn-success'),
+ ).toBeTruthy(),
+ );
});
});
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
index dc0c1e3622..5e258f8a8e 100644
--- a/src/components/UserPortal/UserSidebar/UserSidebar.tsx
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
@@ -2,10 +2,10 @@ import React from 'react';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
import { NavLink } from 'react-router-dom';
-import { ReactComponent as OrganizationsIcon } from 'assets/svgs/organizations.svg';
-import { ReactComponent as SettingsIcon } from 'assets/svgs/settings.svg';
-import { ReactComponent as ChatIcon } from 'assets/svgs/chat.svg';
-import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
+import OrganizationsIcon from 'assets/svgs/organizations.svg?react';
+import SettingsIcon from 'assets/svgs/settings.svg?react';
+import ChatIcon from 'assets/svgs/chat.svg?react';
+import TalawaLogo from 'assets/svgs/talawa.svg?react';
import styles from './UserSidebar.module.css';
export interface InterfaceUserSidebarProps {
@@ -13,13 +13,31 @@ export interface InterfaceUserSidebarProps {
setHideDrawer: React.Dispatch>;
}
+/**
+ * Sidebar component for user navigation, including links to organizations and settings.
+ *
+ * Provides:
+ * - A logo and title for the sidebar.
+ * - Navigation buttons for "My Organizations" and "Settings".
+ * - Dynamic styling based on the active route.
+ *
+ * @param hideDrawer - Boolean indicating if the sidebar should be hidden or shown.
+ * @param setHideDrawer - Function to update the `hideDrawer` state.
+ *
+ * @returns JSX.Element - The rendered sidebar component.
+ */
const userSidebar = ({
hideDrawer,
setHideDrawer,
}: InterfaceUserSidebarProps): JSX.Element => {
+ // Translation hook for internationalization
const { t } = useTranslation('translation', { keyPrefix: 'userSidebarOrg' });
const { t: tCommon } = useTranslation('common');
+ /**
+ * Handles click events on navigation links.
+ * Closes the sidebar if the viewport width is 820px or less.
+ */
const handleLinkClick = (): void => {
if (window.innerWidth <= 820) {
setHideDrawer(true);
@@ -38,12 +56,14 @@ const userSidebar = ({
}`}
data-testid="leftDrawerContainer"
>
+ {/* Logo and title */}
{t('talawaUserPortal')}
{tCommon('menu')}
+ {/* Link to "My Organizations" page */}
{({ isActive }) => (
+ {/* Link to "Settings" page */}
{({ isActive }) => (