Merge branch 'add-bounty-filters-to-profile' of https://github.com/ok…

…hot/sphinx-tribes-frontend into add-bounty-filters-to-profile
jordan-ae · Mar 13, 2024 · 1db4c9c · 1db4c9c
2 parents 2431247 + 3c8a213
commit 1db4c9c
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 87 deletions.
diff --git a/src/pages/people/tabs/Wanted.tsx b/src/pages/people/tabs/Wanted.tsx
@@ -15,6 +15,7 @@ import styled from 'styled-components';
 import { LoadMoreContainer } from '../../../people/widgetViews/WidgetSwitchViewer';
 import { colors } from '../../../config/colors';
 import checkboxImage from './Icons/checkboxImage.svg';
+import PopoverCheckbox from './popoverCheckboxStyles';
 
 const config = widgetConfigs.bounties;
 type BountyType = any;
@@ -45,48 +46,6 @@ const Panel = styled.a<PanelProps>`
   }
 `;
 
-const EuiPopOverCheckbox = styled.div<{ color?: any }>`
-  margin-right: 3px;
-  overflow-y: scroll;
-  display: flex;
-  align-items: center;
-  &.CheckboxOuter > div {
-    height: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    .euiCheckboxGroup__item {
-      margin-top: 0px;
-      display: flex;
-      align-items: center;
-      .euiCheckbox__square {
-        border: 1px solid ${(p: any) => p?.color && p?.color?.grayish.G500};
-        border-radius: 2px;
-      }
-      .euiCheckbox__input + .euiCheckbox__square {
-        background: ${(p: any) => p?.color && p?.color?.pureWhite} no-repeat center;
-      }
-      .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(${checkboxImage});
-      }
-      .euiCheckbox__label {
-        font-family: 'Barlow';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 13px;
-        line-height: 16px;
-        color: ${(p: any) => p?.color && p?.color?.grayish.G50};
-        margin-top: 2px;
-      }
-      input.euiCheckbox__input:checked ~ label {
-        color: black;
-        font-weight: 600;
-      }
-    }
-  }
-`;
-
 export const Wanted = observer(() => {
   const { ui, main } = useStores();
   const { person, canEdit } = usePerson(ui.selectedPerson);
@@ -189,7 +148,7 @@ export const Wanted = observer(() => {
         }}
       >
         <h4>Bounties </h4>
-        <EuiPopOverCheckbox className="CheckboxOuter" color={colors['light']}>
+        <PopoverCheckbox className="CheckboxOuter" color={colors['light']}>
           <EuiCheckboxGroup
             style={{ display: 'flex', alignItems: 'center', gap: 20, marginRight: 50 }}
             options={Status.map((status: string) => ({
@@ -202,7 +161,7 @@ export const Wanted = observer(() => {
             }}
           />
           {canEdit && <PostBounty widget="bounties" />}
-        </EuiPopOverCheckbox>
+        </PopoverCheckbox>
       </div>
       {loading && <PageLoadSpinner show={loading} />}
       <Switch>

diff --git a/src/pages/people/tabs/popoverCheckboxStyles.ts b/src/pages/people/tabs/popoverCheckboxStyles.ts
@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import checkboxImage from './Icons/checkboxImage.svg';
+
+const PopoverCheckbox = styled.div<{ color?: any }>`
+  margin-right: 3px;
+  overflow-y: scroll;
+  display: flex;
+  align-items: center;
+  &.CheckboxOuter > div {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    .euiCheckboxGroup__item {
+      margin-top: 0px;
+      display: flex;
+      align-items: center;
+      .euiCheckbox__square {
+        border: 1px solid ${(p: any) => p?.color && p?.color?.grayish.G500};
+        border-radius: 2px;
+      }
+      .euiCheckbox__input + .euiCheckbox__square {
+        background: ${(p: any) => p?.color && p?.color?.pureWhite} no-repeat center;
+      }
+      .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(${checkboxImage});
+      }
+      .euiCheckbox__label {
+        font-family: 'Barlow';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 16px;
+        color: ${(p: any) => p?.color && p?.color?.grayish.G50};
+        margin-top: 2px;
+      }
+      input.euiCheckbox__input:checked ~ label {
+        color: black;
+        font-weight: 600;
+      }
+    }
+  }
+`;
+
+export default PopoverCheckbox;
diff --git a/src/people/widgetViews/UserTicketsView.spec.tsx b/src/people/widgetViews/UserTicketsView.spec.tsx
@@ -17,6 +17,9 @@ beforeAll(() => {
   mockUsehistory();
 });
 
+jest.mock('remark-gfm', () => null);
+jest.mock('rehype-raw', () => null);
+
 describe('User Tickets View', () => {
   nock(user.url).get('/person/id/1').reply(200, { user });
   nock(user.url).get('/ask').reply(200, {});
@@ -293,4 +296,39 @@ describe('User Tickets View', () => {
       expect(displayName).toBeInTheDocument();
     });
   });
+
+  it('test that the correct calls are made when boxes are clicked for created bounties tab', async () => {
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    const userBounty = { ...mockBounties[0], body: {} } as any;
+    userBounty.body = {
+      ...userBounty.bounty,
+      owner_id: person.owner_pubkey,
+      title: 'test bounty here',
+      description: 'custom ticket for testing'
+    };
+
+    const mockedPersonAssignedBounites = jest
+      .spyOn(mainStore, 'getPersonAssignedBounties')
+      .mockReturnValue(Promise.resolve([userBounty]));
+    act(async () => {
+      render(
+        <MemoryRouter initialEntries={['/p/1234/usertickets']}>
+          <Route path="/p/:personPubkey/usertickets" component={UserTickets} />
+        </MemoryRouter>
+      );
+      await waitFor(() => {
+        const checkBoxLable = screen.queryByText('Assigned');
+        expect(checkBoxLable).toBeInTheDocument();
+
+        const checkBoxInput = checkBoxLable?.previousElementSibling as HTMLInputElement;
+        fireEvent.click(checkBoxInput);
+      });
+
+      await waitFor(() =>
+        expect(mockedPersonAssignedBounites).toHaveBeenCalledWith(
+          expect.objectContaining({ Open: false, Assigned: true })
+        )
+      );
+    });
+  });
 });
diff --git a/src/people/widgetViews/UserTicketsView.tsx b/src/people/widgetViews/UserTicketsView.tsx
@@ -9,6 +9,7 @@ import styled from 'styled-components';
 import { BountyModal } from 'people/main/bountyModal/BountyModal';
 import PageLoadSpinner from 'people/utils/PageLoadSpinner';
 import { Person } from 'store/main';
+import PopoverCheckbox from 'pages/people/tabs/popoverCheckboxStyles';
 import history from '../../config/history';
 import { colors } from '../../config/colors';
 import WantedView from './WantedView';
@@ -45,47 +46,6 @@ const Panel = styled.a<PanelProps>`
   }
 `;
 
-const EuiPopOverCheckbox = styled.div<{ color?: any }>`
-  overflow-y: scroll;
-  display: flex;
-  align-items: center;
-  &.CheckboxOuter > div {
-    height: 100%;
-    display: flex;
-    .euiCheckboxGroup__item {
-      margin-top: 0px;
-      display: flex;
-      align-items: center;
-      .euiCheckbox__square {
-        top: 5px;
-        border: 1px solid ${(p: any) => p?.color && p?.color?.grayish.G500};
-        border-radius: 2px;
-      }
-      .euiCheckbox__input + .euiCheckbox__square {
-        background: ${(p: any) => p?.color && p?.color?.pureWhite} no-repeat center;
-      }
-      .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(${checkboxImage});
-      }
-      .euiCheckbox__label {
-        font-family: 'Barlow';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 13px;
-        line-height: 16px;
-        color: ${(p: any) => p?.color && p?.color?.grayish.G50};
-        margin-top: 4px;
-      }
-      input.euiCheckbox__input:checked ~ label {
-        color: black;
-        font-weight: 600;
-      }
-    }
-  }
-`;
-
 const UserTickets = () => {
   const color = colors['light'];
   const { uuid } = useParams<{ uuid: string }>();
@@ -229,7 +189,7 @@ const UserTickets = () => {
       >
         <h4>Assigned Bounties</h4>
         <div style={{ display: 'flex' }}>
-          <EuiPopOverCheckbox className="CheckboxOuter" color={colors['light']}>
+          <PopoverCheckbox className="CheckboxOuter" color={colors['light']}>
             <EuiCheckboxGroup
               style={{ display: 'flex', alignItems: 'center', gap: 20, marginRight: 20 }}
               options={Status.map((status: string) => ({
@@ -241,7 +201,7 @@ const UserTickets = () => {
                 applyFilters(optionId);
               }}
             />
-          </EuiPopOverCheckbox>
+          </PopoverCheckbox>
         </div>
       </div>
       {loading && <PageLoadSpinner show={loading} />}