From ba5e8619df0a5f5a887cf0f3f52392c360984d7f Mon Sep 17 00:00:00 2001
From: Joshua Melville <joshua.melville@northwestern.edu>
Date: Tue, 21 Nov 2023 22:37:21 +0200
Subject: [PATCH] fix TS errors

---
 .../_components/ActiveProtocolSwitch.tsx      | 61 -------------------
 .../ProtocolsTable/ActiveButton.tsx           |  2 +
 .../_components/ProtocolsTable/Columns.tsx    | 19 ++++--
 .../ProtocolsTable/ProtocolsTable.tsx         |  7 ++-
 components/DataTable/DataTable.tsx            |  5 +-
 5 files changed, 24 insertions(+), 70 deletions(-)
 delete mode 100644 app/(dashboard)/dashboard/_components/ActiveProtocolSwitch.tsx

diff --git a/app/(dashboard)/dashboard/_components/ActiveProtocolSwitch.tsx b/app/(dashboard)/dashboard/_components/ActiveProtocolSwitch.tsx
deleted file mode 100644
index 432b7168..00000000
--- a/app/(dashboard)/dashboard/_components/ActiveProtocolSwitch.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { api } from '~/trpc/client';
-import { Switch } from '~/components/ui/switch';
-
-const ActiveProtocolSwitch = ({
-  initialData,
-  hash,
-}: {
-  initialData: boolean;
-  hash: string;
-}) => {
-  const utils = api.useUtils();
-  const router = useRouter();
-
-  const { data: isActive } = api.protocol.active.is.useQuery(hash, {
-    initialData,
-    refetchOnMount: false,
-    onError: (err) => {
-      throw new Error(err.message);
-    },
-  });
-
-  const { mutateAsync: setActive } = api.protocol.active.set.useMutation({
-    async onMutate(variables) {
-      const { input: newState } = variables;
-
-      await utils.protocol.active.get.cancel();
-      const previous = utils.protocol.active.get.getData();
-
-      if (previous) {
-        utils.protocol.active.get.setData(undefined, {
-          ...previous,
-          active: newState,
-        });
-
-        return previous;
-      }
-    },
-    onError: (err, _newState, previousState) => {
-      utils.protocol.active.get.setData(undefined, previousState);
-      throw new Error(err.message);
-    },
-    onSuccess: () => {
-      router.refresh();
-    },
-  });
-
-  const handleCheckedChange = async () => {
-    await setActive({ input: !isActive, hash });
-  };
-
-  return (
-    <Switch
-      checked={isActive}
-      onCheckedChange={() => void handleCheckedChange()}
-    />
-  );
-};
-export default ActiveProtocolSwitch;
diff --git a/app/(dashboard)/dashboard/_components/ProtocolsTable/ActiveButton.tsx b/app/(dashboard)/dashboard/_components/ProtocolsTable/ActiveButton.tsx
index 8bacf247..07be3fc8 100644
--- a/app/(dashboard)/dashboard/_components/ProtocolsTable/ActiveButton.tsx
+++ b/app/(dashboard)/dashboard/_components/ProtocolsTable/ActiveButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { api } from '~/trpc/client';
 import { BadgeCheck } from 'lucide-react';
+import { clientRevalidateTag } from '~/utils/clientRevalidate';
 
 const ActiveButton = ({
   active,
@@ -45,6 +46,7 @@ const ActiveButton = ({
       onSettled: () => {
         void utils.protocol.get.all.invalidate();
         void utils.protocol.active.get.invalidate();
+        void clientRevalidateTag('protocol.get.all');
       },
       onError: (_error, _newActiveProtocolId, context) => {
         utils.protocol.get.all.setData(undefined, context?.protocolGetAll);
diff --git a/app/(dashboard)/dashboard/_components/ProtocolsTable/Columns.tsx b/app/(dashboard)/dashboard/_components/ProtocolsTable/Columns.tsx
index 0c1c6540..f3076389 100644
--- a/app/(dashboard)/dashboard/_components/ProtocolsTable/Columns.tsx
+++ b/app/(dashboard)/dashboard/_components/ProtocolsTable/Columns.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 'use client';
 
@@ -67,9 +68,12 @@ export const ProtocolColumns: ColumnDef<ProtocolWithInterviews>[] = [
       },
     }) => (
       <div className="text-xs">
-        {new Intl.DateTimeFormat(meta.navigatorLanguages, dateOptions).format(
-          new Date(row.original.importedAt),
-        )}
+        {
+          // @ts-ignore
+          new Intl.DateTimeFormat(meta?.navigatorLanguages, dateOptions).format(
+            new Date(row.original.importedAt),
+          )
+        }
       </div>
     ),
   },
@@ -85,9 +89,12 @@ export const ProtocolColumns: ColumnDef<ProtocolWithInterviews>[] = [
       },
     }) => (
       <div className="text-xs">
-        {new Intl.DateTimeFormat(meta.navigatorLanguages, dateOptions).format(
-          new Date(row.original.lastModified),
-        )}
+        {
+          // @ts-ignore
+          new Intl.DateTimeFormat(meta?.navigatorLanguages, dateOptions).format(
+            new Date(row.original.lastModified),
+          )
+        }
       </div>
     ),
   },
diff --git a/app/(dashboard)/dashboard/_components/ProtocolsTable/ProtocolsTable.tsx b/app/(dashboard)/dashboard/_components/ProtocolsTable/ProtocolsTable.tsx
index e21b8752..b09a7617 100644
--- a/app/(dashboard)/dashboard/_components/ProtocolsTable/ProtocolsTable.tsx
+++ b/app/(dashboard)/dashboard/_components/ProtocolsTable/ProtocolsTable.tsx
@@ -36,12 +36,17 @@ export const ProtocolsTable = ({
   return (
     <>
       {isLoading && <div>Loading...</div>}
-      <DataTable
+      <DataTable<ProtocolWithInterviews, string>
         columns={ProtocolColumns}
         data={protocols}
         filterColumnAccessorKey="name"
         handleDeleteSelected={handleDelete}
         actions={ActionsDropdown}
+        calculateRowClasses={(row) =>
+          row.original.active
+            ? 'bg-purple-500/30 hover:bg-purple-500/40'
+            : undefined
+        }
       />
       <DeleteProtocolsDialog
         open={showAlertDialog}
diff --git a/components/DataTable/DataTable.tsx b/components/DataTable/DataTable.tsx
index f68c160c..df1477c6 100644
--- a/components/DataTable/DataTable.tsx
+++ b/components/DataTable/DataTable.tsx
@@ -42,6 +42,7 @@ interface DataTableProps<TData, TValue> {
   handleDeleteSelected?: (data: TData[]) => Promise<void> | void;
   actions?: React.ComponentType<{ row: Row<TData>; data: TData[] }>;
   actionsHeader?: React.ReactNode;
+  calculateRowClasses?: (row: Row<TData>) => string | undefined;
 }
 
 export function DataTable<TData, TValue>({
@@ -51,6 +52,7 @@ export function DataTable<TData, TValue>({
   filterColumnAccessorKey = '',
   actions,
   actionsHeader,
+  calculateRowClasses = () => undefined,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -113,8 +115,7 @@ export function DataTable<TData, TValue>({
     onColumnFiltersChange: setColumnFilters,
     getFilteredRowModel: getFilteredRowModel(),
     meta: {
-      getRowClasses: (row) =>
-        row.original.active && 'bg-purple-500/30 hover:bg-purple-500/40',
+      getRowClasses: (row: Row<TData>) => calculateRowClasses(row),
       navigatorLanguages,
     },
     state: {