From 9b61272de563a769f9a59cbceba9685b5f617b64 Mon Sep 17 00:00:00 2001
From: Andrew Casal <andrewcasal@Andrews-MacBook-Pro.local>
Date: Fri, 6 Sep 2024 23:05:02 -0400
Subject: [PATCH 1/5] Add shift capability to annul queue

---
 .../PaginatedTable/PaginatedTable.tsx         | 50 ++++++-------------
 src/views/User/GameHistoryTable.tsx           | 25 +++++++---
 2 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/src/components/PaginatedTable/PaginatedTable.tsx b/src/components/PaginatedTable/PaginatedTable.tsx
index e56a531661..e9ac2a2d8d 100644
--- a/src/components/PaginatedTable/PaginatedTable.tsx
+++ b/src/components/PaginatedTable/PaginatedTable.tsx
@@ -55,6 +55,7 @@ interface PaginatedTableProperties<RawEntryT, GroomedEntryT = RawEntryT> {
     onRowClick?: (
         row: GroomedEntryT,
         ev: React.MouseEvent | React.TouchEvent | React.PointerEvent,
+        rows: GroomedEntryT[],
     ) => any;
     debug?: boolean;
     pageSizeOptions?: Array<number>;
@@ -63,7 +64,7 @@ interface PaginatedTableProperties<RawEntryT, GroomedEntryT = RawEntryT> {
     hidePageControls?: boolean;
     /** If provided, the table will listen for this push event and refresh its data accordingly */
     uiPushProps?: { event: string; channel: string };
-    annulQueue?: any[];
+    highlightedRows?: any[];
 }
 
 export interface PaginatedTableRef {
@@ -355,40 +356,19 @@ function _PaginatedTable<RawEntryT = any, GroomedEntryT = RawEntryT>(
                                     {column_render(column, row)}
                                 </td>
                             ));
-                            if (props.annulQueue) {
-                                if (props.onRowClick) {
-                                    return (
-                                        <tr
-                                            key={row.id}
-                                            className={
-                                                props.annulQueue.includes(row) ? "queued" : ""
-                                            }
-                                            onMouseUp={(ev) =>
-                                                props.onRowClick && props.onRowClick(row, ev)
-                                            }
-                                        >
-                                            {cols}
-                                        </tr>
-                                    );
-                                } else {
-                                    return <tr key={row.id}>{cols}</tr>;
-                                }
-                            } else {
-                                if (props.onRowClick) {
-                                    return (
-                                        <tr
-                                            key={row.id}
-                                            onMouseUp={(ev) =>
-                                                props.onRowClick && props.onRowClick(row, ev)
-                                            }
-                                        >
-                                            {cols}
-                                        </tr>
-                                    );
-                                } else {
-                                    return <tr key={row.id}>{cols}</tr>;
-                                }
-                            }
+                            return (
+                                <tr
+                                    key={row.id}
+                                    className={
+                                        props.highlightedRows && props.highlightedRows.includes(row) ? "queued" : ""
+                                    }
+                                    onMouseUp={(ev) =>
+                                        props.onRowClick && props.onRowClick(row, ev, rows)
+                                    }
+                                >
+                                    {cols}
+                                </tr>
+                            );
                         })}
                         {blank_rows}
                     </tbody>
diff --git a/src/views/User/GameHistoryTable.tsx b/src/views/User/GameHistoryTable.tsx
index 7c6f9fa2d3..47c0780fb4 100644
--- a/src/views/User/GameHistoryTable.tsx
+++ b/src/views/User/GameHistoryTable.tsx
@@ -34,7 +34,6 @@ import { TimeControl } from "src/components/TimeControl";
 import { Speed } from "src/lib/types";
 import { usePreference } from "preferences";
 import { openAnnulQueueModal, AnnulQueueModal } from "AnnulQueueModal";
-import { useUser } from "hooks";
 import { GameNameForList } from "GobanLineSummary";
 
 interface GameHistoryProps {
@@ -85,8 +84,6 @@ export function GameHistoryTable(props: GameHistoryProps) {
     const [annulQueue, setAnnulQueue] = React.useState<any[]>([]);
     const [isAnnulQueueModalOpen, setIsAnnulQueueModalOpen] = React.useState(false);
 
-    const user = useUser();
-
     function getBoardSize(size_filter: string): number | undefined {
         switch (size_filter) {
             case "9x9":
@@ -102,9 +99,25 @@ export function GameHistoryTable(props: GameHistoryProps) {
     function handleRowClick(
         row: GroomedGame,
         ev: React.MouseEvent | React.TouchEvent | React.PointerEvent,
+        rows: GroomedGame[],
     ) {
         if (selectModeActive) {
-            toggleQueued(row);
+            if (ev.shiftKey) {
+                if (annulQueue.at(-1)) {
+                    window.getSelection()?.removeAllRanges();
+                    const indexes = [
+                        rows.findIndex(r => r.id === annulQueue.at(-1).id),
+                        rows.findIndex(r => r.id === row.id),
+                    ]
+                    const minIndex = Math.min(...indexes);
+                    const maxIndex = Math.max(...indexes);
+                    setAnnulQueue(
+                        rows.slice(minIndex, maxIndex +1).filter(r => !r.annulled)
+                    );
+                }
+            } else {
+                toggleQueued(row);
+            }
         } else {
             openUrlIfALinkWasNotClicked(ev, row.href);
         }
@@ -233,7 +246,7 @@ export function GameHistoryTable(props: GameHistoryProps) {
                             />
                         </div>
                         <div>
-                            {user.is_moderator ? (
+                            {true ? (
                                 <div className="btn-group">
                                     {annulQueue.length > 0 ? (
                                         <button
@@ -336,7 +349,7 @@ export function GameHistoryTable(props: GameHistoryProps) {
                         groom={game_history_groomer}
                         pageSizeOptions={[10, 15, 25, 50]}
                         onRowClick={handleRowClick}
-                        annulQueue={annulQueue}
+                        highlightedRows={annulQueue}
                         columns={[
                             {
                                 header: _("User"),

From 02b7c5602962baed1e321040f64589a85f5cb1c1 Mon Sep 17 00:00:00 2001
From: Andrew Casal <andrewcasal@Andrews-MacBook-Pro.local>
Date: Fri, 6 Sep 2024 23:07:42 -0400
Subject: [PATCH 2/5] remove debug

---
 src/views/User/GameHistoryTable.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/User/GameHistoryTable.tsx b/src/views/User/GameHistoryTable.tsx
index 47c0780fb4..41120192da 100644
--- a/src/views/User/GameHistoryTable.tsx
+++ b/src/views/User/GameHistoryTable.tsx
@@ -34,6 +34,7 @@ import { TimeControl } from "src/components/TimeControl";
 import { Speed } from "src/lib/types";
 import { usePreference } from "preferences";
 import { openAnnulQueueModal, AnnulQueueModal } from "AnnulQueueModal";
+import { useUser } from "src/lib/hooks";
 import { GameNameForList } from "GobanLineSummary";
 
 interface GameHistoryProps {
@@ -84,6 +85,8 @@ export function GameHistoryTable(props: GameHistoryProps) {
     const [annulQueue, setAnnulQueue] = React.useState<any[]>([]);
     const [isAnnulQueueModalOpen, setIsAnnulQueueModalOpen] = React.useState(false);
 
+    const user = useUser();
+
     function getBoardSize(size_filter: string): number | undefined {
         switch (size_filter) {
             case "9x9":
@@ -246,7 +249,7 @@ export function GameHistoryTable(props: GameHistoryProps) {
                             />
                         </div>
                         <div>
-                            {true ? (
+                            {user.is_moderator ? (
                                 <div className="btn-group">
                                     {annulQueue.length > 0 ? (
                                         <button

From 63424618e55b01ff1264aca0fff717d35dca5243 Mon Sep 17 00:00:00 2001
From: Andrew Casal <andrewcasal@Andrews-MacBook-Pro.local>
Date: Fri, 6 Sep 2024 23:09:58 -0400
Subject: [PATCH 3/5] fix reference

---
 src/views/User/GameHistoryTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/User/GameHistoryTable.tsx b/src/views/User/GameHistoryTable.tsx
index 41120192da..3051d746f0 100644
--- a/src/views/User/GameHistoryTable.tsx
+++ b/src/views/User/GameHistoryTable.tsx
@@ -34,7 +34,7 @@ import { TimeControl } from "src/components/TimeControl";
 import { Speed } from "src/lib/types";
 import { usePreference } from "preferences";
 import { openAnnulQueueModal, AnnulQueueModal } from "AnnulQueueModal";
-import { useUser } from "src/lib/hooks";
+import { useUser } from "hooks";
 import { GameNameForList } from "GobanLineSummary";
 
 interface GameHistoryProps {

From 10a22f96e9014b2aaae8cc57b498f64fd049a564 Mon Sep 17 00:00:00 2001
From: Andrew Casal <andrewcasal@Andrews-MacBook-Pro.local>
Date: Fri, 6 Sep 2024 23:20:40 -0400
Subject: [PATCH 4/5] Don't click already annulled game

---
 src/views/User/GameHistoryTable.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/User/GameHistoryTable.tsx b/src/views/User/GameHistoryTable.tsx
index 3051d746f0..9d989fc4d2 100644
--- a/src/views/User/GameHistoryTable.tsx
+++ b/src/views/User/GameHistoryTable.tsx
@@ -104,6 +104,10 @@ export function GameHistoryTable(props: GameHistoryProps) {
         ev: React.MouseEvent | React.TouchEvent | React.PointerEvent,
         rows: GroomedGame[],
     ) {
+        if (row.annulled) {
+            return;
+        }
+
         if (selectModeActive) {
             if (ev.shiftKey) {
                 if (annulQueue.at(-1)) {

From fec8c839aaf12464376ca70e31f5b5a94ad404ee Mon Sep 17 00:00:00 2001
From: Andrew Casal <andrewcasal@Andrews-MacBook-Pro.local>
Date: Sat, 7 Sep 2024 20:02:05 -0400
Subject: [PATCH 5/5] prettier

---
 src/components/PaginatedTable/PaginatedTable.tsx |  4 +++-
 src/views/User/GameHistoryTable.tsx              | 10 ++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/PaginatedTable/PaginatedTable.tsx b/src/components/PaginatedTable/PaginatedTable.tsx
index e9ac2a2d8d..474a321246 100644
--- a/src/components/PaginatedTable/PaginatedTable.tsx
+++ b/src/components/PaginatedTable/PaginatedTable.tsx
@@ -360,7 +360,9 @@ function _PaginatedTable<RawEntryT = any, GroomedEntryT = RawEntryT>(
                                 <tr
                                     key={row.id}
                                     className={
-                                        props.highlightedRows && props.highlightedRows.includes(row) ? "queued" : ""
+                                        props.highlightedRows && props.highlightedRows.includes(row)
+                                            ? "queued"
+                                            : ""
                                     }
                                     onMouseUp={(ev) =>
                                         props.onRowClick && props.onRowClick(row, ev, rows)
diff --git a/src/views/User/GameHistoryTable.tsx b/src/views/User/GameHistoryTable.tsx
index 9d989fc4d2..0466fcbc53 100644
--- a/src/views/User/GameHistoryTable.tsx
+++ b/src/views/User/GameHistoryTable.tsx
@@ -113,14 +113,12 @@ export function GameHistoryTable(props: GameHistoryProps) {
                 if (annulQueue.at(-1)) {
                     window.getSelection()?.removeAllRanges();
                     const indexes = [
-                        rows.findIndex(r => r.id === annulQueue.at(-1).id),
-                        rows.findIndex(r => r.id === row.id),
-                    ]
+                        rows.findIndex((r) => r.id === annulQueue.at(-1).id),
+                        rows.findIndex((r) => r.id === row.id),
+                    ];
                     const minIndex = Math.min(...indexes);
                     const maxIndex = Math.max(...indexes);
-                    setAnnulQueue(
-                        rows.slice(minIndex, maxIndex +1).filter(r => !r.annulled)
-                    );
+                    setAnnulQueue(rows.slice(minIndex, maxIndex + 1).filter((r) => !r.annulled));
                 }
             } else {
                 toggleQueued(row);