feat: post editing for existing posts

src/app/create_post/PostEditor.tsx

@@ -1,49 +1,73 @@
 import { PostView } from "lemmy-js-client";
 import { Input } from "@/app/(ui)/form/Input";
 import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
-import { Button } from "@/app/(ui)/button/Button";
 import { ButtonLink } from "@/app/(ui)/button/ButtonLink";
 import classNames from "classnames";
 import { TextArea } from "@/app/(ui)/form/TextArea";
-import { createPostAction } from "@/app/post/postActions";
+import { createPostAction, editPostAction } from "@/app/post/postActions";
 
 export const PostEditor = (props: {
-  readonly existingPost?: PostView;
+  readonly existingPostView?: PostView;
   readonly communityName: string;
   readonly communityId: number;
-  onCancel?(): void;
 }) => {
   return (
     <form
-      action={createPostAction.bind(null, props.communityId)}
+      action={
+        props.existingPostView
+          ? editPostAction.bind(null, props.existingPostView.post.id)
+          : createPostAction.bind(null, props.communityId)
+      }
       className={"flex max-w-[880px] flex-col gap-4"}
     >
       <div>
         <label className={"block font-semibold"} htmlFor={"title"}>
           {"Title"}
         </label>
-        <Input className={"mt-2"} id={"title"} name={"title"} required />
+        <Input
+          className={"mt-2"}
+          defaultValue={props.existingPostView?.post.name}
+          id={"title"}
+          name={"title"}
+          required
+        />
       </div>
 
       <div>
         <label className={"block font-semibold"} htmlFor={"url"}>
           {"URL"}
         </label>
-        <Input className={"mt-2"} id={"url"} name={"url"} />
+        <Input
+          className={"mt-2"}
+          defaultValue={props.existingPostView?.post.url}
+          id={"url"}
+          name={"url"}
+        />
       </div>
 
       <div>
         <label className={"block font-semibold"} htmlFor={"image"}>
           {"Image"}
         </label>
-        <Input className={"mt-2"} disabled={true} id={"image"} name={"image"} />
+        <Input
+          className={"mt-2"}
+          defaultValue={props.existingPostView?.post.url}
+          disabled={true}
+          id={"image"}
+          name={"image"}
+        />
       </div>
 
       <div>
         <label className={"block font-semibold"} htmlFor={"body"}>
           {"Body"}
         </label>
-        <TextArea className={"mt-2 min-h-32"} id={"body"} name={"body"} />
+        <TextArea
+          className={"mt-2 min-h-32"}
+          defaultValue={props.existingPostView?.post.body}
+          id={"body"}
+          name={"body"}
+        />
       </div>
       <input
         autoComplete={"false"}
@@ -57,7 +81,7 @@ export const PostEditor = (props: {
         <div className={classNames("mr-auto flex items-center")}>
           <Input
             className={"mr-2"}
-            defaultChecked={false}
+            defaultChecked={props.existingPostView?.post.nsfw}
             id={"nsfw"}
             name={"nsfw"}
             type={"checkbox"}
@@ -69,12 +93,19 @@ export const PostEditor = (props: {
             {"NSFW"}
           </label>
         </div>
-        {props.onCancel ? (
-          <Button onClick={props.onCancel}>{"Cancel"}</Button>
-        ) : (
-          <ButtonLink href={`/c/${props.communityName}`}>{"Cancel"}</ButtonLink>
-        )}
-        <SubmitButton color={"primary"}>{"Submit"}</SubmitButton>
+
+        <ButtonLink
+          href={
+            props.existingPostView
+              ? `/post/${props.existingPostView.post.id}`
+              : `/c/${props.communityName}`
+          }
+        >
+          {"Cancel"}
+        </ButtonLink>
+        <SubmitButton color={"primary"}>
+          {props.existingPostView ? "Save" : "Submit"}
+        </SubmitButton>
       </div>
     </form>
   );

src/app/post/PostListItemContent.tsx

@@ -281,6 +281,14 @@ const PostActions = (props: {
           {"report"}
         </StyledLink>
       )}
+      {props.isOwnPost && (
+        <StyledLink
+          className={"flex items-center text-neutral-300"}
+          href={`/post/${props.postView.post.id}/edit`}
+        >
+          {"edit"}
+        </StyledLink>
+      )}
       {props.isOwnPost && (
         <form
           action={async () => {

src/app/post/[id]/edit/page.tsx

@@ -0,0 +1,40 @@
+import { apiClient } from "@/app/apiClient";
+import { formatCommunityName } from "@/app/c/formatCommunityName";
+import { PageWithSidebar } from "@/app/PageWithSidebar";
+import { PostEditor } from "@/app/create_post/PostEditor";
+
+const EditPostPage = async (props: { readonly params: { id: number } }) => {
+  const {
+    post_view: postView,
+    community_view: communityView,
+    moderators: mods,
+  } = await apiClient.getPost({
+    id: props.params.id,
+  });
+
+  const communityName = formatCommunityName(communityView.community);
+
+  return (
+    <PageWithSidebar
+      communityView={communityView}
+      hideButtons={true}
+      mods={mods.map((mod) => mod.moderator)}
+      stats={communityView.counts}
+    >
+      <div className={"m-2 lg:m-4"}>
+        <h1 className={"mb-4 text-xl font-bold"}>
+          {"Editing post in "}
+          {communityName}
+          {"..."}
+        </h1>
+        <PostEditor
+          communityId={communityView.community.id}
+          communityName={communityName}
+          existingPostView={postView}
+        />
+      </div>
+    </PageWithSidebar>
+  );
+};
+
+export default EditPostPage;

src/app/post/postActions.ts

@@ -6,8 +6,6 @@ import {
   isLoggedIn,
   loginPageWithRedirectAction,
 } from "@/app/login/authActions";
-import type { CommunityId } from "lemmy-js-client/dist/types/CommunityId";
-import type { LanguageId } from "lemmy-js-client/dist/types/LanguageId";
 import { redirect } from "next/navigation";
 
 export const toggleSavePostAction = async (postId: number, save: boolean) => {
@@ -53,19 +51,32 @@ export const createPostAction = async (communityId: number, form: FormData) => {
     return;
   }
 
-  const request = {
+  const { post_view: postView } = await apiClient.createPost({
     name: form.get("title")?.toString()!,
     community_id: communityId,
     url: form.get("url")?.toString() || undefined,
     body: form.get("body")?.toString() || undefined,
     honeypot: form.get("honey")?.toString() || undefined,
     nsfw: form.get("nsfw")?.toString() === "on",
     custom_thumbnail: form.get("image")?.toString() || undefined,
-  };
+  });
 
-  console.log(JSON.stringify(request));
+  redirect(`/post/${postView.post.id}`);
+};
+export const editPostAction = async (postId: number, form: FormData) => {
+  if (!(await isLoggedIn())) {
+    await loginPageWithRedirectAction(`/post/${postId}/edit`);
+    return;
+  }
 
-  const { post_view: postView } = await apiClient.createPost(request);
+  const { post_view: postView } = await apiClient.editPost({
+    name: form.get("title")?.toString()!,
+    post_id: postId,
+    url: form.get("url")?.toString() || undefined,
+    body: form.get("body")?.toString() || undefined,
+    nsfw: form.get("nsfw")?.toString() === "on",
+    custom_thumbnail: form.get("image")?.toString() || undefined,
+  });
 
   redirect(`/post/${postView.post.id}`);
 };