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

* [offers][fix] fix redirection to offer table

* [offers][refactor] refactor table page

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?jobTitleId=${title}&sortDirection=-&sortType=totalCompensation&yoeCategory=${yoeCategory}`
-                : `/offers?companyId=${companyId}&companyName=${companyName}&jobTitleId=${title}&sortBy=-totalCompensation&yoeCategory=${yoeCategory}`
+                : `/offers?companyId=${companyId}&companyName=${companyName}&jobTitleId=${title}&sortDirection=-&sortType=totalCompensation&yoeCategory=${yoeCategory}`
             }
             icon={ArrowUpRightIcon}
             label="View more offers"

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 [
+  const [, , isSortDirectionInitialized] =
-    selectedSortDirection,
+    useSearchParamSingle<OFFER_TABLE_SORT_ORDER>('sortDirection');
-    setSelectedSortDirection,
-    isSortDirectionInitialized,
-  ] = useSearchParamSingle<OFFER_TABLE_SORT_ORDER>('sortDirection');
 
-  const [selectedSortType, setSelectedSortType, isSortTypeInitialized] =
+  const [, , isSortTypeInitialized] =
-    useSearchParamSingle<OfferTableSortType>('sortType');
+    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) ||
+        {!isLoading && (!offers || offers.length === 0) && (
-          (offers.length === 0 && (
+          <div className="py-16 text-lg">
-            <div className="py-16 text-lg">
+            <div className="flex justify-center">No data yet 🥺</div>
-              <div className="flex justify-center">No data yet 🥺</div>
+          </div>
-            </div>
+        )}
-          ))}
       </div>
       <OffersTablePagination
         endNumber={

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>