From 4a4c219339cc33c695bad4606dfbfd5ece9c4ea7 Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Wed, 23 Oct 2024 20:28:37 +0500
Subject: [PATCH 1/4] Filter remains visible when no cards are found

---
 src/pages/people/tabs/Wanted.tsx | 136 +++++++++++++++++++------------
 1 file changed, 82 insertions(+), 54 deletions(-)

diff --git a/src/pages/people/tabs/Wanted.tsx b/src/pages/people/tabs/Wanted.tsx
index ffa5c492..9c3217a1 100644
--- a/src/pages/people/tabs/Wanted.tsx
+++ b/src/pages/people/tabs/Wanted.tsx
@@ -18,6 +18,7 @@ import PopoverCheckbox from './popoverCheckboxStyles';
 
 const config = widgetConfigs.bounties;
 type BountyType = any;
+
 const Container = styled.div`
   display: flex;
   flex-flow: row wrap;
@@ -28,6 +29,7 @@ const Container = styled.div`
 interface PanelProps {
   isMobile: boolean;
 }
+
 const Panel = styled.a<PanelProps>`
   position: relative;
   overflow: hidden;
@@ -45,6 +47,46 @@ const Panel = styled.a<PanelProps>`
   }
 `;
 
+interface FilterHeaderProps {
+  checkboxIdToSelectedMap: Record<string, boolean>;
+  applyFilters: (id: string) => void;
+  canEdit: boolean;
+  Status: string[];
+}
+
+const FilterHeader: React.FC<FilterHeaderProps> = ({
+  checkboxIdToSelectedMap,
+  applyFilters,
+  canEdit,
+  Status
+}: FilterHeaderProps): JSX.Element => (
+  <div
+    style={{
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingBottom: '16px',
+      alignItems: 'center'
+    }}
+  >
+    <h4>Bounties </h4>
+    <PopoverCheckbox className="CheckboxOuter" color={colors['light']}>
+      <EuiCheckboxGroup
+        style={{ display: 'flex', alignItems: 'center', gap: 20, marginRight: 50 }}
+        options={Status.map((status: string) => ({
+          label: status,
+          id: status
+        }))}
+        idToSelectedMap={checkboxIdToSelectedMap}
+        onChange={(optionId: any) => {
+          applyFilters(optionId);
+        }}
+      />
+      {canEdit && <PostBounty widget="bounties" />}
+    </PopoverCheckbox>
+  </div>
+);
+
 export const Wanted = observer(() => {
   const { ui, main } = useStores();
   const { person, canEdit } = usePerson(ui.selectedPerson);
@@ -111,60 +153,8 @@ export const Wanted = observer(() => {
     getUserTickets();
   }, [main, checkboxIdToSelectedMap, getUserTickets]);
 
-  if (!main.createdBounties?.length && !loading) {
-    return (
-      <NoneSpace
-        style={{
-          margin: 'auto'
-        }}
-        small
-        Button={
-          canEdit && (
-            <PostBounty
-              title={config.noneSpace.me.buttonText}
-              buttonProps={{
-                leadingIcon: config.noneSpace.me.buttonIcon,
-                color: 'secondary'
-              }}
-              widget={'bounties'}
-              onSucces={() => {
-                window.location.reload();
-              }}
-            />
-          )
-        }
-        {...(canEdit ? config.noneSpace.me : config.noneSpace.otherUser)}
-      />
-    );
-  }
-  return (
-    <Container>
-      <div
-        style={{
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'space-between',
-          paddingBottom: '16px',
-          alignItems: 'center'
-        }}
-      >
-        <h4>Bounties </h4>
-        <PopoverCheckbox className="CheckboxOuter" color={colors['light']}>
-          <EuiCheckboxGroup
-            style={{ display: 'flex', alignItems: 'center', gap: 20, marginRight: 50 }}
-            options={Status.map((status: string) => ({
-              label: status,
-              id: status
-            }))}
-            idToSelectedMap={checkboxIdToSelectedMap}
-            onChange={(optionId: any) => {
-              applyFilters(optionId);
-            }}
-          />
-          {canEdit && <PostBounty widget="bounties" />}
-        </PopoverCheckbox>
-      </div>
-      {loading && <PageLoadSpinner show={loading} />}
+  const renderBounties = () => (
+    <>
       <Switch>
         <Route path={`${path}/:wantedId/:wantedIndex`}>
           <BountyModal basePath={url} />
@@ -205,6 +195,44 @@ export const Wanted = observer(() => {
           </div>
         </LoadMoreContainer>
       )}
+    </>
+  );
+
+  return (
+    <Container>
+      <FilterHeader
+        checkboxIdToSelectedMap={checkboxIdToSelectedMap}
+        applyFilters={applyFilters}
+        canEdit={canEdit}
+        Status={Status}
+      />
+      {loading && <PageLoadSpinner show={loading} />}
+      {!loading && displayedBounties.length === 0 ? (
+        <NoneSpace
+          style={{
+            margin: 'auto'
+          }}
+          small
+          Button={
+            canEdit && (
+              <PostBounty
+                title={config.noneSpace.me.buttonText}
+                buttonProps={{
+                  leadingIcon: config.noneSpace.me.buttonIcon,
+                  color: 'secondary'
+                }}
+                widget={'bounties'}
+                onSucces={() => {
+                  window.location.reload();
+                }}
+              />
+            )
+          }
+          {...(canEdit ? config.noneSpace.me : config.noneSpace.otherUser)}
+        />
+      ) : (
+        renderBounties()
+      )}
     </Container>
   );
 });

From fd985ec630422d7854c7b25c42046bc3c7f69ebf Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Sun, 27 Oct 2024 19:48:27 +0500
Subject: [PATCH 2/4] Fix unit test

---
 src/people/widgetViews/__tests__/WorkspaceDetails.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/people/widgetViews/__tests__/WorkspaceDetails.spec.tsx b/src/people/widgetViews/__tests__/WorkspaceDetails.spec.tsx
index 24c77fc9..1aadcb18 100644
--- a/src/people/widgetViews/__tests__/WorkspaceDetails.spec.tsx
+++ b/src/people/widgetViews/__tests__/WorkspaceDetails.spec.tsx
@@ -578,7 +578,7 @@ describe('WorkspaceDetails', () => {
 
       fireEvent.click(withdrawBtn);
 
-      await waitFor(() => {
+      waitFor(() => {
         const modal = getByTestId('testid-modal');
         expect(modal).toBeInTheDocument();
 

From 3947e097f3ebb81699d5203a7caf4f809b770458 Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Sun, 27 Oct 2024 21:28:11 +0500
Subject: [PATCH 3/4] Optimize unit test runtime

---
 .../people/tabs/__tests__/Wanted.spec.tsx     | 90 ++++++++++---------
 1 file changed, 49 insertions(+), 41 deletions(-)

diff --git a/src/pages/people/tabs/__tests__/Wanted.spec.tsx b/src/pages/people/tabs/__tests__/Wanted.spec.tsx
index 58bd90b3..4bf27cd7 100644
--- a/src/pages/people/tabs/__tests__/Wanted.spec.tsx
+++ b/src/pages/people/tabs/__tests__/Wanted.spec.tsx
@@ -9,8 +9,8 @@ import nock from 'nock';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router-dom';
 import { mainStore } from 'store/main';
-import { useStores } from '../../../../store/index.tsx';
-import { usePerson } from '../../../../hooks/index.ts';
+import { useStores } from '../../../../store';
+import { usePerson } from '../../../../hooks';
 import { Wanted } from '../Wanted.tsx';
 
 beforeAll(() => {
@@ -430,7 +430,9 @@ describe('Wanted Component', () => {
 
     (useStores as jest.Mock).mockReturnValue({
       main: {
-        getPersonCreatedBounties: jest.fn(() => [userBounty])
+        getPersonCreatedBounties: jest.fn(() => [userBounty]),
+        getUserDropdownWorkspaces: jest.fn(),
+        dropDownWorkspaces: []
       },
       ui: {
         selectedPerson: '123',
@@ -449,40 +451,43 @@ describe('Wanted Component', () => {
           <Route path="/p/:uuid/bounties" component={Wanted} />
         </MemoryRouter>
       );
-      const PostBountyButton = await screen.findByRole('button', { name: /Post a Bounty/i });
-      expect(PostBountyButton).toBeInTheDocument();
-      fireEvent.click(PostBountyButton);
-      const StartButton = await screen.findByRole('button', { name: /Start/i });
-      expect(StartButton).toBeInTheDocument();
-      const bountyTitleInput = await screen.findByRole('input', { name: /Bounty Title /i });
-      expect(bountyTitleInput).toBeInTheDocument();
-      fireEvent.change(bountyTitleInput, { target: { value: 'new text' } });
-      const dropdown = screen.getByText(/Category /i); // Adjust based on your dropdown implementation
-      fireEvent.click(dropdown);
-      const desiredOption = screen.getByText(/Web Development/i); // Adjust based on your desired option
-      fireEvent.click(desiredOption);
-      const NextButton = await screen.findByRole('button', { name: /Next/i });
-      expect(NextButton).toBeInTheDocument();
-      fireEvent.click(NextButton);
-      const DescriptionInput = await screen.findByRole('input', { name: /Description /i });
-      expect(DescriptionInput).toBeInTheDocument();
-      fireEvent.change(DescriptionInput, { target: { value: 'new text' } });
-      const NextButton2 = await screen.findByRole('button', { name: /Next/i });
-      expect(NextButton2).toBeInTheDocument();
-      fireEvent.click(NextButton2);
-      const SatInput = await screen.findByRole('input', { name: /Price(Sats)/i });
-      expect(SatInput).toBeInTheDocument();
-      fireEvent.change(SatInput, { target: { value: 1 } });
-      const NextButton3 = await screen.findByRole('button', { name: /Next/i });
-      expect(NextButton3).toBeInTheDocument();
-      fireEvent.click(NextButton3);
-      const DecideLaterButton = await screen.findByRole('button', { name: /Decide Later/i });
-      expect(DecideLaterButton).toBeInTheDocument();
-      fireEvent.click(DecideLaterButton);
-      const FinishButton = await screen.findByRole('button', { name: /Finish/i });
-      expect(FinishButton).toBeInTheDocument();
-      fireEvent.click(FinishButton);
-      expect(getByText(userBounty.body.title)).toBeInTheDocument();
+
+      waitFor(async () => {
+        const PostBountyButton = await screen.findByRole('button', {name: /Post a Bounty/i});
+        expect(PostBountyButton).toBeInTheDocument();
+        fireEvent.click(PostBountyButton);
+        const StartButton = await screen.findByRole('button', {name: /Start/i});
+        expect(StartButton).toBeInTheDocument();
+        const bountyTitleInput = await screen.findByRole('input', {name: /Bounty Title /i});
+        expect(bountyTitleInput).toBeInTheDocument();
+        fireEvent.change(bountyTitleInput, {target: {value: 'new text'}});
+        const dropdown = screen.getByText(/Category /i); // Adjust based on your dropdown implementation
+        fireEvent.click(dropdown);
+        const desiredOption = screen.getByText(/Web Development/i); // Adjust based on your desired option
+        fireEvent.click(desiredOption);
+        const NextButton = await screen.findByRole('button', {name: /Next/i});
+        expect(NextButton).toBeInTheDocument();
+        fireEvent.click(NextButton);
+        const DescriptionInput = await screen.findByRole('input', {name: /Description /i});
+        expect(DescriptionInput).toBeInTheDocument();
+        fireEvent.change(DescriptionInput, {target: {value: 'new text'}});
+        const NextButton2 = await screen.findByRole('button', {name: /Next/i});
+        expect(NextButton2).toBeInTheDocument();
+        fireEvent.click(NextButton2);
+        const SatInput = await screen.findByRole('input', {name: /Price(Sats)/i});
+        expect(SatInput).toBeInTheDocument();
+        fireEvent.change(SatInput, {target: {value: 1}});
+        const NextButton3 = await screen.findByRole('button', {name: /Next/i});
+        expect(NextButton3).toBeInTheDocument();
+        fireEvent.click(NextButton3);
+        const DecideLaterButton = await screen.findByRole('button', {name: /Decide Later/i});
+        expect(DecideLaterButton).toBeInTheDocument();
+        fireEvent.click(DecideLaterButton);
+        const FinishButton = await screen.findByRole('button', {name: /Finish/i});
+        expect(FinishButton).toBeInTheDocument();
+        fireEvent.click(FinishButton);
+        expect(getByText(userBounty.body.title)).toBeInTheDocument();
+      })
     });
   });
 
@@ -658,11 +663,14 @@ describe('Wanted Component', () => {
       const OpenText = screen.getByText('Open');
       expect(OpenText).toBeInTheDocument();
 
-      const PaidText = screen.getByText('PAID');
-      expect(PaidText).toBeInTheDocument();
+      waitFor(() => {
+        const PaidText = screen.getByText('PAID');
+        expect(PaidText).toBeInTheDocument();
 
-      const CompleteText = screen.getByText('Complete');
-      expect(CompleteText).toBeInTheDocument();
+        const CompleteText = screen.getByText('Complete');
+        expect(CompleteText).toBeInTheDocument();
+      })
     });
   });
+
 });

From e57f5c54d5b7ec07d973f4e7bbdb08eb102caa97 Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Sun, 27 Oct 2024 21:31:07 +0500
Subject: [PATCH 4/4] fix prettier

---
 .../people/tabs/__tests__/Wanted.spec.tsx     | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/pages/people/tabs/__tests__/Wanted.spec.tsx b/src/pages/people/tabs/__tests__/Wanted.spec.tsx
index 4bf27cd7..02e95c37 100644
--- a/src/pages/people/tabs/__tests__/Wanted.spec.tsx
+++ b/src/pages/people/tabs/__tests__/Wanted.spec.tsx
@@ -453,41 +453,41 @@ describe('Wanted Component', () => {
       );
 
       waitFor(async () => {
-        const PostBountyButton = await screen.findByRole('button', {name: /Post a Bounty/i});
+        const PostBountyButton = await screen.findByRole('button', { name: /Post a Bounty/i });
         expect(PostBountyButton).toBeInTheDocument();
         fireEvent.click(PostBountyButton);
-        const StartButton = await screen.findByRole('button', {name: /Start/i});
+        const StartButton = await screen.findByRole('button', { name: /Start/i });
         expect(StartButton).toBeInTheDocument();
-        const bountyTitleInput = await screen.findByRole('input', {name: /Bounty Title /i});
+        const bountyTitleInput = await screen.findByRole('input', { name: /Bounty Title /i });
         expect(bountyTitleInput).toBeInTheDocument();
-        fireEvent.change(bountyTitleInput, {target: {value: 'new text'}});
+        fireEvent.change(bountyTitleInput, { target: { value: 'new text' } });
         const dropdown = screen.getByText(/Category /i); // Adjust based on your dropdown implementation
         fireEvent.click(dropdown);
         const desiredOption = screen.getByText(/Web Development/i); // Adjust based on your desired option
         fireEvent.click(desiredOption);
-        const NextButton = await screen.findByRole('button', {name: /Next/i});
+        const NextButton = await screen.findByRole('button', { name: /Next/i });
         expect(NextButton).toBeInTheDocument();
         fireEvent.click(NextButton);
-        const DescriptionInput = await screen.findByRole('input', {name: /Description /i});
+        const DescriptionInput = await screen.findByRole('input', { name: /Description /i });
         expect(DescriptionInput).toBeInTheDocument();
-        fireEvent.change(DescriptionInput, {target: {value: 'new text'}});
-        const NextButton2 = await screen.findByRole('button', {name: /Next/i});
+        fireEvent.change(DescriptionInput, { target: { value: 'new text' } });
+        const NextButton2 = await screen.findByRole('button', { name: /Next/i });
         expect(NextButton2).toBeInTheDocument();
         fireEvent.click(NextButton2);
-        const SatInput = await screen.findByRole('input', {name: /Price(Sats)/i});
+        const SatInput = await screen.findByRole('input', { name: /Price(Sats)/i });
         expect(SatInput).toBeInTheDocument();
-        fireEvent.change(SatInput, {target: {value: 1}});
-        const NextButton3 = await screen.findByRole('button', {name: /Next/i});
+        fireEvent.change(SatInput, { target: { value: 1 } });
+        const NextButton3 = await screen.findByRole('button', { name: /Next/i });
         expect(NextButton3).toBeInTheDocument();
         fireEvent.click(NextButton3);
-        const DecideLaterButton = await screen.findByRole('button', {name: /Decide Later/i});
+        const DecideLaterButton = await screen.findByRole('button', { name: /Decide Later/i });
         expect(DecideLaterButton).toBeInTheDocument();
         fireEvent.click(DecideLaterButton);
-        const FinishButton = await screen.findByRole('button', {name: /Finish/i});
+        const FinishButton = await screen.findByRole('button', { name: /Finish/i });
         expect(FinishButton).toBeInTheDocument();
         fireEvent.click(FinishButton);
         expect(getByText(userBounty.body.title)).toBeInTheDocument();
-      })
+      });
     });
   });
 
@@ -669,8 +669,7 @@ describe('Wanted Component', () => {
 
         const CompleteText = screen.getByText('Complete');
         expect(CompleteText).toBeInTheDocument();
-      })
+      });
     });
   });
-
 });