plus voting history ui select month

components/plus/PlusVotingHistoryPage.tsx

@@ -11,18 +11,43 @@ import {
 } from "components/common/Table";
 import UserAvatar from "components/common/UserAvatar";
 import { FiCheck } from "react-icons/fi";
-import { getFullUsername } from "lib/strings";
-import { GetVotingSummariesByMonthAndTierData } from "../../services/plusService";
+import { getFullUsername, getLocalizedMonthYearString } from "lib/strings";
+import {
+  VotingSummariesByMonthAndTier,
+  DistinctSummaryMonths,
+} from "../../services/plusService";
+import { Select } from "@chakra-ui/select";
+import { useRouter } from "next/router";
 
 export interface PlusVotingHistoryPageProps {
-  summaries: GetVotingSummariesByMonthAndTierData;
+  summaries: VotingSummariesByMonthAndTier;
+  monthsWithData: DistinctSummaryMonths;
 }
 
 const PlusVotingHistoryPage: React.FC<PlusVotingHistoryPageProps> = ({
   summaries,
+  monthsWithData,
 }) => {
+  const router = useRouter();
   return (
     <>
+      <Select
+        onChange={(e) => {
+          router.replace(`/plus/history/${e.target.value}`);
+        }}
+        maxW={64}
+        mt={4}
+        mb={8}
+      >
+        {monthsWithData.map(({ month, year, tier }) => (
+          <option
+            key={`${month}${year}${tier}`}
+            value={`${tier}/${year}/${month}`}
+          >
+            +{tier} - {getLocalizedMonthYearString(month, year, "en")}
+          </option>
+        ))}
+      </Select>
       <Table>
         <TableHead>
           <TableRow>

lib/plus.ts

@@ -9,16 +9,16 @@ export const getPercentageFromCounts = (
   const otherRegionArr = votedUserRegion === "NA" ? countsEU : countsNA;
 
   const sameSum =
-    sameRegionArr[0] * 0 +
-    sameRegionArr[1] * 1 +
-    sameRegionArr[2] * 2 +
-    sameRegionArr[3] * 3;
+    sameRegionArr[0] * -2 +
+    sameRegionArr[1] * -1 +
+    sameRegionArr[2] * 1 +
+    sameRegionArr[3] * 2;
   const sameVoterCount = sameRegionArr.reduce((acc, cur) => acc + cur, 0);
-  const sameMax = sameVoterCount * 3;
 
-  const otherSum = otherRegionArr[1] * 0 + otherRegionArr[2] * 1;
+  const otherSum = otherRegionArr[1] * -1 + otherRegionArr[2] * 1;
   const otherVoterCount = otherRegionArr.reduce((acc, cur) => acc + cur, 0);
-  const otherMax = otherVoterCount * 1;
 
-  return ((sameSum + otherSum) / (sameMax + otherMax)) * 100;
+  return (
+    ((sameSum / sameVoterCount + otherSum / otherVoterCount + 3) / 6) * 100
+  );
 };

pages/plus/history/[[...slug]].tsx

@@ -32,16 +32,19 @@ export const getStaticProps: GetStaticProps<PlusVotingHistoryPageProps> = async
   const [tier, year, month] = (await getSlug()).map((param) => Number(param));
   if (!tier) return { notFound: true };
 
-  const summaries = await plusService.getVotingSummariesByMonthAndTier({
-    tier: tier as any,
-    year,
-    month,
-  });
+  const [summaries, monthsWithData] = await Promise.all([
+    plusService.getVotingSummariesByMonthAndTier({
+      tier: tier as any,
+      year,
+      month,
+    }),
+    plusService.getDistinctSummaryMonths(),
+  ]);
 
   if (!summaries.length) return { notFound: true };
 
   return {
-    props: { summaries },
+    props: { summaries, monthsWithData },
   };
 };
 

services/plusService.ts

@@ -3,7 +3,7 @@ import prisma from "prisma/client";
 import { getPercentageFromCounts } from "lib/plus";
 import { userBasicSelection } from "lib/prisma";
 
-export type GetVotingSummariesByMonthAndTierData = Prisma.PromiseReturnType<
+export type VotingSummariesByMonthAndTier = Prisma.PromiseReturnType<
   typeof getVotingSummariesByMonthAndTier
 >;
 
@@ -85,7 +85,20 @@ const getMostRecentVotingWithResultsMonth = async () => {
   return { year: mostRecent.year, month: mostRecent.month };
 };
 
+export type DistinctSummaryMonths = Prisma.PromiseReturnType<
+  typeof getDistinctSummaryMonths
+>;
+
+const getDistinctSummaryMonths = () => {
+  return prisma.plusVotingSummary.findMany({
+    distinct: ["month", "year", "tier"],
+    select: { month: true, year: true, tier: true },
+    orderBy: [{ year: "desc" }, { month: "desc" }, { tier: "asc" }],
+  });
+};
+
 export default {
   getVotingSummariesByMonthAndTier,
   getMostRecentVotingWithResultsMonth,
+  getDistinctSummaryMonths,
 };