From 875a264a0bfd6422ab9b68f3c61d44e213ae3f0b Mon Sep 17 00:00:00 2001
From: William Wills <wwills2@protonmail.com>
Date: Wed, 24 Apr 2024 10:15:33 -0400
Subject: [PATCH] fix: datatable invalid sort key

---
 .../components/blocks/tables/ProjectsListTable.tsx   |  7 ++++---
 .../components/blocks/tables/UnitsListTable.tsx      |  7 ++++---
 src/renderer/components/layout/DataTable.tsx         |  5 +++--
 src/renderer/pages/MyProjectsPage.tsx                | 12 ++++++------
 src/renderer/pages/MyUnitsPage.tsx                   |  4 ++--
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/blocks/tables/ProjectsListTable.tsx b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
index 160b76de..7100a876 100644
--- a/src/renderer/components/blocks/tables/ProjectsListTable.tsx
+++ b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DebouncedFunc } from 'lodash';
-import { DataTable, PageCounter, Pagination, ProjectAndUnitActions, Tooltip } from '@/components';
+import { Column, DataTable, PageCounter, Pagination, ProjectAndUnitActions, Tooltip } from '@/components';
 import { Project } from '@/schemas/Project.schema';
 import { Badge } from 'flowbite-react';
 
@@ -31,16 +31,17 @@ const ProjectsListTable: React.FC<TableProps> = ({
   totalCount,
 }) => {
   const columns = useMemo(() => {
-    const editColumn: any = [
+    const editColumn: Column[] = [
       {
         title: '',
         key: 'actionColumn',
         ignoreChildEvents: true,
+        ignoreOrderChange: true,
         render: (row: Project) => <ProjectAndUnitActions type="project" warehouseId={row?.warehouseProjectId || ''} />,
       },
     ];
 
-    const staticColumns: any = [
+    const staticColumns: Column[] = [
       {
         title: <FormattedMessage id={'current-registry'} />,
         key: 'currentRegistry',
diff --git a/src/renderer/components/blocks/tables/UnitsListTable.tsx b/src/renderer/components/blocks/tables/UnitsListTable.tsx
index 3f971af5..55fb2e4e 100644
--- a/src/renderer/components/blocks/tables/UnitsListTable.tsx
+++ b/src/renderer/components/blocks/tables/UnitsListTable.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DebouncedFunc } from 'lodash';
-import { DataTable, PageCounter, Pagination, ProjectAndUnitActions } from '@/components';
+import { Column, DataTable, PageCounter, Pagination, ProjectAndUnitActions } from '@/components';
 import { Unit } from '@/schemas/Unit.schema';
 
 interface TableProps {
@@ -30,16 +30,17 @@ const UnitsListTable: React.FC<TableProps> = ({
   totalCount,
 }) => {
   const columns = useMemo(() => {
-    const editColumn: any = [
+    const editColumn: Column[] = [
       {
         title: '',
         key: 'actionColumn',
         ignoreChildEvents: true,
+        ignoreOrderChange: true,
         render: (row: Unit) => <ProjectAndUnitActions type="unit" warehouseId={row.warehouseUnitId} />,
       },
     ];
 
-    const staticColumns: any = [
+    const staticColumns: Column[] = [
       {
         title: <FormattedMessage id={'unit-owner'} />,
         key: 'unitOwner',
diff --git a/src/renderer/components/layout/DataTable.tsx b/src/renderer/components/layout/DataTable.tsx
index 3658b580..2a76371a 100644
--- a/src/renderer/components/layout/DataTable.tsx
+++ b/src/renderer/components/layout/DataTable.tsx
@@ -6,10 +6,11 @@ import 'simplebar/dist/simplebar.min.css';
 import { AiOutlineSortAscending, AiOutlineSortDescending } from 'react-icons/ai';
 import React from 'react';
 
-interface Column {
+export interface Column {
   key: string;
   title: string | JSX.Element;
   ignoreChildEvents?: boolean;
+  ignoreOrderChange?: boolean;
   render?: (row: any) => JSX.Element;
   renderHeader?: (column: any) => JSX.Element;
   width?: string;
@@ -103,7 +104,7 @@ const DataTable: React.FC<DataTableProps> = ({
                           ? 'bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white'
                           : 'text-gray-500 dark:text-gray-400'
                       }`}
-                      onClick={() => onChangeOrder && onChangeOrder(column.key)}
+                      onClick={() => !column.ignoreOrderChange && onChangeOrder && onChangeOrder(column.key)}
                     >
                       <div className="flex items-center justify-between">
                         <span>{column.renderHeader ? column.renderHeader(column) : column.title}</span>
diff --git a/src/renderer/pages/MyProjectsPage.tsx b/src/renderer/pages/MyProjectsPage.tsx
index ec5bfab6..e9c00f22 100644
--- a/src/renderer/pages/MyProjectsPage.tsx
+++ b/src/renderer/pages/MyProjectsPage.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useGetOrganizationsListQuery } from '@/api';
-import { useQueryParamState, useWildCardUrlHash } from '@/hooks';
+import { useQueryParamState, useUrlHash, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 import {
   Button,
@@ -9,11 +9,11 @@ import {
   IndeterminateProgressOverlay,
   OrgUidBadge,
   SearchBox,
+  StagedProjectSuccessModal,
   StagingTableTab,
   SyncIndicator,
   Tabs,
   UpsertProjectModal,
-  StagedProjectSuccessModal
 } from '@/components';
 import { FormattedMessage } from 'react-intl';
 import { useGetOrganizationsMapQuery } from '@/api/cadt/v1/organizations';
@@ -42,8 +42,6 @@ const MyProjectsPage: React.FC = () => {
   const [, editProjectModalActive] = useWildCardUrlHash('edit-project');
   const [createProjectModalActive, setCreateProjectModalActive] = useUrlHash('create-project');
   const [projectStagedSuccess, setProjectStagedSuccess] = useUrlHash('success-stage-project');
-  const [, createProjectModalActive, setCreateProjectModalActive] = useWildCardUrlHash('create-project');
-  const [, editProjectModalActive] = useWildCardUrlHash('edit-project');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
   const { data: organizationsMap } = useGetOrganizationsMapQuery(null, {
@@ -111,7 +109,7 @@ const MyProjectsPage: React.FC = () => {
       <div className="m-2">
         {contentsLoading && <IndeterminateProgressOverlay />}
         <div className="flex flex-col md:flex-row gap-6 my-2.5 relative z-30 items-center">
-          <Button disabled={contentsLoading} onClick={() => setCreateProjectModalActive(true, '')}>
+          <Button disabled={contentsLoading} onClick={() => setCreateProjectModalActive(true)}>
             <FormattedMessage id="create-project" />
           </Button>
           {activeTab === TabTypes.COMMITTED && <SearchBox defaultValue={search} onChange={handleSearchChange} />}
@@ -161,7 +159,9 @@ const MyProjectsPage: React.FC = () => {
         </Tabs>
       </div>
       {(createProjectModalActive || editProjectModalActive) && <UpsertProjectModal onClose={handleCloseUpsertModal} />}
-      {projectStagedSuccess && <StagedProjectSuccessModal showModal={true} onClose={() => setProjectStagedSuccess(false)} />}
+      {projectStagedSuccess && (
+        <StagedProjectSuccessModal showModal={true} onClose={() => setProjectStagedSuccess(false)} />
+      )}
     </>
   );
 };
diff --git a/src/renderer/pages/MyUnitsPage.tsx b/src/renderer/pages/MyUnitsPage.tsx
index 6381dc8b..0e2b324e 100644
--- a/src/renderer/pages/MyUnitsPage.tsx
+++ b/src/renderer/pages/MyUnitsPage.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useGetOrganizationsListQuery } from '@/api';
-import { useQueryParamState, useWildCardUrlHash, useUrlHash } from '@/hooks';
+import { useQueryParamState, useUrlHash, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 import {
   Button,
@@ -39,7 +39,7 @@ const MyUnitsPage: React.FC = () => {
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
   const [, editUnitModalActive] = useWildCardUrlHash('edit-unit');
-  const [, createUnitModalActive, setCreateUnitModalActive] = useWildCardUrlHash('create-unit');
+  const [createUnitModalActive, setCreateUnitModalActive] = useUrlHash('create-unit');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
   const { data: organizationsMap } = useGetOrganizationsMapQuery(null, {