Search bar refactored (#3438)

* searchBar created and used in org list

* css updated

* orgPeople

* org tags

* orgVenues

* org action item

* orgPost

* block unblock

* org funds

* orgFunds btn changed

* member request

* addon store

* orgAction categories

* agenda categories in setting

* event header but it's not working

* volunteerGroups

* volunteers and requests

* fundCampaignPledge

* leaderboard

* manage tags

* orgFundCampagins

* org tags

* subtags

* user campagins

* user pledge

* user actions

* user groups

* user invitations

* user's upcoming events

* users

* user donate

* advertisement

* code coverage disable removed

* test case fixed

docs/docs/auto-docs/screens/EventVolunteers/Requests/Requests/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/EventVolunteers/Requests/Requests.tsx:64](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/EventVolunteers/Requests/Requests.tsx#L64)
+Defined in: [src/screens/EventVolunteers/Requests/Requests.tsx:65](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/EventVolunteers/Requests/Requests.tsx#L65)
 
 Component for managing and displaying Volunteer Membership requests for an event.
 

docs/docs/auto-docs/screens/EventVolunteers/VolunteerGroups/VolunteerGroups/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx:69](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx#L69)
+Defined in: [src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx:70](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx#L70)
 
 Component for managing volunteer groups for an event.
 This component allows users to view, filter, sort, and create action items. It also provides a modal for creating and editing action items.

docs/docs/auto-docs/screens/EventVolunteers/Volunteers/Volunteers/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/EventVolunteers/Volunteers/Volunteers.tsx:76](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/EventVolunteers/Volunteers/Volunteers.tsx#L76)
+Defined in: [src/screens/EventVolunteers/Volunteers/Volunteers.tsx:77](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/EventVolunteers/Volunteers/Volunteers.tsx#L77)
 
 Component for managing and displaying event volunteers related to an event.
 

docs/docs/auto-docs/screens/ManageTag/ManageTag/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/ManageTag/ManageTag.tsx:64](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/ManageTag/ManageTag.tsx#L64)
+Defined in: [src/screens/ManageTag/ManageTag.tsx:65](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/ManageTag/ManageTag.tsx#L65)
 
 Component that renders the Manage Tag screen when the app navigates to '/orgtags/:orgId/manageTag/:tagId'.
 

docs/docs/auto-docs/screens/OrgList/OrgList/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/OrgList/OrgList.tsx:58](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrgList/OrgList.tsx#L58)
+Defined in: [src/screens/OrgList/OrgList.tsx:57](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrgList/OrgList.tsx#L57)
 
 ## CSS Strategy Explanation:
 

docs/docs/auto-docs/screens/OrganizationActionItems/OrganizationActionItems/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/OrganizationActionItems/OrganizationActionItems.tsx:51](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationActionItems/OrganizationActionItems.tsx#L51)
+Defined in: [src/screens/OrganizationActionItems/OrganizationActionItems.tsx:52](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationActionItems/OrganizationActionItems.tsx#L52)
 
 Component for managing and displaying action items within an organization.
 

docs/docs/auto-docs/screens/OrganizationFundCampaign/OrganizationFundCampagins/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:102](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx#L102)
+Defined in: [src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:103](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx#L103)
 
 `orgFundCampaign` component displays a list of fundraising campaigns for a specific fund within an organization.
 It allows users to search, sort, view and edit campaigns.

docs/docs/auto-docs/screens/OrganizationFunds/OrganizationFunds/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/OrganizationFunds/OrganizationFunds.tsx:102](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationFunds/OrganizationFunds.tsx#L102)
+Defined in: [src/screens/OrganizationFunds/OrganizationFunds.tsx:103](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationFunds/OrganizationFunds.tsx#L103)
 
 `organizationFunds` component displays a list of funds for a specific organization,
 allowing users to search, sort, view and edit funds.

docs/docs/auto-docs/screens/OrganizationPeople/OrganizationPeople/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/OrganizationPeople/OrganizationPeople.tsx:31](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationPeople/OrganizationPeople.tsx#L31)
+Defined in: [src/screens/OrganizationPeople/OrganizationPeople.tsx:32](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationPeople/OrganizationPeople.tsx#L32)
 
 OrganizationPeople component is used to display the list of members, admins and users of the organization.
 It also provides the functionality to search the members, admins and users by their full name.

docs/docs/auto-docs/screens/OrganizationTags/OrganizationTags/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/OrganizationTags/OrganizationTags.tsx:58](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTags.tsx#L58)
+Defined in: [src/screens/OrganizationTags/OrganizationTags.tsx:60](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTags.tsx#L60)
 
 Component that renders the Organization Tags screen when the app navigates to '/orgtags/:orgId'.
 

docs/docs/auto-docs/screens/OrganizationVenues/OrganizationVenues/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/OrganizationVenues/OrganizationVenues.tsx:23](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationVenues/OrganizationVenues.tsx#L23)
+Defined in: [src/screens/OrganizationVenues/OrganizationVenues.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationVenues/OrganizationVenues.tsx#L21)
 
 Component to manage and display the list of organization venues.
 Handles searching, sorting, and CRUD operations for venues.

docs/docs/auto-docs/screens/Requests/Requests/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/Requests/Requests.tsx:34](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/Requests/Requests.tsx#L34)
+Defined in: [src/screens/Requests/Requests.tsx:33](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/Requests/Requests.tsx#L33)
 
 The `Requests` component fetches and displays a paginated list of membership requests
 for an organization, with functionality for searching, filtering, and infinite scrolling.

docs/docs/auto-docs/screens/SubTags/SubTags/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/SubTags/SubTags.tsx:60](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/SubTags/SubTags.tsx#L60)
+Defined in: [src/screens/SubTags/SubTags.tsx:61](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/SubTags/SubTags.tsx#L61)
 
 Component that renders the SubTags screen when the app navigates to '/orgtags/:orgId/subtags/:tagId'.
 

docs/docs/auto-docs/screens/UserPortal/Campaigns/Campaigns/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/UserPortal/Campaigns/Campaigns.tsx:53](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Campaigns/Campaigns.tsx#L53)
+Defined in: [src/screens/UserPortal/Campaigns/Campaigns.tsx:54](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Campaigns/Campaigns.tsx#L54)
 
 The `Campaigns` component displays a list of fundraising campaigns for a specific organization.
 It allows users to search, sort, and view details about each campaign. Users can also add pledges to active campaigns.

docs/docs/auto-docs/screens/UserPortal/Pledges/Pledges/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/UserPortal/Pledges/Pledges.tsx:89](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Pledges/Pledges.tsx#L89)
+Defined in: [src/screens/UserPortal/Pledges/Pledges.tsx:90](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Pledges/Pledges.tsx#L90)
 
 The `Pledges` component is responsible for rendering a user's pledges within a campaign.
 It fetches pledges data using Apollo Client's `useQuery` hook and displays the data

docs/docs/auto-docs/screens/UserPortal/Volunteer/Actions/Actions/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/UserPortal/Volunteer/Actions/Actions.tsx:79](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Actions/Actions.tsx#L79)
+Defined in: [src/screens/UserPortal/Volunteer/Actions/Actions.tsx:80](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Actions/Actions.tsx#L80)
 
 Component for managing and displaying action items within an organization.
 

docs/docs/auto-docs/screens/UserPortal/Volunteer/Groups/Groups/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/UserPortal/Volunteer/Groups/Groups.tsx:72](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/Groups.tsx#L72)
+Defined in: [src/screens/UserPortal/Volunteer/Groups/Groups.tsx:73](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/Groups.tsx#L73)
 
 Component for managing volunteer groups for an event.
 This component allows users to view, filter, sort, and create action items. It also provides a modal for creating and editing action items.

docs/docs/auto-docs/screens/UserPortal/Volunteer/Invitations/Invitations/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx:49](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx#L49)
+Defined in: [src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx:50](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx#L50)
 
 The `Invitations` component displays list of invites for the user to volunteer.
 It allows the user to search, sort, and accept/reject invites.

docs/docs/auto-docs/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx:65](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx#L65)
+Defined in: [src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx:66](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx#L66)
 
 The `UpcomingEvents` component displays list of upcoming events for the user to volunteer.
 It allows the user to search, sort, and volunteer for events/volunteer groups.

docs/docs/auto-docs/screens/Users/Users/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/Users/Users.tsx:84](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/Users/Users.tsx#L84)
+Defined in: [src/screens/Users/Users.tsx:83](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/Users/Users.tsx#L83)
 
 The `Users` component is responsible for displaying a list of users in a paginated and sortable format.
 It supports search functionality, filtering, and sorting of users. The component integrates with GraphQL

docs/docs/auto-docs/subComponents/SearchBar/functions/default.md

@@ -0,0 +1,36 @@
+[Admin Docs](/)
+
+***
+
+# Function: default()
+
+> **default**(`props`, `deprecatedLegacyContext`?): `ReactNode`
+
+Defined in: [src/subComponents/SearchBar.tsx:27](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/subComponents/SearchBar.tsx#L27)
+
+SearchBar component renders a search input with a button.
+It allows users to enter a search term and triggers a callback on search.
+
+## Parameters
+
+### props
+
+`InterfaceSearchBarProps`
+
+The properties for the SearchBar component.
+
+### deprecatedLegacyContext?
+
+`any`
+
+**Deprecated**
+
+**See**
+
+[React Docs](https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods)
+
+## Returns
+
+`ReactNode`
+
+The rendered SearchBar component.

src/components/AddOn/core/AddOnStore/AddOnStore.spec.tsx

@@ -294,6 +294,8 @@ describe('Testing AddOnStore Component', () => {
       target: { value: searchText },
     });
 
+    fireEvent.click(screen.getByTestId('searchBtn'));
+
     const message = screen.getAllByText('Plugin does not exists');
     expect(message.length).toBeGreaterThanOrEqual(1);
   });

src/components/AddOn/core/AddOnStore/AddOnStore.tsx

@@ -3,12 +3,12 @@ import styles from '../../../../style/app.module.css';
 import AddOnEntry from '../AddOnEntry/AddOnEntry';
 import { useQuery } from '@apollo/client';
 import { PLUGIN_GET } from 'GraphQl/Queries/Queries'; // PLUGIN_LIST
-import { Col, Dropdown, Form, Row, Tab, Tabs, Button } from 'react-bootstrap';
+import { Col, Dropdown, Row, Tab, Tabs } from 'react-bootstrap';
 import PluginHelper from 'components/AddOn/support/services/Plugin.helper';
 import { store } from './../../../../state/store';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { Search } from '@mui/icons-material';
+import SearchBar from 'subComponents/SearchBar';
 
 interface InterfacePluginHelper {
   _id: string;
@@ -52,7 +52,6 @@ function addOnStore(): JSX.Element {
   /**
    * Fetches store plugins and updates the Redux store with the plugin data.
    */
-  /* istanbul ignore next */
   const getStorePlugins = async (): Promise<void> => {
     let plugins = await new PluginHelper().fetchStore();
     const installIds = (await new PluginHelper().fetchInstalled()).map(
@@ -68,7 +67,6 @@ function addOnStore(): JSX.Element {
   /**
    * Sets the list of installed plugins in the component's state.
    */
-  /* istanbul ignore next */
   const getInstalledPlugins: () => void = () => {
     setDataList(data?.getPlugins ?? []);
   };
@@ -80,7 +78,6 @@ function addOnStore(): JSX.Element {
    */
   const updateSelectedTab = (tab: string): void => {
     setIsStore(tab === 'available');
-    /* istanbul ignore next */
     if (tab === 'available') {
       getStorePlugins();
     } else {
@@ -111,7 +108,6 @@ function addOnStore(): JSX.Element {
   };
 
   // Show a loader while the data is being fetched
-  /* istanbul ignore next */
   if (loading) {
     return (
       <>
@@ -124,28 +120,18 @@ function addOnStore(): JSX.Element {
     <>
       <Row className={styles.containerAddOnStore}>
         <Col className={styles.colAddOnStore}>
-          <div className={styles.inputAddOnStore}>
-            <Form.Control
-              type="name"
-              id="searchname"
-              className={styles.inputField}
-              placeholder={t('searchName')}
-              autoComplete="off"
-              required
-              onChange={(e): void => setSearchText(e.target.value)}
-            />
-            <Button className={styles.searchButton}>
-              <Search />
-            </Button>
-          </div>
+          <SearchBar
+            placeholder={t('searchName')}
+            onSearch={setSearchText}
+            inputTestId="searchByName"
+            buttonTestId="searchBtn"
+          />
           {!isStore && (
             <Dropdown
-              onSelect={
-                /* istanbul ignore next */
-                (e) =>
-                  filterChange(
-                    e as unknown as React.ChangeEvent<HTMLSelectElement>,
-                  )
+              onSelect={(e) =>
+                filterChange(
+                  e as unknown as React.ChangeEvent<HTMLSelectElement>,
+                )
               }
             >
               <Dropdown.Toggle

src/components/Advertisements/Advertisements.tsx

@@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react';
 import styles from '../../style/app.module.css';
 import { useQuery } from '@apollo/client';
 import { ORGANIZATION_ADVERTISEMENT_LIST } from 'GraphQl/Queries/Queries';
-import { Button, Col, Form, Row, Tab, Tabs } from 'react-bootstrap';
+import { Col, Row, Tab, Tabs } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import AdvertisementEntry from './core/AdvertisementEntry/AdvertisementEntry';
 import AdvertisementRegister from './core/AdvertisementRegister/AdvertisementRegister';
 import { useParams } from 'react-router-dom';
 import type { InterfaceQueryOrganizationAdvertisementListItem } from 'utils/interfaces';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { Search } from '@mui/icons-material';
+import SearchBar from 'subComponents/SearchBar';
 
 export default function advertisements(): JSX.Element {
   const { orgId: currentOrgId } = useParams();
@@ -82,20 +82,12 @@ export default function advertisements(): JSX.Element {
         <Col col={8} className={styles.containerAdvertisements}>
           <div className={styles.justifyspAdvertisements}>
             <Col className={styles.colAdvertisements}>
-              <div className={styles.inputAdvertisements}>
-                <Form.Control
-                  type="name"
-                  id="searchname"
-                  className={styles.inputField}
-                  placeholder={'Search..'}
-                  autoComplete="off"
-                  required
-                  // onChange={(e): void => setSearchText("search")}
-                />
-                <Button className={styles.searchButton}>
-                  <Search />
-                </Button>
-              </div>
+              <SearchBar
+                placeholder={'Search..'}
+                onSearch={(value) => console.log(value)} // Replace with actual search handler
+                inputTestId="searchname"
+                buttonTestId="searchButton"
+              />
               <AdvertisementRegister setAfter={setAfter} />
             </Col>