davitJabushanuri · davitJabushanuri · Mar 26, 2024 · Mar 8, 2024 · Mar 9, 2024 · Mar 9, 2024
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "chirp",
  "description": "Chirp is a social media app built with Next.js, Prisma, and Supabase",
- "version": "1.9.5",
+ "version": "1.9.6",
  "private": true,
  "scripts": {
  "start": "next start",

diff --git a/src/app/api/messages/chat/route.ts b/src/app/api/messages/chat/route.ts
@@ -6,6 +6,11 @@ import { prisma } from "@/lib/prisma";
 export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const conversation_id = searchParams.get("conversation_id") as string;
+ const cursorQuery = searchParams.get("cursor") || undefined;
+ const take = Number(searchParams.get("limit")) || 20;
+
+ const skip = cursorQuery ? 1 : 0;
+ const cursor = cursorQuery ? { id: cursorQuery } : undefined;
 
  const messageSchema = z.string();
  const zod = messageSchema.safeParse(conversation_id);
@@ -16,12 +21,24 @@ export async function GET(request: Request) {
 
  try {
  const chat = await prisma.message.findMany({
+ skip,
+ take,
+ cursor,
  where: {
  conversation_id: conversation_id,
  },
+
+ orderBy: {
+ created_at: "desc",
+ },
  });
 
- return NextResponse.json(chat, { status: 200 });
+ const nextId = chat.length < take ? undefined : chat[chat.length - 1].id;
+
+ return NextResponse.json({
+ chat,
+ nextId,
+ });
  } catch (error: any) {
  return NextResponse.json({ error: error.message }, { status: 500 });
  }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,8 +9,7 @@ import { AuthFlow } from "@/features/auth";
 import { MobileTweetButton } from "@/features/create-tweet";
 import { MobileNavbar } from "@/features/navbar";
 import { Sidebar } from "@/features/sidebar";
-import { NextAuthProvider } from "@/utils/next-auth-provider";
-import { ReactQueryProvider } from "@/utils/react-query-provider";
+import { AppProviders } from "@/providers";
 
 import { Hamburger } from "./hamburger";
 import { JoinTwitter } from "./join-twitter";
@@ -35,40 +34,38 @@ export default async function RootLayout({
  lang="en"
  >
  <body suppressHydrationWarning={true}>
- <NextAuthProvider>
- <ReactQueryProvider>
- <div className="layout">
- <MobileNavbar />
- <div className="fixed bottom-20 right-4 z-fixed sm:hidden">
- <MobileTweetButton />
- </div>
+ <AppProviders>
+ <div className="layout">
+ <MobileNavbar />
+ <div className="fixed bottom-20 right-4 z-fixed sm:hidden">
+ <MobileTweetButton />
+ </div>
 
-  <Sidebar />
+ <Sidebar />
 
-  <main aria-label="Home timeline" id="home-timeline">
-  {children}
-  </main>
+ <main aria-label="Home timeline" id="home-timeline">
+ {children}
+ </main>
 
-  <Aside />
+ <Aside />
 
-  <ToastContainer
-  position="bottom-center"
-  autoClose={2000}
-  hideProgressBar={true}
-  transition={Slide}
-  closeButton={false}
-  closeOnClick={true}
-  className={styles.container}
-  toastClassName={styles.toast}
-  role="alert"
-  />
+ <ToastContainer
+ position="bottom-center"
+ autoClose={2000}
+ hideProgressBar={true}
+ transition={Slide}
+ closeButton={false}
+ closeOnClick={true}
+ className={styles.container}
+ toastClassName={styles.toast}
+ role="alert"
+ />
 
- <AuthFlow />
- <JoinTwitter />
- <Hamburger />
- </div>
- </ReactQueryProvider>
- </NextAuthProvider>
+ <AuthFlow />
+ <JoinTwitter />
+ <Hamburger />
+ </div>
+ </AppProviders>
  </body>
  </html>
  );

diff --git a/src/features/messages/api/get-chat.ts b/src/features/messages/api/get-chat.ts
@@ -1,9 +1,17 @@
 import axios from "axios";
 
-export const getChat = async (conversation_id: string | undefined) => {
+export const getChat = async ({
+ conversation_id,
+ pageParam,
+ limit,
+}: {
+ conversation_id: string | undefined;
+ pageParam: string | unknown;
+ limit: number;
+}) => {
  try {
  const { data } = await axios.get(
- `/api/messages/chat?conversation_id=${conversation_id}`,
+ `/api/messages/chat?conversation_id=${conversation_id}&cursor=${pageParam}&limit=${limit}`,
  );
  return data;
  } catch (error: any) {

diff --git a/src/features/messages/components/chat.tsx b/src/features/messages/components/chat.tsx
@@ -1,5 +1,6 @@
+import { usePathname } from "next/navigation";
 import { useSession } from "next-auth/react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useInView } from "react-intersection-observer";
 
 import { Button } from "@/components/elements/button";
@@ -15,95 +16,130 @@ import { Message } from "./message";
 
 export type status = "sending" | "sent" | "seen" | "failed";
 
-export const Chat = ({
- conversation_id,
-}: {
- conversation_id: string | undefined;
-}) => {
- const { ref, inView } = useInView({
- threshold: 0,
- });
+export const Chat = memo(() => {
+ const pathname = usePathname();
+ const conversation_id = pathname?.split("/")[2];
+
+ const { data: session } = useSession();
+ const {
+ data,
+ isLoading,
+ isError,
+ hasNextPage,
+ isFetchingNextPage,
+ fetchNextPage,
+ } = useChat(conversation_id);
+
+ const isLastMessageSender = useMemo(
+ () => data?.pages.at(-1)?.chat?.at(-1)?.sender_id === session?.user?.id,
+ [data, session],
+ );
+
  const anchorRef = useRef<HTMLDivElement | null>(null);
+ const [toast, setToast] = useState<
+ "new message" | "scroll to bottom" | "none"
+ >("none");
 
- const [scrolledToBottom, setScrolledToBottom] = useState(false);
- const [displayNewMessageToast, setDisplayNewMessageToast] = useState(false);
+ const { ref: firstMessageRef } = useInView({
+ initialInView: false,
+ onChange(inView) {
+ if (inView && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ setToast("scroll to bottom");
+ }
+ },
+ });
 
- const { data: session } = useSession();
- const { data: chat, isLoading, isError } = useChat(conversation_id);
+ const { ref: lastMessageRef, inView: lastMessageInView } = useInView({
+ initialInView: true,
+ });
+
+ const handleToastClick = useCallback(() => {
+ scrollIntoView({
+ element: anchorRef.current,
+ });
+ setToast("none");
+ }, []);
 
  useSocketEvents(conversation_id);
 
  useEffect(() => {
- if (inView) {
- setScrolledToBottom(true);
- } else {
- setScrolledToBottom(false);
- }
- }, [inView]);
+ if (lastMessageInView) {
+ setToast("none");
+ } else setToast("scroll to bottom");
+ }, [lastMessageInView]);
 
- useLayoutEffect(() => {
- if (!scrolledToBottom) {
+ useEffect(() => {
+ if (lastMessageInView) {
  scrollIntoView({
  element: anchorRef.current,
- behavior: "instant",
  });
- } else {
- if (
- chat &&
- chat?.length > 0 &&
- chat[chat.length - 1]?.sender_id !== session?.user?.id
- )
- setDisplayNewMessageToast(true);
+ } else if (!isLastMessageSender) {
+ setToast("new message");
  }
- }, [chat]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [data]);
 
  if (isLoading) return <LoadingSpinner />;
 
  if (isError) return <TryAgain />;
 
  return (
  <div className="p-[1em_1em_0]">
- {chat?.map((message, index) => {
- return (
- <div key={message?.id} ref={index === chat.length - 1 ? ref : null}>
- <Message
- message={message}
- show_status={
- index === chat.length - 1 &&
- message.sender_id === session?.user?.id
+ {isFetchingNextPage && <LoadingSpinner />}
+
+ {data?.pages?.map((page, pageIndex) => {
+ return page?.chat?.map((message, messageIndex) => {
+ return (
+ <div
+ ref={
+ messageIndex === 0 && pageIndex === 0
+ ? firstMessageRef
+ : messageIndex === page.chat.length - 1 &&
+ pageIndex === data.pages.length - 1
+ ? lastMessageRef
+ : null
  }
- />
- </div>
- );
+ key={message.id}
+ >
+ <Message
+ show_status={
+ message.sender_id === session?.user?.id &&
+ messageIndex === page.chat.length - 1 &&
+ pageIndex === data.pages.length - 1
+ }
+ message={message}
+ />
+ </div>
+ );
+ });
  })}
  <div id="anchor" ref={anchorRef} />
- {!scrolledToBottom && !displayNewMessageToast && (
+
+ {toast === "new message" && (
  <Button
- onClick={() => {
- scrollIntoView({
- element: anchorRef.current,
- behavior: "smooth",
- });
- }}
- className="shadow-main absolute bottom-[5rem] right-[1.6rem] bg-background fill-primary-100 px-[1em] py-[0.5em] hover:bg-neutral-500 focus-visible:bg-neutral-500 focus-visible:outline-secondary-100/50 active:bg-neutral-600"
+ className="shadow-main absolute bottom-[5rem] left-[50%] translate-x-[-50%] bg-background px-[1em] py-[0.5em] text-milli font-bold text-primary-100 hover:bg-neutral-500 focus-visible:bg-neutral-500 focus-visible:outline-secondary-100/50 active:bg-neutral-600"
+ onClick={handleToastClick}
  >
- <ArrowDownIcon />
+ ↓ New messages
  </Button>
  )}
 
- {displayNewMessageToast && (
+ {toast === "scroll to bottom" && (
  <Button
- className="shadow-main absolute bottom-[5rem] left-[50%] translate-x-[-50%] bg-background px-[1em] py-[0.5em] text-milli font-bold text-primary-100 hover:bg-neutral-500 focus-visible:bg-neutral-500 focus-visible:outline-secondary-100/50 active:bg-neutral-600"
  onClick={() => {
  scrollIntoView({
  element: anchorRef.current,
+ behavior: "smooth",
  });
- setDisplayNewMessageToast(false);
  }}
+ className="shadow-main absolute bottom-[5rem] right-[1.6rem] bg-background fill-primary-100 px-[1em] py-[0.5em] hover:bg-neutral-500 focus-visible:bg-neutral-500 focus-visible:outline-secondary-100/50 active:bg-neutral-600"
  >
- ↓ New messages
+ <ArrowDownIcon />
  </Button>
  )}
  </div>
  );
-};
+});
+
+Chat.displayName = "Chat";
diff --git a/src/features/messages/components/conversation.tsx b/src/features/messages/components/conversation.tsx
@@ -29,10 +29,10 @@ export const Conversation = () => {
 
  useEffect(() => {
  socket.auth = { conversation_id: id };
- socket.connect();
+ socket?.connect();
 
  return () => {
- socket.disconnect();
+ socket?.disconnect();
  };
  }, [id]);
 
@@ -65,7 +65,7 @@ export const Conversation = () => {
  <div ref={ref}>
  <ConversationMemberDetails user={conversationMember} />
  </div>
- <Chat conversation_id={conversation?.id} />
+ <Chat />
  </div>
 
  <MessageInput