From f83a6c61806055fa709275f3f83aff069b30f205 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Wed, 3 May 2023 19:12:33 +0200
Subject: [PATCH] fix: add key function for data tables

---
 frontend/src/ui/components/DataTable.tsx | 4 +++-
 frontend/src/ui/pages/LoyaltyQueue.tsx   | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ui/components/DataTable.tsx b/frontend/src/ui/components/DataTable.tsx
index 400c2af..53b45bf 100644
--- a/frontend/src/ui/components/DataTable.tsx
+++ b/frontend/src/ui/components/DataTable.tsx
@@ -28,6 +28,7 @@ export interface DataTableProps<T> {
   defaultSort: SortingOrder<T>;
   rowComponent: (data: { data: T }) => ReactElement;
   sort: (key: keyof T) => SortFunction<T>;
+  keyFunction: (data: T) => string;
 }
 
 const Sortable = styled('div', {
@@ -46,6 +47,7 @@ export function DataTable<T>({
   defaultSort,
   sort,
   rowComponent,
+  keyFunction,
 }: DataTableProps<T>): React.ReactElement {
   const [entriesPerPage, setEntriesPerPage] = useState(15);
   const [page, setPage] = useState(0);
@@ -119,7 +121,7 @@ export function DataTable<T>({
         </thead>
         <tbody>
           {paged.map((entry) => (
-            <RowComponent data={entry} />
+            <RowComponent key={keyFunction(entry)} data={entry} />
           ))}
         </tbody>
       </Table>
diff --git a/frontend/src/ui/pages/LoyaltyQueue.tsx b/frontend/src/ui/pages/LoyaltyQueue.tsx
index 5f49211..d0d1b13 100644
--- a/frontend/src/ui/pages/LoyaltyQueue.tsx
+++ b/frontend/src/ui/pages/LoyaltyQueue.tsx
@@ -104,6 +104,7 @@ function RewardQueue() {
         <DataTable
           sort={sortfn}
           data={data}
+          keyFunction={(d) => `${d.when.toString()}/${d.username}`}
           columns={[
             {
               key: 'when',
@@ -350,6 +351,7 @@ function UserList() {
         <DataTable
           sort={sortfn}
           data={filtered}
+          keyFunction={(entry) => entry.username}
           columns={[
             {
               key: 'username',