release: v2.0.2

Improve response cache
omsimos · Jul 3, 2024 · 354e2e8 · 354e2e8
2 parents 0b3bd78 + dc3f90a
commit 354e2e8
Show file tree

Hide file tree

Showing 17 changed files with 161 additions and 108 deletions.
diff --git a/apps/www/src/app/api/graphql/route.ts b/apps/www/src/app/api/graphql/route.ts
@@ -35,9 +35,17 @@ const { handleRequest } = createYoga({
     }),
     useResponseCache({
       session: () => cookies().get(lucia.sessionCookieName)?.value,
+      invalidateViaMutation: false,
+      scopePerSchemaCoordinate: {
+        "Query.user": "PRIVATE",
+        "Query.note": "PRIVATE",
+        "Query.messages": "PRIVATE",
+        "Query.messagesFromCursor": "PRIVATE",
+      },
       ttl: 5_000,
-      ttlPerType: {
-        Note: 10_000,
+      ttlPerSchemaCoordinate: {
+        "Query.notes": 30_000,
+        "Query.notesFromCursor": 30_000,
       },
     }),
     useDisableIntrospection({

diff --git a/apps/www/src/app/inbox/components/received/messages.tsx b/apps/www/src/app/inbox/components/received/messages.tsx
@@ -7,21 +7,12 @@ import { getClient } from "@/lib/gql/rsc";
 import { ReceivedMessagesList } from "./list";
 import { RECEIVED_MESSAGES_QUERY } from "../../queries";
 
-const getMessages = async () => {
+export async function ReceivedMessages() {
   const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
-  if (!sessionId) {
-    return null;
-  }
-
-  const res = await getClient(sessionId).query(RECEIVED_MESSAGES_QUERY, {
+  const result = await getClient(sessionId).query(RECEIVED_MESSAGES_QUERY, {
     type: "received",
   });
 
-  return res;
-};
-
-export async function ReceivedMessages() {
-  const result = await getMessages();
   const messages = result?.data?.messages;
 
   return (

diff --git a/apps/www/src/app/inbox/components/sent/messages.tsx b/apps/www/src/app/inbox/components/sent/messages.tsx
@@ -7,22 +7,11 @@ import { getClient } from "@/lib/gql/rsc";
 import { SentMessagesList } from "./list";
 import { SENT_MESSAGES_QUERY } from "../../queries";
 
-const getMessages = async () => {
+export async function SentMessages() {
   const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
-
-  if (!sessionId) {
-    return null;
-  }
-
-  const res = await getClient(sessionId).query(SENT_MESSAGES_QUERY, {
+  const result = await getClient(sessionId).query(SENT_MESSAGES_QUERY, {
     type: "sent",
   });
-
-  return res;
-};
-
-export async function SentMessages() {
-  const result = await getMessages();
   const messages = result?.data?.messages;
 
   return (

diff --git a/apps/www/src/app/login/loading.tsx b/apps/www/src/app/login/loading.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@umamin/ui/components/skeleton";
 
 export default function Loading() {
   return (
-    <section className="max-w-lg md:max-w-md container mt-36 [&>div]:gap-3 [&>div]:flex [&>div]:flex-col flex gap-8 flex-col">
+    <div className="max-w-lg md:max-w-md container mt-36 [&>div]:gap-3 [&>div]:flex [&>div]:flex-col flex gap-8 flex-col">
       <div>
         <Skeleton className="w-2/5 h-[25px] rounded-md" />
         <Skeleton className="w-1/2 h-[10px] rounded-md" />
@@ -23,6 +23,6 @@ export default function Loading() {
         <Skeleton className="w-full h-[30px] rounded-md" />
         <Skeleton className="mx-auto w-1/2 h-[10px] rounded-md" />
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/apps/www/src/app/notes/components/form.tsx b/apps/www/src/app/notes/components/form.tsx
@@ -2,7 +2,6 @@
 
 import { toast } from "sonner";
 import { graphql } from "gql.tada";
-import { useRouter } from "next/navigation";
 import { logEvent } from "firebase/analytics";
 import { Loader2, Sparkles } from "lucide-react";
 import { FormEventHandler, useState } from "react";
@@ -13,11 +12,12 @@ import { CurrentNoteQueryResult } from "../queries";
 
 import { formatError } from "@/lib/utils";
 import { analytics } from "@/lib/firebase";
+import { SelectUser } from "@umamin/db/schema/user";
+import { useNoteStore } from "@/store/useNoteStore";
 import { Label } from "@umamin/ui/components/label";
 import { Button } from "@umamin/ui/components/button";
 import { Switch } from "@umamin/ui/components/switch";
 import { Textarea } from "@umamin/ui/components/textarea";
-import { SelectUser } from "@umamin/db/schema/user";
 
 const UPDATE_NOTE_MUTATION = graphql(`
   mutation UpdateNote($content: String!, $isAnonymous: Boolean!) {
@@ -42,17 +42,16 @@ type Props = {
 };
 
 export function NoteForm({ user, currentNote }: Props) {
-  const router = useRouter();
   const [content, setContent] = useState("");
   const [isFetching, setIsFetching] = useState(false);
   const [isAnonymous, setIsAnonymous] = useState(false);
 
-  const [noteContent, setNoteContent] = useState(currentNote?.content);
-  const [anonymous, setAnonymous] = useState(currentNote?.isAnonymous ?? false);
-  const [updatedAt, setUpdatedAt] = useState(currentNote?.updatedAt);
+  const updatedNote = useNoteStore((state) => state.note);
+  const clearNote = useNoteStore((state) => state.clear);
+  const updateNote = useNoteStore((state) => state.update);
+  const isCleared = useNoteStore((state) => state.isCleared);
 
   const onClearNote = async () => {
-    if (!currentNote) return;
     setIsFetching(true);
 
     const res = await client.mutation(DELETE_NOTE_MUTATION, {});
@@ -63,7 +62,7 @@ export function NoteForm({ user, currentNote }: Props) {
       return;
     }
 
-    setNoteContent("");
+    clearNote();
     toast.success("Note cleared");
 
     setIsFetching(false);
@@ -92,16 +91,12 @@ export function NoteForm({ user, currentNote }: Props) {
     }
 
     if (res.data) {
-      setNoteContent(content);
       setContent("");
-      setUpdatedAt(res?.data?.updateNote?.updatedAt);
-      setAnonymous(res.data.updateNote.isAnonymous);
+      updateNote(res.data.updateNote);
       toast.success("Note updated");
     }
 
     setIsFetching(false);
-    router.refresh();
-
     logEvent(analytics, "update_note");
   };
 
@@ -116,7 +111,7 @@ export function NoteForm({ user, currentNote }: Props) {
           required
           value={content}
           onChange={(e) => setContent(e.target.value)}
-          maxLength={1000}
+          maxLength={500}
           placeholder="How's your day going?"
           className="focus-visible:ring-transparent text-base max-h-[500px]"
           autoComplete="off"
@@ -151,16 +146,26 @@ export function NoteForm({ user, currentNote }: Props) {
         </div>
       </form>
 
-      {noteContent && (
+      {currentNote && !isCleared && (
         <div className="border-b-2 border-muted border-dashed mb-5 pb-5">
           <p className="text-sm font-medium mb-2 container">Your note</p>
           <NoteCard
-            note={{
-              ...currentNote,
-              isAnonymous: anonymous,
-              content: noteContent,
-              updatedAt,
+            note={!!updatedNote ? updatedNote : currentNote}
+            user={{
+              displayName: user.displayName,
+              username: user.username,
+              imageUrl: user.imageUrl,
             }}
+            menuItems={menuItems}
+          />
+        </div>
+      )}
+
+      {!currentNote && updatedNote && (
+        <div className="border-b-2 border-muted border-dashed mb-5 pb-5">
+          <p className="text-sm font-medium mb-2 container">Your note</p>
+          <NoteCard
+            note={updatedNote}
             user={{
               displayName: user.displayName,
               username: user.username,

diff --git a/apps/www/src/app/notes/page.tsx b/apps/www/src/app/notes/page.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { cache } from "react";
 import dynamic from "next/dynamic";
 import { cookies } from "next/headers";
 import { SquarePen } from "lucide-react";
@@ -44,12 +43,7 @@ export const metadata = {
   },
 };
 
-const getNotes = cache(async () => {
-  const res = await getClient().query(NOTES_QUERY, {});
-  return res;
-});
-
-const getCurrentNote = cache(async () => {
+const getCurrentNote = async () => {
   const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
   if (!sessionId) {
     return null;
@@ -58,11 +52,11 @@ const getCurrentNote = cache(async () => {
   const res = await getClient(sessionId).query(CURRENT_NOTE_QUERY, {});
 
   return res;
-});
+};
 
 export default async function Page() {
   const { user } = await getSession();
-  const notesResult = await getNotes();
+  const notesResult = await getClient().query(NOTES_QUERY, {});
   const currentNoteResult = await getCurrentNote();
 
   const notes = notesResult.data?.notes;

diff --git a/apps/www/src/app/register/loading.tsx b/apps/www/src/app/register/loading.tsx
@@ -2,33 +2,43 @@ import { Skeleton } from "@umamin/ui/components/skeleton";
 
 export default function Loading() {
   return (
-    <section className="max-w-lg md:max-w-md container mt-36 [&>div]:gap-3 [&>div]:flex [&>div]:flex-col flex gap-8 flex-col">
-      <div>
-        <Skeleton className="w-2/5 h-[25px] rounded-md" />
-        <Skeleton className="w-1/2 h-[10px] rounded-md" />
-      </div>
+    <div className="container max-w-xl lg:mt-36 mt-28 mx-auto ">
+      <div className="flex flex-col gap-4">
+        <div className="flex gap-3">
+          <Skeleton className="size-16 md:size-20 rounded-full" />
 
-      <div>
-        <Skeleton className="w-1/5 h-[10px] rounded-md" />
-        <Skeleton className="w-full h-[30px] rounded-md" />
-        <Skeleton className="w-1/2 h-[10px] rounded-md" />
-      </div>
+          <div className="flex flex-col gap-2">
+            <Skeleton className="h-[20px] w-[80px] rounded-md" />
+            <Skeleton className="h-[15px] w-[50px] rounded-md" />
+          </div>
+        </div>
 
-      <div>
-        <Skeleton className="w-1/5 h-[10px] rounded-md" />
-        <Skeleton className="w-full h-[30px] rounded-md" />
-      </div>
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-1 items-center">
+            <Skeleton className="size-[15px] rounded-full" />
+            <Skeleton className="h-[10px] w-[130px] rounded-md" />
+          </div>
 
-      <div>
-        <Skeleton className="w-2/6 h-[10px] rounded-md" />
-        <Skeleton className="w-full h-[30px] rounded-md" />
+          <div className="flex gap-1 items-center">
+            <Skeleton className="size-[15px] rounded-full" />
+            <Skeleton className="h-[10px] w-[130px] rounded-md" />
+          </div>
+        </div>
       </div>
 
-      <div>
-        <Skeleton className="w-full h-[30px] rounded-md" />
-        <Skeleton className="w-full h-[30px] rounded-md" />
-        <Skeleton className="mx-auto w-1/2 h-[10px] rounded-md" />
+      <div className="space-y-5 mt-8">
+        <div>
+          <div className="flex justify-around">
+            <Skeleton className="h-[15px] w-[90px] rounded-md" />
+            <Skeleton className="h-[15px] w-[90px] rounded-md" />
+          </div>
+
+          <Skeleton className="w-full h-[2px] rounded-md mt-2" />
+        </div>
+
+        <Skeleton className="w-full h-[200px] rounded-md" />
+        <Skeleton className="w-full h-[200px] rounded-md" />
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/apps/www/src/app/settings/page.tsx b/apps/www/src/app/settings/page.tsx
@@ -1,4 +1,3 @@
-import { cache } from "react";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -42,25 +41,15 @@ export const metadata = {
   },
 };
 
-const getCurrentUser = cache(async () => {
-  const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
-  if (!sessionId) {
-    return null;
-  }
-
-  const res = await getClient(sessionId).query(CURRENT_USER_QUERY, {});
-
-  return res;
-});
-
 export default async function Settings() {
   const { user } = await getSession();
 
   if (!user) {
     redirect("/login");
   }
 
-  const result = await getCurrentUser();
+  const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
+  const result = await getClient(sessionId).query(CURRENT_USER_QUERY, {});
   const userData = result?.data?.user;
 
   const tabsData = [

diff --git a/apps/www/src/app/to/[username]/components/chat-form.tsx b/apps/www/src/app/to/[username]/components/chat-form.tsx
@@ -7,6 +7,7 @@ import { analytics } from "@/lib/firebase";
 import { Loader2, Send } from "lucide-react";
 import { logEvent } from "firebase/analytics";
 
+import { cn } from "@umamin/ui/lib/utils";
 import { formatError } from "@/lib/utils";
 import { client } from "@/lib/gql/client";
 import { Input } from "@umamin/ui/components/input";
@@ -76,7 +77,9 @@ export function ChatForm({ currentUserId, user }: Props) {
   }
 
   return (
-    <div className="flex flex-col justify-between px-5 sm:px-7 pt-10 pb-8 min-h-[350px] h-full">
+    <div className={cn(
+      "flex flex-col justify-between px-5 sm:px-7 pt-10 pb-8 h-full", user?.quietMode ? "min-h-[250px]" : "min-h-[350px]"
+    )}>
       <ChatList
         imageUrl={user?.imageUrl}
         question={user?.question ?? ""}
@@ -96,7 +99,7 @@ export function ChatForm({ currentUserId, user }: Props) {
             id="message"
             required
             disabled={isFetching}
-            maxLength={1000}
+            maxLength={500}
             value={content}
             onChange={(e) => setContent(e.target.value)}
             placeholder="Type your message..."

diff --git a/apps/www/src/app/to/[username]/page.tsx b/apps/www/src/app/to/[username]/page.tsx
@@ -101,7 +101,7 @@ export default async function SendMessage({
             <p className="text-muted-foreground text-sm">@{user.username}</p>
           </ProfileHoverCard> */}
 
-            <span className="font-semibold text-muted-foreground pb-2">
+            <span className="font-medium text-muted-foreground pb-2">
               umamin
             </span>
           </CardHeader>

diff --git a/apps/www/src/store/useNoteStore.tsx b/apps/www/src/store/useNoteStore.tsx
@@ -0,0 +1,28 @@
+import { create } from "zustand";
+import { CurrentNoteQueryResult } from "@/app/notes/queries";
+
+type NoteData = Partial<CurrentNoteQueryResult> | null;
+
+type State = {
+  note: NoteData;
+  isCleared: boolean;
+};
+
+type Action = {
+  // eslint-disable-next-line no-unused-vars
+  update: (data: NoteData) => void;
+  clear: () => void;
+};
+
+export const useNoteStore = create<State & Action>((set) => ({
+  note: null,
+  isCleared: false,
+
+  clear: () => set({ note: null, isCleared: true }),
+
+  update: (data) =>
+    set({
+      note: data,
+      isCleared: false,
+    }),
+}));