feat: added filters

jordan-ae · Mar 5, 2024 · 6364e08 · 6364e08
1 parent cc34097
commit 6364e08
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 15 deletions.
diff --git a/src/pages/people/tabs/Wanted.tsx b/src/pages/people/tabs/Wanted.tsx
@@ -1,5 +1,6 @@
 import { usePerson } from 'hooks';
 import { observer } from 'mobx-react-lite';
+import { EuiCheckboxGroup } from '@elastic/eui';
 import { BountyModal } from 'people/main/bountyModal';
 import { widgetConfigs } from 'people/utils/Constants';
 import NoneSpace from 'people/utils/NoneSpace';
@@ -13,6 +14,7 @@ import { paginationQueryLimit } from 'store/main';
 import styled from 'styled-components';
 import { LoadMoreContainer } from '../../../people/widgetViews/WidgetSwitchViewer';
 import { colors } from '../../../config/colors';
+
 const config = widgetConfigs.bounties;
 type BountyType = any;
 const Container = styled.div`
@@ -52,14 +54,17 @@ export const Wanted = observer(() => {
   const [loading, setIsLoading] = useState<boolean>(false);
   const [page, setPage] = useState(1);
   const [hasMoreBounties, setHasMoreBounties] = useState(true);
+  const [sort, setSort] = useState('paid');
+
+  const Status = ['open', 'assingned', 'paid'];
 
   // Function to fetch user tickets with pagination
   const getUserTickets = async () => {
     setIsLoading(true);
 
     // Fetch bounties for the specified page and limit
     const response = await main.getPersonCreatedBounties(
-      { page: page, limit: paginationQueryLimit },
+      { page: page, limit: paginationQueryLimit, sortBy: sort },
       uuid
     );
 
@@ -77,7 +82,7 @@ export const Wanted = observer(() => {
     setPage(nextPage);
     // Fetch bounties for the next page
     const response = await main.getPersonCreatedBounties(
-      { page: nextPage, limit: paginationQueryLimit },
+      { page: nextPage, limit: paginationQueryLimit, sortBy: sort },
       uuid
     );
     // Check if the response has fewer bounties than the limit, indicating no more bounties to load
@@ -90,7 +95,7 @@ export const Wanted = observer(() => {
 
   useEffect(() => {
     getUserTickets();
-  }, [main]);
+  }, [main, sort]);
 
   if (!main.createdBounties?.length && !loading) {
     return (
@@ -130,11 +135,26 @@ export const Wanted = observer(() => {
         style={{
           width: '100%',
           display: 'flex',
-          justifyContent: 'flex-end',
-          paddingBottom: '16px'
+          justifyContent: 'space-between',
+          paddingBottom: '16px',
+          alignItems: 'center'
         }}
       >
-        {canEdit && <PostBounty widget="bounties" />}
+        <h4>Bounties {sort}</h4>
+        <div style={{ display: 'flex' }}>
+          <EuiCheckboxGroup
+            style={{ display: 'flex', alignItems: 'center', gap: 10, marginRight: 20 }}
+            options={Status.map((status: any) => ({
+              label: `${status}`,
+              id: status
+            }))}
+            idToSelectedMap={{ [sort]: true }}
+            onChange={(id: any) => {
+              setSort(id);
+            }}
+          />
+          {canEdit && <PostBounty widget="bounties" />}
+        </div>
       </div>
       {displayedBounties
         .filter((w: BountyType) => w.body.owner_id === person?.owner_pubkey)

diff --git a/src/people/widgetViews/UserTicketsView.tsx b/src/people/widgetViews/UserTicketsView.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Route, Switch, useParams, useRouteMatch, Router } from 'react-router-dom';
 import { useStores } from 'store';
+import { EuiCheckboxGroup } from '@elastic/eui';
 import NoResults from 'people/utils/UserNoResults';
-import { useIsMobile, usePerson } from 'hooks';
+import { useIsMobile } from 'hooks';
 import { Spacer } from 'people/main/Body';
 import styled from 'styled-components';
 import { BountyModal } from 'people/main/bountyModal/BountyModal';
@@ -13,6 +14,7 @@ import { colors } from '../../config/colors';
 import WantedView from './WantedView';
 import DeleteTicketModal from './DeleteModal';
 import { LoadMoreContainer } from './WidgetSwitchViewer';
+
 type BountyType = any;
 
 const Container = styled.div`
@@ -49,7 +51,7 @@ const UserTickets = () => {
   const isMobile = useIsMobile();
   const { path, url } = useRouteMatch();
 
-  const { person } = usePerson(ui.selectedPerson);
+  const Status = ['Assigned', 'Paid'];
 
   const [deletePayload, setDeletePayload] = useState<object>({});
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
@@ -59,6 +61,7 @@ const UserTickets = () => {
   const [loading, setIsLoading] = useState<boolean>(true);
   const [hasMoreBounties, setHasMoreBounties] = useState(true);
   const [bountyOwner, setBountyOwner] = useState<Person>();
+  const [sort, setSort] = useState('');
   const [page, setPage] = useState(1);
   const paginationLimit = 20;
 
@@ -113,7 +116,7 @@ const UserTickets = () => {
     const nextPage = page + 1;
     setPage(nextPage);
     const response = await main.getPersonAssignedBounties(
-      { page: nextPage, limit: paginationLimit },
+      { page: nextPage, limit: paginationLimit, sortBy: sort },
       uuid
     );
     if (response.length < paginationLimit) {
@@ -124,7 +127,7 @@ const UserTickets = () => {
 
   useEffect(() => {
     getUserTickets();
-  }, [main]);
+  }, [main, sort]);
 
   const listItems =
     displayedBounties && displayedBounties.length ? (
@@ -171,6 +174,30 @@ const UserTickets = () => {
           </Route>
         </Switch>
       </Router>
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'space-between',
+          paddingBottom: '16px',
+          alignItems: 'center'
+        }}
+      >
+        <h4>Assigned Bounties {sort}</h4>
+        <div style={{ display: 'flex' }}>
+          <EuiCheckboxGroup
+            style={{ display: 'flex', gap: 20, alignItems: 'center', alignContent: 'center' }}
+            options={Status.map((status: any) => ({
+              label: `${status}`,
+              id: status
+            }))}
+            idToSelectedMap={{ [sort]: true }}
+            onChange={(id: any) => {
+              setSort(id);
+            }}
+          />
+        </div>
+      </div>
       {!loading ? listItems : ''}
       {hasMoreBounties && !loading && (
         <LoadMoreContainer

diff --git a/src/store/main.ts b/src/store/main.ts
@@ -939,8 +939,7 @@ export class MainStore {
 
     const query = this.appendQueryParams(`people/wanteds/assigned/${uuid}`, paginationQueryLimit, {
       sortBy: 'paid',
-      ...queryParams,
-      direction: 'ASC'
+      ...queryParams
     });
 
     try {
@@ -986,9 +985,7 @@ export class MainStore {
     queryParams = { ...queryParams, search: uiStore.searchText };
 
     const query = this.appendQueryParams(`people/wanteds/created/${uuid}`, paginationQueryLimit, {
-      ...queryParams,
-      sortBy: 'paid',
-      direction: 'ASC'
+      ...queryParams
     });
 
     try {
@@ -1652,6 +1649,7 @@ export class MainStore {
       body.coding_languages = languages;
     }
 
+    // eslint-disable-next-line no-useless-catch
     try {
       const request = `gobounties?token=${info?.tribe_jwt}`;
       //TODO: add some sort of authentication