Highlight current user in leaderboard (#1194)

* Highlight current user in leaderboard

* use first of type for ssr safety

website/src/components/DataTable.tsx

@@ -15,6 +15,7 @@ import {
   Table,
   TableCaption,
   TableContainer,
+  TableRowProps,
   Tbody,
   Td,
   Th,
@@ -22,9 +23,9 @@ import {
   Tr,
   useDisclosure,
 } from "@chakra-ui/react";
-import { useTranslation } from "next-i18next";
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { ColumnDef, flexRender, getCoreRowModel, Row, useReactTable } from "@tanstack/react-table";
 import { Filter } from "lucide-react";
+import { useTranslation } from "next-i18next";
 import { ChangeEvent, ReactNode } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
@@ -38,6 +39,8 @@ export type FilterItem = {
   value: string;
 };
 
+export type DataTableRowPropsCallback<T> = (row: Row<T>) => TableRowProps;
+
 export type DataTableProps<T> = {
   data: T[];
   columns: DataTableColumnDef<T>[];
@@ -49,6 +52,7 @@ export type DataTableProps<T> = {
   disableNext?: boolean;
   disablePrevious?: boolean;
   disablePagination?: boolean;
+  rowProps?: TableRowProps | DataTableRowPropsCallback<T>;
 };
 
 export const DataTable = <T,>({
@@ -62,6 +66,7 @@ export const DataTable = <T,>({
   disableNext,
   disablePrevious,
   disablePagination,
+  rowProps,
 }: DataTableProps<T>) => {
   const { t } = useTranslation("leaderboard");
   const { getHeaderGroups, getRowModel } = useReactTable<T>({
@@ -117,13 +122,16 @@ export const DataTable = <T,>({
             ))}
           </Thead>
           <Tbody>
-            {getRowModel().rows.map((row) => (
-              <Tr key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
-                ))}
-              </Tr>
-            ))}
+            {getRowModel().rows.map((row) => {
+              const props = typeof rowProps === "function" ? rowProps(row) : rowProps;
+              return (
+                <Tr key={row.id} {...props}>
+                  {row.getVisibleCells().map((cell) => (
+                    <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
+                  ))}
+                </Tr>
+              );
+            })}
           </Tbody>
         </Table>
       </TableContainer>

website/src/components/LeaderboardTable/LeaderboardTable.tsx

@@ -1,12 +1,13 @@
-import { CircularProgress } from "@chakra-ui/react";
+import { CircularProgress, useColorModeValue, useToken } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { useTranslation } from "next-i18next";
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { get } from "src/lib/api";
+import { colors } from "src/styles/Theme/colors";
 import { LeaderboardEntity, LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
 import useSWRImmutable from "swr/immutable";
 
-import { DataTable } from "../DataTable";
+import { DataTable, DataTableRowPropsCallback } from "../DataTable";
 
 const columnHelper = createColumnHelper<LeaderboardEntity>();
 
@@ -23,6 +24,7 @@ export const LeaderboardTable = ({
   rowPerPage: number;
 }) => {
   const { t } = useTranslation("leaderboard");
+
   const {
     data: reply,
     isLoading,
@@ -66,6 +68,32 @@ export const LeaderboardTable = ({
     return reply?.leaderboard.slice(start, start + rowPerPage) || [];
   }, [rowPerPage, page, reply?.leaderboard]);
 
+  const borderColor = useToken("colors", useColorModeValue(colors.light.active, colors.dark.active));
+  const rowProps = useCallback<DataTableRowPropsCallback<LeaderboardEntity>>(
+    (row) => {
+      return row.original.highlighted
+        ? {
+            sx: {
+              // https://stackoverflow.com/questions/37963524/how-to-apply-border-radius-to-tr-in-bootstrap
+              position: "relative",
+              "td:first-of-type:before": {
+                borderLeft: `6px solid ${borderColor}`,
+                content: `""`,
+                display: "block",
+                width: "10px",
+                height: "100%",
+                left: 0,
+                top: 0,
+                borderRadius: "6px 0 0 6px",
+                position: "absolute",
+              },
+            },
+          }
+        : {};
+    },
+    [borderColor]
+  );
+
   if (isLoading) {
     return <CircularProgress isIndeterminate></CircularProgress>;
   }
@@ -86,6 +114,7 @@ export const LeaderboardTable = ({
       disablePrevious={page === 1}
       onNextClick={() => setPage((p) => p + 1)}
       onPreviousClick={() => setPage((p) => p - 1)}
+      rowProps={rowProps}
     ></DataTable>
   );
 };

website/src/types/Leaderboard.ts

@@ -40,4 +40,5 @@ export interface LeaderboardEntity {
   reply_ranked_3: number;
   streak_last_day_date: number | null;
   streak_days: number | null;
+  highlighted: boolean;
 }