chore(FE-43): add address and area sorting

src/components/pages/master-data/location/LocationsTable.tsx

@@ -1,8 +1,13 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
@@ -88,8 +93,14 @@ const LocationsTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '', nameSort: '' },
+    initial: { search: '', nameSort: '', addressSort: '', areaSort: '' },
-    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      addressSort: 'sort_address',
+      areaSort: ' sort_area',
+    },
   });
 
   const {
@@ -194,15 +205,36 @@ const LocationsTable = () => {
     setPageSize(newVal.value as number);
   };
 
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
+  );
+
+  console.log({
+    sorting,
+    getTableFilterQueryString: getTableFilterQueryString(),
+  });
+
   // track sorting
   useEffect(() => {
-    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const addressSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'address'
+    );
+    const areaSortFilter = sorting.find((sortItem) => sortItem.id === 'area');
 
-    if (!isNameSorted) {
+    updateSortingFilter('nameSort', nameSortFilter);
-      updateFilter('nameSort', '');
+    updateSortingFilter('addressSort', addressSortFilter);
-    } else {
+    updateSortingFilter('areaSort', areaSortFilter);
-      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
-    }
   }, [sorting]);
 
   return (