Show last updated on leaderboard

website/public/locales/en/common.json

@@ -13,5 +13,6 @@
   "sign_in": "Sign In",
   "sign_out": "Sign Out",
   "terms_of_service": "Terms of Service",
-  "title": "Open Assistant"
+  "title": "Open Assistant",
+  "last_updated_at": "Last updated at: {{val, datetime}}"
 }

website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx

@@ -1,8 +1,9 @@
-import { Table, TableContainer, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
-import React from "react";
+import { Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
+import React, { useMemo } from "react";
 import { useTable } from "react-table";
 import { get } from "src/lib/api";
-import { LeaderboardEntity, LeaderboardTimeFrame } from "src/types/Leaderboard";
+import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
 import useSWRImmutable from "swr/immutable";
 
 const columns = [
@@ -26,13 +27,26 @@ const columns = [
  * Presents a grid of leaderboard entries with more detailed information.
  */
 const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame }) => {
-  const { data } = useSWRImmutable<LeaderboardEntity[]>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
-    fallbackData: [],
+  const { t } = useTranslation();
+  const { data: reply } = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
     revalidateOnMount: true,
   });
+
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
+    columns,
+    data: reply?.leaderboard ?? [],
+  });
+
   const backgroundColor = useColorModeValue("white", "gray.800");
 
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
+  const lastUpdated = useMemo(() => {
+    const val = new Date(reply?.last_updated);
+    return t("last_updated_at", { val, formatParams: { val: { dateStyle: "full", timeStyle: "short" } } });
+  }, [t, reply?.last_updated]);
+
+  if (!reply) {
+    return null;
+  }
 
   return (
     <TableContainer>
@@ -66,6 +80,7 @@ const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame })
           })}
         </Tbody>
       </Table>
+      <Text p="2">{lastUpdated}</Text>
     </TableContainer>
   );
 };

website/src/pages/api/leaderboard.ts

@@ -6,9 +6,9 @@ import { LeaderboardTimeFrame } from "src/types/Leaderboard";
  * Returns the set of valid labels that can be applied to messages.
  */
 const handler = withoutRole("banned", async (req, res) => {
-  const time_frame = (req.query.time_frame as LeaderboardTimeFrame) || LeaderboardTimeFrame.day;
-  const { leaderboard } = await oasstApiClient.fetch_leaderboard(time_frame);
-  res.status(200).json(leaderboard);
+  const time_frame = (req.query.time_frame as LeaderboardTimeFrame) ?? LeaderboardTimeFrame.day;
+  const info = await oasstApiClient.fetch_leaderboard(time_frame);
+  res.status(200).json(info);
 });
 
 export default handler;

website/src/types/Leaderboard.ts

@@ -12,6 +12,7 @@ export const enum LeaderboardTimeFrame {
 }
 export interface LeaderboardReply {
   time_frame: LeaderboardTimeFrame;
+  last_updated: string; // date time iso string
   leaderboard: LeaderboardEntity[];
 }