[offers][fix] fix redirection to offer table (#543)

* [offers][fix] fix redirection to offer table * [offers][refactor] refactor table page
2026-02-03 18:45:04 +08:00 · 2022-11-09 01:43:14 +08:00
parent fd97f25de1
commit 55c23f6c0c
3 changed files with 52 additions and 33 deletions
--- a/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx
+++ b/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx
@@ -73,8 +73,8 @@ function OfferAnalysisContent({
          <Button
            href={
              tab === OVERALL_TAB
-                ? `/offers?jobTitleId=${title}&sortBy=-totalCompensation&yoeCategory=${yoeCategory}`
-                : `/offers?companyId=${companyId}&companyName=${companyName}&jobTitleId=${title}&sortBy=-totalCompensation&yoeCategory=${yoeCategory}`
+                ? `/offers?jobTitleId=${title}&sortDirection=-&sortType=totalCompensation&yoeCategory=${yoeCategory}`
+                : `/offers?companyId=${companyId}&companyName=${companyName}&jobTitleId=${title}&sortDirection=-&sortType=totalCompensation&yoeCategory=${yoeCategory}`
            }
            icon={ArrowUpRightIcon}
            label="View more offers"
--- 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 (
@@ -126,10 +132,6 @@ export default function OffersTable({
    pathname,
  ]);

-  useEffect(() => {
-    setSelectedSortDirection(OFFER_TABLE_SORT_ORDER.UNSORTED);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedYoeCategory]);
  const topRef = useRef<HTMLDivElement>(null);
  const { showToast } = useToast();
  const { isLoading: isResultsLoading } = trpc.useQuery(
@@ -141,7 +143,6 @@ export default function OffersTable({
        currency,
        limit: NUMBER_OF_OFFERS_PER_PAGE,
        offset: pagination.currentPage,
-        // SortBy: selectedSortBy ?? '-monthYearReceived',
        sortBy:
          selectedSortDirection && selectedSortType
            ? `${selectedSortDirection}${selectedSortType}`
@@ -169,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">
@@ -204,6 +192,7 @@ export default function OffersTable({
              label={itemLabel}
              onClick={() => {
                setSelectedYoeCategory(value);
+                onSort(OFFER_TABLE_SORT_ORDER.UNSORTED, null);
                gaEvent({
                  action: `offers.table_filter_yoe_category_${value}`,
                  category: 'engagement',
@@ -291,12 +280,11 @@ export default function OffersTable({
            <Spinner display="block" size="lg" />
          </div>
        )}
-        {(!isLoading && !offers) ||
-          (offers.length === 0 && (
-            <div className="py-16 text-lg">
-              <div className="flex justify-center">No data yet 🥺</div>
-            </div>
-          ))}
+        {!isLoading && (!offers || offers.length === 0) && (
+          <div className="py-16 text-lg">
+            <div className="flex justify-center">No data yet 🥺</div>
+          </div>
+        )}
      </div>
      <OffersTablePagination
        endNumber={
--- 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>