Calendar get via SWR

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<PostsData>;
+  post?: Unpacked<FreeAgentsGet>;
 }
 
 type FormData = z.infer<typeof freeAgentPostSchema>;
 
 const FAModal = ({ onClose, post, refetchQuery }: Props) => {
-  const utils = trpc.useQueryUtils();
-
   const { handleSubmit, errors, register, watch, control } = useForm<FormData>({
     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) {

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<PostsData>;
+  post: Unpacked<FreeAgentsGet>;
   isLiked: boolean;
   canLike: boolean;
   showXp: boolean;

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<PostsData> | undefined)[];
+  matchedPosts: (Unpacked<FreeAgentsGet> | undefined)[];
   focusOnMatch: (id: number) => void;
 }) => {
   if (!matchedPosts.length)

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<Action>;
 
 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<FreeAgentsGet>("/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,

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<PostsData>;
+
+const GET = async (_req: NextApiRequest, res: NextApiResponse<PostsData>) => {
+  const events = await freeAgentsService.posts();
+  res.status(200).json(events);
+};
+
+const freeAgentsHandler = (req: NextApiRequest, res: NextApiResponse) =>
+  createHandler(req, res, { GET });
+
+export default freeAgentsHandler;

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 = () => {
         </Button>
       )}
       {usersPost &&
-        usersPost.updatedAt.getTime() < dateThreeWeeksAgo.getTime() && (
+        new Date(usersPost.updatedAt).getTime() <
+          dateThreeWeeksAgo.getTime() && (
           <Alert
             status="warning"
             variant="subtle"
@@ -177,12 +185,12 @@ const FreeAgentsPage = () => {
   }
 };
 
-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,
   };

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);