From 3258ddfd2cd36bf5ffe465ed258e480e2c183a7a Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Thu, 25 Feb 2021 20:27:00 +0200 Subject: [PATCH] suggestions improvements --- components/plus/PlusHomePage.tsx | 14 ++++------ components/plus/Suggestion.tsx | 7 ++++- cypress/integration/plus.spec.ts | 7 +++-- hooks/plus.ts | 5 ++-- lib/validators/suggestion.ts | 2 +- package.json | 1 + pages/plus/index.tsx | 48 ++++++++------------------------ services/plus.ts | 3 +- 8 files changed, 35 insertions(+), 52 deletions(-) diff --git a/components/plus/PlusHomePage.tsx b/components/plus/PlusHomePage.tsx index 0483c5da4..76773c9c5 100644 --- a/components/plus/PlusHomePage.tsx +++ b/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 = () => { +const PlusHomePage: React.FC = ({ suggestions }) => { const [user] = useUser(); const { plusStatusData, @@ -24,7 +22,7 @@ const PlusHomePage: React.FC = () => { suggestionsLoading, suggestionCounts, setSuggestionsFilter, - } = usePlus(); + } = usePlus(suggestions); return ( <> diff --git a/components/plus/Suggestion.tsx b/components/plus/Suggestion.tsx index ed7f36aaa..0620d1dbe 100644 --- a/components/plus/Suggestion.tsx +++ b/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; canSuggest: boolean; }) => { + const { gray } = useMyTheme(); const [showTextarea, setShowTextarea] = useState(false); const { handleSubmit, errors, register, watch } = useForm({ resolver: zodResolver(resuggestionSchema), @@ -57,7 +59,10 @@ const Suggestion = ({ {getFullUsername(suggestion.suggestedUser)} - + + + {new Date(suggestion.createdAt).toLocaleString()} + +{suggestion.tier} "{suggestion.description}" -{" "} diff --git a/cypress/integration/plus.spec.ts b/cypress/integration/plus.spec.ts index f3a534d3c..8d0f82485 100644 --- a/cypress/integration/plus.spec.ts +++ b/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", () => { diff --git a/hooks/plus.ts b/hooks/plus.ts index c66bbb0ce..ae92c43df 100644 --- a/hooks/plus.ts +++ b/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( - "/api/plus/suggestions" + "/api/plus/suggestions", + { initialData } ); const suggestions = suggestionsData ?? []; diff --git a/lib/validators/suggestion.ts b/lib/validators/suggestion.ts index f473f371e..d88e69eb4 100644 --- a/lib/validators/suggestion.ts +++ b/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({ diff --git a/package.json b/package.json index 16408f50e..a06ad422c 100644 --- a/package.json +++ b/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" }, diff --git a/pages/plus/index.tsx b/pages/plus/index.tsx index 9d9da3fa5..47f30ff4e 100644 --- a/pages/plus/index.tsx +++ b/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 = async ({ -// params, -// }) => { -// const getSlug = async () => { -// const slug = Array.isArray(params!.slug) ? params!.slug : []; -// if (slug.length === 3) { -// return slug; -// } +export const getStaticProps: GetStaticProps = 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; diff --git a/services/plus.ts b/services/plus.ts index 352c57292..fe5a7d5f5 100644 --- a/services/plus.ts +++ b/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 ||