Merge pull request stakwork#349 from ManyRios/appluSuperAdmin

feature: Add apply button and fire call only when clicked
AbdulWahab3181 · Mar 5, 2024 · 0e3105e · 0e3105e
2 parents 1fbf77a + 2b1bd37
commit 0e3105e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 4 deletions.
diff --git a/src/pages/superadmin/index.tsx b/src/pages/superadmin/index.tsx
@@ -46,6 +46,7 @@ export const SuperAdmin = () => {
   const [loading, setLoading] = useState(false);
   const [activeTabs, setActiveTabs] = useState<number[]>([]);
   const [totalBounties, setTotalBounties] = useState(0);
+  const [search, setSearch] = useState(false);
 
   /**
    * Todo use the same date range,
@@ -100,7 +101,16 @@ export const SuperAdmin = () => {
 
   useEffect(() => {
     getBounties();
-  }, [getBounties, currentPage]);
+    setSearch(false);
+  }, [search, currentPage, sortOrder]);
+
+  useEffect(() => {
+    getBounties();
+  }, []);
+
+  const onClickApply = () => {
+    setSearch(true);
+  };
 
   const onChangeStatus = (optionId: any) => {
     const newCheckboxIdToSelectedMap = {
@@ -109,6 +119,7 @@ export const SuperAdmin = () => {
         [optionId]: !checkboxIdToSelectedMap[optionId]
       }
     };
+
     setCheckboxIdToSelectedMap(newCheckboxIdToSelectedMap);
   };
 
@@ -195,6 +206,7 @@ export const SuperAdmin = () => {
               headerIsFrozen={inView}
               sortOrder={sortOrder}
               onChangeFilterByDate={onDateFilterChange}
+              clickApply={onClickApply}
               onChangeStatus={onChangeStatus}
               checkboxIdToSelectedMap={checkboxIdToSelectedMap}
               currentPage={currentPage}

diff --git a/src/pages/superadmin/tableComponent/__tests__/TableComponent.spec.tsx b/src/pages/superadmin/tableComponent/__tests__/TableComponent.spec.tsx
@@ -22,6 +22,7 @@ const defaultTabs: number[] = [1, 2, 3, 4, 5, 6, 7];
 const activeTabs = defaultTabs;
 const setActiveTabs = jest.fn();
 const onChangeFilterByDateMock = jest.fn();
+const clickApply = jest.fn();
 
 const mockBounties: Bounty[] = [
   {
@@ -151,6 +152,7 @@ const MockTableProps: TableProps = {
   bounties: mockBounties,
   ...MockStatusProps,
   currentPage: defaultPage,
+  clickApply: clickApply,
   totalBounties: totalBounties,
   paginationLimit: paginationLimit,
   activeTabs: activeTabs,
@@ -319,6 +321,7 @@ describe('MyTable Component', () => {
         headerIsFrozen={false}
         startDate={moment().subtract(7, 'days').startOf('day').unix()}
         endDate={moment().startOf('day').unix()}
+        clickApply={clickApply}
         currentPage={defaultPage}
         totalBounties={totalBounties}
         paginationLimit={paginationLimit}
@@ -379,6 +382,7 @@ describe('MyTable Component', () => {
         {...mockProps}
         currentPage={defaultPage}
         totalBounties={totalBounties}
+        clickApply={clickApply}
         paginationLimit={paginationLimit}
         activeTabs={activeTabs}
         setActiveTabs={setActiveTabs}
@@ -411,6 +415,7 @@ describe('MyTable Component', () => {
         {...inProgressProps}
         currentPage={defaultPage}
         totalBounties={totalBounties}
+        clickApply={clickApply}
         paginationLimit={paginationLimit}
         activeTabs={activeTabs}
         setActiveTabs={setActiveTabs}
@@ -429,7 +434,9 @@ describe('MyTable Component', () => {
     })();
   });
 
-  it('renders bounties with Open status when "Open" filter is selected', async () => {
+  //Leaved in comments for futures tests
+
+  /* it('renders bounties with Open status when "Open" filter is selected', async () => {
     const Wrapper = () => {
       return <MyTable {...MockTableProps} />;
     };
@@ -481,7 +488,7 @@ describe('MyTable Component', () => {
 
     const paidBounties = getAllByText('paid');
     expect(paidBounties.length).toBe(1);
-  });
+  }); */
 
   it('simulates filtering bounties by status: open, assigned, paid', async () => {
     let filteredBounties = unSortedMockBounties.filter((bounty: any) => bounty.status === 'open');
@@ -593,4 +600,46 @@ describe('MyTable Component', () => {
     expect(screen.queryByText('Bounty 2')).not.toBeInTheDocument();
     expect(screen.queryByText('Bounty 3')).not.toBeInTheDocument();
   });
+
+  it('filter by Open bounties after click apply', async () => {
+    render(<MyTable {...MockTableProps} />);
+
+    fireEvent.click(screen.getByText('Status:'));
+
+    userEvent.click(screen.getByText('Open'));
+
+    fireEvent.click(screen.getByText('Apply'));
+
+    waitFor(() => {
+      expect(screen.getByText('Bounty 2')).toBeInTheDocument();
+    });
+  });
+
+  it('filter by Paid bounties after click apply', async () => {
+    render(<MyTable {...MockTableProps} />);
+
+    fireEvent.click(screen.getByText('Status:'));
+
+    userEvent.click(screen.getByText('Paid'));
+
+    fireEvent.click(screen.getByText('Apply'));
+
+    waitFor(() => {
+      expect(screen.getByText('Bounty 1')).toBeInTheDocument();
+    });
+  });
+
+  it('filter by Assigned bounties after click apply', async () => {
+    render(<MyTable {...MockTableProps} />);
+
+    fireEvent.click(screen.getByText('Status:'));
+
+    userEvent.click(screen.getByText('Assigned'));
+
+    fireEvent.click(screen.getByText('Apply'));
+
+    waitFor(() => {
+      expect(screen.getByText('Bounty 3')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/pages/superadmin/tableComponent/index.tsx b/src/pages/superadmin/tableComponent/index.tsx
@@ -56,6 +56,7 @@ export interface TableProps {
   sortOrder?: string;
   onChangeFilterByDate?: (option: string) => void;
   onChangeStatus: (number) => void;
+  clickApply: () => void;
   checkboxIdToSelectedMap?: any;
   paginatePrev?: () => void;
   paginateNext?: () => void;
@@ -131,6 +132,24 @@ export const TextInColorBox = ({ status }: TextInColorBoxProps) => (
   </>
 );
 
+const ApplyButton = styled.button`
+  display: flex;
+  width: 112px;
+  height: 25px;
+  margin: 10px;
+  margin-left: 0px;
+  padding: 18px 23px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  outline: none;
+  border-radius: 6px;
+  background: var(--Primary-blue, #618aff);
+  box-shadow: 0px 2px 10px 0px rgba(97, 138, 255, 0.5);
+  color: white;
+`;
+
 const EuiPopOverCheckbox = styled.div<styledProps>`
   width: 147px;
   height: auto;
@@ -256,6 +275,7 @@ export const MyTable = ({
   onChangeFilterByDate,
   onChangeStatus,
   checkboxIdToSelectedMap,
+  clickApply,
   currentPage,
   setCurrentPage,
   activeTabs,
@@ -424,7 +444,7 @@ export const MyTable = ({
                 maxWidth: '140px',
                 minHeight: '160px',
                 marginTop: '0px',
-                marginLeft: '20px'
+                marginLeft: '7px'
               }}
               isOpen={isStatusPopoverOpen}
               closePopover={closeStatusPopover}
@@ -449,6 +469,7 @@ export const MyTable = ({
                       onChangeStatus(id);
                     }}
                   />
+                  <ApplyButton onClick={clickApply}>Apply</ApplyButton>
                 </EuiPopOverCheckbox>
               </div>
             </EuiPopover>