+PostCarusel

package-lock.json

@@ -18,6 +18,7 @@
         "react-dropzone": "^12.0.2",
         "react-icons": "^4.3.1",
         "react-redux": "^7.2.6",
+        "react-responsive-carousel": "^3.2.22",
         "react-router-dom": "^5.3.0",
         "react-scripts": "5.0.0",
         "react-select": "^5.2.2",
@@ -5428,6 +5429,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz",
@@ -14260,6 +14266,17 @@
         "react": ">= 16.8"
       }
     },
+    "node_modules/react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
@@ -14310,6 +14327,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive-carousel": {
+      "version": "3.2.22",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.22.tgz",
+      "integrity": "sha512-/r7dsIaN+l417IYIS0Fr7Z5VlpK3KYnTIIsdVCWSqtuJRIZNM+qdBIA4RIbzQtuW/ZBTnQanBecblCxg0HCqLQ==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "node_modules/react-router": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
@@ -21704,6 +21731,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz",
@@ -28012,6 +28044,14 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
@@ -28046,6 +28086,16 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-responsive-carousel": {
+      "version": "3.2.22",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.22.tgz",
+      "integrity": "sha512-/r7dsIaN+l417IYIS0Fr7Z5VlpK3KYnTIIsdVCWSqtuJRIZNM+qdBIA4RIbzQtuW/ZBTnQanBecblCxg0HCqLQ==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "react-router": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "react-dropzone": "^12.0.2",
     "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",
+    "react-responsive-carousel": "^3.2.22",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "react-select": "^5.2.2",

src/components/Post/PostItem.js

@@ -1,21 +1,35 @@
 import { connect } from "react-redux";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
 import { backendURL } from "../../actions";
 
 
+const ImagesInPost = ({image}) => {
+    console.log(image);
+    return (
+        <div>
+        <img className="object-cover object-center w-full h-96 bg-slate-500" src={image.url ?`${backendURL}/${image?.url}` : ""}/>
+        </div>
+    )
+}
+
+
 const PostItem = ({findPost}) =>{
     return(
-        <div className="rounded-md shadow-md p-3 sm:w-96">
+        <div className="rounded-md  shadow-md p-3 sm:w-96 lg:w-3/6">
             <div className="flex items-center justify-between p-3">
                 <div className="flex items-center space-x-2">
                     <img  src={findPost.owner?.avatar?.url ? `${backendURL}/${findPost.owner?.avatar?.url}`:""} alt="userAvatar" className="object-cover object-center w-14 h-14 rounded-full shadow-sm bg-slate-600 "/>
                     <div className="-space-y-1">
-                        <h2 className="text-sm font-semibold leading-none">{findPost.owner.nick}</h2>
+                        <h2 className="text-sm font-semibold leading-none">{findPost.owner?.nick ? findPost.owner.nick : "anon"}</h2>
                     </div>
                 </div>
                 
               
             </div>
-                <img className="object-cover object-center w-full h-72 bg-slate-500"/>
+                <Carousel infiniteLoop showThumbs={false} showStatus={false} showArrows={true}>
+                    {findPost?.images ? findPost?.images?.map(image => <ImagesInPost image={image}/>):"No image"}
+                </Carousel>
                 <div className="p-3">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center space-x-3">
@@ -28,8 +42,8 @@ const PostItem = ({findPost}) =>{
                 </div>
                 <div className="space-y-3">
                         <p className="text-sm">
-                            <span className="text-base font-semibold pr-2">{findPost.owner.nick}</span>
-                            {findPost.title} {findPost.text}
+                            <span className="text-base font-semibold pr-2">{findPost.owner?.nick ? findPost.owner.nick : "anon"}</span>
+                            {findPost?.title} {findPost?.text}
                         </p>
                      <input type="text" placeholder="Add a comment" className="w-full py-0.5 bg-transparent border-none rounded text-sm pl-0 text-gray-400"/>   
                 </div>