fix: merge conflicts

stakwork · Jan 31, 2024 · 9597bab · 9597bab
2 parents f8794be + 5afeeea
commit 9597bab
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 60 deletions.
diff --git a/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx b/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx
@@ -66,7 +66,7 @@ describe('Header Component', () => {
 
     const StartDate30 = today.clone().subtract(30, 'days');
     expect(monthElement).toHaveTextContent(
-      `${StartDate30.format('DD MMM YYYY')} - ${expectedEndDate.format('DD MMM YYYY')}`
+      `${StartDate30.format('DD MMM')} - ${expectedEndDate.format('DD MMM YYYY')}`
     );
 
     act(() => {

diff --git a/src/pages/tickets/org/orgHeader/index.tsx b/src/pages/tickets/org/orgHeader/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { EuiCheckboxGroup, EuiPopover, EuiText } from '@elastic/eui';
 import MaterialIcon from '@material/react-material-icon';
@@ -159,13 +159,6 @@ const SearchBar = styled.input`
   border: none;
 `;
 
-const SoryByContainer = styled.span`
-  padding: 10px 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
 const NumberOfBounties = styled.div`
   height: 23px;
   padding: 1.5px 983.492px 1.5px 10px;
@@ -285,12 +278,6 @@ const DropDownButton = styled.button`
   padding-top: 5px;
 `;
 
-const FiltersLeft = styled.span`
-  display: flex;
-  height: 40px;
-  align-items: flex-start;
-`;
-
 const EuiPopOverCheckbox = styled.div<styledProps>`
   width: 147px;
   height: auto;
@@ -412,17 +399,18 @@ const StatusContainer = styled.div<styledProps>`
 `;
 
 const Status = ['Open', 'Assigned', 'Completed', 'Paid'];
-const sortByArr = [{
-  id: "desc",
-  label: 'Newest First'
-}, 
-{
-  id: "asc",
-  label: "Oldest First"
-}
-]
 
-const color = colors['light'];
+const sortDirectionOptions = [
+  {
+    id: 'desc',
+    label: 'Newest First'
+  },
+  {
+    id: 'asc',
+    label: 'Oldest First'
+  }
+];
+
 export const OrgHeader = ({
   onChangeLanguage,
   checkboxIdToSelectedMapLanguage,
@@ -436,14 +424,19 @@ export const OrgHeader = ({
   const [isPostBountyModalOpen, setIsPostBountyModalOpen] = useState(false);
   const [filterClick, setFilterClick] = useState(false);
   const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState<boolean>(false);
-  const [isSortByPopoverOpen, setIsSortByPopoverOpen] = useState(false)
-  const [sortBy, setSortBy] = useState<string>("desc")
+  const [isSortByPopoverOpen, setIsSortByPopoverOpen] = useState(false);
+  const [sortDirection, setSortDirection] = useState<string>('desc');
 
   const onButtonClick = async () => {
     setIsStatusPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
   };
   const closeStatusPopover = () => setIsStatusPopoverOpen(false);
 
+  const sortDirectionLabel = useMemo(
+    () => (sortDirection === 'asc' ? 'Oldest First' : 'Newest First'),
+    [sortDirection]
+  );
+
   const onSortButtonClick = async () => {
     setIsSortByPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
   };
@@ -474,10 +467,10 @@ export const OrgHeader = ({
         resetPage: true,
         ...checkboxIdToSelectedMap,
         languageString,
-        direction: sortBy
+        direction: sortDirection
       });
     }
-  }, [org_uuid, checkboxIdToSelectedMap, sortBy, main, languageString]);
+  }, [org_uuid, checkboxIdToSelectedMap, sortDirection, main, languageString]);
 
   const handleClick = () => {
     setFilterClick(!filterClick);
@@ -497,7 +490,7 @@ export const OrgHeader = ({
     return () => {
       window.removeEventListener('click', handleWindowClick);
     };
-  }, [filterClick]);
+  }, [org_uuid, checkboxIdToSelectedMap, languageString, main, filterClick]);
 
   return (
     <>
@@ -574,7 +567,7 @@ export const OrgHeader = ({
                 <div
                   style={{
                     display: 'flex',
-                    flexDirection: 'row'
+                    flex: 'row'
                   }}
                 >
                   <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
@@ -619,20 +612,20 @@ export const OrgHeader = ({
               <Icon src={searchIcon} alt="Search" />
             </SearchWrapper>
           </FiltersRight>
-          <SoryByContainer>
-          <EuiPopover 
+          <EuiPopover
             button={
               <StatusContainer onClick={onSortButtonClick} className="CheckboxOuter" color={color}>
-                <div style={{minWidth: '145px'}}>
+                <div style={{ minWidth: '145px' }}>
                   <EuiText
-                  className="statusText"
-                  style={{
-                    color: isSortByPopoverOpen ? color.grayish.G10 : ''
-                  }}>
-                  Sort By: {sortBy === "asc" ? "Oldest First" : "Newest First"}
-                </EuiText> 
+                    className="statusText"
+                    style={{
+                      color: isSortByPopoverOpen ? color.grayish.G10 : ''
+                    }}
+                  >
+                    Sort By: {sortDirectionLabel}
+                  </EuiText>
                 </div>
-               
+
                 <div className="filterStatusIconContainer">
                   <MaterialIcon
                     className="materialStatusIcon"
@@ -659,25 +652,21 @@ export const OrgHeader = ({
             panelPaddingSize="none"
             anchorPosition="downLeft"
           >
-             <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'row'
-                }}
-              >
-                <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
-                  <EuiCheckboxGroup
-                  style={{}}
-                    options={sortByArr}
-                   idToSelectedMap={{[sortBy]: true}}
-                    onChange={(id: any) => {
-                      onChangeStatus(setSortBy(id));
-                    }}
-                  />
-                </EuiPopOverCheckbox>
-              </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row'
+              }}
+            >
+              <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
+                <EuiCheckboxGroup
+                  options={sortDirectionOptions}
+                  idToSelectedMap={{ [sortDirection]: true }}
+                  onChange={(id: string) => setSortDirection(id)}
+                />
+              </EuiPopOverCheckbox>
+            </div>
           </EuiPopover>
-          </SoryByContainer>
         </Filters>
       </FillContainer>
       <NumberOfBounties>

diff --git a/src/people/interfaces.ts b/src/people/interfaces.ts
@@ -17,6 +17,7 @@ export interface BountyModalProps {
 
 export interface OrgBountyHeaderProps {
   organizationUrls: any;
+  direction?: string;
 }
 
 export interface FocusViewProps {

diff --git a/src/people/widgetViews/__tests__/OrgHeader.spec.tsx b/src/people/widgetViews/__tests__/OrgHeader.spec.tsx
@@ -13,6 +13,7 @@ const MockProps: OrgBountyHeaderProps = {
     Completed: false
   },
   languageString: '',
+  direction: 'desc',
   org_uuid: 'clf6qmo4nncmf23du7ng',
   onChangeStatus: jest.fn(),
   onChangeLanguage: jest.fn(),
@@ -67,7 +68,8 @@ describe('OrgHeader Component', () => {
 
       const updatedCheckboxIdToSelectedMap = {
         ...MockProps.checkboxIdToSelectedMap,
-        Open: true
+        Open: true,
+        direction: 'desc'
       };
 
       rerender(