suggestions improvements

components/plus/PlusHomePage.tsx

@@ -1,21 +1,19 @@
-import { Button } from "@chakra-ui/button";
 import { Box, Center, Divider, Flex, Stack } from "@chakra-ui/layout";
 import { Radio, RadioGroup } from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
-import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
-import UserAvatar from "components/common/UserAvatar";
 import { useUser } from "hooks/common";
 import { usePlus } from "hooks/plus";
-import useMutation from "hooks/useMutation";
-import { getFullUsername } from "lib/strings";
 import { Fragment } from "react";
+import { Suggestions } from "services/plus";
 import Suggestion from "./Suggestion";
 import SuggestionVouchModal from "./SuggestionVouchModal";
 
-export interface PlusHomePageProps {}
+export interface PlusHomePageProps {
+  suggestions: Suggestions;
+}
 
-const PlusHomePage: React.FC<PlusHomePageProps> = () => {
+const PlusHomePage: React.FC<PlusHomePageProps> = ({ suggestions }) => {
   const [user] = useUser();
   const {
     plusStatusData,
@@ -24,7 +22,7 @@ const PlusHomePage: React.FC<PlusHomePageProps> = () => {
     suggestionsLoading,
     suggestionCounts,
     setSuggestionsFilter,
-  } = usePlus();
+  } = usePlus(suggestions);
 
   return (
     <>

components/plus/Suggestion.tsx

@@ -12,6 +12,7 @@ import { Trans } from "@lingui/macro";
 import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
 import UserAvatar from "components/common/UserAvatar";
+import { useMyTheme } from "hooks/common";
 import useMutation from "hooks/useMutation";
 import { getFullUsername } from "lib/strings";
 import { Unpacked } from "lib/types";
@@ -33,6 +34,7 @@ const Suggestion = ({
   suggestion: Unpacked<Suggestions>;
   canSuggest: boolean;
 }) => {
+  const { gray } = useMyTheme();
   const [showTextarea, setShowTextarea] = useState(false);
   const { handleSubmit, errors, register, watch } = useForm<FormData>({
     resolver: zodResolver(resuggestionSchema),
@@ -57,7 +59,10 @@ const Suggestion = ({
           {getFullUsername(suggestion.suggestedUser)}
         </MyLink>
       </Flex>
-      <Box ml={2}>
+      <Box>
+        <Box fontSize="sm" color={gray}>
+          {new Date(suggestion.createdAt).toLocaleString()}
+        </Box>
         <SubText mt={2}>+{suggestion.tier}</SubText>
         <Box mt={4} fontSize="sm">
           "{suggestion.description}" -{" "}

cypress/integration/plus.spec.ts

@@ -16,9 +16,12 @@ context("Plus Voting History", () => {
 context("Plus Home Page", () => {
   it("can filter through suggestions not logged in", () => {
     cy.visit("/plus");
-    cy.contains("yooo so cracked").dataCy("plus-three-radio").click();
+    cy.get("section")
+      .contains("yooo so cracked")
+      .dataCy("plus-three-radio")
+      .click();
 
-    cy.contains("yooo so cracked").should("not.exist");
+    cy.get("section").contains("yooo so cracked").should("not.exist");
   });
 
   it("can submit new suggestion and persists with reload", () => {

hooks/plus.ts

@@ -3,7 +3,7 @@ import { PlusStatus, Suggestions } from "services/plus";
 import useSWR from "swr";
 import { useUser } from "./common";
 
-export function usePlus() {
+export function usePlus(initialData: Suggestions) {
   const [user] = useUser();
   const [suggestionsFilter, setSuggestionsFilter] = useState<
     number | undefined
@@ -13,7 +13,8 @@ export function usePlus() {
     user ? "/api/plus" : null
   );
   const { data: suggestionsData } = useSWR<Suggestions>(
-    "/api/plus/suggestions"
+    "/api/plus/suggestions",
+    { initialData }
   );
 
   const suggestions = suggestionsData ?? [];

lib/validators/suggestion.ts

@@ -3,7 +3,7 @@ import * as z from "zod";
 export const SUGGESTION_DESCRIPTION_LIMIT = 500;
 
 const suggestionRootSchema = z.object({
-  description: z.string().max(SUGGESTION_DESCRIPTION_LIMIT).min(10),
+  description: z.string().max(SUGGESTION_DESCRIPTION_LIMIT),
 });
 
 export const suggestionFullSchema = suggestionRootSchema.extend({

package.json

@@ -17,6 +17,7 @@
     "restore": "pg_restore -d 'postgresql://sendou@localhost:5432/postgres' --jobs 4 dumped.sql --clean",
     "seed": "prisma db seed --preview-feature",
     "cy:open": "cypress open",
+    "cy:run": "cypress run",
     "cy:clearcache": "cypress cache clear",
     "cy:install": "cypress install"
   },

pages/plus/index.tsx

@@ -1,40 +1,16 @@
-import PlusHomePage from "components/plus/PlusHomePage";
+import PlusHomePage, { PlusHomePageProps } from "components/plus/PlusHomePage";
+import { GetStaticProps } from "next";
+import plusService from "services/plus";
 
-// export const getStaticProps: GetStaticProps<PlusVotingHistoryPageProps> = async ({
-//   params,
-// }) => {
-//   const getSlug = async () => {
-//     const slug = Array.isArray(params!.slug) ? params!.slug : [];
-//     if (slug.length === 3) {
-//       return slug;
-//     }
+export const getStaticProps: GetStaticProps<PlusHomePageProps> = async ({
+  params,
+}) => {
+  const suggestions = await plusService.getSuggestions();
 
-//     if (slug.length > 0) {
-//       return [];
-//     }
-
-//     const mostRecent = await plusService.getMostRecentVotingWithResultsMonth();
-
-//     return ["1", mostRecent.year, mostRecent.month];
-//   };
-
-//   const [tier, year, month] = (await getSlug()).map((param) => Number(param));
-//   if (!tier) return { notFound: true };
-
-//   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, monthsWithData },
-//   };
-// };
+  return {
+    props: { suggestions: JSON.parse(JSON.stringify(suggestions)) },
+    revalidate: 60,
+  };
+};
 
 export default PlusHomePage;

services/plus.ts

@@ -37,6 +37,7 @@ const getRawSuggestions = async () =>
       suggestedUser: { select: userBasicSelection },
       suggesterUser: { select: userBasicSelection },
     },
+    orderBy: { createdAt: "desc" },
   });
 
 const getSuggestions = async () => {
@@ -206,8 +207,6 @@ const addSuggestion = async ({
     (status) => status.userId === userId
   );
 
-  console.log({ suggesterPlusStatus, parsedData });
-
   if (
     !suggesterPlusStatus ||
     !suggesterPlusStatus.membershipTier ||