Task Description

Refactor the components/EventListCard component(s) to use the shared DropDownButton across the files listed below. The goal is to remove direct Dropdown usages and legacy dropdown wrappers in these files.

Files to Edit/Create

⚠️ Due to recent refactoring, the locations of these screens and components may have changed to new sub-directories

• src/components/EventListCard/Modal/Preview/EventListCardPreviewModal.tsx
• src/components/EventCalender/Header/EventHeader.tsx
• src/components/EventDashboardScreen/EventDashboardScreen.tsx
• src/shared-components/EventForm/RecurrenceDropdown/RecurrenceDropdown.tsx

Extensive Sample Code

This sample code is only representative of what could be done. It is provided only to give a general outline. You will need to use your initiative and industry best practices to find a solution that is suitable for the application.

Before Code (Representative)

import { Dropdown } from 'react-bootstrap';
<Dropdown> ... </Dropdown>

After Code (Multiple Selection Options)

import React, { useState } from 'react';
import DropDownButton from 'shared-components/DropDownButton';

type Option = { value: string; label: string; disabled?: boolean };

const filterOptions: Option[] = [
  { value: 'all', label: 'All' },
  { value: 'active', label: 'Active' },
  { value: 'archived', label: 'Archived' },
];

const sortOptions: Option[] = [
  { value: 'newest', label: 'Newest' },
  { value: 'oldest', label: 'Oldest' },
  { value: 'popular', label: 'Most Popular' },
];

const actionOptions: Option[] = [
  { value: 'edit', label: 'Edit' },
  { value: 'duplicate', label: 'Duplicate' },
  { value: 'share', label: 'Share' },
  { value: 'delete', label: 'Delete (disabled)', disabled: true }, // disabled option
];

export default function ExampleRefactor() {
  const [filter, setFilter] = useState<string>('all');
  const [sort, setSort] = useState<string>('newest');

  const handleAction = (value: string) => {
    // implement action switch if needed
  };

  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <DropDownButton
        options={filterOptions}
        selectedValue={filter}
        onSelect={setFilter}
        ariaLabel="Filter items"
        dataTestIdPrefix="filter"
        variant="outline-secondary"
      />
      <DropDownButton
        options={sortOptions}
        selectedValue={sort}
        onSelect={setSort}
        ariaLabel="Sort items"
        dataTestIdPrefix="sort"
        variant="outline-primary"
      />
      <DropDownButton
        options={actionOptions}
        onSelect={handleAction}
        ariaLabel="More actions"
        dataTestIdPrefix="actions"
        variant="outline-success"
        buttonLabel="Actions"
      />
    </div>
  );
}

Acceptance Criteria

1. Component/screen uses new shared DropDownButton component
2. All existing functionality preserved
3. All tests pass
4. No TypeScript errors or warnings
5. No ESLint errors or warnings
6. Accessibility requirements met (ARIA labels, keyboard navigation)
7. Visual appearance matches existing design

Testing Requirements

1. Unit tests for component logic
2. All tests must cover >= 95% of the submitted code
3. All tests must be valid
4. Integration tests for affected screens
5. Visual regression tests (if applicable)
6. Accessibility audit (WCAG 2.1 Level AA)
7. Read our Testing Guide for guidance: https://docs-admin.talawa.io/docs/developer-resources/testing
   • Pay special attention to:
     • Pre-Commit Hooks
     • Mock Isolation

CI/CD Section

• Edited files may not comply with the latest linting standards for the repository
• You will be responsible for ensuring that the code submitted meets these standards

Dependencies

• Blocked By: DropDownButton - Phase 1.1: Create DropDownButton Component + Initial Migration (Organizations) #6836
• Blocks: –