Add list of vouches to Plus Home Page

components/plus/VouchesList.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@chakra-ui/button";
+import { Box, Grid } from "@chakra-ui/layout";
+import MyLink from "components/common/MyLink";
+import { Fragment, useState } from "react";
+import { PlusStatuses } from "services/plus";
+import { getFullUsername } from "utils/strings";
+
+const VouchesList = ({ vouches }: { vouches: PlusStatuses }) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setShow(!show)} size="sm" variant="outline">
+        {show ? "Hide vouches" : <>Show {vouches.length} vouches</>}
+      </Button>
+      <Grid
+        mt={4}
+        fontSize="sm"
+        maxW="24rem"
+        templateColumns="1fr 1fr 1fr"
+        gridRowGap="0.25rem"
+        placeItems="center"
+      >
+        {show &&
+          vouches.map((vouch) => {
+            return (
+              <Fragment key={vouch.user.id}>
+                <MyLink href={`/u/${vouch.user.discordId}`}>
+                  {getFullUsername(vouch.user)}
+                </MyLink>
+                <Box>to +{vouch.vouchTier} by</Box>
+                <MyLink href={`/u/${vouch.voucher!.discordId}`}>
+                  {getFullUsername(vouch.voucher!)}
+                </MyLink>
+              </Fragment>
+            );
+          })}
+      </Grid>
+    </>
+  );
+};
+
+export default VouchesList;

hooks/plus.ts

@@ -28,6 +28,9 @@ export function usePlusHomePage() {
     plusStatusData: plusStatusData?.find(
       (status) => status.user.id === user?.id
     ),
+    vouchStatuses: plusStatusData
+      ?.filter((status) => status.voucher)
+      .sort((a, b) => a.vouchTier! - b.vouchTier!),
     vouchedPlusStatusData: plusStatusData?.find(
       (status) => status.voucher?.id === user?.id
     ),

pages/plus/index.tsx

@@ -13,6 +13,7 @@ import SubText from "components/common/SubText";
 import Suggestion from "components/plus/Suggestion";
 import SuggestionModal from "components/plus/SuggestionModal";
 import VotingInfoHeader from "components/plus/VotingInfoHeader";
+import VouchesList from "components/plus/VouchesList";
 import VouchModal from "components/plus/VouchModal";
 import { useUser } from "hooks/common";
 import { usePlusHomePage } from "hooks/plus";
@@ -25,6 +26,7 @@ const PlusHomePage = () => {
   const [user] = useUser();
   const {
     plusStatusData,
+    vouchStatuses,
     suggestionsData,
     ownSuggestion,
     suggestionCounts,
@@ -194,6 +196,13 @@ const PlusHomePage = () => {
           </Stack>
         </RadioGroup>
       </Center>
+      {!getVotingRange().isHappening &&
+        vouchStatuses &&
+        vouchStatuses.length > 0 && (
+          <Box mt={4}>
+            <VouchesList vouches={vouchStatuses} />
+          </Box>
+        )}
       {suggestionCounts.ONE + suggestionCounts.TWO + suggestionCounts.THREE ===
       0 ? (
         <Box mt={4}>No suggestions yet for this month</Box>