Table: update sortedInfo from queryParams (#2106)

* Table: update sortedInfo from queryParams

* minor correction

* wrap initial state in function

src/components/Table/hooks/useTableSort.js

@@ -1,14 +1,33 @@
-import { camelToSnakeCase } from "neetocist";
+import { useState } from "react";
+
+import { camelToSnakeCase, isPresent, snakeToCamelCase } from "neetocist";
 import { mergeLeft } from "ramda";
 import { useHistory } from "react-router-dom";
 
 import { useQueryParams } from "hooks";
 import { buildUrl } from "utils";
 
-import { URL_SORT_ORDERS } from "../constants";
+import { URL_SORT_ORDERS, TABLE_SORT_ORDERS } from "../constants";
+
+const getSortInfoFromQueryParams = queryParams => {
+  const sortedInfo = {};
+  if (
+    isPresent(queryParams.sort_by) &&
+    isPresent(queryParams.order_by) &&
+    isPresent(TABLE_SORT_ORDERS[queryParams.order_by])
+  ) {
+    sortedInfo.field = snakeToCamelCase(queryParams.sort_by);
+    sortedInfo.order = TABLE_SORT_ORDERS[queryParams.order_by];
+  }
+
+  return sortedInfo;
+};
 
 const useTableSort = () => {
   const queryParams = useQueryParams();
+  const [sortedInfo, setSortedInfo] = useState(() =>
+    getSortInfoFromQueryParams(queryParams)
+  );
 
   const history = useHistory();
 
@@ -23,7 +42,7 @@ const useTableSort = () => {
     history.push(buildUrl(pathname, mergeLeft(params, queryParams)));
   };
 
-  return { handleTableChange };
+  return { handleTableChange, sortedInfo, setSortedInfo };
 };
 
 export default useTableSort;

src/components/Table/index.jsx

@@ -58,7 +58,11 @@ const Table = ({
   const [containerHeight, setContainerHeight] = useState(null);
   const [headerHeight, setHeaderHeight] = useState(TABLE_DEFAULT_HEADER_HEIGHT);
   const [columns, setColumns] = useState(columnData);
-  const [sortedInfo, setSortedInfo] = useState({});
+  const {
+    handleTableChange: handleTableSortChange,
+    sortedInfo,
+    setSortedInfo,
+  } = useTableSort();
 
   const isDefaultPageChangeHandler = handlePageChange === noop;
 
@@ -96,8 +100,6 @@ const Table = ({
     setHeaderHeight(headerHeight);
   }, 10);
 
-  const { handleTableChange: handleTableSortChange } = useTableSort();
-
   const { dragProps, columns: curatedColumnsData } = useColumns({
     isReorderEnabled: enableColumnReorder,
     isResizeEnabled: enableColumnResize,