Filter and Dropdown Buttons replaced with Customized Sorting Button

src/components/EventCalendar/EventHeader.spec.tsx

@@ -69,7 +69,7 @@ describe('EventHeader Component', () => {
     fireEvent.click(getByTestId('eventType'));
 
     await act(async () => {
-      fireEvent.click(getByTestId('events'));
+      fireEvent.click(getByTestId('Events'));
     });
 
     expect(handleChangeView).toHaveBeenCalledTimes(1);

src/components/EventCalendar/EventHeader.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
 import { Search } from '@mui/icons-material';
 import styles from './EventCalendar.module.css';
 import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents';
 import { useTranslation } from 'react-i18next';
+import SortingButton from 'subComponents/SortingButton';
 
 /**
  * Props for the EventHeader component.
@@ -63,53 +64,30 @@ function eventHeader({
         </div>
         <div className={styles.flex_grow}></div>
         <div className={styles.space}>
-          <div>
-            <Dropdown onSelect={handleChangeView} className={styles.selectType}>
-              <Dropdown.Toggle
-                id="dropdown-basic"
-                className={styles.dropdown}
-                data-testid="selectViewType"
-              >
-                {viewType}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.Item
-                  eventKey={ViewType.MONTH}
-                  data-testid="selectMonth"
-                >
-                  {ViewType.MONTH}
-                </Dropdown.Item>
-                <Dropdown.Item eventKey={ViewType.DAY} data-testid="selectDay">
-                  {ViewType.DAY}
-                </Dropdown.Item>
-                <Dropdown.Item
-                  eventKey={ViewType.YEAR}
-                  data-testid="selectYear"
-                >
-                  {ViewType.YEAR}
-                </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
-          </div>
-          <div>
-            <Dropdown className={styles.selectType}>
-              <Dropdown.Toggle
-                id="dropdown-basic"
-                className={styles.dropdown}
-                data-testid="eventType"
-              >
-                {t('eventType')}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.Item eventKey="Events" data-testid="events">
-                  Events
-                </Dropdown.Item>
-                <Dropdown.Item eventKey="Workshops" data-testid="workshop">
-                  Workshops
-                </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
-          </div>
+          <SortingButton
+            title={t('viewType')}
+            sortingOptions={[
+              { label: ViewType.MONTH, value: 'selectMonth' },
+              { label: ViewType.DAY, value: 'selectDay' },
+              { label: ViewType.YEAR, value: 'selectYear' },
+            ]}
+            selectedOption={viewType}
+            onSortChange={handleChangeView}
+            dataTestIdPrefix="selectViewType"
+            className={styles.dropdown}
+          />
+          <SortingButton
+            title={t('eventType')}
+            sortingOptions={[
+              { label: 'Events', value: 'Events' },
+              { label: 'Workshops', value: 'Workshops' },
+            ]}
+            selectedOption={t('eventType')}
+            onSortChange={(value) => console.log(`Selected: ${value}`)}
+            dataTestIdPrefix="eventType"
+            className={styles.dropdown}
+            buttonLabel={t('eventType')}
+          />
           <Button
             variant="success"
             className={styles.createButton}

src/components/EventManagement/EventAttendance/EventAttendance.spec.tsx

@@ -103,11 +103,14 @@ describe('Event Attendance Component', () => {
     await wait();
 
     const sortDropdown = screen.getByTestId('sort-dropdown');
-    userEvent.click(sortDropdown);
-    userEvent.click(screen.getByText('Sort'));
+    userEvent.click(sortDropdown); // Open the sort dropdown
+
+    const sortOption = screen.getByText('Ascending'); // Assuming 'Ascending' is the option you choose for sorting
+    userEvent.click(sortOption);
 
     await waitFor(() => {
       const attendees = screen.getAllByTestId('attendee-name-0');
+      // Check if the first attendee is 'Bruce Garza' after sorting
       expect(attendees[0]).toHaveTextContent('Bruce Garza');
     });
   });
@@ -117,10 +120,14 @@ describe('Event Attendance Component', () => {
 
     await wait();
 
-    userEvent.click(screen.getByText('Filter: All'));
-    userEvent.click(screen.getByText('This Month'));
+    const filterDropdown = screen.getByTestId('filter-dropdown');
+    userEvent.click(filterDropdown); // Open the filter dropdown
+
+    const filterOption = screen.getByText('This Month'); // Assuming 'This Month' is the option you choose for filtering
+    userEvent.click(filterOption);
 
     await waitFor(() => {
+      // Check if the message 'Attendees not Found' is displayed
       expect(screen.getByText('Attendees not Found')).toBeInTheDocument();
     });
   });

src/components/EventManagement/EventAttendance/EventAttendance.tsx

@@ -9,13 +9,7 @@ import {
   TableRow,
   Tooltip,
 } from '@mui/material';
-import {
-  Button,
-  Dropdown,
-  DropdownButton,
-  Table,
-  FormControl,
-} from 'react-bootstrap';
+import { Button, Table, FormControl } from 'react-bootstrap';
 import styles from '../../../style/app.module.css';
 import { useLazyQuery } from '@apollo/client';
 import { EVENT_ATTENDEES } from 'GraphQl/Queries/Queries';
@@ -24,11 +18,14 @@ import { useTranslation } from 'react-i18next';
 import { AttendanceStatisticsModal } from './EventStatistics';
 import AttendedEventList from './AttendedEventList';
 import type { InterfaceMember } from './InterfaceEvents';
+import SortingButton from 'subComponents/SortingButton';
+
 enum FilterPeriod {
   ThisMonth = 'This Month',
   ThisYear = 'This Year',
   All = 'All',
 }
+
 /**
  * Component to manage and display event attendance information
  * Includes filtering and sorting functionality for attendees
@@ -153,18 +150,16 @@ function EventAttendance(): JSX.Element {
         memberData={filteredAttendees}
         t={t}
       />
-      <div className="d-flex justify-content-between">
-        <div className="d-flex w-100">
-          <Button
-            className={`border-1 bg-white text-success ${styles.actionBtn}`}
-            onClick={showModal}
-            data-testid="stats-modal"
-          >
-            {t('historical_statistics')}
-          </Button>
-        </div>
-        <div className="d-flex justify-content-between align-items-end w-100 ">
-          <div className={styles.input}>
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <Button
+          className={`border-1 bg-white text-success ${styles.actionBtn}`}
+          onClick={showModal}
+          data-testid="stats-modal"
+        >
+          {t('historical_statistics')}
+        </Button>
+        <div className="d-flex align-items-center">
+          <div className={`${styles.input} me-3`}>
             <FormControl
               type="text"
               id="posttitle"
@@ -182,54 +177,37 @@ function EventAttendance(): JSX.Element {
               <Search size={20} />
             </Button>
           </div>
-
-          <DropdownButton
-            data-testid="filter-dropdown"
-            className={`border-1 mx-4`}
-            title={
-              <>
-                <img
-                  src="/images/svg/up-down.svg"
-                  width={20}
-                  height={20}
-                  alt="Sort"
-                  className={styles.sortImg}
-                />
-                <span className="ms-2">Filter: {filteringBy}</span>
-              </>
-            }
-            onSelect={(eventKey) => setFilteringBy(eventKey as FilterPeriod)}
-          >
-            <Dropdown.Item eventKey="This Month">This Month</Dropdown.Item>
-            <Dropdown.Item eventKey="This Year">This Year</Dropdown.Item>
-            <Dropdown.Item eventKey="All">All</Dropdown.Item>
-          </DropdownButton>
-          <DropdownButton
-            data-testid="sort-dropdown"
-            className={`border-1 `}
-            title={
-              <>
-                <img
-                  src="/images/svg/up-down.svg"
-                  width={20}
-                  height={20}
-                  alt="Sort"
-                  className={styles.sortImg}
-                />
-                <span className="ms-2">Sort</span>
-              </>
-            }
-            onSelect={
-              /*istanbul ignore next*/
-              (eventKey) => setSortOrder(eventKey as 'ascending' | 'descending')
+          <SortingButton
+            title="Filter"
+            sortingOptions={[
+              {
+                label: FilterPeriod.ThisMonth,
+                value: FilterPeriod.ThisMonth,
+              },
+              { label: FilterPeriod.ThisYear, value: FilterPeriod.ThisYear },
+              { label: FilterPeriod.All, value: 'Filter: All' },
+            ]}
+            selectedOption={filteringBy}
+            onSortChange={(value) => setFilteringBy(value as FilterPeriod)}
+            dataTestIdPrefix="filter-dropdown"
+            className={`${styles.dropdown} mx-4`}
+            buttonLabel="Filter"
+          />
+          <SortingButton
+            title="Sort"
+            sortingOptions={[
+              { label: 'Ascending', value: 'ascending' },
+              { label: 'Descending', value: 'descending' },
+            ]}
+            selectedOption={sortOrder}
+            onSortChange={(value) =>
+              setSortOrder(value as 'ascending' | 'descending')
             }
-          >
-            <Dropdown.Item eventKey="ascending">Ascending</Dropdown.Item>
-            <Dropdown.Item eventKey="descending">Descending</Dropdown.Item>
-          </DropdownButton>
+            dataTestIdPrefix="sort-dropdown"
+            buttonLabel="Sort"
+          />
         </div>
       </div>
-      {/* <h3>{totalMembers}</h3> */}
       <TableContainer component={Paper} className="mt-3">
         <Table aria-label={t('event_attendance_table')} role="grid">
           <TableHead>

src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.spec.tsx

@@ -125,9 +125,9 @@ describe('Testing Organisation Action Item Categories', () => {
     // Filter by All
     fireEvent.click(filterBtn);
     await waitFor(() => {
-      expect(screen.getByTestId('statusAll')).toBeInTheDocument();
+      expect(screen.getByTestId('all')).toBeInTheDocument();
     });
-    fireEvent.click(screen.getByTestId('statusAll'));
+    fireEvent.click(screen.getByTestId('all'));
 
     await waitFor(() => {
       expect(screen.getByText('Category 1')).toBeInTheDocument();
@@ -137,9 +137,9 @@ describe('Testing Organisation Action Item Categories', () => {
     // Filter by Disabled
     fireEvent.click(filterBtn);
     await waitFor(() => {
-      expect(screen.getByTestId('statusDisabled')).toBeInTheDocument();
+      expect(screen.getByTestId('disabled')).toBeInTheDocument();
     });
-    fireEvent.click(screen.getByTestId('statusDisabled'));
+    fireEvent.click(screen.getByTestId('disabled'));
     await waitFor(() => {
       expect(screen.queryByText('Category 1')).toBeNull();
       expect(screen.getByText('Category 2')).toBeInTheDocument();
@@ -154,9 +154,9 @@ describe('Testing Organisation Action Item Categories', () => {
 
     fireEvent.click(filterBtn);
     await waitFor(() => {
-      expect(screen.getByTestId('statusActive')).toBeInTheDocument();
+      expect(screen.getByTestId('active')).toBeInTheDocument();
     });
-    fireEvent.click(screen.getByTestId('statusActive'));
+    fireEvent.click(screen.getByTestId('active'));
     await waitFor(() => {
       expect(screen.getByText('Category 1')).toBeInTheDocument();
       expect(screen.queryByText('Category 2')).toBeNull();