Merge pull request #132 from CodeForStartup/feat/add-image-for-post

feat: add image for post create/update

Author: luannguyenQV

apps/web/@/molecules/post-form/index.tsx

@@ -1,32 +1,34 @@
 "use client"
 
-import React from "react"
+import React, { useState } from "react"
 import dynamic from "next/dynamic"
+import Image from "next/image"
 import Link from "next/link"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Prisma } from "database"
+import { Image as ImageType, Prisma, TPostItem } from "database"
+import { Upload as UploadIcon, X } from "lucide-react"
 import { useSession } from "next-auth/react"
 import { useTranslations } from "next-intl"
 import { Controller, useForm } from "react-hook-form"
 import AsyncCreatableSelect from "react-select/async-creatable"
-import { buttonVariants, cn, Label, LoadingButton } from "ui"
+import { Button, buttonVariants, cn, Label, LoadingButton, Typography } from "ui"
 import z from "zod"
 
 import { handleCreateUpdatePost } from "@/actions/protect/postAction"
 import APP_ROUTES from "@/constants/routes"
 import InputTitle from "@/molecules/input-title"
-import { TPostItem } from "@/types/posts"
 
 import Upload from "../upload"
-import AssetManagement from "../upload/AssetsManagement"
 
 const Editor = dynamic(() => import("../editor-js"), { ssr: false })
 
 const PostForm = ({ post: postData }: { post?: TPostItem }) => {
   const { title = "", content = "", tagOnPost = [], id: postId } = postData || {}
+
   const t = useTranslations()
   const session = useSession()
+  const [image, setImage] = useState<ImageType | null>(postData?.Image)
 
   const userId = session?.data?.user?.id
 
@@ -78,7 +80,18 @@ const PostForm = ({ post: postData }: { post?: TPostItem }) => {
   }
 
   const onSubmit = async (data) =>
-    await handleCreateUpdatePost({ postId: postId as string, data, userId })
+    await handleCreateUpdatePost({
+      postId: postId as string,
+      data: {
+        ...data,
+        Image: {
+          connect: {
+            id: image?.id,
+          },
+        },
+      },
+      userId,
+    })
 
   return (
     <div className="w-full">
@@ -117,11 +130,44 @@ const PostForm = ({ post: postData }: { post?: TPostItem }) => {
             </div>
           </div>
           <div className="col-span-1">
-            <Upload>
-              <div className="flex h-[150px] cursor-pointer items-center justify-center rounded-sm bg-slate-300">
-                <div>Upload</div>
-              </div>
-            </Upload>
+            <div className="relative overflow-hidden rounded-lg border-2 p-2">
+              <Upload onSelect={setImage}>
+                {image ? (
+                  <div className="group relative cursor-pointer">
+                    <Image
+                      src={image.url}
+                      alt="image"
+                      width={480}
+                      height={270}
+                      className="border-1 flex aspect-video w-full rounded-sm object-cover hover:scale-90 hover:opacity-50"
+                    />
+                    <div className="invisible absolute inset-0 flex-col items-center justify-center gap-2 group-hover:flex">
+                      <UploadIcon className="invisible group-hover:visible" />
+                      <Typography
+                        className="bold invisible group-hover:visible"
+                        variant="mutedText"
+                      >
+                        {t("uploads.upload_image")}
+                      </Typography>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="border-1 flex aspect-video w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-sm bg-slate-200">
+                    <UploadIcon />
+                    <Typography variant="mutedText">{t("uploads.upload_image")}</Typography>
+                  </div>
+                )}
+              </Upload>
+              {image && (
+                <Button
+                  onClick={() => setImage(null)}
+                  variant="outline"
+                  className="absolute right-2 top-2 h-6 w-6 p-0"
+                >
+                  <X className="text-destructive" />
+                </Button>
+              )}
+            </div>
             <div className="mt-4">
               <Label>Tags</Label>
               <Controller

apps/web/@/molecules/upload/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import { ReactNode, useState } from "react"
 
 import { Image } from "database"
 import { X } from "lucide-react"
@@ -95,10 +95,19 @@ const TotalItems: React.FC = () => {
 
 const Upload: React.FC<UploadProps> = ({ children, onSelect }) => {
   const t = useTranslations("uploads")
+  const [open, setOpen] = useState(false)
+
+  const onSelectImage = (image?: Image) => {
+    onSelect(image)
+    setOpen(false)
+  }
 
   return (
     <FileManagerContainer>
-      <Dialog>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+      >
         <DialogTrigger asChild>{children}</DialogTrigger>
         <DialogContent className="w-full max-w-[800px] gap-0 p-0">
           <DialogHeader className="mb-0 flex flex-row items-center gap-4 border-b px-4 py-1">
@@ -115,7 +124,7 @@ const Upload: React.FC<UploadProps> = ({ children, onSelect }) => {
               <TotalItems />
               <SelectedFiles />
             </div>
-            <SelectButton onSelect={onSelect} />
+            <SelectButton onSelect={onSelectImage} />
           </DialogFooter>
         </DialogContent>
       </Dialog>

apps/web/@/types/posts.ts

@@ -1,55 +1,5 @@
 import { PostOnUserType, Prisma } from "database"
 
-export const postSelect = {
-  id: true,
-  title: true,
-  content: true,
-  createdAt: true,
-  updatedAt: true,
-  slug: true,
-  postStatus: true,
-  totalLike: true,
-  totalFollow: true,
-  author: {
-    select: {
-      id: true,
-      name: true,
-      email: true,
-      image: true,
-    },
-  },
-  postOnUser: {
-    select: {
-      type: true,
-      userId: true,
-      postId: true,
-    },
-  },
-  _count: {
-    select: {
-      comments: true,
-      postOnUser: true,
-    },
-  },
-  tagOnPost: {
-    select: {
-      tag: {
-        select: {
-          id: true,
-          name: true,
-          slug: true,
-        },
-      },
-    },
-  },
-} satisfies Prisma.PostSelect
-
-const getPostItem = Prisma.validator<Prisma.PostDefaultArgs>()({
-  select: postSelect,
-})
-
-export type TPostItem = Prisma.PostGetPayload<typeof getPostItem>
-
 export type TCreatePostInput = Prisma.PostCreateInput & {
   tags: {
     value: string

apps/web/app/[lang]/(protected-post)/user/posts/[postId]/edit/page.tsx

@@ -1,19 +1,20 @@
 import { Metadata } from "next"
 
-import { getPostById } from "@/actions/protect/posts"
+import { getPost } from "database"
+
 import PostForm from "@/molecules/post-form"
 
 export async function generateMetadata({ params }): Promise<Metadata> {
-  const post = await getPostById(params?.postId as string)
+  const post = await getPost({ postIdOrSlug: params?.postId as string })
 
   return {
-    title: post?.title,
+    title: post?.data?.title,
     description: "", // post?.content.slice(0, 160),
   }
 }
 
 export default async function Page({ params }: { params: { postId: string } }) {
-  const post = await getPostById(params?.postId as string)
+  const post = await getPost({ postIdOrSlug: params?.postId as string })
 
-  return <PostForm post={post} />
+  return <PostForm post={post?.data} />
 }

packages/database/src/posts/selects.ts

@@ -10,6 +10,12 @@ export const postSelect = {
   postStatus: true,
   totalLike: true,
   totalFollow: true,
+  Image: {
+    select: {
+      id: true,
+      url: true,
+    },
+  },
   author: {
     select: {
       id: true,