Merge branch 'feature/realtime-chat-image-upload-optimization' into d…

…evelop

src/features/messages/api/post-image.ts

@@ -0,0 +1,27 @@
+import { createId } from "@paralleldrive/cuid2";
+
+import { supabase } from "@/utils/supabase-client";
+
+export const postImage = async (file: File, bucket: string) => {
+ try {
+ const imagePath = createId();
+
+ const { error } = await supabase.storage
+ .from(bucket)
+ .upload(`${bucket}-${imagePath}`, file, {
+ cacheControl: "3600",
+ upsert: false,
+ });
+ if (error) {
+ throw new Error(error.message);
+ } else {
+ const { data: mediaUrl } = supabase.storage
+ .from(bucket)
+ .getPublicUrl(`${bucket}-${imagePath}`);
+
+ return { url: mediaUrl?.publicUrl };
+ }
+ } catch (error: unknown) {
+ throw new Error("Error uploading image");
+ }
+};

src/features/messages/components/chat.tsx

@@ -14,8 +14,6 @@ import { scrollIntoView } from "../utils/scroll-into-view";
 
 import { Message } from "./message";
 
-export type status = "sending" | "sent" | "seen" | "failed";
-
 export const Chat = memo(() => {
  const pathname = usePathname();
  const conversation_id = pathname?.split("/")[2];
@@ -85,40 +83,42 @@ export const Chat = memo(() => {
  if (isError) return <TryAgain />;
 
  return (
- <div className="p-[1em_1em_0]">
- {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
- }
- key={message.id}
- >
- <Message
- show_status={
- message.sender_id === session?.user?.id &&
- messageIndex === page.chat.length - 1 &&
- pageIndex === data.pages.length - 1
+ <div>
+ <div className="p-[1em_1em_0]">
+ {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
  }
- message={message}
- />
- </div>
- );
- });
- })}
- <div id="anchor" ref={anchorRef} />
+ 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} />
+ </div>
 
  {toast === "new message" && (
  <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"
+ className="shadow-main absolute bottom-20 left-1/2 translate-x-1/2 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}
  >
  ↓ New messages
@@ -133,7 +133,7 @@ export const Chat = memo(() => {
  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-20 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"
  >
  <ArrowDownIcon />
  </Button>

src/features/messages/components/conversation-member-details.tsx

@@ -44,7 +44,7 @@ export const ConversationMemberDetails = ({
  <span>{user?.followers?.length ?? 0} Followers</span>
  </div>
 
- <p className="mb-[4rem] text-nano text-tertiary-100">
+ <p className="mb-16 text-nano text-tertiary-100">
  Not followed by anyone you&apos;re following
  </p>
  </Link>

src/features/messages/components/conversation.tsx

@@ -53,7 +53,7 @@ export const Conversation = () => {
  );
 
  return (
- <div className="relative grid h-[100svh] grid-rows-[auto,1fr,auto] overflow-hidden">
+ <div className="relative grid h-svh grid-rows-[auto,1fr,auto] overflow-hidden">
  <ConversationHeader
  user_id={conversationMember?.id}
  user_name={conversationMember?.name}