From 0b322d9e97157a8df4c8376b40e4ce51a8f4fe5b Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Sat, 7 Sep 2024 15:28:33 +1200
Subject: [PATCH] refactor: linting warnings related to the react-compiler

---
 src/components/ui/input-datetime.tsx          | 72 ++++++++++---------
 .../-components/view-report/plugin/table.tsx  |  2 +-
 .../view-report/plugin/view-columns.tsx       |  2 +-
 .../-modules/table-list/column-visibility.tsx |  2 +-
 .../_auth/-modules/table-list/content.tsx     |  2 +-
 .../_auth/-modules/table-list/toolbar.tsx     |  4 +-
 6 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/src/components/ui/input-datetime.tsx b/src/components/ui/input-datetime.tsx
index 204a9d68..be80d6c3 100644
--- a/src/components/ui/input-datetime.tsx
+++ b/src/components/ui/input-datetime.tsx
@@ -15,6 +15,7 @@ interface InputDatetimeProps extends React.HTMLAttributes<HTMLDivElement> {
 
 function InputDatetime(props: InputDatetimeProps) {
   const elementId = React.useRef(generateShortId());
+  // eslint-disable-next-line react-compiler/react-compiler
   const id = props.id ?? elementId.current;
 
   const [date, setDate] = React.useState<Date | undefined>(
@@ -62,42 +63,45 @@ function InputDatetime(props: InputDatetimeProps) {
       className="flex h-10 items-center justify-start gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background duration-100 focus-within:border-input focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
       {...getRootProps()}
     >
-      {segments.map((segment, idx) => {
-        if (segment.type === "separator") {
+      {
+        // eslint-disable-next-line react-compiler/react-compiler
+        segments.map((segment, idx) => {
+          if (segment.type === "separator") {
+            return (
+              <span
+                key={`${id}-separator-${idx}`}
+                className="separator m-0 font-mono text-[60%] text-muted-foreground"
+              >
+                {segment.value}
+              </span>
+            );
+          }
+
+          const inputId = idx === 0 ? id : `${id}-${segment.type}`;
+          const placeholder =
+            segment.type !== "am/pm" ? segment.value : undefined;
+
           return (
-            <span
-              key={`${id}-separator-${idx}`}
-              className="separator m-0 font-mono text-[60%] text-muted-foreground"
-            >
-              {segment.value}
-            </span>
+            <input
+              key={`${id}-${segment.type}-${idx}`}
+              id={inputId}
+              placeholder={placeholder}
+              disabled={props.disabled}
+              readOnly={props.readOnly}
+              onFocus={props.onDateFocus}
+              onBlur={props.onDateBlur}
+              className="inline-block h-full flex-grow-0 rounded-sm border-none bg-transparent px-0.5 font-sans text-sm tabular-nums text-foreground caret-transparent outline-none ring-0 selection:bg-foreground selection:text-background placeholder:font-mono focus:bg-foreground focus:text-background focus:ring-0"
+              style={
+                {
+                  "--char-length": `${segment.type === "years" ? 4 : segment.type === "am/pm" ? 2.5 : 2}ch`,
+                  minWidth: "calc(var(--char-length) + 0.25rem)",
+                } as React.CSSProperties
+              }
+              {...getInputProps(segment.type)}
+            />
           );
-        }
-
-        const inputId = idx === 0 ? id : `${id}-${segment.type}`;
-        const placeholder =
-          segment.type !== "am/pm" ? segment.value : undefined;
-
-        return (
-          <input
-            key={`${id}-${segment.type}-${idx}`}
-            id={inputId}
-            placeholder={placeholder}
-            disabled={props.disabled}
-            readOnly={props.readOnly}
-            onFocus={props.onDateFocus}
-            onBlur={props.onDateBlur}
-            className="inline-block h-full flex-grow-0 rounded-sm border-none bg-transparent px-0.5 font-sans text-sm tabular-nums text-foreground caret-transparent outline-none ring-0 selection:bg-foreground selection:text-background placeholder:font-mono focus:bg-foreground focus:text-background focus:ring-0"
-            style={
-              {
-                "--char-length": `${segment.type === "years" ? 4 : segment.type === "am/pm" ? 2.5 : 2}ch`,
-                minWidth: "calc(var(--char-length) + 0.25rem)",
-              } as React.CSSProperties
-            }
-            {...getInputProps(segment.type)}
-          />
-        );
-      })}
+        })
+      }
     </div>
   );
 }
diff --git a/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx b/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx
index 56cc54a9..d109d8a6 100644
--- a/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx
+++ b/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx
@@ -113,7 +113,7 @@ function ReportTableContent<TData, TValue>(
     }
     return colSizes;
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table.getState().columnSizingInfo, table.getFlatHeaders()]);
 
   const visibleColumns = React.useMemo(
diff --git a/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx b/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx
index 5cc75bf7..72dbc729 100644
--- a/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx
+++ b/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx
@@ -20,7 +20,7 @@ export const ViewColumns: ReportTablePlugin = (props) => {
   const allLeafColumns = React.useMemo(
     () => table.getAllLeafColumns(),
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getAllLeafColumns()]
   );
 
diff --git a/src/routes/_auth/-modules/table-list/column-visibility.tsx b/src/routes/_auth/-modules/table-list/column-visibility.tsx
index 61c39186..66f31331 100644
--- a/src/routes/_auth/-modules/table-list/column-visibility.tsx
+++ b/src/routes/_auth/-modules/table-list/column-visibility.tsx
@@ -20,7 +20,7 @@ function TableListColumnVisibilityDropdown() {
   const columns = React.useMemo(
     () => table.getAllColumns(),
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getAllColumns()]
   );
 
diff --git a/src/routes/_auth/-modules/table-list/content.tsx b/src/routes/_auth/-modules/table-list/content.tsx
index e193642c..1f5d20e0 100644
--- a/src/routes/_auth/-modules/table-list/content.tsx
+++ b/src/routes/_auth/-modules/table-list/content.tsx
@@ -51,7 +51,7 @@ function TableListContent(props: TableListContentProps) {
   const rowModel = React.useMemo(
     () => table.getRowModel(),
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getRowModel()]
   );
 
diff --git a/src/routes/_auth/-modules/table-list/toolbar.tsx b/src/routes/_auth/-modules/table-list/toolbar.tsx
index eb09038c..3cc8186c 100644
--- a/src/routes/_auth/-modules/table-list/toolbar.tsx
+++ b/src/routes/_auth/-modules/table-list/toolbar.tsx
@@ -129,7 +129,7 @@ function TableListToolbarActions({
   const tableFilters = React.useMemo(
     () => table.getState().columnFilters,
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getState().columnFilters]
   );
 
@@ -280,7 +280,7 @@ function ToolbarFilter({
   const baseState = React.useMemo(
     () => table.getState().columnFilters.find((item) => item.id === id),
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [id, table.getState().columnFilters]
   );