load events

app/calendar/api.ts

@@ -3,11 +3,17 @@ import { throwIfNotLoggedIn } from "utils/api";
 import { eventSchema } from "utils/validators/event";
 import service from "./service";
 
-const plusApi = createRouter().mutation("addEvent", {
-  input: eventSchema,
-  resolve({ ctx, input }) {
-    const user = throwIfNotLoggedIn(ctx.user);
-    return service.addEvent({ input, userId: user.id });
-  },
-});
+const plusApi = createRouter()
+  .query("events", {
+    resolve() {
+      return service.events();
+    },
+  })
+  .mutation("addEvent", {
+    input: eventSchema,
+    resolve({ ctx, input }) {
+      const user = throwIfNotLoggedIn(ctx.user);
+      return service.addEvent({ input, userId: user.id });
+    },
+  });
 export default plusApi;

app/calendar/components/CalendarPage.tsx

@@ -1,18 +1,26 @@
 import { Button } from "@chakra-ui/button";
 import { Trans } from "@lingui/macro";
 import { useState } from "react";
+import { trpc } from "utils/trpc";
 import { EventModal } from "./EventModal";
 
 export default function CalendarPage() {
+  const events = trpc.useQuery(["calendar.events"], { enabled: false });
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
+  console.log("events", events.data);
+
   return (
     <div>
       <Button size="sm" onClick={() => setModalIsOpen(true)}>
         <Trans>Add event</Trans>
       </Button>
       {modalIsOpen && (
-        <EventModal onClose={() => setModalIsOpen(false)} event={false} />
+        <EventModal
+          onClose={() => setModalIsOpen(false)}
+          event={false}
+          refetchQuery={events.refetch}
+        />
       )}
     </div>
   );

app/calendar/components/EventModal.tsx

@@ -35,9 +35,11 @@ type FormData = z.infer<typeof eventSchema>;
 export function EventModal({
   onClose,
   event,
+  refetchQuery,
 }: {
   onClose: () => void;
   event: boolean;
+  refetchQuery: () => void;
 }) {
   const toast = useToast();
   const { i18n } = useLingui();
@@ -47,7 +49,7 @@ export function EventModal({
   const addEvent = trpc.useMutation("calendar.addEvent", {
     onSuccess() {
       toast(getToastOptions(t`Event added`, "success"));
-      //trpc.invalidateQuery(["plus.suggestions"]);
+      refetchQuery();
       onClose();
     },
     onError(error) {

app/calendar/service.ts

@@ -2,6 +2,10 @@ import prisma from "prisma/client";
 import { eventSchema } from "utils/validators/event";
 import * as z from "zod";
 
+const events = () => {
+  return prisma.calendarEvent.findMany({ where: { date: { gt: new Date() } } });
+};
+
 const addEvent = async ({
   input,
   userId,
@@ -20,5 +24,6 @@ const addEvent = async ({
 };
 
 export default {
+  events,
   addEvent,
 };

pages/calendar.tsx

@@ -1,21 +1,18 @@
 import CalendarPage from "app/calendar/components/CalendarPage";
 import HeaderBanner from "components/layout/HeaderBanner";
-// import { ssr } from "pages/api/trpc/[trpc]";
-// import { trpc } from "utils/trpc";
+import { ssr } from "pages/api/trpc/[trpc]";
+import { trpc } from "utils/trpc";
 
-// export const getStaticProps = async () => {
-//   await Promise.all([
-//     ssr.prefetchQuery("plus.suggestions"),
-//     ssr.prefetchQuery("plus.statuses"),
-//   ]);
+export const getStaticProps = async () => {
+  await ssr.prefetchQuery("calendar.events");
 
-//   return {
-//     props: {
-//       dehydratedState: trpc.dehydrate(),
-//     },
-//     revalidate: 60,
-//   };
-// };
+  return {
+    props: {
+      dehydratedState: trpc.dehydrate(),
+    },
+    revalidate: 60,
+  };
+};
 
 // @ts-expect-error
 CalendarPage.header = (