@@ -100,9 +124,11 @@ const Campaigns = (): JSX.Element => {
);
}
+ // Renders the campaign list and UI elements for searching, sorting, and adding pledges
return (
<>
+ {/* Search input field and button */}
{
+ {/* Dropdown menu for sorting campaigns */}
{
+ {/* Button to navigate to the user's pledges */}
{campaigns.length < 1 ? (
+ {/* Displayed if no campaigns are found */}
{t('noCampaigns')}
) : (
@@ -254,6 +283,7 @@ const Campaigns = (): JSX.Element => {
))
)}
+ {/* Modal for adding pledges to campaigns */}
void;
@@ -34,6 +37,20 @@ export interface InterfacePledgeModal {
endDate: Date;
mode: 'create' | 'edit';
}
+
+/**
+ * `PledgeModal` is a React component that allows users to create or edit a pledge for a specific campaign.
+ * It displays a form with inputs for pledge details such as amount, currency, dates, and users involved in the pledge.
+ *
+ * @param isOpen - Determines if the modal is visible or hidden.
+ * @param hide - Function to close the modal.
+ * @param campaignId - The ID of the campaign for which the pledge is being made.
+ * @param userId - The ID of the user making or editing the pledge.
+ * @param pledge - The current pledge information if in edit mode, or null if creating a new pledge.
+ * @param refetchPledge - Function to refresh the pledge data after a successful operation.
+ * @param endDate - The maximum date allowed for the pledge's end date, based on the campaign's end date.
+ * @param mode - Specifies whether the modal is used for creating a new pledge or editing an existing one.
+ */
const PledgeModal: React.FC = ({
isOpen,
hide,
@@ -44,11 +61,13 @@ const PledgeModal: React.FC = ({
endDate,
mode,
}) => {
+ // Translation functions to support internationalization
const { t } = useTranslation('translation', {
keyPrefix: 'pledges',
});
const { t: tCommon } = useTranslation('common');
+ // State to manage the form inputs for the pledge
const [formState, setFormState] = useState({
pledgeUsers: [],
pledgeAmount: pledge?.amount ?? 0,
@@ -56,10 +75,17 @@ const PledgeModal: React.FC = ({
pledgeEndDate: new Date(pledge?.endDate ?? new Date()),
pledgeStartDate: new Date(pledge?.startDate ?? new Date()),
});
+
+ // State to manage the list of pledgers (users who are part of the pledge)
const [pledgers, setPledgers] = useState([]);
+
+ // Mutation to update an existing pledge
const [updatePledge] = useMutation(UPDATE_PLEDGE);
+
+ // Mutation to create a new pledge
const [createPledge] = useMutation(CREATE_PlEDGE);
+ // Effect to update the form state when the pledge prop changes (e.g., when editing a pledge)
useEffect(() => {
setFormState({
pledgeUsers: pledge?.users ?? [],
@@ -70,6 +96,7 @@ const PledgeModal: React.FC = ({
});
}, [pledge]);
+ // Destructuring the form state for easier access
const {
pledgeUsers,
pledgeAmount,
@@ -78,12 +105,14 @@ const PledgeModal: React.FC = ({
pledgeEndDate,
} = formState;
+ // Query to get the user details based on the userId prop
const { data: userData } = useQuery(USER_DETAILS, {
variables: {
id: userId,
},
});
+ // Effect to update the pledgers state when user data is fetched
useEffect(() => {
if (userData) {
setPledgers([
@@ -97,6 +126,13 @@ const PledgeModal: React.FC = ({
}
}, [userData]);
+ /**
+ * Handler function to update an existing pledge.
+ * It compares the current form state with the existing pledge and updates only the changed fields.
+ *
+ * @param e - The form submission event.
+ * @returns A promise that resolves when the pledge is successfully updated.
+ */
/*istanbul ignore next*/
const updatePledgeHandler = useCallback(
async (e: ChangeEvent): Promise => {
@@ -140,7 +176,13 @@ const PledgeModal: React.FC = ({
[formState, pledge],
);
- // Function to create a new pledge
+ /**
+ * Handler function to create a new pledge.
+ * It collects the form data and sends a request to create a pledge with the specified details.
+ *
+ * @param e - The form submission event.
+ * @returns A promise that resolves when the pledge is successfully created.
+ */
const createPledgeHandler = useCallback(
async (e: ChangeEvent): Promise => {
try {
diff --git a/src/screens/UserPortal/Pledges/Pledges.tsx b/src/screens/UserPortal/Pledges/Pledges.tsx
index 83c70b3720..59802be507 100644
--- a/src/screens/UserPortal/Pledges/Pledges.tsx
+++ b/src/screens/UserPortal/Pledges/Pledges.tsx
@@ -47,6 +47,24 @@ enum ModalState {
UPDATE = 'update',
DELETE = 'delete',
}
+/**
+ * The `Pledges` component is responsible for rendering a user's pledges within a campaign.
+ * It fetches pledges data using Apollo Client's `useQuery` hook and displays the data
+ * in a DataGrid with various features such as search, sorting, and modal dialogs for updating
+ * or deleting a pledge. The component also handles various UI interactions including opening
+ * modals for editing or deleting a pledge, showing additional pledgers in a popup, and
+ * applying filters for searching pledges by campaign or pledger name.
+ *
+ * Key functionalities include:
+ * - Fetching pledges data from the backend using GraphQL query `USER_PLEDGES`.
+ * - Displaying pledges in a table with columns for pledgers, associated campaigns,
+ * end dates, pledged amounts, and actions.
+ * - Handling search and sorting of pledges.
+ * - Opening and closing modals for updating and deleting pledges.
+ * - Displaying additional pledgers in a popup when the list of pledgers exceeds a certain limit.
+ *
+ * @returns The rendered Pledges component.
+ */
const Pledges = (): JSX.Element => {
const { t } = useTranslation('translation', {
diff --git a/src/utils/errorHandler.tsx b/src/utils/errorHandler.tsx
index bb5d7ab05e..cdc6ebd5c6 100644
--- a/src/utils/errorHandler.tsx
+++ b/src/utils/errorHandler.tsx
@@ -7,7 +7,10 @@ import i18n from './i18n';
If the error is due to the Talawa API being unavailable, it displays a custom message.
*/
export const errorHandler = (a: unknown, error: unknown): void => {
- const tErrors: TFunction = i18n.getFixedT(null, 'errors');
+ const tErrors = i18n.getFixedT(
+ null,
+ 'errors',
+ ) as unknown as TFunction;
if (error instanceof Error) {
switch (error.message) {
case 'Failed to fetch':
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index 3af887465c..99267d239c 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -204,29 +204,31 @@ export interface InterfaceQueryOrganizationPostListItem {
};
}
-export interface InterfaceQueryOrganizationUserTags {
- userTags: {
- edges: {
- node: {
- _id: string;
- name: string;
- usersAssignedTo: {
- totalCount: number;
- };
- childTags: {
- totalCount: number;
- };
+interface InterfaceTagData {
+ edges: {
+ node: {
+ _id: string;
+ name: string;
+ usersAssignedTo: {
+ totalCount: number;
+ };
+ childTags: {
+ totalCount: number;
};
- cursor: string;
- }[];
- pageInfo: {
- startCursor: string;
- endCursor: string;
- hasNextPage: boolean;
- hasPreviousPage: boolean;
};
- totalCount: number;
+ cursor: string;
+ }[];
+ pageInfo: {
+ startCursor: string;
+ endCursor: string;
+ hasNextPage: boolean;
+ hasPreviousPage: boolean;
};
+ totalCount: number;
+}
+
+export interface InterfaceQueryOrganizationUserTags {
+ userTags: InterfaceTagData;
}
export interface InterfaceQueryUserTagsAssignedMembers {
@@ -249,6 +251,11 @@ export interface InterfaceQueryUserTagsAssignedMembers {
};
}
+export interface InterfaceQueryUserTagChildTags {
+ name: string;
+ childTags: InterfaceTagData;
+}
+
export interface InterfaceQueryOrganizationAdvertisementListItem {
advertisements: {
edges: {
diff --git a/src/utils/organizationTagsUtils.ts b/src/utils/organizationTagsUtils.ts
new file mode 100644
index 0000000000..5f81497c65
--- /dev/null
+++ b/src/utils/organizationTagsUtils.ts
@@ -0,0 +1,23 @@
+// This file will contain the utililities for organization tags
+
+// This is the style object for mui's data grid used to list the data (tags and member data)
+export const dataGridStyle = {
+ '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+ outline: 'none !important',
+ },
+ '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+ outline: 'none',
+ },
+ '& .MuiDataGrid-row:hover': {
+ backgroundColor: 'transparent',
+ },
+ '& .MuiDataGrid-row.Mui-hovered': {
+ backgroundColor: 'transparent',
+ },
+ '& .MuiDataGrid-root': {
+ borderRadius: '0.1rem',
+ },
+ '& .MuiDataGrid-main': {
+ borderRadius: '0.1rem',
+ },
+};