style header, and create top part Post

src/App.js

@@ -1,17 +1,19 @@
-import 'antd/dist/antd.css'
+import 'antd/dist/antd.min.css'
 import './App.scss';
 import { Router, Route, Switch, Redirect } from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import { connect, Provider } from 'react-redux';
 import { store } from './redux/redux-store';
-import { Authorization } from './pages/Authorization';
-import { Content } from './pages/Content';
-
-
+import { Authorization } from './components/Authorization';
+import { Content, Main } from './pages/Content';
+import HeaderComponent from './components/header/Header';
+import { CMainPostFeed } from './components/main/MainPostFeed.js';
 
 export const history = createHistory()
 
 
+const Aside = () =>
+    <div>sdfsdgsgsdg</div>
 const AppContent = ({ isToken }) =>
     <Router history={history}>
         {!isToken
@@ -22,7 +24,17 @@ const AppContent = ({ isToken }) =>
                 <Redirect from='/*' to='/auth/login' />
             </Switch>
             :
-            <Content />
+            <Switch>
+                <Content>
+                    <HeaderComponent />
+                    <Main>
+                        <Route path='/' component={CMainPostFeed} exact />
+                        <Route path='/message' component={Aside} />
+                        <Redirect path='/*' from='/' />
+                    </Main>
+                </Content >
+            </Switch>
+
             // <Switch>
             //     <Route path='/' component={Content} exact />
             //     <Redirect from='/auth/*' to='/' />

src/App.scss

@@ -55,13 +55,18 @@ select {
     background-color: #ececec;
     justify-content: space-between;
     align-items: center;
+    &__inner {
+        max-width: 1250px;
+        margin: 0 auto;
+    }
+    &__search {
+        display: block;
+        padding: 0 10px;
+    }
 }
 .UserNav {
-    display: flex;
-    width: 25vw;
-    align-items: center;
     img {
-        width: 100px;
+        width: 50px;
         border-radius: 50%;
         overflow: hidden;
         border: 1px solid #000;
@@ -92,10 +97,19 @@ select {
         }
     }
 }
-.qq {
-    display: flex;
-    justify-content: space-between;
-    div {
-        width: 50%;
+.ant-layout-header {
+    height: 58px;
+    line-height: 58px;
+    padding: 0 10px;
+    background-color: #fff;
+    box-shadow: 0 0 9px 5px rgba($color: #001529, $alpha: 0.4);
+}
+.Main {
+    padding-top: 58px;
+    &__inner{
+        padding-top: 15px;
     }
 }
+.Post {
+    padding: 10px 0;
+}

src/actions/index.js

@@ -72,8 +72,8 @@ export const myFolowingPosts = () =>
         query: JSON.stringify([{},
         {
             sort: [{ _id: -1 }],
-            skip: [1],
-            limit: [5],
+            skip: [19],
+            limit: [3],
         }
         ])
     }))

src/pages/Authorization.jsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React  from 'react'
 import authBg from '../images/authBg.png'
 import { connect } from 'react-redux'
-import { NavLink, Route } from 'react-router-dom'
+import { NavLink} from 'react-router-dom'
 import { actionFullLogin, actionFullRegister } from '../actions'
 
 import { Form, Input, Button, Row, Col, Card, Divider, Checkbox } from 'antd';

src/components/header/Search.jsx

@@ -5,13 +5,13 @@ const { Search } = Input;
 
 export const Searcha = () => {
     return (
-        <div className='Search'>
-            <Search
+        <>
+            <Search className='Header__search'
                 onSearch={value => console.log(value)}
                 placeholder="Search users"
                 allowClear
                 enterButton="Search"
                 enterButton />
-        </div>
+        </>
     )
 }

src/components/main/MainContent.js

@@ -1,52 +0,0 @@
-import React, { useEffect } from 'react'
-import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { myFolowingPosts } from '../../actions'
-import { backURL } from '../../helpers'
-
-const Post = ({ postData: { text, title, owner, images, createdAt, comments } }) => {
-    const date = new Date(createdAt * 1)
-    const resultDate = new Intl.DateTimeFormat('default').format(date)
-    return (
-        <div style={{ padding: '50px '}}>
-            <a href='/asd'>asd</a>
-            <Link to={`/${owner?._id}`} className='owner'>
-                {owner?.avatar?.url && <img src={backURL + '/' + owner.avatar.url} alt='avatar' />}
-                <span>{owner?.login}</span>
-            </Link>
-            {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>
-    )
-
-}
-
-
-
-
-const MainContent = ({ posts, postsFollowing }) => {
-
-    useEffect(() => {
-        postsFollowing()
-    }, [])
-
-    console.log(posts);
-    return (
-        <div>
-            {posts.map(p => <Post key={p._id} postData={p} />)}
-        </div>
-    )
-}
-
-export const CMainContent = connect(state => ({ posts: state.promise?.followingPosts?.payload || [] }), { postsFollowing: myFolowingPosts })(MainContent)

src/components/main/MainPostFeed.js

@@ -0,0 +1,86 @@
+import { Card, Col, Row, Carousel } from 'antd'
+import Meta from 'antd/lib/card/Meta'
+import React, { 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'
+
+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} />
+            </Col>
+            <Col offset={1}>
+                <span>{owner?.nick ? owner.nick : owner.login}</span>
+            </Col>
+        </Row>
+    </Link >
+
+const PostImage = ({ images }) => {
+    function onChange(a, b, c) {
+        console.log(a, b, c);
+    }
+
+    return (
+        <>
+            <Carousel >
+                
+            </Carousel>
+        </>
+    )
+}
+
+
+
+const Post = ({ postData: { text, title, owner, images, createdAt, comments } }) => {
+    const date = new Date(createdAt * 1)
+    const resultDate = new Intl.DateTimeFormat('default').format(date)
+
+    return (
+        <div className='Post'>
+            <Card
+                title={<PostTitle owner={owner} />}
+                // hoverable
+
+                cover={<PostImage images={images} />}
+            >
+                <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>
+    )
+}
+
+const MainPostFeed = ({ posts, postsFollowing }) => {
+    useEffect(() => {
+        postsFollowing()
+    }, [])
+    return (
+        <>
+            {posts.map(p => <Post key={p._id} postData={p} />)}
+        </>
+
+    )
+}
+
+export const CMainPostFeed = connect(state => ({ posts: state.promise?.followingPosts?.payload || [] }), { postsFollowing: myFolowingPosts })(MainPostFeed)

src/components/main/Profile.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+
+
+
+
+
+
+
+
+// export CProfile= connect()(Profile)
+
+export const Profile = () => {
+    useEffect(() => {
+        
+    }, [])
+    return (
+        <div>
+            
+        </div>
+    )
+}

src/pages/Content.js

@@ -1,34 +1,21 @@
-import React, { useEffect } from 'react'
-import { connect } from 'react-redux'
-import { Route, Switch } from 'react-router-dom'
-import { myFolowingPosts } from '../actions'
-import Header from '../components/header/Header'
-import { CMainContent } from '../components/main/MainContent'
+import { Col, Row } from 'antd'
+import React from 'react'
 
 
 
-const Main = ({ children }) =>
-    <div className='qq'>{children}</div>
 
+export const Main = ({ children }) =>
+    <Row justify='center' className='Main'>
+        <Col xs={{ span: 24 }} sm={{ span: 20 }} md={{ span: 16 }} lg={{ span: 14 }} xl={{span:12}}className='Main__inner'>
+            {children}
+        </Col>
+    </Row>
 
-export const CMain = connect(null, { postsFollowing: myFolowingPosts })(Main)
 
-const Aside = () =>
-    <div>sdfsdgsgsdg</div>
 
-export const Content = () => {
-    return (
-        <>
-            <Header />
-            <Main>
-                <Switch>
-                    <CMainContent />
-                    <Route path='/message' componernt={Aside} />
-                </Switch>
+// export const CMain = connect(null, { postsFollowing: myFolowingPosts })(Main)
 
-            </Main>
-        </>
-    )
-}
 
+export const Content = ({ children }) =>
+    <>{children}</>
 

src/redux/auth-reducer.js

@@ -5,7 +5,7 @@ export const authReducer = (state, { type, token, remember }) => {
     if (!state) {
         if (localStorage.authToken || sessionStorage.authToken) {
             type = 'AUTH_LOGIN'
-            token = localStorage.authToken || sessionStorage.authTokenauth
+            token = localStorage.authToken || sessionStorage.authToken
         } else state = {}
     }