feat: improved staging diff modal behavior

Chia-Network · Sep 26, 2024 · cb3ca5d · cb3ca5d
1 parent 7252307
commit cb3ca5d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 21 deletions.
diff --git a/src/renderer/components/blocks/tables/StagingTable.tsx b/src/renderer/components/blocks/tables/StagingTable.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Badge, DataTable, StagingDiffModal, StagedItemActions } from '@/components';
-import { useWildCardUrlHash } from '@/hooks';
+import { Badge, DataTable, StagedItemActions } from '@/components';
 import dayjs from 'dayjs';
 
 interface TableProps {
@@ -14,7 +13,6 @@ interface TableProps {
 }
 
 const StagingTable: React.FC<TableProps> = ({ data, type, isLoading, onRowClick, setOrder, order }: TableProps) => {
-  const [stagingDiffFragment, stagingDiffModalActive, setStagingDiffModalActive] = useWildCardUrlHash('staging');
   const columns = useMemo(
     () => [
       {
@@ -64,7 +62,7 @@ const StagingTable: React.FC<TableProps> = ({ data, type, isLoading, onRowClick,
         },
       },
     ],
-    [],
+    [type],
   );
 
   return (
@@ -80,12 +78,6 @@ const StagingTable: React.FC<TableProps> = ({ data, type, isLoading, onRowClick,
           isLoading={isLoading}
         />
       </div>
-      {stagingDiffModalActive && (
-        <StagingDiffModal
-          onClose={() => setStagingDiffModalActive(false)}
-          stagingUuid={stagingDiffFragment.replace('staging-', '')}
-        />
-      )}
     </>
   );
 };

diff --git a/src/renderer/components/blocks/tabs/StagingTableTab.tsx b/src/renderer/components/blocks/tabs/StagingTableTab.tsx
@@ -1,18 +1,23 @@
 import { FormattedMessage } from 'react-intl';
 import { SkeletonTable, StagingTable } from '@/components';
 import React from 'react';
-import { useColumnOrderHandler, useQueryParamState, useWildCardUrlHash } from '@/hooks';
+import { useColumnOrderHandler, useQueryParamState } from '@/hooks';
 
 interface PageTabProps {
   type: 'staged' | 'pending' | 'failed';
   stagingData: any[];
   showLoading: boolean;
+  setStagingDiffModalActive: (active: boolean, StagingUuid: string) => void;
 }
 
-const StagingTableTab: React.FC<PageTabProps> = ({ stagingData, showLoading, type }: PageTabProps) => {
+const StagingTableTab: React.FC<PageTabProps> = ({
+  stagingData,
+  showLoading,
+  type,
+  setStagingDiffModalActive,
+}: PageTabProps) => {
   const [order, setOrder] = useQueryParamState('order', undefined);
   const handleSetOrder = useColumnOrderHandler(order, setOrder);
-  const [, , setStagingDiffModalActive] = useWildCardUrlHash('staging');
 
   if (showLoading) {
     return <SkeletonTable />;

diff --git a/src/renderer/components/blocks/widgets/StagingDiff.tsx b/src/renderer/components/blocks/widgets/StagingDiff.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useGetStagedProjectsQuery } from '@/api';
-import { DiffViewer } from '@/components';
+import { DiffViewer, Spinner } from '@/components';
+import { FormattedMessage } from 'react-intl';
 
 interface ProjectModalProps {
   stagingUuid: string;
@@ -16,11 +17,23 @@ const StagingDiff: React.FC<ProjectModalProps> = ({ stagingUuid }: ProjectModalP
     return stagingData.find((record: any) => record.uuid === stagingUuid);
   }, [stagingData, isLoading, stagingUuid]);
 
-  if (isLoading || !changeRecord) {
-    return null;
+  if (isLoading) {
+    return <Spinner size="xl" />;
   }
 
-  return <div className="h-screen">{isLoading ? <p>loading...</p> : <DiffViewer data={changeRecord} />}</div>;
+  if (!stagingData) {
+    return (
+      <div className="h-36 w-36">
+        <FormattedMessage id="unable-to-load-staging-data" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen">
+      <DiffViewer data={changeRecord} />
+    </div>
+  );
 };
 
 export { StagingDiff };
diff --git 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 { useGetImportedOfferQuery, useGetOrganizationsListQuery } from '@/api';
-import { useQueryParamState, useUrlHash } from '@/hooks';
+import { useQueryParamState, useUrlHash, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 import {
   Button,
@@ -12,6 +12,7 @@ import {
   ProjectXlsUploadDownloadButtons,
   SearchBox,
   StagedProjectSuccessModal,
+  StagingDiffModal,
   StagingTableTab,
   SyncIndicator,
   Tabs,
@@ -40,6 +41,7 @@ interface ProcessedStagingData {
 
 const MyProjectsPage: React.FC = () => {
   const navigate = useNavigate();
+  const [stagingDiffFragment, stagingDiffModalActive, setStagingDiffModalActive] = useWildCardUrlHash('staging');
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
   const [order, setOrder] = useQueryParamState('order', undefined);
@@ -182,17 +184,28 @@ const MyProjectsPage: React.FC = () => {
             />
           )}
           {activeTab === TabTypes.STAGING && (
-            <StagingTableTab type="staged" stagingData={processedStagingData.staged} showLoading={stagingDataLoading} />
+            <StagingTableTab
+              type="staged"
+              stagingData={processedStagingData.staged}
+              showLoading={stagingDataLoading}
+              setStagingDiffModalActive={setStagingDiffModalActive}
+            />
           )}
           {activeTab === TabTypes.PENDING && (
             <StagingTableTab
               type="pending"
               stagingData={processedStagingData.pending}
               showLoading={stagingDataLoading}
+              setStagingDiffModalActive={setStagingDiffModalActive}
             />
           )}
           {activeTab === TabTypes.FAILED && (
-            <StagingTableTab type="failed" stagingData={processedStagingData.failed} showLoading={stagingDataLoading} />
+            <StagingTableTab
+              type="failed"
+              stagingData={processedStagingData.failed}
+              showLoading={stagingDataLoading}
+              setStagingDiffModalActive={setStagingDiffModalActive}
+            />
           )}
           {activeTab === TabTypes.TRANSFERS && (
             <TransferManager
@@ -209,6 +222,12 @@ const MyProjectsPage: React.FC = () => {
       {projectStagedSuccess && (
         <StagedProjectSuccessModal showModal={true} onClose={() => setProjectStagedSuccess(false)} />
       )}
+      {stagingDiffModalActive && (
+        <StagingDiffModal
+          onClose={() => setStagingDiffModalActive(false)}
+          stagingUuid={stagingDiffFragment.replace('staging-', '')}
+        />
+      )}
     </>
   );
 };

diff --git a/src/renderer/pages/MyUnitsPage.tsx b/src/renderer/pages/MyUnitsPage.tsx
@@ -156,6 +156,7 @@ const MyUnitsPage: React.FC = () => {
                 type="staged"
                 stagingData={processedStagingData.staged}
                 showLoading={stagingDataLoading}
+                setStagingDiffModalActive={setStagingDiffModalActive}
               />
             )}
           </Tabs.Item>
@@ -172,6 +173,7 @@ const MyUnitsPage: React.FC = () => {
                 type="pending"
                 stagingData={processedStagingData.pending}
                 showLoading={stagingDataLoading}
+                setStagingDiffModalActive={setStagingDiffModalActive}
               />
             )}
           </Tabs.Item>
@@ -188,6 +190,7 @@ const MyUnitsPage: React.FC = () => {
                 type="failed"
                 stagingData={processedStagingData.failed}
                 showLoading={stagingDataLoading}
+                setStagingDiffModalActive={setStagingDiffModalActive}
               />
             )}
           </Tabs.Item>

diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json
@@ -206,5 +206,6 @@
   "failed-to-commit-project-transfer": "Failed to commit project transfer",
   "no-changes-have-been-made": "No changes have been made",
   "api-host-loaded-from-configuration": "API host loaded from configuration",
-  "not-specified": "not specified"
+  "not-specified": "not specified",
+  "unable-to-load-staging-data": "Unable to load staging data"
 }