error handling and short lines of code

src/components/DynamicDropDown/DynamicDropDown.tsx

@@ -78,6 +78,15 @@ const DynamicDropDown = <T extends Record<string, unknown>>({
       <Dropdown.Menu
         data-testid={`${fieldName.toLowerCase()}-dropdown-menu`}
         role="listbox"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const focused = document.activeElement;
+            if (focused instanceof HTMLElement) {
+              focused.click();
+            }
+          }
+        }}
       >
         {fieldOptions.map((option, index: number) => (
           <Dropdown.Item

src/components/EventManagement/EventAttendance/AttendedEventList.tsx

@@ -15,12 +15,9 @@ const AttendedEventList: React.FC<InterfaceEventsAttended> = ({ eventId }) => {
     variables: { id: eventId },
     fetchPolicy: 'cache-first',
     errorPolicy: 'all',
-    onError: (error) => {
-      console.error('Failed to fetch event details:', error);
-    },
   });
 
-  if (error) {
+  if (error || data?.error) {
     return <p>Error loading event details. Please try again later.</p>;
   }
 

src/components/EventManagement/EventAttendance/EventAttendance.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Search } from '@mui/icons-material';
 import {
   Paper,
@@ -64,20 +64,19 @@ function EventAttendance(): JSX.Element {
   >('All');
   const [show, setShow] = useState(false);
 
-  const { data: memberData, refetch: memberRefetch } = useLazyQuery(
-    EVENT_ATTENDEES,
-    {
+  const [getEventAttendees, { data: memberData, loading, error }] =
+    useLazyQuery(EVENT_ATTENDEES, {
       variables: {
         id: eventId,
       },
-    },
-  )[1];
+    });
 
   useEffect(() => {
-    memberRefetch({
-      id: eventId,
-    });
-  }, [eventId, memberRefetch]);
+    getEventAttendees();
+  }, [eventId, getEventAttendees]);
+
+  if (loading) return <p> {t('loading')}</p>;
+  if (error) return <p>{error.message} </p>;
 
   const sortAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
     return [...attendees].sort((a, b) => {
@@ -150,17 +149,23 @@ function EventAttendance(): JSX.Element {
   const showModal = (): void => setShow(true);
   const handleClose = (): void => setShow(false);
 
-  const totalMembers = filteredAttendees.length;
-  const membersAttended = filteredAttendees.filter(
-    (member) => member?.eventsAttended && member.eventsAttended.length > 0,
-  ).length;
-  const attendanceRate =
-    totalMembers > 0 ? (membersAttended / totalMembers) * 100 : 0;
+  const statistics = useMemo(() => {
+    const totalMembers = filteredAttendees.length;
+    const membersAttended = filteredAttendees.filter(
+      (member) => member?.eventsAttended && member.eventsAttended.length > 0,
+    ).length;
+    const attendanceRate =
+      totalMembers > 0
+        ? Number(((membersAttended / totalMembers) * 100).toFixed(2))
+        : 0;
+
+    return { totalMembers, membersAttended, attendanceRate };
+  }, [filteredAttendees]);
   return (
     <div className="">
       <AttendanceStatisticsModal
         show={show}
-        statistics={{ totalMembers, membersAttended, attendanceRate }}
+        statistics={statistics}
         handleClose={handleClose}
         memberData={filteredAttendees}
       />
@@ -336,11 +341,11 @@ function EventAttendance(): JSX.Element {
                     align="left"
                     data-testid={`attendee-events-attended-${index}`}
                   >
-                    <a href="#">
+                    <span className={styles.eventsAttended}>
                       {member.eventsAttended
                         ? member.eventsAttended.length
                         : '0'}
-                    </a>
+                    </span>
                   </TableCell>
                 </Tooltip>
                 <TableCell

src/components/EventManagement/EventAttendance/EventsAttendance.module.css

@@ -11,6 +11,23 @@
   padding-top: 10px !important;
   padding-bottom: 10px !important;
 }
+
+.customTooltip {
+  background-color: white;
+  font-size: 2em;
+  max-height: 170px;
+  overflow-y: scroll;
+  scrollbar-color: white;
+  border: 1px solid green;
+  border-radius: 6px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.1);
+}
+.membername {
+  color:blue;
+}
+.eventsAttended{
+  color:blue;
+}
 .actionBtn {
   /* color:#39a440 !important; */
   background-color: #ffffff !important;

src/components/MemberDetail/EventsAttendedByMember.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useQuery } from '@apollo/client';
 import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
 import EventAttendedCard from './EventsAttendedCardItem';
+import { Spinner } from 'react-bootstrap';
 
 interface InterfaceEventsAttendedByMember {
   eventsId: string;
@@ -18,22 +19,33 @@ function EventsAttendedByMember({
     variables: { id: eventsId },
   });
 
-  if (loading) return <div data-testid="loading">Loading...</div>;
-  if (error) return <div data-testid="error">Error: {error.message}</div>;
+  if (loading)
+    return (
+      <div data-testid="loading" className="loading-state">
+        <Spinner />
+        <p>Loading event details...</p>
+      </div>
+    );
+  if (error)
+    return (
+      <div data-testid="error" className="error-state">
+        <p>Unable to load event details. Please try again later.</p>
+      </div>
+    );
+
+  const { organization, _id, startDate, title, location } = events.event;
 
   return (
-    <React.Fragment>
-      <EventAttendedCard
-        data-testid="EventsAttendedCard"
-        type="Event"
-        orgId={events?.event?.organization._id}
-        eventId={events?.event?._id}
-        key={events?.event?._id}
-        startdate={events?.event?.startDate}
-        title={events?.event?.title}
-        location={events?.event?.location}
-      />
-    </React.Fragment>
+    <EventAttendedCard
+      data-testid="EventsAttendedCard"
+      type="Event"
+      orgId={organization._id}
+      eventId={_id}
+      key={_id}
+      startdate={startDate}
+      title={title}
+      location={location}
+    />
   );
 }
 

src/components/MemberDetail/EventsAttendedCardItem.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import EventAttendedCard from './EventsAttendedCardItem';
 
@@ -45,33 +45,18 @@ describe('EventAttendedCard', () => {
   });
 
   it('renders link with correct path', () => {
-    render(
-      <BrowserRouter>
-        <EventAttendedCard {...mockProps} />
-      </BrowserRouter>,
-    );
-
+    renderComponent();
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('href', '/event/org123/event456');
   });
 
   it('renders location icon', () => {
-    render(
-      <BrowserRouter>
-        <EventAttendedCard {...mockProps} />
-      </BrowserRouter>,
-    );
-
+    renderComponent();
     expect(screen.getByTestId('LocationOnIcon')).toBeInTheDocument();
   });
 
   it('renders chevron right icon', () => {
-    render(
-      <BrowserRouter>
-        <EventAttendedCard {...mockProps} />
-      </BrowserRouter>,
-    );
-
+    renderComponent();
     expect(screen.getByTestId('ChevronRightIcon')).toBeInTheDocument();
   });
 });

src/components/MemberDetail/EventsAttendedCardItem.tsx

@@ -58,4 +58,3 @@ const EventAttendedCard = (props: InterfaceCardItem): JSX.Element => {
 };
 
 export default EventAttendedCard;
-a;

src/components/MemberDetail/EventsAttendedMemberModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   Table,
   TableBody,

src/components/MemberDetail/customTableCell.tsx

@@ -12,6 +12,8 @@ export const CustomTableCell: React.FC<{ eventId: string }> = ({ eventId }) => {
     },
     errorPolicy: 'all',
     fetchPolicy: 'cache-first',
+    nextFetchPolicy: 'cache-and-network',
+    pollInterval: 30000,
   });
 
   if (loading)
@@ -24,22 +26,20 @@ export const CustomTableCell: React.FC<{ eventId: string }> = ({ eventId }) => {
     );
 
   if (error) {
-    /*istanbul ignore next*/
     return (
       <TableRow data-testid="error-state">
         <TableCell colSpan={4} align="center">
-          {`Error loading event details: ${error.message}`}
+          {`Unable to load event details. Please try again later.`}
         </TableCell>
       </TableRow>
     );
   }
   const event = data?.event;
-  /*istanbul ignore next*/
   if (!event) {
     return (
       <TableRow data-testid="no-event-state">
         <TableCell colSpan={4} align="center">
-          No event found
+          Event not found or has been deleted
         </TableCell>
       </TableRow>
     );

src/screens/MemberDetail/MemberDetail.tsx

@@ -91,7 +91,6 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
     variables: { id: currentUrl },
   });
   const userData = user?.user;
-  console.log(userData?.user?.registeredEvents);
   const [isUpdated, setisUpdated] = useState(false);
   useEffect(() => {
     if (userData && isMounted.current) {
@@ -514,79 +513,6 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
           </Col>
         )}
       </Row>
-
-      {/* Actions */}
-      {/* <div className={`personal mt-4 bg-white border ${styles.allRound}`}>
-              <div
-                className={`d-flex flex-column border-bottom py-3 px-4 ${styles.topRadius}`}
-              >
-                <h3>{t('actionsHeading')}</h3>
-              </div>
-              <div className="p-3">
-                <div className="toggles">
-                  <div className="d-flex flex-row">
-                    <input
-                      type="checkbox"
-                      name="pluginCreationAllowed"
-                      className={`mx-2 ${styles.noOutline}`}
-                      checked={formState.pluginCreationAllowed}
-                      onChange={handleToggleChange} // API not supporting this feature
-                      data-testid="pluginCreationAllowed"
-                      placeholder="pluginCreationAllowed"
-                    />
-                    <p className="p-0 m-0">
-                      {`${t('pluginCreationAllowed')} (API not supported yet)`}
-                    </p>
-                  </div>
-                </div>
-                <div className="buttons d-flex flex-row gap-3 mt-2">
-                  <div className={styles.dispflex}>
-                    <div>
-                      <label>
-                        {t('appLanguageCode')} <br />
-                        <select
-                          className="form-control"
-                          data-testid="applangcode"
-                          onChange={(e): void => {
-                            setFormState({
-                              ...formState,
-                              appLanguageCode: e.target.value,
-                            });
-                          }}
-                          value={formState.appLanguageCode}
-                        >
-                          {languages.map((language, index: number) => (
-                            <option key={index} value={language.code}>
-                              {language.name}
-                            </option>
-                          ))}
-                        </select>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="d-flex flex-column">
-                    <label htmlFor="">
-                      {t('deleteUser')}
-                      <br />
-                      {`(API not supported yet)`}
-                    </label>
-                    <Button className="btn btn-danger" data-testid="deleteBtn">
-                      {t('deleteUser')}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </div> */}
-      {/* <div className="buttons mt-4">
-              <Button
-                type="button"
-                className={styles.greenregbtn}
-                value="savechanges"
-                onClick={loginLink}
-              >
-                {tCommon('saveChanges')}
-              </Button>
-            </div> */}
       <Card className={`${styles.contact} ${styles.allRound} mt-3`}>
         <Card.Header
           className={`bg-primary d-flex justify-content-between align-items-center py-3 px-4 ${styles.topRadius}`}
@@ -605,12 +531,12 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
         <Card.Body
           className={`${styles.cardBody} ${styles.scrollableCardBody}`}
         >
-          {userData?.user.eventsAttended.length === 0 || null || undefined ? (
+          {!userData?.user.eventsAttended?.length ? (
             <div className={styles.emptyContainer}>
               <h6>{t('noeventsAttended')}</h6>
             </div>
           ) : (
-            userData?.user.eventsAttended.map(
+            userData.user.eventsAttended.map(
               (event: InterfaceEvent, index: number) => (
                 <span data-testid="membereventsCard" key={index}>
                   <EventsAttendedByMember eventsId={event._id} key={index} />