Editable community posts

apps/web/components/community/__tests__/create-post-dialog.test.tsx

@@ -0,0 +1,189 @@
+import React from "react";
+import {
+    render,
+    screen,
+    fireEvent,
+    waitFor,
+    act,
+} from "@testing-library/react";
+import CreatePostDialog from "../create-post-dialog";
+import { ProfileContext } from "@components/contexts";
+
+jest.mock("../../ui/button", () => ({
+    Button: ({ children, ...props }: any) => (
+        <button {...props}>{children}</button>
+    ),
+}));
+
+jest.mock("../../ui/input", () => ({
+    Input: (props: any) => <input {...props} />,
+}));
+
+jest.mock("../../ui/textarea", () => ({
+    Textarea: (props: any) => <textarea {...props} />,
+}));
+
+jest.mock("../../ui/progress", () => ({
+    Progress: ({ value }: { value: number }) => (
+        <div data-testid="progress">{value}</div>
+    ),
+}));
+
+jest.mock("../../ui/avatar", () => ({
+    Avatar: ({ children }: any) => <div>{children}</div>,
+    AvatarFallback: ({ children }: any) => <div>{children}</div>,
+    AvatarImage: (props: any) => <img {...props} alt={props.alt || "avatar"} />,
+}));
+
+jest.mock("../../ui/dialog", () => ({
+    Dialog: ({ children }: any) => <div>{children}</div>,
+    DialogContent: ({ children }: any) => <div>{children}</div>,
+    DialogHeader: ({ children }: any) => <div>{children}</div>,
+    DialogTitle: ({ children }: any) => <div>{children}</div>,
+    DialogTrigger: ({ children }: any) => <>{children}</>,
+    DialogFooter: ({ children }: any) => <div>{children}</div>,
+    DialogClose: ({ children }: any) => <>{children}</>,
+}));
+
+jest.mock("../../ui/popover", () => ({
+    Popover: ({ children }: any) => <div>{children}</div>,
+    PopoverTrigger: ({ children }: any) => <>{children}</>,
+    PopoverContent: ({ children }: any) => <div>{children}</div>,
+}));
+
+jest.mock("../../ui/select", () => ({
+    Select: ({ value, onValueChange, children }: any) => (
+        <select
+            aria-label="category"
+            value={value}
+            onChange={(e) => onValueChange(e.target.value)}
+        >
+            <option value="">Select a category</option>
+            {children}
+        </select>
+    ),
+    SelectContent: ({ children }: any) => <>{children}</>,
+    SelectItem: ({ value, children }: any) => (
+        <option value={value}>{children}</option>
+    ),
+    SelectTrigger: ({ children }: any) => <>{children}</>,
+    SelectValue: () => null,
+}));
+
+jest.mock("../emoji-picker", () => ({
+    EmojiPicker: () => <div>EmojiPicker</div>,
+}));
+
+jest.mock("../gif-selector", () => ({
+    GifSelector: () => <div>GifSelector</div>,
+}));
+
+jest.mock("../media-preview", () => ({
+    MediaPreview: () => <div>MediaPreview</div>,
+}));
+
+const renderDialog = (
+    createPost: any,
+    overrides: Partial<React.ComponentProps<typeof CreatePostDialog>> = {},
+) =>
+    render(
+        <ProfileContext.Provider
+            value={{
+                profile: {
+                    name: "Test User",
+                    email: "test@example.com",
+                    avatar: undefined,
+                },
+                setProfile: jest.fn(),
+            }}
+        >
+            <CreatePostDialog
+                isOpen={true}
+                onOpenChange={jest.fn()}
+                createPost={createPost}
+                categories={["General", "Announcements"]}
+                isFileUploading={false}
+                fileUploadProgress={0}
+                fileBeingUploadedNumber={0}
+                {...overrides}
+            />
+        </ProfileContext.Provider>,
+    );
+
+const flushMicrotasks = async () => {
+    await act(async () => {
+        await Promise.resolve();
+    });
+};
+
+describe("CreatePostDialog", () => {
+    it("keeps submit disabled until title, content and category are present", async () => {
+        const createPost = jest.fn().mockResolvedValue(undefined);
+
+        renderDialog(createPost);
+        await flushMicrotasks();
+
+        const postButton = screen.getByRole("button", { name: "Post" });
+        expect(postButton).toBeDisabled();
+
+        fireEvent.change(screen.getByPlaceholderText("Title"), {
+            target: { value: "My title" },
+        });
+        fireEvent.change(screen.getByPlaceholderText("What's on your mind?"), {
+            target: { value: "My content" },
+        });
+        expect(postButton).toBeDisabled();
+
+        fireEvent.change(screen.getByLabelText("category"), {
+            target: { value: "General" },
+        });
+
+        await waitFor(() => {
+            expect(postButton).toBeEnabled();
+        });
+    });
+
+    it("shows posting state while submit is pending and restores after completion", async () => {
+        let resolveSubmit: (() => void) | undefined;
+        const createPost = jest.fn().mockImplementation(
+            () =>
+                new Promise<void>((resolve) => {
+                    resolveSubmit = resolve;
+                }),
+        );
+
+        renderDialog(createPost, { category: "General" });
+        await flushMicrotasks();
+
+        fireEvent.change(screen.getByPlaceholderText("Title"), {
+            target: { value: "My title" },
+        });
+        fireEvent.change(screen.getByPlaceholderText("What's on your mind?"), {
+            target: { value: "My content" },
+        });
+        fireEvent.change(screen.getByLabelText("category"), {
+            target: { value: "General" },
+        });
+
+        await waitFor(() => {
+            expect(screen.getByRole("button", { name: "Post" })).toBeEnabled();
+        });
+
+        fireEvent.click(screen.getByRole("button", { name: "Post" }));
+
+        await waitFor(() => {
+            expect(createPost).toHaveBeenCalledTimes(1);
+        });
+        expect(
+            screen.getByRole("button", { name: "Posting..." }),
+        ).toBeDisabled();
+
+        await act(async () => {
+            resolveSubmit?.();
+        });
+
+        await waitFor(() => {
+            expect(screen.getByRole("button", { name: "Post" })).toBeDisabled();
+        });
+    });
+});

apps/web/components/community/__tests__/media-preview.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { MediaPreview } from "../media-preview";
+
+jest.mock("../../ui/button", () => ({
+    Button: ({ children, ...props }: any) => (
+        <button {...props}>{children}</button>
+    ),
+}));
+
+jest.mock("../../ui/scroll-area", () => ({
+    ScrollArea: ({ children }: any) => <div>{children}</div>,
+    ScrollBar: () => null,
+}));
+
+describe("MediaPreview", () => {
+    it("renders image using media thumbnail when url is missing", () => {
+        render(
+            <MediaPreview
+                items={[
+                    {
+                        type: "image",
+                        title: "CourseLit Notification System.png",
+                        media: {
+                            mediaId: "m1",
+                            thumbnail: "https://cdn.example.com/thumb.png",
+                            file: "https://cdn.example.com/file.png",
+                        },
+                    } as any,
+                ]}
+                onRemove={jest.fn()}
+            />,
+        );
+
+        const image = screen.getByAltText(
+            "CourseLit Notification System.png",
+        ) as HTMLImageElement;
+        expect(image).toBeInTheDocument();
+        expect(image.src).toContain("https://cdn.example.com/thumb.png");
+    });
+
+    it("renders image using url when available", () => {
+        render(
+            <MediaPreview
+                items={[
+                    {
+                        type: "image",
+                        title: "Local",
+                        url: "blob:http://localhost/abc",
+                    } as any,
+                ]}
+                onRemove={jest.fn()}
+            />,
+        );
+
+        const image = screen.getByAltText("Local") as HTMLImageElement;
+        expect(image).toBeInTheDocument();
+        expect(image.getAttribute("src")).toBe("blob:http://localhost/abc");
+    });
+});

apps/web/components/community/comment-section.tsx

@@ -107,6 +107,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
@@ -183,6 +184,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
@@ -278,6 +280,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
@@ -364,6 +367,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
@@ -517,6 +521,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount

apps/web/components/community/comment.tsx

@@ -194,11 +194,7 @@ export function Comment({
                                 {comment.user.name}
                             </span>
                             <span className="text-xs text-muted-foreground">
-                                {formattedLocaleDate(
-                                    comment.updatedAt
-                                        ? new Date(comment.updatedAt).getTime()
-                                        : undefined,
-                                )}
+                                {formattedLocaleDate(comment.updatedAt)}
                             </span>
                         </div>
                         {!comment.deleted && (