Fix: Resolved failed test cases

gkbishnoi07 · gkbishnoi07 · commit 3964b4d9db40 · 2025-01-09T23:08:44.000Z
diff --git a/src/components/OrganizationCard/OrganizationCard.tsx b/src/components/OrganizationCard/OrganizationCard.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import styles from './OrganizationCard.module.css';
 import { Button } from 'react-bootstrap';
@@ -10,15 +9,17 @@ import {
   JOIN_PUBLIC_ORGANIZATION,
   SEND_MEMBERSHIP_REQUEST,
 } from 'GraphQl/Mutations/OrganizationMutations';
-import { useMutation, useQuery, ApolloError } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import {
   USER_JOINED_ORGANIZATIONS,
   USER_ORGANIZATION_CONNECTION,
 } from 'GraphQl/Queries/OrganizationQueries';
+import useLocalStorage from 'utils/useLocalstorage';
 import Avatar from 'components/Avatar/Avatar';
 import { useNavigate } from 'react-router-dom';
+import { ApolloError } from '@apollo/client';
 
-import { useLocalStorage } from 'utils/useLocalstorage';
+const { getItem } = useLocalStorage();
 
 interface InterfaceOrganizationCardProps {
   id: string;
@@ -48,88 +49,103 @@ interface InterfaceOrganizationCardProps {
   }[];
 }
 
-function OrganizationCard({
-  id,
-  name,
-  image,
-  description,
-  admins,
-  members,
-  address,
-  membershipRequestStatus,
-  userRegistrationRequired,
-  membershipRequests,
-}: InterfaceOrganizationCardProps): JSX.Element {
-  const { getItem } = useLocalStorage();
-  const userId = getItem('userId');
-
+/**
+ * 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 {
   const { t } = useTranslation('translation', {
     keyPrefix: 'users',
   });
   const { t: tCommon } = useTranslation('common');
 
   const navigate = useNavigate();
 
+  // Mutations for handling organization memberships
   const [sendMembershipRequest] = useMutation(SEND_MEMBERSHIP_REQUEST, {
     refetchQueries: [
-      { query: USER_ORGANIZATION_CONNECTION, variables: { id } },
+      { query: USER_ORGANIZATION_CONNECTION, variables: { id: props.id } },
     ],
   });
-
   const [joinPublicOrganization] = useMutation(JOIN_PUBLIC_ORGANIZATION, {
     refetchQueries: [
-      { query: USER_ORGANIZATION_CONNECTION, variables: { id } },
+      { query: USER_ORGANIZATION_CONNECTION, variables: { id: props.id } },
     ],
   });
-
   const [cancelMembershipRequest] = useMutation(CANCEL_MEMBERSHIP_REQUEST, {
     refetchQueries: [
-      { query: USER_ORGANIZATION_CONNECTION, variables: { id } },
+      { query: USER_ORGANIZATION_CONNECTION, variables: { id: props.id } },
     ],
   });
-
   const { refetch } = useQuery(USER_JOINED_ORGANIZATIONS, {
     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<void> {
     try {
-      if (userRegistrationRequired) {
+      if (props.userRegistrationRequired) {
         await sendMembershipRequest({
           variables: {
-            organizationId: id,
+            organizationId: props.id,
           },
         });
-        toast.success(t('MembershipRequestSent'));
+        toast.success(t('MembershipRequestSent') as string);
       } else {
         await joinPublicOrganization({
           variables: {
-            organizationId: id,
+            organizationId: props.id,
           },
         });
-        toast.success(t('orgJoined'));
+        toast.success(t('orgJoined') as string);
       }
       refetch();
     } catch (error: unknown) {
-      if (error instanceof ApolloError) {
-        const errorCode = error.graphQLErrors[0]?.extensions?.code;
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        const apolloError = error as ApolloError;
+        const errorCode = apolloError.graphQLErrors[0]?.extensions?.code;
+
         if (errorCode === 'ALREADY_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<void> {
+    const membershipRequest = props.membershipRequests.find(
+      (request) => request.user._id === userId,
+    );
     try {
-      const membershipRequest = membershipRequests.find(
-        (request) => request.user._id === userId,
-      );
-
       if (!membershipRequest) {
-        toast.error(t('MembershipRequestNotFound'));
+        toast.error(t('MembershipRequestNotFound') as string);
         return;
       }
 
@@ -138,84 +154,89 @@ function OrganizationCard({
           membershipRequestId: membershipRequest._id,
         },
       });
-      toast.success(t('MembershipRequestWithdrawn'));
-    } catch (error: unknown) {
-      console.error(error);
-      toast.error(t('errorOccured'));
+
+      toast.success(t('MembershipRequestWithdrawn') as string);
+    } catch (error) {
+      toast.error(t('errorOccured') as string);
     }
   }
 
   return (
-    <div className={styles.orgCard}>
-      <div className={styles.innerContainer}>
-        <div className={styles.orgImgContainer}>
-          {image ? (
-            <img src={image} alt={`${name} image`} />
-          ) : (
-            <Avatar
-              name={name}
-              alt={`${name} image`}
-              dataTestId="emptyContainerForImage"
-            />
-          )}
-        </div>
-        <div className={styles.content}>
-          <Tooltip title={name} placement="top-end">
-            <h4 className={`${styles.orgName} fw-semibold`}>{name}</h4>
-          </Tooltip>
-          <h6 className={`${styles.orgdesc} fw-semibold`}>
-            <span>{description}</span>
-          </h6>
-          {address && address.city && (
-            <div className={styles.address}>
-              <h6 className="text-secondary">
-                <span className="address-line">{address.line1}, </span>
-                <span className="address-line">{address.city}, </span>
-                <span className="address-line">{address.countryCode}</span>
-              </h6>
-            </div>
-          )}
-          <h6 className={styles.orgadmin}>
-            {tCommon('admins')}: <span>{admins?.length}</span> &nbsp; &nbsp;
-            &nbsp; {tCommon('members')}: <span>{members?.length}</span>
-          </h6>
+    <>
+      <div className={styles.orgCard}>
+        <div className={styles.innerContainer}>
+          <div className={styles.orgImgContainer}>
+            {props.image ? (
+              <img src={props.image} alt={`${props.name} image`} />
+            ) : (
+              <Avatar
+                name={props.name}
+                alt={`${props.name} image`}
+                dataTestId="emptyContainerForImage"
+              />
+            )}
+          </div>
+          <div className={styles.content}>
+            <Tooltip title={props.name} placement="top-end">
+              <h4 className={`${styles.orgName} fw-semibold`}>{props.name}</h4>
+            </Tooltip>
+            <h6 className={`${styles.orgdesc} fw-semibold`}>
+              <span>{props.description}</span>
+            </h6>
+            {props.address && props.address.city && (
+              <div className={styles.address}>
+                <h6 className="text-secondary">
+                  <span className="address-line">{props.address.line1}, </span>
+                  <span className="address-line">{props.address.city}, </span>
+                  <span className="address-line">
+                    {props.address.countryCode}
+                  </span>
+                </h6>
+              </div>
+            )}
+            <h6 className={styles.orgadmin}>
+              {tCommon('admins')}: <span>{props.admins?.length}</span> &nbsp;
+              &nbsp; &nbsp; {tCommon('members')}:{' '}
+              <span>{props.members?.length}</span>
+            </h6>
+          </div>
         </div>
+        {props.membershipRequestStatus === 'accepted' && (
+          <Button
+            variant="success"
+            data-testid="manageBtn"
+            className={styles.joinedBtn}
+            onClick={() => {
+              navigate(`/user/organization/${props.id}`);
+            }}
+          >
+            {t('visit')}
+          </Button>
+        )}
+
+        {props.membershipRequestStatus === 'pending' && (
+          <Button
+            variant="danger"
+            onClick={withdrawMembershipRequest}
+            data-testid="withdrawBtn"
+            className={styles.withdrawBtn}
+          >
+            {t('withdraw')}
+          </Button>
+        )}
+
+        {props.membershipRequestStatus === '' && (
+          <Button
+            onClick={joinOrganization}
+            data-testid="joinBtn"
+            className={styles.joinBtn}
+            variant="outline-success"
+          >
+            {t('joinNow')}
+          </Button>
+        )}
       </div>
-      {membershipRequestStatus === 'accepted' && (
-        <Button
-          variant="success"
-          data-testid="manageBtn"
-          className={styles.joinedBtn}
-          onClick={() => {
-            navigate(`/user/organization/${id}`);
-          }}
-        >
-          {t('visit')}
-        </Button>
-      )}
-
-      {membershipRequestStatus === 'pending' && (
-        <Button
-          variant="danger"
-          onClick={withdrawMembershipRequest}
-          data-testid="withdrawBtn"
-          className={styles.withdrawBtn}
-        >
-          {t('withdraw')}
-        </Button>
-      )}
-
-      {membershipRequestStatus === '' && (
-        <Button
-          onClick={joinOrganization}
-          data-testid="joinBtn"
-          className={styles.joinBtn}
-          variant="outline-success"
-        >
-          {t('joinNow')}
-        </Button>
-      )}
-    </div>
+    </>
   );
 }
 
