[offers][feat] add filters for table and fix pagination (#402)

* [offers][feat] add filters for table and fix pagination

* [offers][fix] display currency

apps/portal/src/components/offers/table/OffersTable.tsx

@@ -2,7 +2,12 @@ import { useEffect, useState } from 'react';
 import { HorizontalDivider, Select, Spinner, Tabs } from '@tih/ui';
 
 import OffersTablePagination from '~/components/offers/table/OffersTablePagination';
-import { YOE_CATEGORY } from '~/components/offers/table/types';
+import {
+  OfferTableFilterOptions,
+  OfferTableSortBy,
+  OfferTableTabOptions,
+  YOE_CATEGORY,
+} from '~/components/offers/table/types';
 
 import CurrencySelector from '~/utils/offers/currency/CurrencySelector';
 import { trpc } from '~/utils/trpc';
@@ -29,7 +34,9 @@ export default function OffersTable({
     totalItems: 0,
   });
   const [offers, setOffers] = useState<Array<DashboardOffer>>([]);
-
+  const [selectedFilter, setSelectedFilter] = useState(
+    OfferTableFilterOptions[0].value,
+  );
   useEffect(() => {
     setPagination({
       currentPage: 0,
@@ -45,13 +52,16 @@ export default function OffersTable({
         companyId: companyFilter,
         limit: NUMBER_OF_OFFERS_IN_PAGE,
         location: 'Singapore, Singapore', // TODO: Geolocation
-        offset: 0,
+        offset: pagination.currentPage,
-        sortBy: '-monthYearReceived',
+        sortBy: OfferTableSortBy[selectedFilter] ?? '-monthYearReceived',
         title: jobTitleFilter,
         yoeCategory: selectedTab,
       },
     ],
     {
+      onError: (err) => {
+        alert(err);
+      },
       onSuccess: (response: GetOffersResponse) => {
         setOffers(response.data);
         setPagination(response.paging);
@@ -65,24 +75,7 @@ export default function OffersTable({
         <div className="w-fit">
           <Tabs
             label="Table Navigation"
-            tabs={[
+            tabs={OfferTableTabOptions}
-              {
-                label: 'Fresh Grad (0-2 YOE)',
-                value: YOE_CATEGORY.ENTRY,
-              },
-              {
-                label: 'Mid (3-5 YOE)',
-                value: YOE_CATEGORY.MID,
-              },
-              {
-                label: 'Senior (6+ YOE)',
-                value: YOE_CATEGORY.SENIOR,
-              },
-              {
-                label: 'Internship',
-                value: YOE_CATEGORY.INTERN,
-              },
-            ]}
             value={selectedTab}
             onChange={(value) => setSelectedTab(value)}
           />
@@ -102,16 +95,11 @@ export default function OffersTable({
           />
         </div>
         <Select
-          disabled={true}
           isLabelHidden={true}
           label=""
-          options={[
+          options={OfferTableFilterOptions}
-            {
+          value={selectedFilter}
-              label: 'Latest Submitted',
+          onChange={(value) => setSelectedFilter(value)}
-              value: 'latest-submitted',
-            },
-          ]}
-          value="latest-submitted"
         />
       </div>
     );
@@ -139,7 +127,9 @@ export default function OffersTable({
   }
 
   const handlePageChange = (currPage: number) => {
-    setPagination({ ...pagination, currentPage: currPage });
+    if (0 < currPage && currPage < pagination.numOfPages) {
+      setPagination({ ...pagination, currentPage: currPage });
+    }
   };
 
   return (

apps/portal/src/components/offers/table/OffersTablePagination.tsx

@@ -33,7 +33,7 @@ export default function OffersTablePagination({
         current={pagination.currentPage + 1}
         end={pagination.numOfPages}
         label="Pagination"
-        pagePadding={1}
+        pagePadding={2}
         start={1}
         onSelect={(currPage) => {
           handlePageChange(currPage - 1);

apps/portal/src/components/offers/table/types.ts

@@ -5,3 +5,48 @@ export enum YOE_CATEGORY {
   MID = 2,
   SENIOR = 3,
 }
+
+export const OfferTableTabOptions = [
+  {
+    label: 'Fresh Grad (0-2 YOE)',
+    value: YOE_CATEGORY.ENTRY,
+  },
+  {
+    label: 'Mid (3-5 YOE)',
+    value: YOE_CATEGORY.MID,
+  },
+  {
+    label: 'Senior (6+ YOE)',
+    value: YOE_CATEGORY.SENIOR,
+  },
+  {
+    label: 'Internship',
+    value: YOE_CATEGORY.INTERN,
+  },
+];
+
+export const OfferTableFilterOptions = [
+  {
+    label: 'Latest Submitted',
+    value: 'latest-submitted',
+  },
+  {
+    label: 'Highest Salary',
+    value: 'highest-salary',
+  },
+  {
+    label: 'Highest YOE first',
+    value: 'highest-yoe-first',
+  },
+  {
+    label: 'Lowest YOE first',
+    value: 'lowest-yoe-first',
+  },
+];
+
+export const OfferTableSortBy: Record<string, string> = {
+  'highest-salary': '-totalCompensation',
+  'highest-yoe-first': '-totalYoe',
+  'latest-submitted': '-monthYearReceived',
+  'lowest-yoe-first': '+totalYoe',
+};

apps/portal/src/utils/offers/currency/index.tsx

@@ -10,5 +10,5 @@ export function convertCurrencyToString({ currency, value }: Money) {
     minimumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
     style: 'currency',
   });
-  return `${formatter.format(10000)}`; /* $2,500.00 */
+  return `${formatter.format(value)}`;
 }