Merge pull request stakwork#590 from aliraza556/Filter-disappears

Filter remains visible when no cards are found
MahtabBukhari · Oct 29, 2024 · 6e45756 · 6e45756
2 parents 0c39773 + e57f5c5
commit 6e45756
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 96 deletions.
diff --git 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>
   );
 });
diff --git 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,13 @@ 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();
+      });
     });
   });
 });
diff --git 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();