Merge pull request stakwork#224 from Vayras/FilterCount

Number of filters selected on the org bounties page for both the status and skill filer issue : stakwork#43
gouravmpk · Feb 13, 2024 · 7640ba6 · 7640ba6
2 parents 5087aaa + 93c9f96
commit 7640ba6
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 22 deletions.
diff --git a/src/pages/tickets/org/orgHeader/OrgHeaderStyles.tsx b/src/pages/tickets/org/orgHeader/OrgHeaderStyles.tsx
@@ -53,10 +53,24 @@ export const FiltersRight = styled.span`
 `;
 
 export const SkillContainer = styled.span`
-  padding: 10px 0px;
+  padding: 7px 0px;
   align-items: center;
   display: flex;
   position: relative;
+  width: 80px;
+`;
+
+export const InnerContainer = styled.span`
+  padding: 7px 0px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: 80px;
+  gap: 5px;
+`;
+
+export const Formatter = styled.span`
+  padding-top: 10px;
 `;
 
 export const Button = styled.button`
@@ -259,7 +273,8 @@ export const EuiPopOverCheckboxRight = styled.div<styledProps>`
       .euiCheckbox__input:checked + .euiCheckbox__square {
         border: 1px solid ${(p: any) => p?.color && p?.color?.blue1};
         background: ${(p: any) => p?.color && p?.color?.blue1} no-repeat center;
-        background-image: url('static/checkboxImage.svg');
+        background-size: contain;
+        background-image: url(${checkboxImage});
       }
       .euiCheckbox__label {
         font-family: 'Barlow';
@@ -356,7 +371,6 @@ export const StatusContainer = styled.div<styledProps>`
   justify-content: center;
   align-items: center;
   margin-left: 19px;
-  margin-top: 4px;
   cursor: pointer;
   user-select: none;
   .filterStatusIconContainer {
@@ -410,3 +424,25 @@ export const StatusContainer = styled.div<styledProps>`
     }
   }
 `;
+
+export const FilterCount = styled.div<styledProps>`
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  margin-left: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: -5px;
+  background: ${(p: any) => p?.color && p.color.blue1};
+  .filterCountText {
+    font-family: 'Barlow';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: ${(p: any) => p.color && p.color.pureWhite};
+  }
+`;
diff --git a/src/pages/tickets/org/orgHeader/index.tsx b/src/pages/tickets/org/orgHeader/index.tsx
@@ -7,12 +7,14 @@ import { colors } from 'config';
 import { OrgBountyHeaderProps } from '../../../../people/interfaces';
 import { SearchBar } from '../../../../components/common/index.tsx';
 import { useStores } from '../../../../store';
-import { userCanManageBounty } from '../../../../helpers';
+import { userCanManageBounty, filterCount } from '../../../../helpers';
 import addBounty from './Icons/addBounty.svg';
 import dropdown from './Icons/dropDownIcon.svg';
 import file from './Icons/file.svg';
 import githubIcon from './Icons/githubIcon.svg';
+
 import websiteIcon from './Icons/websiteIcon.svg';
+
 import {
   BountyNumber,
   Button,
@@ -40,7 +42,10 @@ import {
   SkillFilter,
   StatusContainer,
   UrlButton,
-  UrlButtonContainer
+  UrlButtonContainer,
+  FilterCount,
+  InnerContainer,
+  Formatter
 } from './OrgHeaderStyles';
 
 const color = colors['light'];
@@ -75,6 +80,9 @@ export const OrgHeader = ({
   const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState<boolean>(false);
   const [isSortByPopoverOpen, setIsSortByPopoverOpen] = useState(false);
   const [sortDirection, setSortDirection] = useState<string>('desc');
+  const [skillCountNumber, setSkillCountNumber] = useState<number>(0);
+  const [statusCountNumber, setStatusCountNumber] = useState<number>(0);
+
   const onButtonClick = async () => {
     setIsStatusPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
   };
@@ -179,6 +187,14 @@ export const OrgHeader = ({
     };
   }, [org_uuid, checkboxIdToSelectedMap, languageString, main, filterClick]);
 
+  useEffect(() => {
+    setStatusCountNumber(filterCount(checkboxIdToSelectedMap));
+  }, [checkboxIdToSelectedMap]);
+
+  useEffect(() => {
+    setSkillCountNumber(filterCount(checkboxIdToSelectedMapLanguage));
+  }, [checkboxIdToSelectedMapLanguage]);
+
   return (
     <>
       <FillContainer>
@@ -225,25 +241,34 @@ export const OrgHeader = ({
               <EuiPopover
                 button={
                   <StatusContainer onClick={onButtonClick} color={color}>
-                    <EuiText
-                      className="statusText"
-                      style={{
-                        color: isStatusPopoverOpen ? color.grayish.G10 : ''
-                      }}
-                    >
-                      Status
-                    </EuiText>
-                    <div className="filterStatusIconContainer">
-                      <MaterialIcon
-                        className="materialStatusIcon"
-                        icon={`${
-                          isStatusPopoverOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
-                        }`}
+                    <InnerContainer>
+                      <EuiText
+                        className="statusText"
                         style={{
                           color: isStatusPopoverOpen ? color.grayish.G10 : ''
                         }}
-                      />
-                    </div>
+                      >
+                        Status
+                      </EuiText>
+                      <div className="filterStatusIconContainer">
+                        <MaterialIcon
+                          className="materialStatusIcon"
+                          icon={`${
+                            isStatusPopoverOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+                          }`}
+                          style={{
+                            color: isStatusPopoverOpen ? color.grayish.G10 : ''
+                          }}
+                        />
+                      </div>
+                      <Formatter>
+                        {statusCountNumber > 0 && (
+                          <FilterCount color={color}>
+                            <EuiText className="filterCountText">{statusCountNumber}</EuiText>
+                          </FilterCount>
+                        )}
+                      </Formatter>
+                    </InnerContainer>
                   </StatusContainer>
                 }
                 panelStyle={{
@@ -288,6 +313,11 @@ export const OrgHeader = ({
               <DropDownButton onClick={handleClick} data-testid="skillDropdown">
                 <Img src={dropdown} alt="" />
               </DropDownButton>
+              {skillCountNumber > 0 && (
+                <FilterCount color={color}>
+                  <EuiText className="filterCountText">{skillCountNumber}</EuiText>
+                </FilterCount>
+              )}
               {filterClick ? (
                 <SkillFilter ref={filterRef} data-testid="skill-filter">
                   <InternalContainer>

diff --git a/src/people/widgetViews/__tests__/OrgHeader.spec.tsx b/src/people/widgetViews/__tests__/OrgHeader.spec.tsx
@@ -231,4 +231,58 @@ describe('OrgHeader Component', () => {
       expect(screen.queryByText('Post a Bounty')).not.toBeInTheDocument();
     });
   });
+
+  it('correct number is displayed next to the button as the number of items selected in the status filter', async () => {
+    const { rerender } = render(<OrgHeader {...MockProps} />);
+
+    const statusFilterButton = screen.getByText('Status');
+    fireEvent.click(statusFilterButton);
+
+    const newCheckboxIdToSelectedMap = {
+      Open: true,
+      Assigned: true,
+      Completed: false,
+      Paid: false
+    };
+
+    const newProps = {
+      ...MockProps,
+      checkboxIdToSelectedMap: newCheckboxIdToSelectedMap
+    };
+
+    rerender(<OrgHeader {...newProps} />);
+
+    const selectedCount = Object.values(newCheckboxIdToSelectedMap).filter(Boolean).length;
+
+    await waitFor(() => {
+      expect(screen.getByText(`${selectedCount}`)).toBeInTheDocument();
+    });
+  });
+
+  it('correct number is displayed next to the button as the number of items selected in the skill filter', async () => {
+    const { rerender } = render(<OrgHeader {...MockProps} />);
+
+    const skillFilterButton = screen.getByText('Skill');
+    fireEvent.click(skillFilterButton);
+
+    const newCheckboxIdToSelectedMapLanguage = {
+      javascript: true,
+      lightning: true,
+      typescript: false,
+      golang: false
+    };
+
+    const newProps = {
+      ...MockProps,
+      checkboxIdToSelectedMap: newCheckboxIdToSelectedMapLanguage
+    };
+
+    rerender(<OrgHeader {...newProps} />);
+
+    const selectedCount = Object.values(newCheckboxIdToSelectedMapLanguage).filter(Boolean).length;
+
+    await waitFor(() => {
+      expect(screen.getByText(`${selectedCount}`)).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/people/widgetViews/summaries/wantedSummaries/Invoice.tsx b/src/people/widgetViews/summaries/wantedSummaries/Invoice.tsx
@@ -65,6 +65,7 @@ export default function Invoice(props: {
   const decoded = lighningDecoder.decode(props.lnInvoice);
   const expiry = decoded.sections[8].value;
   const timeCreated = decoded.sections[4].value;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const endTime = new Date((timeCreated + expiry) * 1000);
   const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(endTime, 'hours'));
 
@@ -80,7 +81,7 @@ export default function Invoice(props: {
     return () => {
       if (invoiceTimeout) clearTimeout(invoiceTimeout);
     };
-  }, [timeLeft, props.invoiceStatus, props]);
+  }, [timeLeft, props.invoiceStatus, props, endTime]);
 
   useEffect(() => {
     if ((!timeLeft.hours || timeLeft.hours < 1) && timeLeft.minutes < 1 && timeLeft.seconds < 1) {