Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: edit messages #650

Merged
merged 4 commits into from
Nov 5, 2024
Merged

feat: edit messages #650

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90da0d6
feat: edit messages
FleetAdmiralJakob Nov 5, 2024
2106446
chore: made code more readable and resolved all review comments
FleetAdmiralJakob Nov 5, 2024
d4d76c6
chore: made code more readable and resolved all review comments
FleetAdmiralJakob Nov 5, 2024
20fa45f
fix: weird format issues
FleetAdmiralJakob Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 34 additions & 4 deletions convex/messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,15 @@ export const createMessage = mutation({
);
}

if (args.content.trim() === "") throw new Error("Post cannot be empty");
if (args.content.trim() === "") throw new Error("Message cannot be empty");
FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved

await ctx.table("messages").insert({
userId: convexUser._id,
privateChatId: parsedChatId,
content: args.content.trim(),
deleted: false,
readBy: [convexUser._id],
modified: false,
});
},
});
Expand All @@ -121,16 +122,17 @@ export const deleteMessage = mutation({
}

const message = await ctx.table("messages").getX(parsedMessageId);
const chatId = message.privateChatId;
const chat = await ctx.table("privateChats").getX(chatId);
const usersInChat = await chat.edge("users");

if ((await message.edge("user")).clerkId !== identity.tokenIdentifier) {
throw new ConvexError(
"UNAUTHORIZED REQUEST: User tried to delete a message from another person.",
);
}

const chatId = message.privateChatId;
const chat = await ctx.table("privateChats").getX(chatId);
const usersInChat = await chat.edge("users");

FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved
await message.patch({
content: "",
deleted: true,
Expand Down Expand Up @@ -177,3 +179,31 @@ export const markMessageRead = mutation({
return { success: true };
},
});

export const editMessage = mutation({
args: { messageId: v.id("messages"), newContent: v.string() },
handler: async (ctx, args) => {
if (args.newContent.trim() === "")
throw new Error("Message cannot be empty");
FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved

const identity = await ctx.auth.getUserIdentity();

if (identity === null) {
console.error("Unauthenticated call to mutation");
return null;
}

const message = await ctx.table("messages").getX(args.messageId);

if ((await message.edge("user")).clerkId !== identity.tokenIdentifier) {
throw new ConvexError(
"UNAUTHORIZED REQUEST: User tried to edit a message from another person.",
);
}
FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved

await message.patch({
content: args.newContent.trim(),
modified: true,
});
FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved
},
});
FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved
1 change: 1 addition & 0 deletions convex/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const schema = defineEntSchema({
messages: defineEnt({})
.field("content", v.string())
.field("deleted", v.boolean(), { default: false })
.field("modified", v.boolean(), { default: false })
.edge("privateChat")
.edge("user")
.edges("readBy", {
Expand Down
152 changes: 134 additions & 18 deletions src/app/(internal-sites)/chats/[chatId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
Plus,
SendHorizontal,
Video,
X,
} from "lucide-react";
import { useRouter } from "next/navigation";
import React, { use, useCallback, useEffect, useRef, useState } from "react";
Expand Down Expand Up @@ -82,7 +83,7 @@ const useScrollBehavior = (
const { scrollTop, scrollHeight, clientHeight } = messagesEndRef.current;
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;

// Consider "near bottom" if within 100px of bottom
// Consider "near bottom" if within 100 px of the bottom
const nearBottom = distanceFromBottom < 100;
setIsNearBottom(nearBottom);
}
Expand Down Expand Up @@ -121,13 +122,16 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
const params = use(props.params);
const [progress, setProgress] = React.useState(13);

const [editingMessageId, setEditingMessageId] =
useState<Id<"messages"> | null>(null);

const [selectedMessageId, setSelectedMessageId] = useState<string | null>(
null,
);

const router = useRouter();

React.useEffect(() => {
useEffect(() => {
const timer = setTimeout(() => setProgress(66), 500);
return () => clearTimeout(timer);
}, []);
Expand Down Expand Up @@ -159,6 +163,7 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
from: userInfo.data,
readBy: [userInfo.data],
sent: false,
modified: false,
};
localStore.setQuery(api.messages.getMessages, { chatId }, [
...(Array.isArray(existingMessages) ? existingMessages : []),
Expand All @@ -184,6 +189,65 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
}
});

const editMessage = useMutation(
api.messages.editMessage,
).withOptimisticUpdate((localStore, args) => {
const chatId: Id<"privateChats"> = params.chatId as Id<"privateChats">;
const newContent = args.newContent;

const existingMessages = localStore.getQuery(api.messages.getMessages, {
chatId,
});
const existingChats = localStore.getQuery(api.chats.getChats);
// If we've loaded the api.messages.getMessages and api.chats.getChats query, push an optimistic message
// onto the lists.
if (existingMessages && existingChats) {
localStore.setQuery(
api.messages.getMessages,
{ chatId },
existingMessages.map((message) => {
if (message.type === "message" && message._id === args.messageId) {
return {
...message,
content: newContent,
modified: true,
};
} else {
return message;
}
}),
);

const lastMessage = existingChats?.find(
(chat) => chat._id === chatId,
)?.lastMessage;

if (
lastMessage?._id === args.messageId &&
lastMessage.type === "message"
) {
localStore.setQuery(
api.chats.getChats,
{},
existingChats.map((chat) => {
if (chat._id === chatId) {
return {
...chat,
lastMessage: {
...lastMessage,
newContent,
modified: true,
},
};
} else {
return chat;
}
}),
);
}
}
});
FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved

const userInfo = useQueryWithStatus(api.users.getUserData, {});

const messages = useQueryWithStatus(api.messages.getMessages, {
Expand All @@ -207,9 +271,9 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
}
}, [userInfo, messages, chatInfo, router]);

const is2xlOrmore = useMediaQuery({ query: "(max-width: 1537px)" });
const maxSize = is2xlOrmore ? 50 : 60;
const minSize = is2xlOrmore ? 45 : 30;
const is2xlOrMore = useMediaQuery({ query: "(max-width: 1537px)" });
const maxSize = is2xlOrMore ? 50 : 60;
const minSize = is2xlOrMore ? 45 : 30;

const textMessageForm = useForm<z.infer<typeof textMessageSchema>>({
resolver: zodResolver(textMessageSchema),
Expand All @@ -221,6 +285,21 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
const [animationInput, setAnimationInput] = useState(true);

const formRef = useRef<HTMLFormElement | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null);

useEffect(() => {
if (editingMessageId) {
const message = messages.data?.find((message) => {
return message._id === editingMessageId;
});
if (message && message.type === "message") {
setInputValue(message.content);
inputRef.current?.focus();
} else {
console.error("Message not found");
}
}
}, [editingMessageId, messages.data]);
FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved

const [inputValue, setInputValue] = useState("");

Expand All @@ -231,7 +310,26 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
async function onTextMessageFormSubmit(
values: z.infer<typeof textMessageSchema>,
) {
void sendMessage({ content: values.message, chatId: params.chatId });
if (editingMessageId) {
const message = messages.data?.find((message) => {
return message._id === editingMessageId;
});

if (
!(
message?.type === "message" &&
message.content === values.message.trim()
)
) {
void editMessage({
newContent: values.message,
messageId: editingMessageId,
});
}
setEditingMessageId(null);
} else {
void sendMessage({ content: values.message, chatId: params.chatId });
}
FleetAdmiralJakob marked this conversation as resolved.
Show resolved Hide resolved
textMessageForm.reset();
setInputValue("");
scrollToBottom();
Expand Down Expand Up @@ -283,7 +381,7 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
<div className="flex h-20 w-full items-center justify-between bg-primary py-6">
<div className="text-lg lg:hidden">
<ChevronLeft
className="ml-2 mr-1"
className="ml-2 mr-1 cursor-pointer"
onClick={() => {
router.back();
}}
Expand Down Expand Up @@ -371,6 +469,7 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
<Message
selectedMessageId={selectedMessageId}
setSelectedMessageId={setSelectedMessageId}
setEditingMessageId={setEditingMessageId}
message={message}
/>
</React.Fragment>
Expand Down Expand Up @@ -403,10 +502,10 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
</div>

<div className="flex h-28 w-full items-center justify-start bg-primary p-4 pb-10 lg:h-24 lg:pb-4">
<div className="flex w-full justify-between">
<div className="flex w-full justify-between gap-8">
<Form {...textMessageForm}>
<form
className="w-10/12"
className="w-full"
ref={formRef}
onSubmit={textMessageForm.handleSubmit(
onTextMessageFormSubmit,
Expand All @@ -422,14 +521,17 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
control={textMessageForm.control}
render={({ field }) => (
<Input
className="ml-4 h-11 w-10/12 rounded-2xl border-2 border-secondary-foreground bg-secondary p-2 lg:h-16"
className="h-11 w-full rounded-2xl border-2 border-secondary-foreground bg-secondary p-2 lg:h-16"
placeholder="Message ..."
value={inputValue}
onChange={(e) => {
handleChange(e);
field.onChange(e);
}}
ref={field.ref}
ref={(e) => {
field.ref(e);
inputRef.current = e;
}}
/>
)}
/>
Expand All @@ -438,13 +540,26 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
/>
</form>
</Form>
<div className="flex items-center">
<div className="flex items-center gap-8">
<Mic
className={cn(
"mx-4 h-11 w-11 cursor-pointer rounded-sm border-2 border-secondary-foreground bg-primary p-2 lg:h-14 lg:w-14 lg:p-3",
{ "hidden lg:flex": inputValue != "" },
"h-11 w-11 cursor-pointer rounded-sm border-2 border-secondary-foreground bg-primary p-2 lg:h-14 lg:w-14 lg:p-3",
{ hidden: inputValue !== "" },
)}
/>

<X
className={cn(
"h-11 w-11 cursor-pointer rounded-sm border-2 border-secondary-foreground bg-primary p-2 lg:h-14 lg:w-14 lg:p-3",
{ hidden: editingMessageId === null },
)}
onClick={() => {
setEditingMessageId(null);
textMessageForm.reset();
setInputValue("");
}}
/>

<SendHorizontal
onClick={(e) => {
setAnimationInput(!animationInput);
Expand All @@ -453,14 +568,15 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
);
}}
className={cn(
"mx-4 h-11 w-11 cursor-pointer rounded-sm border-2 border-secondary-foreground bg-primary p-2 lg:hidden lg:h-14 lg:w-14 lg:p-3",
{ hidden: inputValue == "" },
"h-11 w-11 cursor-pointer rounded-sm border-2 border-secondary-foreground bg-primary p-2 lg:h-14 lg:w-14 lg:p-3",
{ hidden: inputValue === "" },
)}
/>

<Plus
className={cn(
"mx-4 h-11 w-11 cursor-pointer rounded-sm border-2 border-secondary-foreground bg-primary p-2 lg:h-14 lg:w-14 lg:p-3",
{ "hidden lg:flex": inputValue != "" },
"h-11 w-11 cursor-pointer rounded-sm border-2 border-secondary-foreground bg-primary p-2 lg:h-14 lg:w-14 lg:p-3",
{ hidden: inputValue !== "" },
)}
onClick={menuClick}
/>
Expand Down
Loading
Loading