fix: minor crate post fixes

mehdibha · Jan 22, 2024 · 7dd3418 · 7dd3418
1 parent ee58db9
commit 7dd3418
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 9 deletions.
diff --git a/src/components/ui/input-images.tsx b/src/components/ui/input-images.tsx
@@ -21,14 +21,17 @@ interface InputImagesProps {
       }[]
     >
   >;
+  onChangeFilesLength: (length: number) => boolean;
 }
 
 export const InputImages = (props: InputImagesProps) => {
-  const { value: images, onImagesChange } = props;
+  const { value: images, onImagesChange, onChangeFilesLength } = props;
 
   const onChangePicture = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       if (event.target.files) {
+        const res = onChangeFilesLength(event.target.files.length);
+        if (!res) return;
         for (const file of event.target.files) {
           if (file) {
             if (file.size / 1024 / 1024 > 5) {
@@ -45,7 +48,7 @@ export const InputImages = (props: InputImagesProps) => {
         event.currentTarget.value = "";
       }
     },
-    [onImagesChange]
+    [onChangeFilesLength, onImagesChange]
   );
 
   const handleRemove = (index: number) => {

diff --git a/src/config/site-config.tsx b/src/config/site-config.tsx
@@ -22,7 +22,7 @@ export const siteConfig = {
     externalLinks: [
       { icon: FacebookIcon, url: "https://www.facebook.com/groups/160143328137207" },
       { icon: MailIcon, url: "mailto:hello@mehdibha.com" },
-      { icon: GithubIcon, url: "https://github.com/mehdibha/vapi" },
+      { icon: GithubIcon, url: "https://github.com/mehdibha/vapi.tn" },
     ],
   },
   header: {

diff --git a/src/modules/posts/api.ts b/src/modules/posts/api.ts
@@ -63,8 +63,17 @@ export const postRouter = createTRPCRouter({
       };
     }),
   create: protectedProcedure
-    .input(z.object({ content: z.string().min(1), images: z.array(z.string().url()) }))
+    .input(z.object({ content: z.string(), images: z.array(z.string().url()) }))
     .mutation(async ({ ctx, input }) => {
+      if (input.images.length === 0 && input.content === "") {
+        throw new TRPCError({ code: "BAD_REQUEST", message: "Post cannot be empty" });
+      }
+      if (input.images.length > 5) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Post cannot have more than 5 images",
+        });
+      }
       return ctx.db.post.create({
         data: {
           content: input.content,

diff --git a/src/modules/posts/components/create-post-modal.tsx b/src/modules/posts/components/create-post-modal.tsx
@@ -47,8 +47,9 @@ export const CreatePostModal = (props: CreatePostModalProps) => {
   });
   const utils = api.useUtils();
   const createPost = api.post.create.useMutation({
-    onError: () => {
-      toast("Une erreur est survenue lors de la publication");
+    onError: (error) => {
+      setIsLoading(false);
+      toast(`Une erreur est survenue lors de la publication (${error.message})`);
     },
     onSuccess: async (addedPost) => {
       form.reset();
@@ -97,6 +98,14 @@ export const CreatePostModal = (props: CreatePostModalProps) => {
     }
   };
 
+  const handleLimitImages = (length: number) => {
+    if (length + images.length > 5) {
+      toast("Vous ne pouvez pas ajouter plus de 5 images");
+      return false;
+    }
+    return true;
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
@@ -140,7 +149,11 @@ export const CreatePostModal = (props: CreatePostModalProps) => {
                     );
                   }}
                 />
-                <InputImages value={images} onImagesChange={setImages} />
+                <InputImages
+                  value={images}
+                  onImagesChange={setImages}
+                  onChangeFilesLength={handleLimitImages}
+                />
               </div>
             </div>
             <div className="mt-4 flex justify-end px-6">

diff --git a/src/modules/posts/components/feed.tsx b/src/modules/posts/components/feed.tsx
@@ -52,7 +52,7 @@ export const Feed = () => {
       <CreatePostCard />
       {posts.map((post, index) => (
         <PostCard
-          key={index}
+          key={post.id}
           ref={posts.length - 2 === index ? ref : undefined}
           postId={post.id}
           author={{

diff --git a/src/modules/posts/components/post-card.tsx b/src/modules/posts/components/post-card.tsx
@@ -55,7 +55,7 @@ export const PostCard = React.forwardRef(
         <div>
           <p className="p-6 pt-0">{content}</p>
           {images.length > 0 && (
-            <Carousel className="h-[300px] w-full">
+            <Carousel className="h-[300px] bg-muted w-full">
               <CarouselContent>
                 {images.map((image, index) => (
                   <CarouselItem key={index}>