fix TS errors

complexdatacollective · Nov 21, 2023 · ba5e861 · ba5e861
1 parent 8e3b1ba
commit ba5e861
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 70 deletions.
diff --git a/app/(dashboard)/dashboard/_components/ActiveProtocolSwitch.tsx b/app/(dashboard)/dashboard/_components/ActiveProtocolSwitch.tsx
diff --git 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
@@ -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
@@ -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
@@ -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: {