From 21e92aef516ca6ec3e267f4adfe8c452776a44ee Mon Sep 17 00:00:00 2001
From: kouloumos <kouloumosa@gmail.com>
Date: Tue, 23 Apr 2024 16:17:24 +0300
Subject: [PATCH] refactor: state of transcript claim

`claimState` is currently passed through 5 nested
components in order to calculate the loading state.
That code wasn't working and after I fixed it with my
previous commits, the logic is now redundant.
This commit removes the redundant logic and simplifies
the related state parameter.
---
 src/components/tables/BaseTable.tsx  |  8 --------
 src/components/tables/QueueTable.tsx | 17 +++++++----------
 src/components/tables/TableItems.tsx |  5 -----
 src/components/tables/types.ts       |  3 ---
 4 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/src/components/tables/BaseTable.tsx b/src/components/tables/BaseTable.tsx
index 11659aac..5c8953ac 100644
--- a/src/components/tables/BaseTable.tsx
+++ b/src/components/tables/BaseTable.tsx
@@ -23,9 +23,6 @@ type Props<T> = {
   refetch?: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<any, unknown>>;
-  actionState?: {
-    rowId: number;
-  };
   tableStructure: TableStructure<T>[];
   tableHeader?: string;
   tableHeaderComponent?: React.ReactNode;
@@ -40,7 +37,6 @@ const BaseTable = <T extends object>({
   emptyView,
   isLoading,
   refetch,
-  actionState,
   tableStructure,
   tableHeader,
   tableHeaderComponent,
@@ -90,7 +86,6 @@ const BaseTable = <T extends object>({
                 }-data-row-${idx}`}
                 row={dataRow}
                 ts={tableStructure}
-                actionState={actionState}
               />
             ))
           ) : (
@@ -105,12 +100,10 @@ const BaseTable = <T extends object>({
 const TableRow = <T extends object>({
   row,
   ts,
-  actionState,
   showControls,
 }: {
   row: T;
   ts: TableStructure<T>[];
-  actionState: Props<T>["actionState"];
   showControls: boolean;
 }) => {
   return (
@@ -121,7 +114,6 @@ const TableRow = <T extends object>({
           key={tableItem.name}
           tableItem={tableItem}
           row={row}
-          actionState={actionState}
         />
       ))}
     </Tr>
diff --git a/src/components/tables/QueueTable.tsx b/src/components/tables/QueueTable.tsx
index 05c81be9..7f7dd0aa 100644
--- a/src/components/tables/QueueTable.tsx
+++ b/src/components/tables/QueueTable.tsx
@@ -110,9 +110,7 @@ const QueueTable = () => {
 
   const retriedClaim = useRef(0);
 
-  const [claimState, setClaimState] = useState({
-    rowId: -1,
-  });
+  const [selectedTranscriptId, setSelectedTranscriptId] = useState(-1);
   const { data: multipleStatusData } = useUserMultipleReviews({
     userId: session?.user?.id,
     multipleStatus: ["pending", "active", "inactive"],
@@ -156,7 +154,7 @@ const QueueTable = () => {
         return;
       }
       if (session?.user?.id) {
-        setClaimState((prev) => ({ ...prev, rowId: transcriptId }));
+        setSelectedTranscriptId(transcriptId);
 
         // Fork repo
         const forkResult = await axios.post("/api/github/fork");
@@ -200,7 +198,7 @@ const QueueTable = () => {
                   throw new Error("failed to claim transcript");
                 }
 
-                setClaimState((prev) => ({ ...prev, rowId: -1 }));
+                setSelectedTranscriptId(-1);
                 if (data instanceof Error) {
                   await retryLoginAndClaim(transcriptId);
                   return;
@@ -217,7 +215,7 @@ const QueueTable = () => {
 
             onError: (err) => {
               const error = err as Error;
-              setClaimState((prev) => ({ ...prev, rowId: -1 }));
+              setSelectedTranscriptId(-1);
               toast({
                 status: "error",
                 title: error?.message,
@@ -347,8 +345,8 @@ const QueueTable = () => {
           modifier: (data) => data.id,
           component: (data) => (
             <Button
-              isDisabled={claimState.rowId !== -1}
-              isLoading={data.id == claimState.rowId}
+              isDisabled={selectedTranscriptId !== -1}
+              isLoading={data.id == selectedTranscriptId}
               bgColor={"#EB9B00"}
               color="white"
               _hover={{ bgColor: "#EB9B00AE" }}
@@ -361,7 +359,7 @@ const QueueTable = () => {
           ),
         },
       ] as TableStructure<Transcript>[],
-    [handleClaim, claimState.rowId]
+    [handleClaim, selectedTranscriptId]
   );
 
   return (
@@ -369,7 +367,6 @@ const QueueTable = () => {
       {({ handleArchive, hasAdminSelected, isArchiving }) => (
         <>
           <BaseTable
-            actionState={claimState}
             data={data?.data}
             emptyView="There are no transcripts awaiting review"
             handleArchive={handleArchive}
diff --git a/src/components/tables/TableItems.tsx b/src/components/tables/TableItems.tsx
index d8118667..397511ab 100644
--- a/src/components/tables/TableItems.tsx
+++ b/src/components/tables/TableItems.tsx
@@ -110,7 +110,6 @@ export const Tags = <T extends object>({
 export const TableAction = <T extends object>({
   tableItem,
   row,
-  actionState,
   showControls,
 }: TableDataElement<T> & { showControls: boolean }) => {
   const { data: userSession } = useSession();
@@ -120,7 +119,6 @@ export const TableAction = <T extends object>({
     tableItem.action(row);
   };
 
-  const isLoading = "id" in row && row.id === actionState?.rowId;
   const isAdmin = userSession?.user?.permissions === "admin";
   const showCheckBox = isAdmin && showControls;
 
@@ -134,7 +132,6 @@ export const TableAction = <T extends object>({
           <Button
             title={tableItem.isDisabledText}
             isDisabled={tableItem.isDisabled}
-            isLoading={isLoading}
             colorScheme="orange"
             size="sm"
             onClick={handleClick}
@@ -211,7 +208,6 @@ export const DataEmpty = ({
 export const RowData = <T extends object>({
   row,
   tableItem,
-  actionState,
   showControls,
 }: TableDataElement<T> & { showControls: boolean }) => {
   switch (tableItem.type) {
@@ -234,7 +230,6 @@ export const RowData = <T extends object>({
           key={tableItem.name}
           tableItem={tableItem}
           row={row}
-          actionState={actionState}
         />
       );
 
diff --git a/src/components/tables/types.ts b/src/components/tables/types.ts
index cbeb8589..2a5798e2 100644
--- a/src/components/tables/types.ts
+++ b/src/components/tables/types.ts
@@ -22,7 +22,4 @@ export type TableStructure<T> = {
 export type TableDataElement<T> = {
   tableItem: TableStructure<T>;
   row: T;
-  actionState?: {
-    rowId: number;
-  };
 };