improved refactoring statistics

duplixx · Nov 1, 2024 · 63faea3 · 63faea3
1 parent bfcf39b
commit 63faea3
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -120,6 +120,7 @@
     "@types/react": "^18.3.3",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-bootstrap": "^0.32.32",
+    "@types/react-chartjs-2": "^2.5.7",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-google-recaptcha": "^2.1.9",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -739,6 +739,17 @@
     "attendance": "Attendance",
     "to": "TO"
   },
+  "eventAttendance": {
+    "historical_statistics": "Historical Statistics",
+    "Search member": "Search member",
+    "Member Name": "Member Name",
+    "Status": "Status",
+    "Events Attended": "Events Attended",
+    "Task Assigned": "Task Assigned",
+    "Member": "Member",
+    "Admin": "Admin",
+    "loading": "Loading..."
+  },
   "forgotPassword": {
     "title": "Talawa Forgot Password",
     "registeredEmail": "Registered Email",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -1042,6 +1042,17 @@
     "article": "Article",
     "postNowVisibleInFeed": "Le post est maintenant visible dans le fil d'actualité"
   },
+  "eventAttendance": {
+    "historical_statistics": "Statistiques historiques",
+    "Search member": "Rechercher un membre",
+    "Member Name": "Nom du membre",
+    "Status": "Statut",
+    "Events Attended": "Événements assistés",
+    "Task Assigned": "Tâche assignée",
+    "Member": "Membre",
+    "Admin": "Administrateur",
+    "loading": "Chargement..."
+  },
   "settings": {
     "eventAttended": "Événements Assistés",
     "noeventsAttended": "Aucun événement assisté",

diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
@@ -1042,7 +1042,17 @@
     "article": "लेख",
     "postNowVisibleInFeed": "पोस्ट अब फीड में दिखाई दे रहा है"
   },
-  "settings": {
+  "eventAttendance": {
+    "historical_statistics": "ऐतिहासिक आंकड़े",
+    "Search member": "सदस्य खोजें",
+    "Member Name": "सदस्य का नाम",
+    "Status": "स्थिति",
+    "Events Attended": "भाग लिए गए कार्यक्रम",
+    "Task Assigned": "सौंपा गया कार्य",
+    "Member": "सदस्य",
+    "Admin": "व्यवस्थापक",
+    "loading": "लोड हो रहा है"
+  },  "settings": {
     "noeventsAttended": "कोई कार्यक्रम में उपस्थित नहीं",
     "eventAttended": "भाग लिए गए कार्यक्रम",
     "profileSettings": "पार्श्वचित्र समायोजन",

diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
@@ -1044,6 +1044,18 @@
     "article": "Artículo",
     "postNowVisibleInFeed": "Publicar ahora visible en el feed"
   },
+
+  "eventAttendance": {
+    "historical_statistics": "Estadísticas históricas",
+    "Search member": "Buscar miembro",
+    "Member Name": "Nombre del miembro",
+    "Status": "Estado",
+    "Events Attended": "Eventos asistidos",
+    "Task Assigned": "Tarea asignada",
+    "Member": "Miembro",
+    "Admin": "Administrador",
+    "loading": "Cargando..."
+  },
   "settings": {
     "settings": "Ajustes",
     "eventAttended": "Événements Assistés",

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -1042,6 +1042,17 @@
     "article": "文章",
     "postNowVisibleInFeed": "帖子现在在动态中可见"
   },
+  "eventAttendance": {
+    "historical_statistics": "历史统计",
+    "Search member": "搜索成员",
+    "Member Name": "成员姓名",
+    "Status": "状态",
+    "Events Attended": "参加的活动",
+    "Task Assigned": "分配的任务",
+    "Member": "成员",
+    "Admin": "管理员",
+    "loading": "加载中..."
+  },
   "settings": {
     "noeventsAttended": "未参加任何活动",
     "eventAttended": "参加的活动",

diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
@@ -31,7 +31,9 @@ enum FilterPeriod {
 }
 
 function EventAttendance(): JSX.Element {
-  const { t } = useTranslation();
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventAttendance',
+  });
   const { eventId } = useParams<{ eventId: string }>();
   const { orgId: currentUrl } = useParams();
   const [filteredAttendees, setFilteredAttendees] = useState<InterfaceMember[]>(
@@ -114,6 +116,10 @@ function EventAttendance(): JSX.Element {
       variables: {
         id: eventId,
       },
+      fetchPolicy: 'cache-and-network',
+      nextFetchPolicy: 'cache-first',
+      errorPolicy: 'all',
+      notifyOnNetworkStatusChange: true,
     });
 
   useEffect(() => {
@@ -139,6 +145,7 @@ function EventAttendance(): JSX.Element {
         statistics={statistics}
         handleClose={handleClose}
         memberData={filteredAttendees}
+        t={t}
       />
       <div className="d-flex justify-content-between">
         <div className="d-flex w-100">
@@ -147,7 +154,7 @@ function EventAttendance(): JSX.Element {
             onClick={showModal}
             data-testid="stats-modal"
           >
-            Historical Statistics
+            {t('historical_statistics')}
           </Button>
         </div>
         <div className="d-flex justify-content-between align-items-end w-100 ">
@@ -217,12 +224,14 @@ function EventAttendance(): JSX.Element {
       </div>
       {/* <h3>{totalMembers}</h3> */}
       <TableContainer component={Paper} className="mt-3">
-        <Table aria-label="customized table">
+        <Table aria-label={t('event_attendance_table')} role="grid">
           <TableHead>
-            <TableRow className="" data-testid="table-header-row">
+            <TableRow className="" data-testid="table-header-row" role="row">
               <TableCell
                 className={styles.customcell}
                 data-testid="header-index"
+                role="columnheader"
+                aria-sort="none"
               >
                 #
               </TableCell>

diff --git a/src/components/EventManagement/EventAttendance/EventStatistics.tsx b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
@@ -14,16 +14,22 @@ import { useParams } from 'react-router-dom';
 import { EVENT_DETAILS, RECURRING_EVENTS } from 'GraphQl/Queries/Queries';
 import { useLazyQuery } from '@apollo/client';
 import { exportToCSV } from 'utils/chartToPdf';
-import type { TooltipItem } from 'chart.js';
+import type { ChartOptions, TooltipItem } from 'chart.js';
 import type {
   InterfaceAttendanceStatisticsModalProps,
   InterfaceEvent,
   InterfaceRecurringEvent,
 } from './InterfaceEvents';
+import { toast } from 'react-toastify';
 
+const CHART_COLORS = {
+  primary: '#1f77b4', // Color-blind friendly blue
+  secondary: '#ff7f0e', // Color-blind friendly orange
+  tertiary: '#2ca02c', // Color-blind friendly green
+};
 export const AttendanceStatisticsModal: React.FC<
   InterfaceAttendanceStatisticsModalProps
-> = ({ show, handleClose, statistics, memberData }): JSX.Element => {
+> = ({ show, handleClose, statistics, memberData, t }): JSX.Element => {
   const [selectedCategory, setSelectedCategory] = useState('Gender');
   const { orgId, eventId } = useParams();
   const [currentPage, setCurrentPage] = useState(0);
@@ -64,9 +70,10 @@ export const AttendanceStatisticsModal: React.FC<
       ),
     [paginatedRecurringEvents],
   );
-  const chartOptions = {
+  const chartOptions: ChartOptions<'line'> = {
     responsive: true,
     maintainAspectRatio: false,
+    animation: false,
     scales: { y: { beginAtZero: true } },
     plugins: {
       tooltip: {
@@ -257,19 +264,28 @@ export const AttendanceStatisticsModal: React.FC<
     exportToCSV(data, `${selectedCategory.toLowerCase()}_demographics.csv`);
   }, [selectedCategory, categoryLabels, categoryData]);
 
-  const handleExport = (eventKey: string | null): number | void => {
+  const handleExport = (eventKey: string | null): void => {
     switch (eventKey) {
       case 'trends':
-        exportTrendsToCSV();
+        try {
+          exportTrendsToCSV();
+        } catch (error) {
+          console.error('Failed to export trends:', error);
+          toast.error('Failed to export trends');
+        }
         break;
       case 'demographics':
-        exportDemographicsToCSV();
+        try {
+          exportDemographicsToCSV();
+        } catch (error) {
+          console.error('Failed to export demographics:', error);
+          toast.error('Failed to export demographics');
+        }
         break;
       default:
-        return 0;
+        return;
     }
   };
-
   useEffect(() => {
     if (eventId) {
       loadEventDetails({ variables: { id: eventId } });
@@ -295,7 +311,7 @@ export const AttendanceStatisticsModal: React.FC<
     >
       <Modal.Header closeButton className="bg-success">
         <Modal.Title className="text-white" data-testid="modal-title">
-          Attendance Statistics
+          {t('historical_statistics')}
         </Modal.Title>
       </Modal.Header>
       <Modal.Body

diff --git a/src/components/EventManagement/EventAttendance/InterfaceEvents.ts b/src/components/EventManagement/EventAttendance/InterfaceEvents.ts
@@ -7,6 +7,7 @@ export interface InterfaceAttendanceStatisticsModalProps {
     attendanceRate: number;
   };
   memberData: InterfaceMember[];
+  t: (key: string) => string;
 }
 
 export interface InterfaceMember {

diff --git a/src/components/UserPortal/UserProfile/EventsAttendedByUser.test.tsx b/src/components/UserPortal/UserProfile/EventsAttendedByUser.test.tsx
@@ -2,7 +2,15 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { EventsAttendedByUser } from './EventsAttendedByUser';
 
-const mockT = (key: string): string => key;
+const mockT = (key: string, params?: Record<string, string>): string => {
+  if (params) {
+    return Object.entries(params).reduce(
+      (acc, [key, value]) => acc.replace(`{{${key}}}`, value),
+      key,
+    );
+  }
+  return key;
+};
 
 describe('EventsAttendedByUser Component', () => {
   const mockUserWithEvents = {

diff --git a/src/components/UserPortal/UserProfile/UserAddressFields.tsx b/src/components/UserPortal/UserProfile/UserAddressFields.tsx
@@ -65,14 +65,17 @@ export const UserAddressFields: React.FC<InterfaceUserAddressFieldsProps> = ({
           <option value="" disabled>
             {t('selectCountry')}
           </option>
-          {countryOptions.map((country) => (
-            <option
-              key={country.value.toUpperCase()}
-              value={country.value.toUpperCase()}
-            >
-              {country.label}
-            </option>
-          ))}
+          {[...countryOptions]
+            .sort((a, b) => a.label.localeCompare(b.label))
+            .map((country) => (
+              <option
+                key={country.value.toUpperCase()}
+                value={country.value.toUpperCase()}
+                aria-label={`Select ${country.label} as your country`}
+              >
+                {country.label}
+              </option>
+            ))}
         </Form.Control>
       </Col>
     </Row>

diff --git a/src/screens/MemberDetail/MemberDetail.test.tsx b/src/screens/MemberDetail/MemberDetail.test.tsx
@@ -623,9 +623,9 @@ describe('MemberDetail', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
-    await wait(1000);
-    // Check if the card title is rendered
-    expect(screen.getByText('Events Attended')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Events Attended')).toBeInTheDocument();
+    });
     // Check for empty state immediately
     expect(screen.getByText('No Events Attended')).toBeInTheDocument();
   });

diff --git a/src/screens/UserPortal/Settings/Settings.tsx b/src/screens/UserPortal/Settings/Settings.tsx
@@ -321,8 +321,7 @@ export default function settings(): JSX.Element {
                           async (
                             e: React.ChangeEvent<HTMLInputElement>,
                           ): Promise<void> => {
-                            const target = e.target as HTMLInputElement;
-                            const file = target.files && target.files[0];
+                            const file = e.target?.files?.[0];
                             if (file) {
                               const image = await convertToBase64(file);
                               setUserDetails({ ...userDetails, image });