added image, slider block in the component Post

package.json

@@ -3,6 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@ant-design/icons": "^4.7.0",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -30,7 +30,7 @@ const AppContent = ({ isToken }) =>
                     <Main>
                         <Route path='/' component={CMainPostFeed} exact />
                         <Route path='/message' component={Aside} />
-                        <Redirect path='/*' from='/' />
+                        <Redirect from='/*' to='/' />
                     </Main>
                 </Content >
             </Switch>

src/App.scss

@@ -106,10 +106,72 @@ select {
 }
 .Main {
     padding-top: 58px;
-    &__inner{
+    &__inner {
         padding-top: 15px;
     }
 }
 .Post {
     padding: 10px 0;
+    position: relative;
+    img {
+        margin: 0 auto;
+        padding: 1px;
+    }
+    &__dots.slick-dots {
+        bottom: -14px;
+        li {
+            border-radius: 50%;
+            background-color: rgba($color: #1890ff, $alpha: 0.5);
+            width: 10px;
+            height: 10px;
+            overflow: hidden;
+            &.slick-active {
+                border-radius: 5px;
+                width: 20px;
+                button {
+                    background-color: #1890ff;
+                }
+            }
+            button {
+                height: 10px;
+            }
+        }
+    }
+    .ant-empty-image {
+        height: 300px;
+        img {
+            margin: 0 auto;
+        }
+    }
+    &__btn {
+        border: none;
+        position: absolute;
+        padding: 0;
+        background-color: rgba(0, 0, 0, 0.165);
+        bottom: 1px;
+        top: 1px;
+        width: 50px;
+        transition: 0.4s;
+        cursor: pointer;
+        svg {
+            fill: #fff;
+            opacity: 0.5;
+            width: 50px;
+            height: 30px;
+            transition: 0.4s;
+        }
+
+    }
+    &__prev {
+        left: -50px;
+        &.--active {
+            left: 1px;
+        }
+    }
+    &__next {
+        right: -50px;
+        &.--active {
+            right: 1px;
+        }
+    }
 }

src/actions/index.js

@@ -64,7 +64,7 @@ export const myFolowingPosts = () =>
             _id, text, title,
             owner{_id, nick, login, avatar {url}
             }, 
-            images{url},
+            images{url _id},
             comments{text},
             createdAt
         }

src/components/main/MainPostFeed.js

@@ -1,39 +1,80 @@
-import { Card, Col, Row, Carousel } from 'antd'
+import { Card, Col, Row, Carousel, Empty } from 'antd'
 import Meta from 'antd/lib/card/Meta'
-import React, { useEffect } from 'react'
+import React, { createRef, useEffect } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { myFolowingPosts } from '../../actions'
 import { backURL } from '../../helpers'
 import { UserAvatar } from '../header/Header'
+import nodata from '../../images/nodata.png'
+import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons'
+
 
 const PostTitle = ({ owner }) =>
     <Link to={`/${owner?._id}`} className='owner'>
         <Row justify="start" align='middle'>
             <Col >
-                <UserAvatar avatar={owner.avatar} login={owner.login} nick={owner.nick} />
+                <UserAvatar avatar={owner?.avatar} login={owner?.login} nick={owner?.nick} />
             </Col>
             <Col offset={1}>
-                <span>{owner?.nick ? owner.nick : owner.login}</span>
+                <span>{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}</span>
             </Col>
         </Row>
     </Link >
 
-const PostImage = ({ images }) => {
-    function onChange(a, b, c) {
-        console.log(a, b, c);
+
+
+class PostImage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.carouselRef = createRef();
+        this.state = {
+            movePrev: false,
+            moveNext: false
+        }
     }
 
-    return (
-        <>
-            <Carousel >
-                
-            </Carousel>
-        </>
-    )
-}
+    handleNext = () => this.carouselRef.current.next(this);
 
+    handlePrev = () => this.carouselRef.current.prev(this);
 
+    moveOnDivArray = (length, index) => {
+        if (index === 0) {
+            this.setState({ movePrev: false, moveNext: true })
+        } else if (index === length - 1) {
+            this.setState({ movePrev: true, moveNext: false })
+        } else {
+            this.setState({ movePrev: true, moveNext: true })
+        }
+    }
+
+    downOnDivArray = () => this.setState({ movePrev: false, moveNext: false })
+
+    render() {
+
+        const { images } = this.props
+        return (
+            <Carousel ref={this.carouselRef}
+                effect="fade"
+                dots={{ className: 'Post__dots' }
+                }>
+                {!!images ?
+                    images.map((i, index) => i?.url ? <div key={i._id}
+                        onMouseEnter={() => this.moveOnDivArray(images.length, index)}
+                        onMouseLeave={this.downOnDivArray}>
+                        <button onClick={() => this.handlePrev()}
+                            className={`Post__prev Post__btn ${this.state.movePrev ? '--active' : ''}`}><LeftCircleOutlined /></button>
+                        <button onClick={() => this.handleNext()}
+                            className={`Post__next Post__btn ${this.state.moveNext ? '--active' : ''}`}><RightCircleOutlined /></button>
+                        <img src={backURL + '/' + i.url} />
+                    </div> :
+                        <Empty key={i._id} image={nodata} description={false} />) :
+                    <Empty image={nodata} description={false} />
+                }
+            </Carousel >
+        );
+    }
+}
 
 const Post = ({ postData: { text, title, owner, images, createdAt, comments } }) => {
     const date = new Date(createdAt * 1)
@@ -50,24 +91,6 @@ const Post = ({ postData: { text, title, owner, images, createdAt, comments } })
                 <Meta title="Europe Street beat" description="www.instagram.com" />
             </Card>
         </div>
-
-        // <div>
-        //     <a href='/asd'>asd</a>
-        //     
-        //     {images && images[0] && images[0].url && < img src={backURL + '/' + images[0].url} alt='post' />}
-        //     <div>
-        //         <span>
-        //             {resultDate}
-        //         </span>
-        //         <span>
-        //             {title}
-        //         </span>
-        //         <span>
-        //             {text}
-        //         </span>
-        //     </div>
-        //     {comments ? 'yes' : 'no'}
-        // </div>
     )
 }
 
@@ -79,7 +102,6 @@ const MainPostFeed = ({ posts, postsFollowing }) => {
         <>
             {posts.map(p => <Post key={p._id} postData={p} />)}
         </>
-
     )
 }