From 4d55f231a93e7ad6f85ecd09bf59d957dee7620b Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Sun, 8 Aug 2021 17:31:43 +0300 Subject: [PATCH] Calendar get via SWR --- components/freeagents/FAModal.tsx | 8 ++------ components/freeagents/FreeAgentSection.tsx | 4 ++-- components/freeagents/MatchesInfo.tsx | 4 ++-- hooks/freeagents.ts | 10 ++++++---- pages/api/free-agents/index.ts | 16 ++++++++++++++++ pages/freeagents.tsx | 22 +++++++++++++++------- routers/freeagents.ts | 5 ----- 7 files changed, 43 insertions(+), 26 deletions(-) create mode 100644 pages/api/free-agents/index.ts diff --git a/components/freeagents/FAModal.tsx b/components/freeagents/FAModal.tsx index cea667b7e..586a560b1 100644 --- a/components/freeagents/FAModal.tsx +++ b/components/freeagents/FAModal.tsx @@ -22,9 +22,9 @@ import { import { zodResolver } from "@hookform/resolvers/zod"; import { t, Trans } from "@lingui/macro"; import MarkdownTextarea from "components/common/MarkdownTextarea"; +import { FreeAgentsGet } from "pages/api/free-agents"; import { Controller, useForm } from "react-hook-form"; import { FiTrash } from "react-icons/fi"; -import { PostsData } from "services/freeagents"; import { getToastOptions } from "utils/objects"; import { trpc } from "utils/trpc"; import { Unpacked } from "utils/types"; @@ -37,14 +37,12 @@ import * as z from "zod"; interface Props { onClose: () => void; refetchQuery: () => void; - post?: Unpacked; + post?: Unpacked; } type FormData = z.infer; const FAModal = ({ onClose, post, refetchQuery }: Props) => { - const utils = trpc.useQueryUtils(); - const { handleSubmit, errors, register, watch, control } = useForm({ resolver: zodResolver(freeAgentPostSchema), defaultValues: post, @@ -59,7 +57,6 @@ const FAModal = ({ onClose, post, refetchQuery }: Props) => { ) ); refetchQuery(); - utils.invalidateQuery(["freeAgents.posts"]); onClose(); }, onError(error) { @@ -71,7 +68,6 @@ const FAModal = ({ onClose, post, refetchQuery }: Props) => { onSuccess() { toast(getToastOptions(t`Free agent post deleted`, "success")); refetchQuery(); - utils.invalidateQuery(["freeAgents.posts"]); onClose(); }, onError(error) { diff --git a/components/freeagents/FreeAgentSection.tsx b/components/freeagents/FreeAgentSection.tsx index b9fcf516f..d26d451e0 100644 --- a/components/freeagents/FreeAgentSection.tsx +++ b/components/freeagents/FreeAgentSection.tsx @@ -18,10 +18,10 @@ import { RiPaintLine, RiSwordLine, } from "react-icons/ri"; -import { PostsData } from "services/freeagents"; import { getToastOptions } from "utils/objects"; import { trpc } from "utils/trpc"; import { Unpacked } from "utils/types"; +import { FreeAgentsGet } from "pages/api/free-agents"; const playstyleToEmoji = { FRONTLINE: RiSwordLine, @@ -37,7 +37,7 @@ const FreeAgentSection = ({ showPlusServerMembership, postRef, }: { - post: Unpacked; + post: Unpacked; isLiked: boolean; canLike: boolean; showXp: boolean; diff --git a/components/freeagents/MatchesInfo.tsx b/components/freeagents/MatchesInfo.tsx index d05345036..3ba4417ac 100644 --- a/components/freeagents/MatchesInfo.tsx +++ b/components/freeagents/MatchesInfo.tsx @@ -2,14 +2,14 @@ import { Alert, AlertIcon, Flex, Wrap, WrapItem } from "@chakra-ui/react"; import { Trans } from "@lingui/macro"; import SubText from "components/common/SubText"; import UserAvatar from "components/common/UserAvatar"; -import { PostsData } from "services/freeagents"; +import { FreeAgentsGet } from "pages/api/free-agents"; import { Unpacked } from "utils/types"; const MatchesInfo = ({ matchedPosts, focusOnMatch, }: { - matchedPosts: (Unpacked | undefined)[]; + matchedPosts: (Unpacked | undefined)[]; focusOnMatch: (id: number) => void; }) => { if (!matchedPosts.length) diff --git a/hooks/freeagents.ts b/hooks/freeagents.ts index 7b4264628..94b585d8e 100644 --- a/hooks/freeagents.ts +++ b/hooks/freeagents.ts @@ -1,7 +1,9 @@ import { Playstyle } from "@prisma/client"; import { countries } from "countries-list"; import { useUser } from "hooks/common"; +import { FreeAgentsGet } from "pages/api/free-agents"; import { Dispatch, useMemo, useReducer } from "react"; +import useSWR from "swr"; import { getBooleanFromString, getWeaponFromString } from "utils/strings"; import { trpc } from "utils/trpc"; import { isFreeAgentPlaystyle, isFreeAgentRegion } from "utils/typeGuards"; @@ -56,12 +58,12 @@ export type UseFreeAgentsDispatch = Dispatch; const defaultState: UseFreeAgentsState = { xp: false, plusServer: false }; -export function useFreeAgents() { +export function useFreeAgents(postsInitialData: FreeAgentsGet) { const router = useMyRouter(); const [user] = useUser(); - const posts = trpc.useQuery(["freeAgents.posts"], { - enabled: false, + const posts = useSWR("/api/free-agents", { + initialData: postsInitialData, }); const usersPost = posts.data?.find( @@ -173,7 +175,7 @@ export function useFreeAgents() { return { postsData: filteredPostsData, - refetchPosts: posts.refetch, + refetchPosts: posts.mutate, allPostsCount: (posts.data ?? []).length, likesData, isLoading: !posts.data, diff --git a/pages/api/free-agents/index.ts b/pages/api/free-agents/index.ts new file mode 100644 index 000000000..4b0540b3e --- /dev/null +++ b/pages/api/free-agents/index.ts @@ -0,0 +1,16 @@ +import { NextApiRequest, NextApiResponse } from "next"; +import { createHandler } from "utils/api"; +import freeAgentsService, { PostsData } from "services/freeagents"; +import { Serialized } from "utils/types"; + +export type FreeAgentsGet = Serialized; + +const GET = async (_req: NextApiRequest, res: NextApiResponse) => { + const events = await freeAgentsService.posts(); + res.status(200).json(events); +}; + +const freeAgentsHandler = (req: NextApiRequest, res: NextApiResponse) => + createHandler(req, res, { GET }); + +export default freeAgentsHandler; diff --git a/pages/freeagents.tsx b/pages/freeagents.tsx index 3c1caa445..d2c4e5985 100644 --- a/pages/freeagents.tsx +++ b/pages/freeagents.tsx @@ -19,9 +19,16 @@ import { useEffect, useRef, useState } from "react"; import { mutate } from "swr"; import { CSSVariables } from "utils/CSSVariables"; import { sendData } from "utils/postData"; -import { ssr } from "./api/trpc/[trpc]"; +import freeAgentsService from "services/freeagents"; +import { GetStaticProps } from "next"; +import { serializeDataForGetStaticProps } from "utils/objects"; +import { FreeAgentsGet } from "./api/free-agents"; -const FreeAgentsPage = () => { +interface Props { + postsInitialData: FreeAgentsGet; +} + +const FreeAgentsPage = ({ postsInitialData }: Props) => { const { postsData, refetchPosts, @@ -32,7 +39,7 @@ const FreeAgentsPage = () => { allPostsCount, state, dispatch, - } = useFreeAgents(); + } = useFreeAgents(postsInitialData); const [user] = useUser(); const router = useRouter(); @@ -88,7 +95,8 @@ const FreeAgentsPage = () => { )} {usersPost && - usersPost.updatedAt.getTime() < dateThreeWeeksAgo.getTime() && ( + new Date(usersPost.updatedAt).getTime() < + dateThreeWeeksAgo.getTime() && ( { } }; -export const getStaticProps = async () => { - await ssr.prefetchQuery("freeAgents.posts"); +export const getStaticProps: GetStaticProps = async () => { + const posts = await freeAgentsService.posts(); return { props: { - dehydratedState: ssr.dehydrate(), + postsInitialData: serializeDataForGetStaticProps(posts), }, revalidate: 60, }; diff --git a/routers/freeagents.ts b/routers/freeagents.ts index 9709d7e1c..928cc4e1b 100644 --- a/routers/freeagents.ts +++ b/routers/freeagents.ts @@ -5,11 +5,6 @@ import { freeAgentPostSchema } from "utils/validators/fapost"; import * as z from "zod"; const freeAgentsApi = createRouter() - .query("posts", { - resolve() { - return service.posts(); - }, - }) .query("likes", { resolve({ ctx }) { const user = throwIfNotLoggedIn(ctx.user);