sr hook initial

hooks/sr.ts

@@ -0,0 +1,16 @@
+import { GetAllSalmonRunRecordsData } from "prisma/queries/getAllSalmonRunRecords";
+import useSWR from "swr";
+
+export function useSalmonRunRecords() {
+  const { data = [] } = useSWR<GetAllSalmonRunRecordsData>("/api/sr/records");
+
+  console.log({ data });
+
+  return {
+    data: data.filter((record) => record.approved),
+    pendingCount: data.reduce(
+      (acc, record) => (!record.approved ? ++acc : acc),
+      0
+    ),
+  };
+}

pages/sr/leaderboards/index.tsx

@@ -1,13 +1,27 @@
-import { Button, Link } from "@chakra-ui/react";
-import { t, Trans } from "@lingui/macro";
+import { Alert, AlertIcon, Box, Button } from "@chakra-ui/react";
+import { Plural, t, Trans } from "@lingui/macro";
 import Breadcrumbs from "components/common/Breadcrumbs";
+import { useSalmonRunRecords } from "hooks/sr";
+import Link from "next/link";
 
 const SalmonRunLeaderboardsPage = ({}) => {
+  const { data, pendingCount } = useSalmonRunRecords();
+  console.log({ data, pendingCount });
   return (
     <>
       <Breadcrumbs
         pages={[{ name: t`Salmon Run` }, { name: t`Leaderboards` }]}
       />
+      {pendingCount && (
+        <Alert status="info" my={4}>
+          <AlertIcon />
+          <Plural
+            value={pendingCount}
+            one={<Trans>You have one record waiting for approval</Trans>}
+            other={<Trans>You have # records waiting for approval</Trans>}
+          />
+        </Alert>
+      )}
       <Link href="/sr/leaderboards/new">
         <a>
           <Button variant="outline">
@@ -15,6 +29,9 @@ const SalmonRunLeaderboardsPage = ({}) => {
           </Button>
         </a>
       </Link>
+      <Box as="pre" mt={2}>
+        {JSON.stringify(data)}
+      </Box>
     </>
   );
 };

pages/sr/leaderboards/new.tsx

@@ -24,8 +24,10 @@ import { sendData } from "lib/postData";
 import useUser from "lib/useUser";
 import { salmonRunRecordSchema } from "lib/validators/salmonRunRecord";
 import Image from "next/image";
+import { useRouter } from "next/router";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { mutate } from "swr";
 import * as z from "zod";
 
 const salmonRunCategoryToNatural = {
@@ -54,6 +56,7 @@ type FormData = z.infer<typeof salmonRunRecordSchema>;
 
 const AddRecordModal = () => {
   const { i18n } = useLingui();
+  const router = useRouter();
   const [sending, setSending] = useState(false);
   const [loggedInUser] = useUser();
   const { handleSubmit, errors, register, control, watch } = useForm<FormData>({
@@ -74,9 +77,9 @@ const AddRecordModal = () => {
     setSending(false);
     if (!success) return;
 
-    //mutate(`/api/users/${loggedInUser.id}/builds`);
+    mutate("/api/sr/records");
 
-    //redirect()
+    router.push("/sr/leaderboards");
   };
 
   return (