linting

app/(dashboard)/dashboard/_components/ActivityFeed/ActivityFeed.tsx

@@ -2,24 +2,17 @@
 
 import { DataTableSkeleton } from '~/components/data-table/data-table-skeleton';
 import ActivityFeedTable from './ActivityFeedTable';
-import { unstable_noStore } from 'next/cache';
 import { api } from '~/trpc/client';
 import { useTableStateFromSearchParams } from './useTableStateFromSearchParams';
 
 export const ActivityFeed = () => {
   const { searchParams } = useTableStateFromSearchParams();
+  const { data, isLoading } =
+    api.dashboard.getActivities.useQuery(searchParams);
 
-  unstable_noStore();
-  const tableQuery = api.dashboard.getActivities.useQuery(searchParams);
-
-  if (tableQuery.isLoading) {
+  if (isLoading) {
     return <DataTableSkeleton columnCount={3} filterableColumnCount={1} />;
   }
 
-  return (
-    <ActivityFeedTable
-      data={tableQuery.data?.tableData}
-      pageCount={tableQuery.data?.pageCount}
-    />
-  );
+  return <ActivityFeedTable tableData={data ?? { events: [], pageCount: 0 }} />;
 };

app/(dashboard)/dashboard/_components/ActivityFeed/ActivityFeedTable.tsx

@@ -12,25 +12,21 @@ import {
 import type { Events } from '@prisma/client';
 import { type RouterOutputs } from '~/trpc/shared';
 
-type ActivityFeedTableProps = {
-  data: RouterOutputs['dashboard']['getActivities']['tableData'];
-  pageCount: RouterOutputs['dashboard']['getActivities']['pageCount'];
-};
-
 export default function ActivityFeedTable({
-  data,
-  pageCount,
-}: ActivityFeedTableProps) {
+  tableData,
+}: {
+  tableData: RouterOutputs['dashboard']['getActivities'];
+}) {
   // Memoize the columns so they don't re-render on every render
   const columns = useMemo<ColumnDef<Events, unknown>[]>(
     () => fetchActivityFeedTableColumnDefs(),
     [],
   );
 
   const { dataTable } = useDataTable({
-    data,
+    data: tableData.events,
     columns,
-    pageCount,
+    pageCount: tableData.pageCount,
     searchableColumns,
     filterableColumns,
   });

app/(dashboard)/dashboard/_components/ActivityFeed/TasksTableFloatingBarContent.tsx

@@ -1,7 +1,7 @@
-import { type Table } from 'drizzle-orm';
+import { type Table } from '@tanstack/react-table';
 import usePortal from 'react-useportal';
 
-export function TasksTableFloatingBarContent(_table: Table) {
+export function TasksTableFloatingBarContent<TData>(_table: Table<TData>) {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const { Portal } = usePortal();
 

app/(dashboard)/dashboard/_components/ActivityFeed/useTableStateFromSearchParams.ts

@@ -2,7 +2,6 @@
 import {
   FilterParam,
   pageSizes,
-  searchableFields,
   sortOrder,
   sortableFields,
 } from '~/lib/data-table/types';

app/(dashboard)/dashboard/_components/ActivityFeed/utils.ts

@@ -56,6 +56,6 @@ export const generateMockActivity = (): Activity => {
     id: faker.string.uuid(),
     timestamp: faker.date.recent(),
     type,
-    message: generateMessageForActivityType(type)!,
+    message: generateMessageForActivityType(type),
   };
 };

app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx

@@ -11,13 +11,24 @@ import { useState } from 'react';
 import { DeleteParticipantsDialog } from '~/app/(dashboard)/dashboard/participants/_components/DeleteParticipantsDialog';
 import ExportParticipants from '~/app/(dashboard)/dashboard/participants/_components/ExportParticipants';
 import { api } from '~/trpc/client';
+import { type RouterOutputs } from '~/trpc/shared';
+import { DataTableSkeleton } from '~/components/data-table/data-table-skeleton';
 
-export const ParticipantsTable = () => {
-  const { data: participants } = api.participant.get.all.useQuery(undefined, {
-    onError(error) {
-      throw new Error(error.message);
+export const ParticipantsTable = ({
+  initialData,
+}: {
+  initialData: RouterOutputs['participant']['get']['all'];
+}) => {
+  const { data: participants, isLoading } = api.participant.get.all.useQuery(
+    undefined,
+    {
+      initialData,
+      refetchOnMount: false,
+      onError(error) {
+        throw new Error(error.message);
+      },
     },
-  });
+  );
 
   const [participantsToDelete, setParticipantsToDelete] =
     useState<ParticipantWithInterviews[]>();
@@ -28,8 +39,13 @@ export const ParticipantsTable = () => {
     setShowDeleteModal(true);
   };
 
-  if (!participants) {
-    return <div>Loading...</div>;
+  if (!isLoading) {
+    return (
+      <DataTableSkeleton
+        columnCount={ParticipantColumns().length}
+        filterableColumnCount={1}
+      />
+    );
   }
 
   return (

app/(dashboard)/dashboard/_components/ProtocolUploader.tsx

@@ -16,6 +16,7 @@ function ProtocolUploader({
 }: {
   handleProtocolUploaded?: () => void;
 }) {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const { Portal } = usePortal();
 
   const { importProtocols, jobs, cancelJob, cancelAllJobs } = useProtocolImport(

app/(dashboard)/dashboard/_components/ProtocolsTable/Columns.tsx

@@ -9,8 +9,8 @@ import TimeAgo from '~/components/ui/TimeAgo';
 
 export const getProtocolColumns = (
   allowAnonRecruitment = false,
-): ColumnDef<ProtocolWithInterviews>[] => {
-  const columns = [
+): ColumnDef<ProtocolWithInterviews, unknown>[] => {
+  const columns: ColumnDef<ProtocolWithInterviews, unknown>[] = [
     {
       id: 'select',
       header: ({ table }) => (

app/(dashboard)/dashboard/settings/page.tsx

@@ -5,7 +5,6 @@ import ResetButton from '../_components/ResetButton';
 import AnalyticsButton from '../_components/AnalyticsButton';
 import RecruitmentTestSection from '../_components/RecruitmentTestSection';
 import SettingsSection from '~/components/layout/SettingsSection';
-import RecruitmentSwitch from '~/components/RecruitmentSwitch';
 import AnonymousRecruitmentSwitch from '~/components/ServerAnonymousRecruitmentSwitch/AnonymousRecruitmentSwitch';
 
 export default function Settings() {

components/CopyDebugInfoButton.tsx

@@ -17,7 +17,6 @@ export default function CopyDebugInfoButton({
   const { toast } = useToast();
 
   const copyDebugInfoToClipboard = async () => {
-    console.log('writing', debugInfo);
     await navigator.clipboard.writeText(debugInfo);
 
     if (showToast) {

components/ui/FormattedDate.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import NoSSRWrapper, { withNoSSRWrapper } from '~/utils/NoSSRWrapper';
+import { withNoSSRWrapper } from '~/utils/NoSSRWrapper';
 
 // Display options for dates: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
 export const dateOptions: Intl.DateTimeFormatOptions = {

hooks/use-data-table.tsx

@@ -18,6 +18,7 @@ import {
 import type {
   DataTableFilterableColumn,
   DataTableSearchableColumn,
+  FilterParam,
   PageSize,
   SortableField,
 } from '~/lib/data-table/types';
@@ -67,9 +68,10 @@ export function useDataTable<TData, TValue>({
   data,
   columns,
   pageCount,
-  searchableColumns = [],
-  filterableColumns = [],
-}: UseDataTableProps<TData, TValue>) {
+} // Todo: the below should be used to filter filter/search terms before setting search params
+// searchableColumns = [],
+// filterableColumns = [],
+: UseDataTableProps<TData, TValue>) {
   const { searchParams, setSearchParams } = useTableStateFromSearchParams();
 
   // Table states
@@ -95,7 +97,7 @@ export function useDataTable<TData, TValue>({
   );
 
   const debouncedUpdateFilterParams = debounce(
-    (columnFilters: ColumnFiltersState) => {
+    (columnFilters: FilterParam[]) => {
       if (!columnFilters || columnFilters.length === 0) {
         void setSearchParams.setFilterParams(null);
         return;
@@ -120,7 +122,7 @@ export function useDataTable<TData, TValue>({
       return;
     }
 
-    debouncedUpdateFilterParams(columnFilters);
+    debouncedUpdateFilterParams(columnFilters as FilterParam[]);
 
     // Changing the filter params should reset the page to 1
     void setSearchParams.setPage(1);

lib/data-table/types.ts

@@ -1,6 +1,5 @@
 import { type Prisma } from '@prisma/client';
 import * as z from 'zod';
-import { filterableColumns } from '~/app/(dashboard)/dashboard/_components/ActivityFeed/ColumnDefinition';
 import { numberEnum } from '~/shared/schemas/schemas';
 
 export type Option = {
@@ -85,6 +84,7 @@ export const FilterParam = z.object({
   id: z.string(),
   value: z.union([z.string(), z.array(z.string())]),
 });
+export type FilterParam = z.infer<typeof FilterParam>;
 
 export const SearchParamsSchema = z.object({
   page: z.number(),

package.json

@@ -70,7 +70,6 @@
     "csvtojson": "^2.0.10",
     "d3-force": "^3.0.0",
     "d3-interpolate-path": "^2.3.0",
-    "drizzle-orm": "^0.29.3",
     "eslint-plugin-local-rules": "^2.0.0",
     "eventemitter3": "^5.0.1",
     "file-loader": "^6.2.0",
@@ -116,7 +115,6 @@
     "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.1",
     "uploadthing": "^5.7.4",
-    "usehooks-ts": "^2.13.0",
     "uuid": "^9.0.1",
     "validator": "^13.11.0",
     "zod": "^3.22.4"
@@ -147,8 +145,8 @@
     "@types/redux-form": "^8.3.10",
     "@types/uuid": "^9.0.6",
     "@types/validator": "^13.11.5",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.17",
     "cross-env": "^7.0.3",
     "eslint": "^8.52.0",