[offers][refactor] refactor table page

3 years ago · 5a007662ca
parent 29b0d48a31
commit 5a007662ca
2 changed files with 45 additions and 21 deletions
--- a/apps/portal/src/components/offers/table/OffersTable.tsx
+++ b/apps/portal/src/components/offers/table/OffersTable.tsx
@ -34,6 +34,12 @@ export type OffersTableProps = Readonly<{
  country: string | null;
  countryFilter: string;
  jobTitleFilter: string;
+  onSort: (
+    sortDirection: OFFER_TABLE_SORT_ORDER,
+    sortType: OfferTableSortType | null,
+  ) => void;
+  selectedSortDirection: OFFER_TABLE_SORT_ORDER;
+  selectedSortType: OfferTableSortType | null;
 }>;

 export default function OffersTable({
@ -42,6 +48,9 @@ export default function OffersTable({
  companyName,
  companyFilter,
  jobTitleFilter,
+  selectedSortDirection,
+  selectedSortType,
+  onSort,
 }: OffersTableProps) {
  const [currency, setCurrency] = useState(
    getCurrencyForCountry(country).toString(),
@ -66,14 +75,11 @@ export default function OffersTable({
    isYoeCategoryInitialized,
  ] = useSearchParamSingle<keyof typeof YOE_CATEGORY_PARAM>('yoeCategory');

-  const [
-    selectedSortDirection,
-    setSelectedSortDirection,
-    isSortDirectionInitialized,
-  ] = useSearchParamSingle<OFFER_TABLE_SORT_ORDER>('sortDirection');
+  const [, , isSortDirectionInitialized] =
+    useSearchParamSingle<OFFER_TABLE_SORT_ORDER>('sortDirection');

-  const [selectedSortType, setSelectedSortType, isSortTypeInitialized] =
-    useSearchParamSingle<OfferTableSortType>('sortType');
+  const [, , isSortTypeInitialized] =
+    useSearchParamSingle<OfferTableSortType | null>('sortType');

  const areFilterParamsInitialized = useMemo(() => {
    return (
@ -164,19 +170,6 @@ export default function OffersTable({
    },
  );

-  const onSort = (
-    sortDirection: OFFER_TABLE_SORT_ORDER,
-    sortType: OfferTableSortType,
-  ) => {
-    gaEvent({
-      action: 'offers_table_sort',
-      category: 'engagement',
-      label: `${sortType} - ${sortDirection}`,
-    });
-    setSelectedSortType(sortType);
-    setSelectedSortDirection(sortDirection);
-  };
-
  function renderFilters() {
    return (
      <div className="flex items-center justify-between p-4 text-xs text-slate-700 sm:grid-cols-4 sm:text-sm md:text-base">
@ -199,7 +192,7 @@ export default function OffersTable({
              label={itemLabel}
              onClick={() => {
                setSelectedYoeCategory(value);
-                setSelectedSortDirection(OFFER_TABLE_SORT_ORDER.UNSORTED);
+                onSort(OFFER_TABLE_SORT_ORDER.UNSORTED, null);
                gaEvent({
                  action: `offers.table_filter_yoe_category_${value}`,
                  category: 'engagement',
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@ -7,6 +7,8 @@ import { Banner } from '@tih/ui';

 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import OffersTable from '~/components/offers/table/OffersTable';
+import type { OfferTableSortType } from '~/components/offers/table/types';
+import { OFFER_TABLE_SORT_ORDER } from '~/components/offers/table/types';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import Container from '~/components/shared/Container';
 import CountriesTypeahead from '~/components/shared/CountriesTypeahead';
@ -38,6 +40,26 @@ export default function OffersHomePage({
  const [selectedJobTitleId, setSelectedJobTitleId] =
    useSearchParamSingle<JobTitleType | null>('jobTitleId');

+  const [selectedSortDirection, setSelectedSortDirection] =
+    useSearchParamSingle<OFFER_TABLE_SORT_ORDER>('sortDirection');
+
+  const [selectedSortType, setSelectedSortType] =
+    useSearchParamSingle<OfferTableSortType | null>('sortType');
+
+  const onSort = (
+    sortDirection: OFFER_TABLE_SORT_ORDER,
+    sortType: OfferTableSortType | null,
+  ) => {
+    if (sortType) {
+      gaEvent({
+        action: 'offers_table_sort',
+        category: 'engagement',
+        label: `${sortType} - ${sortDirection}`,
+      });
+      setSelectedSortType(sortType);
+    }
+    setSelectedSortDirection(sortDirection);
+  };
  return (
    <>
      <Head>
@ -69,6 +91,8 @@ export default function OffersHomePage({
              } else {
                setCountryFilter('');
              }
+              setSelectedSortDirection(OFFER_TABLE_SORT_ORDER.UNSORTED);
+              setSelectedSortType(null);
            }}
          />
        </div>
@ -113,6 +137,8 @@ export default function OffersHomePage({
                  } else {
                    setSelectedJobTitleId(null);
                  }
+                  setSelectedSortDirection(OFFER_TABLE_SORT_ORDER.UNSORTED);
+                  setSelectedSortType(null);
                }}
              />
              <span>in</span>
@ -141,6 +167,8 @@ export default function OffersHomePage({
                  } else {
                    setSelectedCompanyId('');
                    setSelectedCompanyName('');
+                    setSelectedSortDirection(OFFER_TABLE_SORT_ORDER.UNSORTED);
+                    setSelectedSortType(null);
                  }
                }}
              />
@ -154,6 +182,9 @@ export default function OffersHomePage({
            country={country}
            countryFilter={countryFilter}
            jobTitleFilter={selectedJobTitleId ?? ''}
+            selectedSortDirection={selectedSortDirection}
+            selectedSortType={selectedSortType}
+            onSort={onSort}
          />
        </Container>
      </main>