chore: sync partners to social

apps/partners/package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "gql:generate-persisted": "gql.tada generate-persisted",
+    "gql:generate-schema": "gql.tada generate-schema http://localhost:3000/api/graphql"
   },
   "dependencies": {
     "@graphql-yoga/plugin-csrf-prevention": "^3.6.2",
@@ -15,6 +17,7 @@
     "@graphql-yoga/plugin-response-cache": "^3.8.2",
     "@lucia-auth/adapter-drizzle": "^1.0.7",
     "@node-rs/argon2": "^1.8.3",
+    "@tanstack/react-virtual": "^3.9.0",
     "@umamin/db": "workspace:*",
     "@umamin/gql": "workspace:*",
     "@umamin/ui": "workspace:*",

apps/partners/src/app/api/graphql/route.ts

@@ -0,0 +1,97 @@
+import { cookies } from "next/headers";
+import { createYoga } from "graphql-yoga";
+import { getSession, lucia } from "@/lib/auth";
+import persistedOperations from "@/persisted-operations.json";
+import { partners_schema, initContextCache } from "@umamin/gql";
+import { useResponseCache } from "@graphql-yoga/plugin-response-cache";
+import { useCSRFPrevention } from "@graphql-yoga/plugin-csrf-prevention";
+import { usePersistedOperations } from "@graphql-yoga/plugin-persisted-operations";
+import { useDisableIntrospection } from "@graphql-yoga/plugin-disable-introspection";
+
+const { handleRequest } = createYoga({
+  schema: partners_schema,
+  context: async () => {
+    const { session } = await getSession();
+
+    return {
+      ...initContextCache(),
+      userId: session?.userId,
+    };
+  },
+  graphqlEndpoint: "/api/graphql",
+  graphiql: process.env.NODE_ENV === "development",
+  fetchAPI: { Response },
+  cors: {
+    origin:
+      process.env.NODE_ENV === "production"
+        ? "https://www.umamin.link"
+        : "http://localhost:3000",
+    credentials: true,
+    methods: ["POST", "GET", "OPTIONS"],
+    allowedHeaders: ["Content-Type", "Authorization"],
+  },
+  plugins: [
+    useCSRFPrevention({
+      requestHeaders: ["x-graphql-yoga-csrf"],
+    }),
+    useResponseCache({
+      session: () => cookies().get(lucia.sessionCookieName)?.value,
+      invalidateViaMutation: false,
+      scopePerSchemaCoordinate: {
+        "Query.user": "PRIVATE",
+        "Query.note": "PRIVATE",
+        "Query.messages": "PRIVATE",
+        "Query.messagesFromCursor": "PRIVATE",
+      },
+      ttl: 30_000,
+      ttlPerSchemaCoordinate: {
+        "Query.notes": 120_000,
+        "Query.notesFromCursor": 120_000,
+        "Query.userByUsername": 120_000,
+      },
+    }),
+    useDisableIntrospection({
+      isDisabled: () => process.env.NODE_ENV === "production",
+    }),
+    usePersistedOperations({
+      allowArbitraryOperations: process.env.NODE_ENV === "development",
+      customErrors: {
+        notFound: {
+          message: "Operation is not found",
+          extensions: {
+            http: {
+              status: 404,
+            },
+          },
+        },
+        keyNotFound: {
+          message: "Key is not found",
+          extensions: {
+            http: {
+              status: 404,
+            },
+          },
+        },
+        persistedQueryOnly: {
+          message: "Operation is not allowed",
+          extensions: {
+            http: {
+              status: 403,
+            },
+          },
+        },
+      },
+      skipDocumentValidation: true,
+      async getPersistedOperation(key: string) {
+        // @ts-ignore
+        return persistedOperations[key];
+      },
+    }),
+  ],
+});
+
+export {
+  handleRequest as GET,
+  handleRequest as POST,
+  handleRequest as OPTIONS,
+};

apps/partners/src/app/dashboard/components/navbar.tsx

@@ -1,20 +1,24 @@
 import Link from "next/link";
-import { Badge } from "@umamin/ui/components/badge";
+import { logout } from "@/lib/actions";
 import { SignOutButton } from "./sign-out-btn";
+import { Badge } from "@umamin/ui/components/badge";
 
-export async function Navbar() {
+export function Navbar() {
   return (
-    <nav className="fixed left-0 right-0 top-0 z-50 w-full bg-background bg-opacity-40 bg-clip-padding py-5 backdrop-blur-xl backdrop-filter lg:z-40 container max-w-screen-xl flex justify-between items-center">
+    <nav className="fixed left-0 right-0 top-0 z-50 w-full bg-background bg-opacity-40 bg-clip-padding py-5 backdrop-blur-xl backdrop-filter lg:z-40 container max-w-screen-2xl flex justify-between items-center">
       <div className="space-x-2 flex items-center">
         <Link href="/" aria-label="logo">
+          <span className="text-muted-foreground font-medium">partners.</span>
           <span className="font-semibold text-foreground">umamin</span>
           <span className="text-muted-foreground font-medium">.link</span>
         </Link>
 
-        <Badge variant="outline">partners</Badge>
+        <Badge variant="outline">beta</Badge>
       </div>
 
-      <SignOutButton />
+      <form action={logout}>
+        <SignOutButton />
+      </form>
     </nav>
   );
 }

apps/partners/src/app/dashboard/components/received/card.tsx

@@ -0,0 +1,55 @@
+import { formatDistanceToNow, fromUnixTime } from "date-fns";
+import { FragmentOf, graphql, readFragment } from "gql.tada";
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@umamin/ui/components/card";
+
+export const receivedMessageFragment = graphql(`
+  fragment MessageFragment on Message {
+    id
+    question
+    content
+    reply
+    createdAt
+    updatedAt
+  }
+`);
+
+export function ReceivedMessageCard({
+  data,
+}: {
+  data: FragmentOf<typeof receivedMessageFragment>;
+}) {
+  const msg = readFragment(receivedMessageFragment, data);
+
+  return (
+    <div id={`umamin-${msg.id}`} className="w-full">
+      <Card>
+        <CardHeader className="flex px-12">
+          <p className="font-bold text-center leading-normal text-lg min-w-0 break-words">
+            {msg.question}
+          </p>
+        </CardHeader>
+        <CardContent>
+          <div
+            data-testid="received-msg-content"
+            className="flex w-full flex-col gap-2 rounded-lg p-5 whitespace-pre-wrap bg-muted break-words min-w-0"
+          >
+            {msg.content}
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-center">
+          <span className="text-muted-foreground text-sm mt-1 italic w-full text-center">
+            {formatDistanceToNow(fromUnixTime(msg.createdAt), {
+              addSuffix: true,
+            })}
+          </span>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

apps/partners/src/app/dashboard/components/received/list.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { toast } from "sonner";
+// import dynamic from "next/dynamic";
+import { graphql } from "gql.tada";
+import { useInView } from "react-intersection-observer";
+import { useCallback, useEffect, useState } from "react";
+
+import client from "@/lib/gql/client";
+import { formatError } from "@/lib/utils";
+import { Skeleton } from "@umamin/ui/components/skeleton";
+import type { ReceivedMessagesResult } from "../../queries";
+import { ReceivedMessageCard, receivedMessageFragment } from "./card";
+
+// const AdContainer = dynamic(() => import("@umamin/ui/ad"), {
+//   ssr: false,
+// });
+
+const MESSAGES_FROM_CURSOR_QUERY = graphql(
+  `
+    query ReceivedMessagesFromCursor($input: MessagesFromCursorInput!) {
+      messagesFromCursor(input: $input) {
+        __typename
+        data {
+          __typename
+          id
+          createdAt
+          ...MessageFragment
+        }
+        hasMore
+        cursor {
+          __typename
+          id
+          createdAt
+        }
+      }
+    }
+  `,
+  [receivedMessageFragment]
+);
+
+const messagesFromCursorPersisted = graphql.persisted(
+  "10ae521c718fee919520bf95d2cdc74ee1bd0d862d468ca4948ad705bb1e2909",
+  MESSAGES_FROM_CURSOR_QUERY
+);
+
+type Cursor = {
+  id: string | null;
+  createdAt: number | null;
+};
+
+export type Props = {
+  messages: ReceivedMessagesResult;
+  initialCursor: Cursor;
+};
+
+export function ReceivedMessagesList({ messages, initialCursor }: Props) {
+  const { ref, inView } = useInView();
+  const [cursor, setCursor] = useState(initialCursor);
+  const [msgs, setMsgs] = useState([] as ReceivedMessagesResult);
+
+  const [hasMore, setHasMore] = useState(messages?.length === 30);
+  const [isFetching, setIsFetching] = useState(false);
+
+  const loadMessages = useCallback(async () => {
+    if (hasMore) {
+      setIsFetching(true);
+
+      const res = await client.query(messagesFromCursorPersisted, {
+        input: {
+          type: "received",
+          cursor,
+        },
+      });
+
+      if (res.error) {
+        toast.error(formatError(res.error.message));
+        return;
+      }
+
+      const _res = res.data?.messagesFromCursor;
+
+      if (_res?.cursor) {
+        setCursor({
+          id: _res.cursor.id,
+          createdAt: _res.cursor.createdAt,
+        });
+
+        setHasMore(_res.hasMore);
+      }
+
+      if (_res?.data) {
+        setMsgs((prev) => [...prev, ...(_res.data ?? [])]);
+      }
+
+      setIsFetching(false);
+    }
+  }, [cursor, hasMore, msgs]);
+
+  useEffect(() => {
+    if (inView && !isFetching) {
+      loadMessages();
+    }
+  }, [inView]);
+
+  return (
+    <section className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3 w-full">
+      {messages?.map((msg) => (
+        <div key={msg.id}>
+          <ReceivedMessageCard data={msg} />
+
+          {/* v2-received-list 
+          {(i + 1) % 5 === 0 && (
+            <AdContainer className="mt-5" slotId="1546692714" />
+          )} */}
+        </div>
+      ))}
+
+      {msgs?.map((msg) => (
+        <div key={msg.id}>
+          <ReceivedMessageCard data={msg} />
+        </div>
+      ))}
+
+      {isFetching && <Skeleton className="w-full h-[200px] rounded-lg" />}
+      {hasMore && <div ref={ref}></div>}
+    </section>
+  );
+}

apps/partners/src/app/dashboard/components/received/messages.tsx

@@ -0,0 +1,24 @@
+import { ReceivedMessagesList } from "./list";
+import { getReceivedMessages } from "../../queries";
+
+export async function ReceivedMessages({ sessionId }: { sessionId?: string }) {
+  const messages = await getReceivedMessages(sessionId);
+
+  return (
+    <div className="flex flex-col items-center gap-5 pb-20 mt-16">
+      {!messages?.length ? (
+        <p className="text-sm text-muted-foreground mt-4">
+          No messages to show
+        </p>
+      ) : (
+        <ReceivedMessagesList
+          messages={messages}
+          initialCursor={{
+            id: messages[messages.length - 1]?.id ?? null,
+            createdAt: messages[messages.length - 1]?.createdAt ?? null,
+          }}
+        />
+      )}
+    </div>
+  );
+}

apps/partners/src/app/dashboard/page.tsx

@@ -1,10 +1,18 @@
 import { getSession } from "@/lib/auth";
+import { redirect } from "next/navigation";
+import { ReceivedMessages } from "./components/received/messages";
 
 export default async function Dashboard() {
-  const { user } = await getSession();
+  const { user, session } = await getSession();
+
+  if (!session) {
+    redirect("/login");
+  }
+
   return (
-    <div className="max-w-screen-xl mx-auto mt-32 container">
+    <div className="max-w-screen-2xl mx-auto mt-32 container">
       <h1 className="text-4xl">Hello, {user?.displayName || user?.username}</h1>
+      <ReceivedMessages sessionId={session?.id} />
     </div>
   );
 }