save post feature

saasykits · Feb 12, 2024 · 34ce9de · 34ce9de
1 parent 73ab124
commit 34ce9de
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 33 deletions.
diff --git a/src/app/(landing)/_components/feature-icons.tsx b/src/app/(landing)/_components/feature-icons.tsx
@@ -309,7 +309,7 @@ const ReactEmail = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
       xmlns="http://www.w3.org/2000/svg"
       className={cn(className)}
     >
-      <g clip-path="url(#clip0_27_291)">
+      <g clipPath="url(#clip0_27_291)">
         <path
           fill-rule="evenodd"
           clip-rule="evenodd"

diff --git a/src/app/(main)/editor/[postId]/_components/post-editor.tsx b/src/app/(main)/editor/[postId]/_components/post-editor.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useRef } from "react";
 import { z } from "zod";
 import { type RouterOutputs } from "@/trpc/shared";
 import { useForm } from "react-hook-form";
@@ -17,8 +18,8 @@ import { Textarea } from "@/components/ui/textarea";
 import { PostPreview } from "./post-preview";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/trpc/react";
-import { useEffect, useRef } from "react";
-import { useDebounce } from "@/lib/hooks/use-debounce";
+import { Pencil2Icon } from "@/components/icons";
+import { LoadingButton } from "@/components/loading-button";
 
 interface Props {
   post: RouterOutputs["post"]["get"];
@@ -37,7 +38,6 @@ export const PostEditor = ({ post }: Props) => {
   if (!post) return null;
   const formRef = useRef<HTMLFormElement>(null);
   const updatePost = api.post.update.useMutation();
-
   const form = useForm({
     defaultValues: {
       title: post.title,
@@ -51,7 +51,21 @@ export const PostEditor = ({ post }: Props) => {
   });
 
   return (
-    <div>
+    <>
+      <div className="flex items-center gap-2">
+        <Pencil2Icon className="h-5 w-5" />
+        <h1 className="text-2xl font-bold">{post.title}</h1>
+
+        <LoadingButton
+          disabled={!form.formState.isDirty}
+          loading={updatePost.isLoading}
+          onClick={() => formRef.current?.requestSubmit()}
+          className="ml-auto"
+        >
+          Save
+        </LoadingButton>
+      </div>
+      <div className="h-6"></div>
       <Form {...form}>
         <form
           ref={formRef}
@@ -107,7 +121,7 @@ export const PostEditor = ({ post }: Props) => {
                   </FormItem>
                 </TabsContent>
                 <TabsContent value="preview" className="space-y-2">
-                  <div className="prose prose-sm dark:prose-invert min-h-[200px] max-w-[none] rounded-lg border px-3 py-2">
+                  <div className="prose prose-sm min-h-[200px] max-w-[none] rounded-lg border px-3 py-2 dark:prose-invert">
                     <PostPreview text={form.watch("content") || post.content} />
                   </div>
                   <p className="text-[0.8rem] text-muted-foreground">
@@ -119,23 +133,6 @@ export const PostEditor = ({ post }: Props) => {
           />
         </form>
       </Form>
-      {/* <div>
-        <p className="mb-2">Post Preview</p>
-        <div className="rounded-lg border p-6">
-          <p className="mb-2 text-sm text-muted-foreground">
-            by {post.user.email} at{" "}
-            {post.createdAt.toLocaleString(undefined, {
-              dateStyle: "medium",
-              timeStyle: "short",
-            })}
-          </p>
-          <h2 className="mb-2 text-4xl font-bold">{post.title}</h2>
-          <p className="mb-6 italic text-muted-foreground">{post.excerpt}</p>
-          <div className="prose dark:prose-invert">
-            <PostPreview text={form.watch("content") || post.content} />
-          </div>
-        </div>
-      </div> */}
-    </div>
+    </>
   );
 };
diff --git a/src/app/(main)/editor/[postId]/page.tsx b/src/app/(main)/editor/[postId]/page.tsx
@@ -2,9 +2,7 @@ import React from "react";
 import { api } from "@/trpc/server";
 import { notFound } from "next/navigation";
 import { PostEditor } from "./_components/post-editor";
-import { Button } from "@/components/ui/button";
-import { Pencil2Icon } from "@/components/icons";
-import { ArrowLeftIcon, ChevronLeftIcon } from "@radix-ui/react-icons";
+import { ArrowLeftIcon } from "@/components/icons";
 import Link from "next/link";
 
 interface Props {
@@ -26,13 +24,7 @@ export default async function EditPostPage({ params }: Props) {
       >
         <ArrowLeftIcon className="h-5 w-5" /> back to dashboard
       </Link>
-      <div className="flex items-center gap-2">
-        <Pencil2Icon className="h-5 w-5" />
-        <h1 className="text-2xl font-bold">{post.title}</h1>
 
-        <Button className="ml-auto">Publish</Button>
-      </div>
-      <div className="h-6"></div>
       <PostEditor post={post} />
     </main>
   );

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -111,4 +111,5 @@ export {
   ChevronLeftIcon,
   ChevronRightIcon,
   DotsHorizontalIcon,
+  ArrowLeftIcon,
 } from "@radix-ui/react-icons";