Главная Обзор Помощь
Регистрация Вход
LenDoc
/
PROJECT_HIPSTAGRAM
Следить 1
В избранное 0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

Update comments, likes and correct login in posts explore

LenDoc 1 год назад
Родитель
852555f83a
Сommit
3eb7251f01
31 измененных файлов с 1442 добавлено и 1636 удалено
Разделённый вид Показать статистику Diff
  1. 1 1
      package.json
  2. BIN
      public/camera.png
  3. BIN
      public/favicon.ico
  4. BIN
      public/icon.png
  5. 2 2
      public/index.html
  6. 3 3
      public/manifest.json
  7. BIN
      public/photocamera.png
  8. 38 123
      src/App.js
  9. 190 163
      src/App.scss
  10. 129 171
      src/actions/index.js
  11. 45 85
      src/components/DropZone.js
  12. 33 38
      src/components/EditAvatar.js
  13. 3 4
      src/components/Expore.js
  14. 21 29
      src/components/Header.js
  15. 14 18
      src/components/Like.js
  16. 27 29
      src/components/ListFollowers.js
  17. 29 30
      src/components/ListFollowing.js
  18. 143 109
      src/components/LoginRegisterLogout.js
  19. 128 104
      src/components/NewPost.js
  20. 158 168
      src/components/Post.js
  21. 125 104
      src/components/PostFeed.js
  22. 22 36
      src/components/Post_Comment.js
  23. 79 81
      src/components/Search_Users.js
  24. 14 85
      src/components/User.js
  25. 0 0
      src/components/WorkApp.js
  26. 19 21
      src/helpers/index.js
  27. 1 1
      src/index.css
  28. BIN
      src/materials/user.png
  29. BIN
      src/materials/user1.png
  30. BIN
      src/materials/user2.png
  31. 218 231
      src/reducers/index.js

+ 1 - 1
package.json
Просмотреть файл 

@@ -2,7 +2,7 @@
 
   "name": "hipstagram",
 
   "version": "0.1.0",
 
   "private": true,
 
-  "proxy": "http://localhost:5000",
 
+  "proxy": "http://hipstagram.node.ed.asmer.org.ua",
 
   "dependencies": {
 
     "@ant-design/icons": "^4.7.0",
 
     "@testing-library/jest-dom": "^5.16.2",

BIN
public/camera.png
Просмотреть файл


BIN
public/favicon.ico
Просмотреть файл


BIN
public/icon.png
Просмотреть файл


+ 2 - 2
public/index.html
Просмотреть файл 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
+    <link rel="icon" href="%PUBLIC_URL%/icon.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="theme-color" content="#000000" />
 
     <meta
 
@@ -13,7 +13,7 @@
 
   
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     
-    <title>LenDocGram</title>
 
+    <title>Memogram</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 3 - 3
public/manifest.json
Просмотреть файл 

@@ -3,17 +3,17 @@
 
   "name": "Create React App Sample",
 
   "icons": [
 
     {
 
-      "src": "favicon.ico",
 
+      "src": "icon.png",
 
       "sizes": "64x64 32x32 24x24 16x16",
 
       "type": "image/x-icon"
 
     },
 
     {
 
-      "src": "logo192.png",
 
+      "src": "icon.png",
 
       "type": "image/png",
 
       "sizes": "192x192"
 
     },
 
     {
 
-      "src": "logo512.png",
 
+      "src": "icon.png",
 
       "type": "image/png",
 
       "sizes": "512x512"
 
     }

BIN
public/photocamera.png
Просмотреть файл


+ 38 - 123
src/App.js
Просмотреть файл 

@@ -1,106 +1,37 @@
 
 import './App.scss'
 
 import { Provider, connect } from 'react-redux'
 
-import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 
+import { Router, Route, Redirect, Switch } from 'react-router-dom'
 
 import createHistory from 'history/createBrowserHistory'
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-import { actionAboutUser, actionFullProfilePageUser, store } from './reducers'
 
-import { Basic } from './components/DropZone'
 
-import { CPageAboutUser, PageAboutUser } from './components/User'
 
-import { PageCreatePost, AddPost } from './components/NewPost'
 
-import { CPost, MyCarousel } from './components/Post'
 
-
 
+import React from 'react'
 
+import { store } from './reducers'
 
+import { CPageAboutUser } from './components/User'
 
+import { CPost } from './components/Post'
 
 import 'antd/dist/antd.css'
 
-import {actionSetAvatar} from './actions'
 
 import { actionFullProfilePage } from './reducers'
 
-import { Upload, Button, DatePicker, Space, Avatar, Image, Divider, Radio } from 'antd'
 
-import moment from 'moment'
 
-import { UploadOutlined, SearchOutlined } from '@ant-design/icons'
 
-import ImgCrop from 'antd-img-crop'
 
-import { UserOutlined } from '@ant-design/icons'
 
-import user from './materials/user1.png'
 
-import photoNotFound from './materials/photoNotFound.png'
 
-import {CExplorePosts} from './components/Expore'
 
-// import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 
-// import { Carousel } from 'react-responsive-carousel';
 
+import { CExplorePosts } from './components/Expore'
 
 import { CPostForFeed, Feed } from './components/PostFeed'
 
-import {CPostEditor } from './components/NewPost'
 
-import { CLoginForm,CRegisterForm,InputForm } from './components/LoginRegisterLogout'
 
+import { CPostEditor } from './components/NewPost'
 
 import { Header } from './components/Header'
 
-import {actionRemoveDataUser,actionClearDataUserType,actionClearUserData}  from './reducers'
 
+import {InputForm, CRegisterForm,CLoginForm} from './components/LoginRegisterLogout'
 
+
 
 console.log(store.getState())
 
 store.subscribe(() => console.log(store.getState()))
 
 console.log('ABOUT ME', store.getState().auth?.payload?.sub?.id)
 
-const OldMain = () =>
 
-
 
-  <Switch>
 
-  <Header />
 
-<Route path="/" exact component={PageMain}  />
 
-<Route path="/profile/:_id" component={CPageAboutUser}  />
 
-<Route path="/explore" component={CExplorePosts}   />
 
-<Route path="/edit/post/:_id" component={CPostEditor}   />
 
-<Route path="/post/:_id" component={CPost}   />
 
-<Route path="/feed" component={CPostForFeed}   />
 
-<CProtectedRoute
 
-     roles={['user']}
 
-     fallback="/feed"
 
-     path="/*"
 
-     component={CPostForFeed}
 
-   />
 
-
 
-</Switch>
 
-  
-const PageMain = () => <div className="PageMain">ГЛАВНАЯ</div>
 
-const Main = ({ _id }) => {
 
-  console.log('_id token in app: ', _id)
 
-  
-  // console.log('TOKEN ', _id)
 
-  console.log('localStorage.getItem: ', localStorage.getItem("authToken"))
 
-  return (
 
-    (!localStorage.getItem("authToken")&&!_id)
 
-      ?  
-      // {
 
-      //   actionClearDataUserType() 
-   <Switch>
 
-      <Route path='/login'
 
-            component={CLoginForm}  />
 
-          <Route path='/input'
 
-            component={InputForm} />
 
-            <Route path='/register'
 
-            component={CRegisterForm}   />
 
-            {/* <CProtectedRoute
 
-            roles={['anon']}
 
-            fallback="/input"
 
-            path="/*"
 
-            component={InputForm}
 
-          /> */}
 
-          {/* <Redirect from='/*' to='/input' /> */}
 
-       </Switch >  
-          // }  
-      :
 
-      <Switch>
 
-         <Header />
 
-    <Route path="/" exact component={PageMain}  />
 
-    <Route path="/profile/:_id" component={CPageAboutUser}  />
 
-    <Route path="/explore" component={CExplorePosts}   />
 
-    <Route path="/edit/post/:_id" component={CPostEditor}   />
 
-    <Route path="/post/:_id" component={CPost}   />
 
-    <Route path="/feed" component={CPostForFeed}   />
 
-    {/* <CProtectedRoute
 
-            roles={['user']}
 
-            fallback="/feed"
 
-            path="/*"
 
-            component={CPostForFeed}
 
-          /> */}
 
-
 
-</Switch>
 
-    )
 
-}
 
-
 
-
 
-
 
-const CMain =  connect((state) => ({
 
-  _id: state.auth?.payload?.sub?.id
 
-}))(Main)
 
+const Main = () => (
 
+  <main>
 
+    <Switch>
 
+      <Route path="/profile/:_id" component={CPageAboutUser} />
 
+      <Route path="/explore" component={CExplorePosts} />
 
+      <Route path="/edit/post/:_id" component={CPostEditor} />
 
+      <Route path="/post/:_id" component={CPost} />
 
+      <Route path="/feed" component={CPostForFeed} />
 
+      <Route path="/login" exact component={CLoginForm} />
 
+      <Route path="/register" component={CRegisterForm} />
 
+      <Route path="/input" component={InputForm} />
 
+      <Redirect from="/*" to="/feed" />
 
+    </Switch>
 
+  </main>
 
+)
 
 
 const ProtectedRoute = ({
 
   roles = [],
 
@@ -110,10 +41,8 @@ const ProtectedRoute = ({
 
   ...routeProps
 
 }) => {
 
   const WrapperComponent = (renderProps) => {
 
-    // console.log('тут шото ', intersection)
 
     const C = component
 
     if (!auth) auth = ['anon']
 
-
 
     let intersection = auth.filter((x) => roles.includes(x))
 
     if (intersection.length == 0) return <Redirect to={fallback} />
 
 
@@ -121,53 +50,39 @@ const ProtectedRoute = ({
 
   }
 
   return <Route {...routeProps} component={WrapperComponent} />
 
 }
 
-const PageRegister = () => {
 
-  return <div>REGISTER</div>
 
-}
 
 const CProtectedRoute = connect((state) => ({
 
-  auth: state.auth?.payload?.sub?.acl,
 
+  auth: state.auth?.payload?.sub.acl,
 
 }))(ProtectedRoute)
 
 
 export const history = createHistory()
 
 
-function App() {
 
+const ShowHeader = ({ token }) => (token ? <Header /> : null)
 
+const CShowHeader = connect((state) => ({
 
+  token: state.auth?.token,
 
+}))(ShowHeader)
 
 
+function App() {
 
   if (store.getState().auth?.token) {
 
-    history.push('/feed')
 
-    store.dispatch(actionRemoveDataUser())
 
-    // store.dispatch(actionClearUserData())
 
-    store.dispatch(actionClearDataUserType())
 
     console.log('токен', store.getState().auth?.payload?.sub?.id)
 
-    store.dispatch(actionFullProfilePage(store.getState().auth?.payload?.sub?.id))
 
-    store.dispatch(actionFullProfilePageUser(store.getState().auth.payload.sub?.id))
 
-    localStorage.authToken = store.getState().auth?.token;
 
-  }else {
 
+    store.dispatch(
 
+      actionFullProfilePage(store.getState().auth?.payload?.sub?.id),
 
+    )
 
+  } else {
 
     history.push('/input')
 
-    store.dispatch(actionRemoveDataUser())
 
-    store.dispatch(actionClearUserData())
 
-    store.dispatch(actionClearDataUserType())
 
   }
 
 
-  // store.getState().auth.payload?.sub?.id ? <Redirect to="/"/> : <Redirect to="/input"/>
 
   return (
 
     <Router history={history}>
 
       <Provider store={store}>
 
         <div className="App">
 
-          <Divider />
 
-          <CMain />
 
-{/*          
+          <CShowHeader />
 
+          <Main />
 
           <CProtectedRoute
 
             roles={['anon']}
 
-            fallback="/input"
 
-            path="/*"
 
+            fallback="/*"
 
+            path="/input"
 
             component={InputForm}
 
           />
 
-          <CProtectedRoute
 
-            roles={['user']}
 
-            fallback="/feed"
 
-            path="/*"
 
-            component={CPostForFeed}
 
-          /> */}
 
         </div>
 
       </Provider>
 
     </Router>

+ 190 - 163
src/App.scss
Просмотреть файл 

@@ -1,16 +1,16 @@
 
 .App {
 
-  // text-align: center;
 
   @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
 
   'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
 
   'Noto Color Emoji';
 
 }
 
-body{
 
+body {
 
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 
+  font-size: 20px;
 
 }
 
 
 @import '~antd/dist/antd.css';
 
 
-.Dropzone{
 
+.Dropzone {
 
   flex: 1;
 
   display: flex;
 
   flex-direction: column;
 
@@ -18,240 +18,267 @@ body{
 
   padding: 20px;
 
   border-width: 2px;
 
   border-radius: 2px;
 
-  border-style: dashed;
 
-  background-color: #ccb2eb;
 
+  background-color: #74d2e7;
 
   color: #1d5b78;
 
   outline: none;
 
-  transition: border .24s ease-in-out;
 
+  transition: border 0.24s ease-in-out;
 
   font-size: medium;
 
-  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
 
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 
+  transition: 0.3s;
 
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
+  font-size: 20px;
 
 }
 
-.Header{
 
+.Header {
 
   display: flex;
 
-position: fixed;
 
-align-items: center;
 
-justify-content: center;
 
-padding: 20px;
 
- z-index: 4;
 
-  width: 100%; 
-
 
- top: 0;
 
- background-color: white;
 
-}
 
-.Recomendations{
 
+  position: fixed;
 
+  align-items: center;
 
+  justify-content: center;
 
+  padding-top: 10px;
 
+  z-index: 4;
 
+  width: 100%;
 
+  background: #74d2e7;
 
+  top: 0;
 
+  transition: 0.3s;
 
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
+}
 
+.Recomendations {
 
   margin-left: 20px;
 
 }
 
-.Likes{
 
+.Likes {
 
   margin-left: 20px;
 
 }
 
-.User{
 
-  // padding: 10px;
 
+.User {
 
 }
 
-.Feed{
 
-  margin-right: 20px;  
+.Feed {
 
+  margin-right: 20px;
 
+  padding: 10px;
 
+  border-radius: 25px;
 
+  display: 'flex';
 
+  align-items: 'center';
 
+  justify-content: 'center';
 
 }
 
-.Post{
 
+
 
+.Post {
 
   max-width: 600px;
 
-  // display: block;
 
-   margin: 0 auto;
 
-  background-color: #faf6fd;
 
-  border: 6px solid #7922CC;
 
+  margin: 0 auto;
 
+  background-color: white;
 
+  border: 6px solid #dbebfa;
 
   padding: 10px;
 
   border-radius: 25px;
 
- display:'flex';
 
-   align-items: 'center';
 
-    justify-content: 'center'
 
+  display: 'flex';
 
+  align-items: 'center';
 
+  justify-content: 'center';
 
+  transition: 0.3s;
 
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
+  box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
 
 }
 
-ul{
 
-  margin: 0; 
-    padding: 4px; 
+ul {
 
+  margin: 0;
 
+  padding: 4px;
 
 }
 
 li {
 
-  display: inline; /* Отображать как строчный элемент */
 
-  margin-right: 5px; /* Отступ слева */
 
-  padding: 3px; /* Поля вокруг текста */
 
-  list-style-type: none; /* Убираем маркеры */
 
- }
 
-main{
 
-  // margin-left:200px;
 
-  // margin-right: 200px;
 
-  margin-top: 100px;
 
-}
 
-.Title{
 
+  display: inline;
 
+  margin-right: 5px;
 
+  padding: 3px;
 
+  list-style-type: none;
 
+}
 
+main {
 
+  margin-top: 130px;
 
+}
 
+.Title {
 
   text-align: left;
 
+  margin: 20px;
 
 }
 
-.Input{ 
-
 
+.Input {
 
   display: flex;
 
   width: 90%;
 
   padding: 5px;
 
-  margin:20px;
 
+  margin: 20px;
 
   border-radius: 10px;
 
-  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 
   font-size: 20px;
 
-
 
 }
 
-.container{
 
+.container {
 
   padding: 20px;
 
   margin: 20px;
 
 }
 
-.AboutMe{
 
-  
+.AboutMe {
 
+  margin-top: 20px;
 
   display: flex;
 
   justify-content: center;
 
-  //  float: left;
 
 }
 
-.Info{ 
+.Info {
 
   justify-content: center;
 
   display: flex;
 
   flex-direction: column;
 
-  // float: right;
 
-  // margin-left:200px;
 
-
 
 }
 
-.Card{
 
-  // margin: 0 1.5%;
 
-  //  width:  33.3%;
 
-   padding: 10px;
 
-   margin:50px;
 
-
 
-  // padding-top: 30%;
 
-  // background-size: 100% 100%;
 
- 
+.Card {
 
+  padding: 10px;
 
+  margin: 40px;
 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
 }
 
-.MyCarousel{
 
+.MyCarousel {
 
   display: block;
 
   min-width: 80%;
 
   min-height: 80%;
 
   background: #c6cece87;
 
-  border-width: 5px;
 
-  border-color: rgb(179, 188, 188);
 
-  border-style: solid;
 
-  margin-bottom: 40px;
 
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
+  box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
 
+
 
+  background-color: white;
 
+  border: 6px solid #dbebfa;
 
   margin: 0 10%;
 
   border-radius: 5px;
 
 }
 
-.Modal{
 
+.Modal {
 
   font-size: medium;
 
+  display: flex;
 
+  flex-direction: column;
 
+  margin-bottom: 20px;
 
+  // justify-content: center;
 
 }
 
-.PostFeed{
 
+.PostFeed {
 
   border-width: 20;
 
-  border-color: rgb(138, 138, 220);
 
+  border-color: #74d2e7;
 
   background: #edf8f89e;
 
   border-radius: 5px;
 
 
   border-style: solid;
 
   margin-bottom: 40px;
 
+  transition: 0.3s;
 
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
+  padding: 20px;
 
 }
 
-.PostImage{
 
-  // display: flex;
 
-  // align-items: 'center';
 
-  display: block;
 
+.InputForm {
 
+  position: fixed;
 
+  color: black;
 
+  flex-direction: column;
 
+  width: 800px;
 
+  height: 400px;
 
+  justify-content: center;
 
+  align-items: center;
 
+  border-radius: 30px;
 
+  padding-top: 10px;
 
+  background: #74d2e7;
 
+  padding: 50px;
 
+  transition: 0.3s;
 
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  margin: auto;
 
+}
 
+.PostImage {
 
+  display: flex;
 
+  align-items: center;
 
+  width: 700px;
 
+  margin: 20px;
 
+  height: 500px;
 
+  object-fit: cover;
 
   margin-left: auto;
 
   margin-right: auto;
 
-  // margin: 0 1.5%;
 
-  //  width:  33.3%;
 
-   padding: 10px;
 
-  //  margin:50px;
 
-   
-  // padding-top: 30%;
 
-  // background-size: 100% 100%;
 
- 
-}
 
-.slick-arrow.slick-prev {
 
-  background-color: red;
 
-  color: red;
 
-}
 
-.slick-arrow.slick-next {
 
-  background-color: red;
 
-  color: red;
 
-}
 
-.Comments{
 
-
 
-    position: fixed;
 
+}
 
+.Form {
 
+  padding: 300px;
 
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
 
+  background: #74d2e7;
 
+}
 
+.Comments {
 
+  position: fixed;
 
 
-    margin:20px;
 
-    width: 30%;
 
-  //  left: 50%; bottom: 10%; 
+  margin: 20px;
 
+  width: 30%;
 
   padding: 10px;
 
-   // margin:20px;
 
-   
-    // color: #fff; 
-   //  width: 30%; /* Ширина слоя */
 
 }
 
-.active {
 
-  background-color: red;
 
-}
 
-.Scroll{
 
-  // background-color: #e9dfdfa6;
 
-  // display: block;
 
+.Scroll {
 
   display: block;
 
-  // align-items: center;
 
-  // justify-content: center;
 
-  flex-direction:column;
 
-  // width: 100%;
 
+
 
+  flex-direction: column;
 
   height: 300px;
 
-  // padding: 1em;
 
   overflow-y: scroll;
 
-  // text-align: center;
 
 }
 
-.ScrollForFeed{
 
-  // background-color: #e9dfdfa6;
 
-  // display: block;
 
+.ScrollForFeed {
 
   display: block;
 
-  // align-items: center;
 
-  // justify-content: center;
 
-  flex-direction:column;
 
-  // width: 100%;
 
+  flex-direction: column;
 
   height: 150px;
 
-  // padding: 1em;
 
   overflow-y: scroll;
 
-  // text-align: center;
 
+}
 
+.button {
 
+  background-color: #dbebfa;
 
+  color: rgb(0, 0, 0);
 
+  -webkit-transition-duration: 0.4s;
 
+  transition-duration: 0.4s;
 
+  padding: 15px;
 
+  font-size: 15px;
 
+  border-radius: 5px;
 
+  margin: 15px;
 
+  font-weight: 600;
 
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
+  font-size: 15px;
 
+  transition: 0.3s;
 
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
 }
 
 
-.PostsFeed{
 
-  // background-color: #7922CC;
 
-  margin: 20px;
 
-  padding: 20px;
 
+.button:hover {
 
+  background-color: #fffff7;
 
+  color: black;
 
+}
 
 
+.PostsFeed {
 
+  margin: 20px;
 
+  padding: 40px;
 
 }
 
-.SpoilerButton{
 
+.SpoilerButton {
 
   right: 30px;
 
-  margin:20px;
 
+  margin: 20px;
 
 }
 
-Link{
 
+Link {
 
   display: flex;
 
   align-items: center;
 
-   justify-content: center;
 
-   text-decoration: none;
 
-   font-family: serif;
 
-   background-color: rgb(174, 172, 240);  
-   border: 2px solid rgb(37, 140, 184);
 
-   border-radius: 10px;
 
-   margin: 10px ;
 
-   padding: 10px;
 
-   font-weight: bold;
 
-   color: rgb(10, 9, 58);
 
-}
 
-.Link{
 
+  justify-content: center;
 
+  text-decoration: none;
 
+  font-family: serif;
 
+  background-color: rgb(174, 172, 240);
 
+  border: 2px solid rgb(37, 140, 184);
 
+  border-radius: 10px;
 
+  margin: 10px;
 
+  padding: 10px;
 
+  font-weight: bold;
 
+  color: rgb(10, 9, 58);
 
+}
 
+.Link {
 
   display: flex;
 
   align-items: center;
 
-   justify-content: center;
 
-   text-decoration: none;
 
-   font-family: serif;
 
-   background-color: rgb(174, 172, 240);  
-   border: 2px solid rgb(37, 140, 184);
 
-   border-radius: 10px;
 
-   margin: 10px ;
 
-   padding: 10px;
 
-   font-weight: bold;
 
-   color: rgb(10, 9, 58);
 
-}
 
-.Link:hover{
 
-  text-decoration: underline; 
-  background-color: rgb(123, 119, 228);  
-}
 
-.ResultUserFind{
 
+  justify-content: center;
 
+  text-decoration: none;
 
+  font-family: serif;
 
+  background-color: rgb(174, 172, 240);
 
+  border: 2px solid rgb(37, 140, 184);
 
+  border-radius: 10px;
 
+  margin: 10px;
 
+  padding: 10px;
 
+  font-weight: bold;
 
+  color: rgb(10, 9, 58);
 
+}
 
+
 
+.Avatar {
 
+  margin-left: 20px;
 
+  width: 100px;
 
+  border: 3px solid #fffff7;
 
+  height: 55px;
 
+  transition: 0.3s;
 
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 
+}
 
+.Avatar:hover {
 
+  box-shadow: 0 5px 10px rgba(77, 141, 168, 0.25),
 
+    0 10px 10px rgba(22, 93, 129, 0.22);
 
+}
 
+.Link:hover {
 
+  text-decoration: underline;
 
+  background-color: rgb(123, 119, 228);
 
+}
 
+.ResultUserFind {
 
   max-width: 500px;
 
   min-width: 320px;
 
   max-height: 500px;

+ 129 - 171
src/actions/index.js
Просмотреть файл 

@@ -1,12 +1,10 @@
 
 import {
 
   actionFullProfilePageUser,
 
-  actionProfilePageDataTypeUser,
 
-  actionFullProfilePage, actionFeedType,
 
+  actionFullProfilePage,
 
+  actionFeedType,
 
   actionClearFeedPosts,
 
-  actionFullSetAvatar,
 
-  actionFullFeed
 
 } from '../reducers'
 
-
 
+import { history } from '../App'
 
 export const actionAuthLogin = (token) => ({ type: 'AUTH_LOGIN', token })
 
 export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
 
 export const getGQL = (url) => (query, variables) =>
 
@@ -87,8 +85,6 @@ export const actionFullLogin = (login, password) => async (dispatch) => {
 
       ),
 
     ),
 
   )
 
-  console.log('localStorage.getItem: ', localStorage.getItem("authToken"))
 
-  console.log('AUTH TOKEN IN ACTION ', token)
 
   if (token) {
 
     await dispatch(actionAuthLogin(token))
 
   }
 
@@ -108,9 +104,9 @@ export const actionRegister = (login, password) =>
 
   )
 
 export const actionFullRegister = (login, password) => async (dispatch) => {
 
   let tokenCheck = await dispatch(actionRegister(login, password))
 
-  console.log('TOKEN CHECK', tokenCheck)
 
   if (tokenCheck?.login === login) {
 
-   await dispatch(actionFullLogin(login, password))
 
+    await dispatch(actionFullLogin(login, password))
 
+    history.push('/feed')
 
   }
 
 }
 
 export const uploadFile = (file) => {
 
@@ -124,17 +120,14 @@ export const uploadFile = (file) => {
 
     body: myForm,
 
   }).then((result) => result.json())
 
 }
 
-export const actionUploadFile = (file) => 
-    actionPromise('uploadFile', uploadFile(file))
 
-
 
-
 
-export const actionUploadFiles = (files) => 
-
 
-    actionPromise(
 
-      'uploadFiles',
 
-      Promise.all(files.map((file) => uploadFile(file))),
 
-    )
 
+export const actionUploadFile = (file) =>
 
+  actionPromise('uploadFile', uploadFile(file))
 
 
+export const actionUploadFiles = (files) =>
 
+  actionPromise(
 
+    'uploadFiles',
 
+    Promise.all(files.map((file) => uploadFile(file))),
 
+  )
 
 
 export const actionAvatar = (imageId, myId) =>
 
   actionPromise(
 
@@ -147,31 +140,10 @@ export const actionAvatar = (imageId, myId) =>
 
     }
 
     }
 
     }`,
 
-      { imageId, userId:  myId  },
 
+      { imageId, userId: myId },
 
     ),
 
-      )
 
-
 
-
 
-// export const actionChangeLogin = (imageId) => async (dispatch, getState) => {
 
-//   await dispatch(
 
-//     actionPromise(
 
-//       'changeLogin',
 
-//       gql(
 
-//         `mutation setAvatar($imageId:ID, $userId:String){
 
-//     UserUpsert(user:{_id: $userId, avatar: {_id: $imageId}}){
 
-//     _id, avatar{
 
-//         _id
 
-//     }
 
-//     }
 
-//     }`,
 
-//         { imageId, userId: getState().auth?.payload?.sub?.id },
 
-//       ),
 
-//     ),
 
-//   )
 
-// }
 
+  )
 
 
-// export const actionAboutUser = actionAboutMe
 
-// :'aboutMe'
 
 export const actionPostUpsert = (post) => async (dispatch) => {
 
   await dispatch(
 
     actionPromise(
 
@@ -265,13 +237,14 @@ export const actionAllPostsFeed = () =>
 
     ),
 
   )
 
 
-export const actionOnePost = (_id) => 
+export const actionOnePost = (_id) =>
 
   actionPromise(
 
     'onePost',
 
     gql(
 
       `query OneFind($post:String){
 
         PostFindOne(query:$post){
 
        _id title text images{_id url}
 
+       owner{_id login avatar{_id url}}
 
        createdAt
 
        comments{
 
          _id, createdAt, text  owner{_id login avatar{_id url}}
 
@@ -294,10 +267,9 @@ export const actionOnePost = (_id) =>
 
       {
 
         post: JSON.stringify([{ _id }]),
 
       },
 
-    )
 
+    ),
 
   )
 
 
-
 
 export const actionFindLikes = (_id) => async (dispatch) => {
 
   await dispatch(
 
     actionPromise(
 
@@ -416,7 +388,6 @@ export const actionAddSubComment = (commentId, comment) => async (dispatch) => {
 
 //   }
 
 // }
 
 
-
 
 export const actionAddFullComment = (postId, comment) => async (
 
   dispatch,
 
   getState,
 
@@ -461,8 +432,7 @@ export const actionAddSubFullComment = (postId, commentId, comment) => async (
 
 //               }
 
 //             }))
 
 
-export const actionAddLike = (postId) => async (dispatch) => {
 
-  await dispatch(
 
+export const actionAddLike = (postId) =>
 
     actionPromise(
 
       'addLike',
 
       gql(
 
@@ -480,10 +450,7 @@ export const actionAddLike = (postId) => async (dispatch) => {
 
           },
 
         },
 
       ),
 
-    ),
 
-  )
 
-}
 
-
 
+    )
 
 
 export const actionGetFindLiked = (_id) => async (dispatch) => {
 
   await dispatch(
 
@@ -527,8 +494,7 @@ export const actionDeleteFullLike = (likeId, postId) => async (
 
   }
 
   //  await dispatch(actionOnePost(postId));
 
 }
 
-export const actionDeleteLike = (likeId, postId) => async (dispatch) => {
 
-  await dispatch(
 
+export const actionDeleteLike = (likeId, postId) =>
 
     actionPromise(
 
       'deleteLike',
 
       gql(
 
@@ -549,27 +515,22 @@ export const actionDeleteLike = (likeId, postId) => async (dispatch) => {
 
           },
 
         },
 
       ),
 
-    ),
 
-  )
 
-}
 
-
 
+    )
 
 
-export const actionSetAvatar = (file, myId)  => async (dispatch) => {
 
-   const avatar = await dispatch(actionAvatar(file, myId));
 
-  console.log('AVATAR', avatar)
 
+export const actionSetAvatar = (file, myId) => async (dispatch) => {
 
+  const avatar = await dispatch(actionAvatar(file, myId))
 
   if (avatar) {
 
     await dispatch(actionFullProfilePageUser(myId))
 
 
     await dispatch(actionFullProfilePage(myId))
 
   }
 
-  
 }
 
 
-export const actionPostsFeed = (myFollowing,skip) => 
-    actionPromise(
 
-      'postsFeed',
 
-      gql(
 
-        `query PostsFeed($ownerId:String){
 
+export const actionPostsFeed = (myFollowing, skip) =>
 
+  actionPromise(
 
+    'postsFeed',
 
+    gql(
 
+      `query PostsFeed($ownerId:String){
 
           PostFind(query:$ownerId){
 
           owner{_id login avatar{url}}
 
           images{_id url} title text
 
@@ -590,90 +551,86 @@ export const actionPostsFeed = (myFollowing,skip) =>
 
       }
 
   }
 
 }`,
 
-        {
 
-          ownerId: JSON.stringify([
 
-            {
 
-              ___owner: {
 
-                $in: myFollowing
 
-              },
 
-            },
 
-            {
 
-              sort: [{ _id: -1 }],
 
-              skip: [skip||0],
 
-              limit: [10],
 
+      {
 
+        ownerId: JSON.stringify([
 
+          {
 
+            ___owner: {
 
+              $in: myFollowing,
 
             },
 
-          ]),
 
-        },
 
-      ),
 
-    )
 
+          },
 
+          {
 
+            sort: [{ _id: -1 }],
 
+            skip: [skip || 0],
 
+            limit: [10],
 
+          },
 
+        ]),
 
+      },
 
+    ),
 
+  )
 
 
-    export const actionFullAllGetPosts = () => async (dispatch, getState) => {
 
-      const {
 
-        feed: { postsFeed = [] },
 
-      } = getState();
 
-      const myFollowing =
 
-        getState().promise.aboutMe?.payload?.following.map(
 
-        ({ _id }) => _id
 
-        )
 
-
 
-      const myId = getState().profileData?.aboutMe?._id;
 
-          console.log('MY ID FOR FEED ', myId)
 
-      let postsUsers = await dispatch(actionPostsFeed([...myFollowing, myId], postsFeed?.length));
 
-      if (postsUsers) {
 
-        dispatch(actionFeedType(postsUsers));
 
-      }
 
-    };
 
-    
+export const actionFullAllGetPosts = () => async (dispatch, getState) => {
 
+  const {
 
+    feed: { postsFeed = [] },
 
+  } = getState()
 
+  const myFollowing = getState().promise.aboutMe?.payload?.following?.map(
 
+    ({ _id }) => _id,
 
+  )
 
+  const myId = getState().profileData?.aboutMe?._id
 
+  let postsUsers = await dispatch(
 
+    actionPostsFeed([...myFollowing, myId], postsFeed?.length),
 
+  )
 
+  if (postsUsers) {
 
+    dispatch(actionFeedType(postsUsers))
 
+  }
 
+}
 
 
 export const actionPostsFeedCount = (getState) =>
 
-    actionPromise(
 
-      'postsFeedCount',
 
-      gql(
 
-        ` query CountAllPostsUser($_id:String!){
 
+  actionPromise(
 
+    'postsFeedCount',
 
+    gql(
 
+      ` query CountAllPostsUser($_id:String!){
 
                 PostCount(query:$_id)
 
 
                 }`,
 
 
-        {
 
-          _id: JSON.stringify([{
 
+      {
 
+        _id: JSON.stringify([
 
+          {
 
             ___owner: {
 
               $in: getState().promise.aboutMe?.payload?.following.map(
 
                 ({ _id }) => _id,
 
               ),
 
             },
 
-          }])
 
-        },
 
-      ),
 
-    )
 
-
 
-
 
-
 
+          },
 
+        ]),
 
+      },
 
+    ),
 
+  )
 
 
 export const actionExplorePosts = (skip) =>
 
   actionPromise(
 
     'explorePosts',
 
     gql(
 
-      ` query allPosts($id:String!){
 
-                PostFind(query:$id){
 
-                    _id  
-                     images{url _id }
 
-                     title text images{_id url}
 
-                     createdAt
 
-                     comments{
 
-                       _id, createdAt, text  owner{_id login avatar{_id url}}
 
-                       answers{
 
-                         _id, createdAt, text owner{_id login  avatar{_id url}}
 
-                        
-                       }
 
-                     owner{_id login avatar{_id url}}}
 
-                     likes{
 
-                       _id
 
-                       owner{				
-                          _id login avatar {_id url}
 
-                         }
 
-                   }
 
-
 
-                }
 
+      ` query PostsFeed($id:String){
 
+        PostFind(query:$id){
 
+        owner{_id login avatar{url}}
 
+        images{_id url} title text
 
+        _id likesCount 
+
 
+          likes{
 
+                _id
 
+                owner{				
+                   _id login avatar {_id url}
 
+                  }
 
+            }
 
+            comments{
 
+              _id, createdAt, text  owner{_id login avatar{_id url}}
 
+              answers{
 
+                _id, createdAt, text owner{_id login  avatar{_id url}}
 
+               
+              }
 
+    }
 
+}
 
             }`,
 
       {
 
         id: JSON.stringify([
 
@@ -714,23 +671,22 @@ export const actionSearchUser = (userName) => async (dispatch) => {
 
   )
 
 }
 
 
-export const actionUserUpsert = (user) => 
-    actionPromise(
 
-      'userUpsert',
 
-      gql(
 
-        `mutation UserUpsert($user:UserInput){
 
+export const actionUserUpsert = (user) =>
 
+  actionPromise(
 
+    'userUpsert',
 
+    gql(
 
+      `mutation UserUpsert($user:UserInput){
 
                   UserUpsert(user:$user){
 
                       _id login nick avatar{_id}
 
                   }
 
               }`,
 
-        {
 
-          user: {
 
-            ...user
 
-          }
 
+      {
 
+        user: {
 
+          ...user,
 
         },
 
-      ),
 
-    )
 
-
 
+      },
 
+    ),
 
+  )
 
 
 export const actionAboutUser = (_id) =>
 
   actionPromise(
 
@@ -750,7 +706,7 @@ export const actionAboutUser = (_id) =>
 
     ),
 
   )
 
 
-export const actionAllPostsUser = (userId,skip) =>
 
+export const actionAllPostsUser = (userId, skip) =>
 
   actionPromise(
 
     'allPosts',
 
     gql(
 
@@ -788,7 +744,7 @@ export const actionSubscribe = (my_Id, followId, oldFollowing) =>
 
       {
 
         user: {
 
           _id: my_Id,
 
-          following: [...oldFollowing || [], { _id: followId }],
 
+          following: [...(oldFollowing || []), { _id: followId }],
 
         },
 
       },
 
     ),
 
@@ -810,60 +766,64 @@ export const actionUnSubscribe = (my_Id, oldFollowing) =>
 
       {
 
         user: {
 
           _id: my_Id,
 
-          following: oldFollowing || []
 
+          following: oldFollowing || [],
 
         },
 
       },
 
     ),
 
   )
 
 
-export const actionFullSubscribe = (my_Id, followId) => async (dispatch, getState) => {
 
+export const actionFullSubscribe = (my_Id, followId) => async (
 
+  dispatch,
 
+  getState,
 
+) => {
 
   const oldFollowing = (
 
-    getState().promise.aboutMe?.payload?.following || []).map(({_id }) => ({ _id }) )
 
-  //console.log('FOLLOWING _ID ', oldFollowing)
 
+    getState().promise.aboutMe?.payload?.following || []
 
+  ).map(({ _id }) => ({ _id }))
 
   let followingId = await dispatch(
 
     actionSubscribe(my_Id, followId, oldFollowing),
 
   )
 
   if (followingId) {
 
     Promise.all([
 
       dispatch(actionFullProfilePageUser(followId)),
 
-      dispatch(actionFullProfilePage(my_Id))
 
-    ]);
 
+      dispatch(actionFullProfilePage(my_Id)),
 
+    ])
 
     await dispatch(actionClearFeedPosts())
 
-
 
   }
 
 }
 
 
-export const actionFullUnSubscribe = (my_Id, followId) => async (dispatch,getState) => {
 
-  const oldFollowing= (
 
-    getState().promise.aboutMe?.payload?.following || []
 
-  ).filter((item) => item._id !== followId).map(({_id }) => ({ _id }));
 
- // console.log('OLDFOLLOWING ', oldFollowing)
 
+export const actionFullUnSubscribe = (my_Id, followId) => async (
 
+  dispatch,
 
+  getState,
 
+) => {
 
+  const oldFollowing = (getState().promise.aboutMe?.payload?.following || [])
 
+    .filter((item) => item._id !== followId)
 
+    .map(({ _id }) => ({ _id }))
 
   if (oldFollowing) {
 
     await dispatch(actionUnSubscribe(my_Id, oldFollowing))
 
     Promise.all([
 
       await dispatch(actionFullProfilePageUser(followId)),
 
-    await dispatch(actionFullProfilePage(my_Id))
 
+      await dispatch(actionFullProfilePage(my_Id)),
 
     ])
 
     await dispatch(actionClearFeedPosts())
 
-
 
   }
 
 }
 
-export const actionAddFullLike = (postId) => 
-async(dispatch,getState) => {
 
+export const actionAddFullLike = (postId) => async (dispatch, getState) => {
 
   await dispatch(actionAddLike(postId))
 
   const {
 
     promise: {
 
       addLike: { status },
 
     },
 
-} = getState();
 
-  if(status==="FULFILLED")
 
-  {
 
-    await dispatch(actionOnePost(postId));
 
+  } = getState()
 
+  if (status === 'FULFILLED') {
 
+    await dispatch(actionOnePost(postId))
 
   }
 
   //  await dispatch(actionOnePost(postId));
 
 }
 
 
-export const actionAddFullLikeForFeed = (postId) => async (dispatch, getState) => {
 
+export const actionAddFullLikeForFeed = (postId) => async (
 
+  dispatch,
 
+  getState,
 
+) => {
 
   await dispatch(actionAddLike(postId))
 
   const {
 
     promise: {
 
@@ -873,7 +833,6 @@ export const actionAddFullLikeForFeed = (postId) => async (dispatch, getState) =
 
   if (status === 'FULFILLED') {
 
     await dispatch(actionOnePost(postId))
 
     await dispatch(actionFullAllGetPosts())
 
-
 
   }
 
   //  await dispatch(actionOnePost(postId));
 
 }
 
@@ -907,7 +866,6 @@ export const actionUserUpdate = (user = {}) => async (dispatch, getState) => {
 
   await dispatch(actionAboutMe())
 
 }
 
 
-
 
 export const actionFindSubComment = (findId) =>
 
   actionPromise(
 
     'subComments',
 
@@ -936,4 +894,4 @@ export const actionFindSubComment = (findId) =>
 
         ]),
 
       },
 
     ),
 
-  )
 
+  )

+ 45 - 85
src/components/DropZone.js
Просмотреть файл 

@@ -1,92 +1,52 @@
 
 import { useDropzone } from 'react-dropzone'
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-import { Upload, Button, DatePicker } from 'antd'
 
-import { UploadOutlined,SearchOutlined } from '@ant-design/icons'
 
+import React, { useEffect } from 'react'
 
+import { Button,Image } from 'antd'
 
+import { UploadOutlined } from '@ant-design/icons'
 
 import { sortableContainer, sortableElement } from 'react-sortable-hoc'
 
-import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 
-
 
-// import {backendURL} from '../actions'
 
-import { Image } from 'antd';
 
-import { arrayMove, arrayMoveImmutable, arrayMoveMutable } from 'array-move'
 
 
 export function Basic({ onLoad }) {
 
-    const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
 
-    const files = acceptedFiles.map((file) => (
 
-      <li key={file.path}>
 
-        {file.path} - {file.size} bytes
 
-      </li>
 
-    ))
 
-    console.log('acceptedFiles',acceptedFiles)
 
-    useEffect(() => {
 
-      if(acceptedFiles)
 
-        onLoad(acceptedFiles)
 
-    }
 
-    , [acceptedFiles])
 
-    return (
 
-      <section className="container">
 
-        <div {...getRootProps({ className: 'Dropzone' })}>
 
-          <input {...getInputProps()} />
 
-          <Button icon={<UploadOutlined />}>
 
-            Drag 'n' drop some files here, or click to select files
 
-          </Button>
 
-        </div>
 
-        <aside>
 
-          <h4 style={{ color: 'black' }}>Files</h4>
 
-          <ul>{files}</ul>
 
-        </aside>
 
-      </section>
 
-    )
 
-  }
 
-  
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
 
+  const files = acceptedFiles.map((file) => (
 
+    <li key={file.path}>
 
+      {file.path} - {file.size} bytes
 
+    </li>
 
+  ))
 
+  // console.log('acceptedFiles',acceptedFiles)
 
+  useEffect(() => {
 
+    if (acceptedFiles) onLoad(acceptedFiles)
 
+  }, [acceptedFiles])
 
+  return (
 
+    <section className="container">
 
+      <div {...getRootProps({ className: 'Dropzone' })}>
 
+        <input {...getInputProps()} />
 
+        <Button type="default" size="large" icon={<UploadOutlined />}>
 
+          Drag 'n' drop some files here, or click to select files
 
+        </Button>
 
+      </div>
 
+    </section>
 
+  )
 
+}
 
 
-  export function ImageDemo({_id,index,url}) {
 
-    return (
 
-     <SortableItem url={url} key={`item-${_id}`} index={index} />
 
-    );
 
-  }
 
+export function ImageDemo({ _id, index, url }) {
 
+  return <SortableItem url={url} key={`item-${_id}`} index={index} />
 
+}
 
 export const SortableItem = sortableElement(({ url }) => {
 
- // const [visible, setVisible] = useState(false);
 
- const [visible, setVisible] = useState(false)
 
-console.log('STATE PHOTO ', visible)
 
-//  preview={{
 
-//   visible,
 
-//   src:  '/' + value.url,
 
-//   onVisibleChange: value => {
 
-//       setVisible(value);
 
-//   }}}
 
   return (
 
-    <li>
 
-      {/* <img   style={{ maxWidth: '200px', maxHeight: '200px' }} src={ '/' + url} /> */}
 
-          <Image 
-          //  width={200}
 
-        
-           style={{  maxWidth: '200px', maxHeight: '200px' }} src={ '/' + url} 
-          //  style={{ display: 'none' }}
 
-          // src={ '/' + url}
 
-           preview={{
 
-            visible,
 
-               src: '/' + url,
 
-               onVisibleChange: visible => {
 
-                setVisible(visible);
 
-               },
 
-           }}
 
-
 
-           onClick={() => setVisible(!visible)}
 
-         />
 
-    </li>
 
-   )
 
-  }
 
-)
 
-// style={{ maxWidth: '200px', maxHeight: '200px' }} src={ '/' + url} 
- export  const SortableContainer = sortableContainer(({ children }) => {
 
-    return (
 
-      <>
 
-        <ul>{children}</ul>
 
-  
-        {/* <input value={title}/> */}
 
-      </>
 
-    )
 
-  })
 
-  
-  
-
 
+    <Image
 
+      style={{
 
+        margin: '10px',
 
+        maxWidth: '200px',
 
+        boxShadow: '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
 
+        maxHeight: '200px',
 
+      }}
 
+      src={'/' + url}
 
+    />
 
+  )
 
+})
 
+export const SortableContainer = sortableContainer(({ children }) => {
 
+  return (
 
+    <>
 
+      <ul>{children}</ul>
 
+    </>
 
+  )
 
+})

+ 33 - 38
src/components/EditAvatar.js
Просмотреть файл 

@@ -1,29 +1,11 @@
 
-import { EditOutlined } from '@ant-design/icons'
 
 import { connect } from 'react-redux'
 
-import { Upload, message, Avatar, Button } from 'antd'
 
-import { actionAvatar, actionUploadFile,actionSetAvatar } from '../actions'
 
-import ImgCrop from 'antd-img-crop'
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-import { Basic } from '../helpers'
 
-import user from '../materials/user1.png'
 
-import { ConstructorModal } from '../helpers'
 
-import { Image, Divider, Radio } from 'antd'
 
-import { history } from '../App'
 
+import { message, Image, Button } from 'antd'
 
+import { actionUploadFile,actionSetAvatar } from '../actions'
 
+import React, { useState, useEffect } from 'react'
 
+import { Basic,ConstructorModal } from '../helpers'
 
 
-export const propsUploadFile = {
 
-  name: 'photo',
 
-  action: `/upload`,
 
-  headers:
 
-    localStorage.authToken || sessionStorage.authToken
 
-      ? {
 
-          Authorization:
 
-            'Bearer ' + (localStorage.authToken || sessionStorage.authToken),
 
-        }
 
-      : {},
 
-}
 
 const EditInfo = ({ info, onSave, onFileDrop, fileStatus, myId }) => {
 
   const [state, setState] = useState(info)
 
-
 
   const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
 
 
   const showModalEdit = () => {
 
@@ -45,36 +27,49 @@ const EditInfo = ({ info, onSave, onFileDrop, fileStatus, myId }) => {
 
   const saveAvatar = () => onSave(state?._id, myId)
 
     && message.success(`Avatar success changed!`)&&setIsModalVisibleEdit(false)
 
 
-  // const onChangeLogin = (event) =>
 
-  //   setState({
 
-  //     ...state,
 
-  //     login: event.target.value,
 
-  //   })
 
-
 
-
 
   return (
 
     <>
 
-      <button onClick={showModalEdit}>EDIT</button>
 
+      <Button
 
+        type="primary" style={{
 
+          fontWeight: '600',
 
+          fontSize:'15px',
 
+          transition: ".3s",
 
+          boxShadow: "0 5px 15px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
 
+        }}
 
+        
+        onClick={showModalEdit}>Edit avatar</Button>
 
       
         <ConstructorModal title={'Edit avatar'}
 
                 isModalVisible={isModalVisibleEdit}
 
         setIsModalVisible={setIsModalVisibleEdit}
 
         handleCancel={handleCancelEdit}
 
       >  
-      <Basic onLoad={onFileDrop}/>
 
+        <Basic onLoad={onFileDrop} />
 
+        <center>
 
       {fileStatus?.payload?.url && (
 
         <Image
 
-          style={{ marginRight: '20px', maxWidth: '200px', maxHeight: '200px' }}
 
+              style={{
 
+                marginBottom: '30px', width: '200px',
 
+                objectFit: 'cover',
 
+                height: '150px'
 
+              }}
 
           src={'/' + fileStatus?.payload?.url}
 
         />
 
-      )}
 
-        <br/>
 
-      <Button style={{}}
 
-        disabled={state?.images?.length == 0}
 
-        onClick={saveAvatar}>
 
+          )}
 
+          </center>
 
+        <br />
 
+        <center>
 
+
 
+       
+      <Button style={{width:"200px"}}
 
+        disabled={state ? false : true}
 
+          onClick={saveAvatar}
 
+          size="large"
 
+          type="primary"
 
+        >
 
         Save
 
         </Button>
 
-      
+       </center>
 
       </ConstructorModal>
 
     </>
 
   )

+ 3 - 4
src/components/Expore.js
Просмотреть файл 

@@ -1,11 +1,10 @@
 
-// explorePosts
 
 import {
 
     actionOnePost, actionExplorePosts
 
 } from '../actions'
 
 import { Row, Col } from 'antd'
 
 import { Card } from './Post'
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-import { Provider, connect } from 'react-redux'
 
+import React, { useEffect } from 'react'
 
+import { connect } from 'react-redux'
 
   
 const ExplorePosts = ({explorePosts,onPost,onExlorePosts }) => {
 
     useEffect(() => {
 
@@ -36,7 +35,7 @@ const ExplorePosts = ({explorePosts,onPost,onExlorePosts }) => {
 
 }
 
 export const CExplorePosts = connect(
 
     (state) => ({
 
-      my_Id: state.auth.payload.sub.id || '',
 
+      my_Id: state.auth?.payload?.sub?.id || '',
 
       countAllPostsUser: state.promise?.countAllPostsUser?.payload,
 
       explorePosts: state.promise?.explorePosts?.payload
 
     }),

+ 21 - 29
src/components/Header.js
Просмотреть файл 

@@ -1,47 +1,40 @@
 
-import user from '../materials/user1.png'
 
+import user from '../materials/user.png'
 
 import { actionFullProfilePageUser } from '../reducers'
 
 import { Avatar, Button } from 'antd'
 
-import { CSearch } from '../components/Search_Users'
 
+import { CSearch } from './Search_Users'
 
 import { Link } from 'react-router-dom'
 
 import { connect } from 'react-redux'
 
-import {  AddPost } from '../components/NewPost'
 
+import { AddPost } from './NewPost'
 
 import React, { useEffect } from 'react'
 
-import { CLoginForm,CRegisterForm,CLogout } from '../components/LoginRegisterLogout'
 
+import { CLogout } from './LoginRegisterLogout'
 
 
-export const Feed = ({ aboutMe, onAllFollowing, onPostsFeed, postsFeed }) => {
 
-  console.log('POST FEED', postsFeed)
 
+export const Feed = () => {
 
   return (
 
     <>
 
-      <Link className="Feed" to={`/feed`}>
 
-        <Button className="Feed" size="large">
 
-          {' '}
 
-          Feed{' '}
 
-        </Button>
 
+      <Link to={`/feed`}>
 
+        <a className="button"> Feed </a>
 
       </Link>
 
     </>
 
   )
 
 }
 
-export const CFeed = connect((state) => ({
 
-  aboutMe: state?.profileData?.aboutMe,
 
-}))(Feed)
 
-
 
-
 
 
 const Recommendations = () => (
 
-  <Link className="Feed" to={`/explore`}>
 
-  <Button size="large" className="Recomendations">
 
-    {' '}
 
-      Explore
 
+  <Link to={`/explore`}>
 
+    <a size="large" className="button">
 
       {' '}
 
-    </Button>
 
-    </Link>
 
+      Explore{' '}
 
+    </a>
 
+  </Link>
 
 )
 
 const User = ({ my_Id, aboutMe: { _id, login, avatar } = {}, onMyPage }) => {
 
   useEffect(() => onMyPage(_id), [_id])
 
   return (
 
-    <Link className="User" to={`/profile/${_id}`}>
 
-      {avatar?.url ? <Avatar src={'/' + avatar?.url} style={{ marginLeft: '20px',width:'45px', height:'45px'}} /> :
 
-        <Avatar src={user} style={{ marginLeft: '20px',width:'45px', height:'45px'}}/>}
 
+    <Link to={`/profile/${_id}`}>
 
+      {avatar?.url ? (
 
+        <Avatar src={'/' + avatar?.url} size={60} className="Avatar" />
 
+      ) : (
 
+        <Avatar src={user} size={60} className="Avatar" />
 
+      )}
 
     </Link>
 
   )
 
 }
 
@@ -57,13 +50,12 @@ const CUser = connect(
 
 export const Header = () => {
 
   return (
 
     <section className="Header">
 
-        <CLogout className='Link'/>
 
-    {/* <Link className='Link' to={`/login`}> Sign In </Link> */}
 
+      <CLogout className="button" />
 
       <CSearch />
 
-      <CFeed />
 
+      <Feed />
 
       <AddPost />
 
       <Recommendations />
 
- 
+
 
       <CUser />
 
     </section>
 
   )

+ 14 - 18
src/components/Like.js
Просмотреть файл 

@@ -1,10 +1,9 @@
 
 import { Avatar, Col, Row } from 'antd'
 
 import { ConstructorModal } from '../helpers'
 
-import { ResultUserFind } from '../components/Search_Users'
 
-import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 
+import { Link } from 'react-router-dom'
 
 import user from '../materials/user.png'
 
 import { HeartOutlined, HeartFilled } from '@ant-design/icons'
 
-import React, { useMemo, useState, useEffect } from 'react'
 
+import React, { useState } from 'react'
 
 
 export const Likes = ({ likes }) => {
 
   return (
 
@@ -13,17 +12,17 @@ export const Likes = ({ likes }) => {
 
         {likes &&
 
           likes?.map(({ owner: { _id, login, avatar } }) => (
 
             <Link to={`/profile/${_id}`}>
 
-              <Row>
 
+              <Row style={{margin:'10px'}}>
 
                 <Col offset={1}>
 
-                  <Avatar
 
-                    style={{
 
-                      width: '50px',
 
-                      height: '50px',
 
-                      // marginRight: '30px',
 
-                      // position: 'absolute',
 
-                    }}
 
-                    src={'/' + avatar?.url || user}
 
-                  />
 
+                {avatar?.url ? (
 
+              <Avatar
 
+                style={{ width: '50px', height: '50px' }}
 
+                src={'/' + avatar?.url}
 
+              />
 
+            ) : (
 
+              <Avatar style={{ width: '50px', height: '50px' }} src={user} />
 
+            )}
 
+
 
                 </Col>
 
                 <Col offset={2}>
 
                   <h3> {login || 'Anon'}</h3>
 
@@ -46,7 +45,7 @@ export const Like = ({
 
   const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
 
   const changeLike = () =>
 
     likeId ? deleteLike(likeId, postId) : addLike(postId)
 
-  // console.log('likeId', likeId)
 
+
 
   const [isModalVisible, setIsModalVisible] = useState(false)
 
 
   const showModal = () => {
 
@@ -72,10 +71,7 @@ export const Like = ({
 
             {likes.length} likes
 
           </h3>
 
         ) : (
 
-          <h3 style={{ cursor: 'pointer', paddingLeft: 8 }}>
 
-            {' '}
 
-             0 likes
 
-          </h3>
 
+          <h3 style={{ cursor: 'pointer', paddingLeft: 8 }}> 0 likes</h3>
 
         )}
 
       </div>
 
       <ConstructorModal

+ 27 - 29
src/components/ListFollowers.js
Просмотреть файл 

@@ -1,24 +1,22 @@
 
-
 
-import { Avatar, Col} from 'antd'
 
 import { ConstructorModal } from '../helpers'
 
 import { ResultUserFind } from '../components/Search_Users'
 
-
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-
 
-export const ListFollowers = ({aboutUserFollowers,followers,onPageData }) => {
 
-    
+import React, { useState } from 'react'
 
+export const ListFollowers = ({
 
+  aboutUserFollowers,
 
+  followers,
 
+  onPageData,
 
+}) => {
 
   const [isModalVisibleFollowers, setIsModalVisibleFollowers] = useState(false)
 
 
   const showModalFollowers = () => {
 
     setIsModalVisibleFollowers(true)
 
   }
 
-    const handleCancelFollowers = () => {
 
-        setIsModalVisibleFollowers(false)
 
-      }
 
-    return (
 
+  const handleCancelFollowers = () => {
 
+    setIsModalVisibleFollowers(false)
 
+  }
 
+  return (
 
     <>
 
-    {
 
-        followers?.length > 0 ? (
 
+      {followers?.length > 0 ? (
 
         <h3
 
           style={{ cursor: 'pointer', marginLeft: '20px' }}
 
           onClick={showModalFollowers}
 
@@ -28,20 +26,20 @@ export const ListFollowers = ({aboutUserFollowers,followers,onPageData }) => {
 
       ) : (
 
         <h3 style={{ marginLeft: '20px' }}> 0 followers </h3>
 
       )}
 
-    
-    <ConstructorModal
 
-    title={'Followers'}
 
-    isModalVisible={isModalVisibleFollowers}
 
-    setIsModalVisible={setIsModalVisibleFollowers}
 
-  >
 
-    <ResultUserFind
 
-      size={'40px'}
 
-      onPageData={onPageData}
 
-      handleCancel={handleCancelFollowers}
 
-      userFind={aboutUserFollowers}
 
-    />
 
-            </ConstructorModal>
 
-        </>
 
-    )
 
+
 
+      <ConstructorModal
 
+        title={'Followers'}
 
+        isModalVisible={isModalVisibleFollowers}
 
+        setIsModalVisible={setIsModalVisibleFollowers}
 
+      >
 
+        <ResultUserFind
 
+          size={'40px'}
 
+          onPageData={onPageData}
 
+          handleCancel={handleCancelFollowers}
 
+          userFind={aboutUserFollowers}
 
+        />
 
+      </ConstructorModal>
 
+    </>
 
+  )
 
 }
 
-export default ListFollowers
 
+export default ListFollowers

+ 29 - 30
src/components/ListFollowing.js
Просмотреть файл 

@@ -1,25 +1,24 @@
 
-
 
-import { Avatar, Col} from 'antd'
 
+import { Avatar, Col } from 'antd'
 
 import { ConstructorModal } from '../helpers'
 
 import { ResultUserFind } from '../components/Search_Users'
 
+import React, { useState } from 'react'
 
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-
 
-export const ListFollowing = ({aboutUserFollowing,following,onPageData }) => {
 
-    
-    const [isModalVisibleFollowing, setIsModalVisibleFollowing] =
 
-        useState(false)
 
+export const ListFollowing = ({
 
+  aboutUserFollowing,
 
+  following,
 
+  onPageData,
 
+}) => {
 
+  const [isModalVisibleFollowing, setIsModalVisibleFollowing] = useState(false)
 
 
   const showModalFollowing = () => {
 
     setIsModalVisibleFollowing(true)
 
   }
 
-    const handleCancelFollowing = () => {
 
-        setIsModalVisibleFollowing(false)
 
-      }
 
-    return (
 
+  const handleCancelFollowing = () => {
 
+    setIsModalVisibleFollowing(false)
 
+  }
 
+  return (
 
     <>
 
-    {
 
-        following?.length > 0 ? (
 
+      {following?.length > 0 ? (
 
         <h3
 
           style={{ cursor: 'pointer', marginLeft: '20px' }}
 
           onClick={showModalFollowing}
 
@@ -29,20 +28,20 @@ export const ListFollowing = ({aboutUserFollowing,following,onPageData }) => {
 
       ) : (
 
         <h3 style={{ marginLeft: '20px' }}> 0 following </h3>
 
       )}
 
-    
-    <ConstructorModal
 
-    title={'Following'}
 
-    isModalVisible={isModalVisibleFollowing}
 
-    setIsModalVisible={setIsModalVisibleFollowing}
 
-  >
 
-    <ResultUserFind
 
-      size={'40px'}
 
-      onPageData={onPageData}
 
-      handleCancel={handleCancelFollowing}
 
-      userFind={aboutUserFollowing}
 
-    />
 
-            </ConstructorModal>
 
-        </>
 
-    )
 
+
 
+      <ConstructorModal
 
+        title={'Following'}
 
+        isModalVisible={isModalVisibleFollowing}
 
+        setIsModalVisible={setIsModalVisibleFollowing}
 
+      >
 
+        <ResultUserFind
 
+          size={'40px'}
 
+          onPageData={onPageData}
 
+          handleCancel={handleCancelFollowing}
 
+          userFind={aboutUserFollowing}
 
+        />
 
+      </ConstructorModal>
 
+    </>
 
+  )
 
 }
 
-export default ListFollowing
 
+export default ListFollowing

+ 143 - 109
src/components/LoginRegisterLogout.js
Просмотреть файл 

@@ -1,107 +1,114 @@
 
-import {
 
-  actionFullLogin,
 
-  actionFullRegister,
 
-  actionAuthLogout,
 
-} from '../actions'
 
+import { actionFullLogin, actionFullRegister } from '../actions'
 
 import React, { useState } from 'react'
 
 import { connect } from 'react-redux'
 
-import { Upload, Button, DatePicker, Input,Checkbox, Form } from 'antd'
 
-import {
 
-    EyeOutlined,EyeInvisibleOutlined
 
-} from '@ant-design/icons';
 
+import { Button, Input, Checkbox, Form } from 'antd'
 
 import { Link } from 'react-router-dom'
 
-import {actionClearUserData} from '../reducers'
 
-const LoginForm = ({ onLogin, children }) => {
 
+import { actionClearUserData } from '../reducers'
 
+import { message } from 'antd'
 
+import { useEffect } from 'react'
 
+
 
+const LoginForm = ({ onLogin, children, auth }) => {
 
   const [login, setLogin] = useState('')
 
   const [password, setPassword] = useState('')
 
   const [checked, setChecked] = useState(false)
 
-  console.log('LOGIN ', login)
 
-  console.log('PASSWORD ', password)
 
-  
-    return (
 
-      <>
 
-        <Form size="large"
 
-              name="basic"
 
-              style={{marginTop:'200px'}}
 
-              labelCol={{ span: 4 }}
 
-                wrapperCol={{ span: 10 }} 
 
-      initialValues={{ remember: true }}  autoComplete="off">
 
-              <h1 style={{marginLeft:'400px'}}> {children} </h1>
 
-      <Form.Item
 
-        label="Login"
 
-            name="login" size="large"
 
-           
-            rules={[{ required: true, message: 'Please input login!' }]}>
 
-            
-          <Input value={login} size="large" onChange={(e) => setLogin(e.target.value)} />
 
-                  
-      </Form.Item>
 
+  useEffect(() => {
 
+    if (auth?.status === 'FULFILLED' && auth?.payload === null) {
 
+      message.error({
 
+        content: 'You entered wrong login or password',
 
+        className: 'custom-class',
 
+        style: {
 
+          marginTop: '80px',
 
+        },
 
+      })
 
+    }
 
+  }, [auth])
 
 
-      <Form.Item
 
-        label="Password"
 
-        name="password" size="large"
 
-        rules={[{ required: true, message: 'Please input your password!' }]}
 
-      >
 
-         <Input size="large"
 
-            type={checked ? 'password' : 'text'}
 
-            value={password}
 
-            onChange={(e) => setPassword(e.target.value)}
 
-                  />
 
-                  
-      </Form.Item>
 
+  return (
 
+    <>
 
+      <center>
 
+        <Form
 
+          className="Form"
 
+          size="large"
 
+          name="basic"
 
+          style={{
 
+            marginTop: '200px',
 
+            padding: '100px',
 
+            width:'50%'
 
+          }}
 
+          labelCol={{ span: 8 }}
 
+          wrapperCol={{ span: 10 }}
 
+          initialValues={{ remember: true }}
 
+          autoComplete="off"
 
+        >
 
+          <h1> {children} </h1>
 
+          <h1> Login and password must be at least 5 characters </h1>
 
+          <Form.Item
 
+            label="Login"
 
+            name="login"
 
+            size="large"
 
+            rules={[{ required: true, message: 'Please input login!' }]}
 
+          >
 
+            <Input
 
+              value={login}
 
+              size="large"
 
+              onChange={(e) => setLogin(e.target.value)}
 
+            />
 
+          </Form.Item>
 
 
-              <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 4, span: 10 }}>
 
-              <Checkbox checked={checked} onChange={(e) => {
 
-                      setChecked(e.target.checked)
 
-                  }} size="large">
 
-                      See the password
 
-                      </Checkbox>
 
-                  
-                       </Form.Item>
 
-        
-      <Form.Item wrapperCol={{ offset: 4, span: 10 }}>
 
-        <Button size="large"type="primary" htmlType="submit"  className="Btn"
 
-            disabled={login.length < 5 || password.length < 5}
 
-            onClick={() => onLogin(login, password)}>
 
-          {children}
 
-        </Button>
 
-      </Form.Item>
 
-    </Form>
 
-      {/* <div>
 
-        <h1 style={{ marginTop: '50px' }}> {children}</h1>
 
-          <strong> You must enter at least 5 characters </strong>
 
-          <h2> Login</h2>
 
-          <Input value={login} onChange={(e) => setLogin(e.target.value)} />
 
-          <h2> Password </h2>
 
-          <Input
 
-            type={checked ? 'password' : 'text'}
 
-            value={password}
 
-            onChange={(e) => setPassword(e.target.value)}
 
-          />
 
-          <Input
 
-            type="checkbox"
 
-            checked={checked}
 
-            onChange={(e) => {
 
-              setChecked(e.target.checked)
 
-            }}
 
-          />
 
-          <br />
 
-          <Button
 
-            className="Btn"
 
-            disabled={login.length < 5 || password.length < 5}
 
-            onClick={() => onLogin(login, password)}
 
+          <Form.Item
 
+            label="Password"
 
+            name="password"
 
+            size="large"
 
+            rules={[{ required: true, message: 'Please input your password!' }]}
 
           >
 
-            {children}
 
-          </Button>
 
-          {<CAuth />}
 
-      </div> */}
 
+            <Input
 
+              size="large"
 
+              type={checked ? 'password' : 'text'}
 
+              value={password}
 
+              onChange={(e) => setPassword(e.target.value)}
 
+            />
 
+          </Form.Item>
 
+
 
+          <Form.Item
 
+            name="remember"
 
+            valuePropName="checked"
 
+            wrapperCol={{ offset: 8, span: 10 }}
 
+          >
 
+            <Checkbox
 
+              checked={checked}
 
+              onChange={(e) => {
 
+                setChecked(e.target.checked)
 
+              }}
 
+              size="large"
 
+            >
 
+              See the password
 
+            </Checkbox>
 
+          </Form.Item>
 
+
 
+          <Form.Item wrapperCol={{ offset: 8, span: 10 }}>
 
+            <Button
 
+              size="large"
 
+              type="primary"
 
+              htmlType="submit"
 
+              primary
 
+              style={{ width: '100%' }}
 
+              className="Btn"
 
+              disabled={login.length < 5 || password.length < 5}
 
+              onClick={() => onLogin(login, password)}
 
+            >
 
+              {children}
 
+            </Button>
 
+          </Form.Item>
 
+        </Form>
 
+      </center>
 
     </>
 
   )
 
 }
 
 export const CLoginForm = connect(
 
   (state) => ({
 
     children: `Sign In`,
 
+    auth: state.promise?.auth,
 
   }),
 
   {
 
     onLogin: actionFullLogin,
 
@@ -119,29 +126,56 @@ export const CRegisterForm = connect(
 
 
 export const CLogout = connect(
 
   (state) => ({
 
-    children: `Logout (${state.auth.payload?.sub?.login || 'Anon'})`,
 
-    // _id: state.auth.payload.sub.id
 
+    children: `Logout`,
 
   }),
 
   { onClick: actionClearUserData },
 
 )('a')
 
 
-export const InputForm = ({ }) => {
 
+export const InputForm = ({}) => {
 
+  return (
 
+    <>
 
+      <center>
 
+        <div className="InputForm">
 
+          <h1>
 
+            {' '}
 
+            If you have account, click on Sign In,
 
+            <br />
 
+            else - click on Register
 
+          </h1>
 
+          <div>
 
+            <Link to={`/login`}>
 
+              <Button
 
+                style={{
 
+                  margin: '50px',
 
+                  width: '100px',
 
+                  boxShadow:
 
+                    '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
 
+                }}
 
+                size="large"
 
+                type="primary"
 
+              >
 
+                Sign In
 
+              </Button>
 
+            </Link>
 
 
-      return (
 
-          <>
 
-              {/* display:'flex', flexDirection:'row', */}
 
-           <div style={{ background:'cyan', display:'flex',alignItems: 'center'}}>
 
-            <h1>  If you have account, click on SignIn</h1>
 
-          <h1>  If no, click on Register</h1>
 
-            
-       
-                      <Link className='Link' to={`/login`}> Sign In </Link>  
-            
-                      <Link className='Link' to={`/register`}> Register </Link> 
-
 
-         </div>
 
-      </>
 
-    )
 
-  }
 
-export const CInputForm= connect(
 
-  )(InputForm)
 
+            <Link to={`/register`}>
 
+              <Button
 
+                style={{
 
+                  marginLeft: '100px',
 
+                  width: '100px',
 
+                  boxShadow:
 
+                    '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
 
+                }}
 
+                size="large"
 
+                type="primary"
 
+              >
 
+                Register
 
+              </Button>
 
+            </Link>
 
+          </div>
 
+        </div>
 
+      </center>
 
+    </>
 
+  )
 
+}
 
+export const CInputForm = connect()(InputForm)

+ 128 - 104
src/components/NewPost.js
Просмотреть файл 

@@ -1,96 +1,95 @@
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 
-import { Provider, connect } from 'react-redux'
 
-import { actionUploadFile, actionUploadFiles, actionPostUpsert,actionUserUpdate} from '../actions'
 
-import {actionClearPostsOne} from '../reducers'
 
+import React, { useState, useEffect } from 'react'
 
+import {Link} from 'react-router-dom'
 
+import { connect } from 'react-redux'
 
+import {
 
+  actionUploadFiles,
 
+  actionPostUpsert
 
+} from '../actions'
 
+import { actionClearPostsOne } from '../reducers'
 
+import { Button, message } from 'antd'
 
+import {
 
+  Basic,
 
+  SortableContainer,
 
+  SortableItem,
 
+} from '../components/DropZone'
 
+import { arrayMoveImmutable } from 'array-move'
 
+import { Row, Col } from 'antd'
 
 
-import { Upload, Button, DatePicker, Space,message  } from 'antd'
 
-import {Basic, SortableContainer, SortableItem , ImageDemo} from '../components/DropZone'
 
-import { arrayMove, arrayMoveImmutable, arrayMoveMutable } from 'array-move'
 
-import { ConsoleSqlOutlined } from '@ant-design/icons'
 
-import ReactDOM from 'react-dom';
 
 import { history } from '../App'
 
 export const PageCreatePost = () => (
 
-    <div style={{background: '#FFFACD' }}>
 
-      <h2>Edit Post</h2>
 
-      <CPostEditor />
 
-    </div>
 
-  )
 
-  
+  <div style={{ background: '#FFFACD' }}>
 
+    <h2>Edit Post</h2>
 
+    <CPostEditor />
 
+  </div>
 
+)
 
+
 
 export const AddPost = ({ children }) => {
 
-    const [state, setState] = useState(false)
 
-  
-    return (
 
-      <>
 
-        <Link to={`/edit/post/new`}>
 
-          <Button onClick={() => setState(!state)}> + </Button>
 
-          {!state && children}
 
-        </Link>
 
-      </>
 
-    )
 
-  }
 
+  const [state, setState] = useState(false)
 
 
-  const Input = ({ state, onChangeText }) => (
 
-    <input
 
-      className="Input"
 
-      value={state}
 
-      placeholder={state || ''}
 
-      onChange={onChangeText}
 
-    />
 
+  return (
 
+    <>
 
+      <Link to={`/edit/post/new`}>
 
+        <a className="button" onClick={() => setState(!state)}>
 
+          {' '}
 
+          +{' '}
 
+        </a>
 
+        {!state && children}
 
+      </Link>
 
+    </>
 
   )
 
+}
 
 
-const PostEditor = ({ match: { params: { _id } }, myID, post,
 
-  onSave, onFileDrop, fileStatus, clearPostOne }) => {
 
- 
-  console.log('PARAMS ', _id)
 
-  
+const Input = ({ state, onChangeText }) => (
 
+  <input
 
+    className="Input"
 
+    value={state}
 
+    placeholder={state || ''}
 
+    onChange={onChangeText}
 
+  />
 
+)
 
+
 
+const PostEditor = ({
 
+  match: {
 
+    params: { _id },
 
+  },
 
+  myID,
 
+  post,
 
+  onSave,
 
+  onFileDrop,
 
+  fileStatus,
 
+  clearPostOne,
 
+}) => {
 
   post = {
 
-  //  _id: post?._id || 'new',
 
     title: post?.title || '',
 
     text: post?.text || '',
 
-    images: post?.images || []
 
+    images: post?.images || [],
 
   }
 
-  //console.log('post на 85 строке ', post)
 
- 
- // console.log('filestatus ', fileStatus)
 
-   const [state, setState] = useState(post)
 
-  // console.log('state на 89 строке ', state)
 
+
 
+  const [state, setState] = useState(post)
 
+  console.log('state', state)
 
+  console.log("какое щас айди", _id)
 
  
+  
   useEffect(() => {
 
     if (_id === 'new' && Object.keys(post)) {
 
+      console.log("какое щас айди",_id === 'new' && Object.keys(post))
 
       clearPostOne()
 
       setState(post)
 
-
 
     }
 
-  }, [_id]);
 
+  }, [_id])
 
+  console.log("post", post)
 
   useEffect(() => {
 
     fileStatus?.status == 'FULFILLED' &&
 
       setState({
 
         ...state,
 
-        images: [
 
-          ...state?.images,
 
-          ...fileStatus?.payload
 
-        ],
 
+        images: [...state?.images, ...fileStatus?.payload],
 
       })
 
-   
-  
   }, [fileStatus])
 
-  // useEffect(() => {
 
-  //   if ( fileStatus?.status== 'FULFILLED') {
 
-  //           message.success(`post published, can create a new one`)
 
-  //           history.push(`/profile/${myID}`)
 
-  //       } else if (fileStatus?.status === "REJECTED") {
 
-  //           message.error('Error')
 
-  //       }
 
-  
-  // }, [fileStatus?.status])
 
-  console.log('post на 135 строке ', post)
 
-  console.log('state на 136 строке', state)
 
 
   const onSortEnd = ({ oldIndex, newIndex }) => {
 
     setState({
 
       ...state,
 
-      images: arrayMoveImmutable(state.images, oldIndex, newIndex),
 
+      images: arrayMoveImmutable(state?.images, oldIndex, newIndex),
 
     })
 
   }
 
   const onChangeTitle = (event) =>
 
@@ -98,7 +97,7 @@ const PostEditor = ({ match: { params: { _id } }, myID, post,
 
       ...state,
 
       title: event.target.value,
 
     })
 
-  
+
 
   const onChangeText = (event) =>
 
     setState({
 
       ...state,
 
@@ -109,49 +108,74 @@ const PostEditor = ({ match: { params: { _id } }, myID, post,
 
       ...state,
 
       images: state.images.filter((item) => item._id !== _id),
 
     })
 
-    const disabledBtn = state.images && state.title && state.text ? false : true
 
-  
-  const savePost = () => onSave(state) && message.success(`Post published success!`)
 
-  &&history.push(`/profile/${myID}`)
 
+  const disabledBtn = state?.images && state?.title && state?.text ? false : true
 
+
 
+  const savePost = () =>
 
+    onSave(state) &&
 
+    message.success(`Post published success!`) &&
 
+    history.push(`/profile/${myID}`)
 
   return (
 
     <section className="Post">
 
       <Basic onLoad={onFileDrop} />
 
-      <SortableContainer onSortEnd={onSortEnd}>
 
-        {(state?.images || []).map(({ _id, url }, index) => (
 
-          <div >
 
-            <SortableItem key={`item-${_id}`} index={index} url={url} />
 
-            <button onClick={() => onRemoveImage(_id)}> x </button>
 
-          </div>
 
-        ))}
 
-      </SortableContainer>
 
+      <Row>
 
+        <Col span={12} offset={6}>
 
+          <SortableContainer onSortEnd={onSortEnd}>
 
+            {(state?.images || []).map(({ _id, url }, index) => (
 
+              <div>
 
+                <SortableItem key={`item-${_id}`} index={index} url={url} />
 
+                <Button
 
+                  type="primary"
 
+                  danger
 
+                  size="large"
 
+                  onClick={() => onRemoveImage(_id)}
 
+                >
 
+                  {' '}
 
+                  x{' '}
 
+                </Button>
 
+              </div>
 
+            ))}
 
+          </SortableContainer>
 
+        </Col>
 
+      </Row>
 
+
 
       <h1 className="Title"> Title </h1>
 
-      <Input state={state.title || ''} className="Input" onChangeText={onChangeTitle} />
 
+      <Input
 
+        state={state.title || ''}
 
+        className="Input"
 
+        onChangeText={onChangeTitle}
 
+      />
 
       <h1 className="Title"> Text </h1>
 
-  
-      <Input state={state.text || ''}  className="Input" onChangeText={onChangeText} />
 
-      <br/>
 
-      <button 
-        disabled={disabledBtn} className="Link" style={{width:"40%", margin:'30px',padding:'20px'}}  
-        onClick={savePost}  >
 
-     
-        Save
 
-      </button>
 
-
 
 
+      <Input
 
+        state={state.text || ''}
 
+        className="Input"
 
+        onChangeText={onChangeText}
 
+      />
 
+      <br />
 
+      <center>
 
+        <Button
 
+          style={{ width: '200px', margin: '10px' }}
 
+          disabled={disabledBtn}
 
+          onClick={savePost}
 
+          size="large"
 
+          type="primary"
 
+        >
 
+          Save
 
+        </Button>
 
+      </center>
 
     </section>
 
   )
 
 }
 
-      
- export const CPostEditor = connect(
 
-   (state) => ({
 
-     fileStatus: state.promise?.uploadFiles,
 
-     post:state?.post?.onePost,
 
-     myID: state?.profileData?.aboutMe?._id,
 
-   
-   }),
 
-    {
 
-      onSave: actionPostUpsert,
 
-      onFileDrop: actionUploadFiles,
 
-      clearPostOne: actionClearPostsOne
 
-    },
 
-  )(PostEditor)
 
+
 
+export const CPostEditor = connect(
 
+  (state) => ({
 
+    fileStatus: state.promise?.uploadFiles,
 
+    post: state?.post?.onePost,
 
+    myID: state?.profileData?.aboutMe?._id,
 
+  }),
 
+  {
 
+    onSave: actionPostUpsert,
 
+    onFileDrop: actionUploadFiles,
 
+    clearPostOne: actionClearPostsOne,
 
+  },
 
+)(PostEditor)

+ 158 - 168
src/components/Post.js
Просмотреть файл 

@@ -1,76 +1,85 @@
 
-import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 
+import { Link } from 'react-router-dom'
 
 import {
 
-  actionAllPosts, actionOnePost, actionFindLikes, actionAddFullComment, actionGetFindLiked, actionFindSubComment,
 
-  actionAddSubFullComment, actionDeleteFullLike, actionAddFullLike, actionAddLike, actionDeleteLike
 
+  actionAddFullComment,
 
+  actionAddSubFullComment,
 
+  actionDeleteFullLike,
 
+  actionAddFullLike,
 
 } from '../actions'
 
 import photoNotFound from '../materials/photoNotFound.png'
 
-import { LeftCircleFilled, RightCircleFilled, HeartOutlined,HeartTwoTone,HeartFilled } from '@ant-design/icons'
 
-import { Carousel,Avatar,Tooltip } from 'antd'
 
-import user from '../materials/user1.png'
 
-import { Provider, connect } from 'react-redux'
 
-import { Row, Col } from 'antd';
 
-import { Divider, Input, Button, Modal } from 'antd';
 
-import { EditOutlined } from '@ant-design/icons'
 
-import moment from 'moment';
 
+import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons'
 
+import { Carousel, Avatar, Divider, Input, Button } from 'antd'
 
+import user from '../materials/user.png'
 
+import { connect } from 'react-redux'
 
+import { Row, Col } from 'antd'
 
 import { CComments, AddComment } from '../components/Post_Comment'
 
 import { CPostEditor } from '../components/NewPost'
 
-import { actionFullOnePost} from '../reducers'
 
+import { actionFullOnePost } from '../reducers'
 
 import { Like, Likes } from './Like'
 
-import { ConstructorModal} from '../helpers'
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-// const postId="625afa1d069dca48a822ffb0"
 
-const EditMyPost = ({ open, children }) =>{
 
-const [opened, setOpened] = useState(open)
 
-return (
 
-  <>
 
-    {/* <Link to={`/editProfile`}> */}
 
-    <button style={{ width: '100px' }}
 
-      onClick={() => {
 
-        setOpened(!opened)
 
-      }}
 
-    >
 
-      Edit Post
 
-    </button>
 
-    {opened && children}
 
-    {/* </Link> */}
 
-  </>
 
-)
 
+import { ConstructorModal } from '../helpers'
 
+import React, { useState, useEffect } from 'react'
 
+import {
 
+  actionFullFeed,
 
+  actionClearFeedPosts,
 
+  actionAddFullCommentFeed,
 
+  actionAddFullLikeFeed,
 
+  actionDeleteFullLikeFeed,
 
+} from '../reducers'
 
+
 
+const EditMyPost = ({ _id }) => {
 
+  return (
 
+    <>
 
+      <Link to={`/edit/post/${_id}`}>
 
+        <Button
 
+          style={{ marginLeft: '300px', width: '100px' }}
 
+          size="large"
 
+          type="primary"
 
+        >
 
+          Edit Post
 
+        </Button>
 
+      </Link>
 
+    </>
 
+  )
 
 }
 
-  
-
 
-
 
-export const Card = ({ post, onPost }) => (
 
+export const Card = ({ post }) => (
 
   <>
 
-    <Link  to={`/post/${post?._id}`}>
 
+    <Link to={`/post/${post?._id}`}>
 
       {post?.images && post?.images[0] && post.images[0]?.url ? (
 
         <img
 
           className="Card"
 
-          src={ '/' + post.images[0].url}
 
-          style={{minHeight:'150px', minWidth:'150px', maxWidth: '230px', maxHeight: '200px' }}
 
+          src={'/' + post.images[0].url}
 
+          style={{
 
+            width: '250px',
 
+            height: '250px',
 
+            objectFit: 'cover',
 
+          }}
 
         />
 
       ) : (
 
         <img
 
           className="Card"
 
           src={photoNotFound}
 
-          style={{ maxWidth: '230px', minHeight:'150px', minWidth:'150px' ,maxHeight: '200px' }}
 
+          style={{
 
+            width: '250px',
 
+            height: '250px',
 
+            objectFit: 'cover',
 
+          }}
 
         />
 
       )}
 
     </Link>
 
   </>
 
 )
 
 const SampleNextArrow = (props) => {
 
-  const { className, style, onClick } = props
 
+  const { onClick } = props
 
   return (
 
     <div
 
-      className="carousel-control-next"
 
       style={{
 
         fontSize: '50px',
 
-        color: '#a8a8a8',
 
+        color: '#41607d',
 
         position: 'absolute',
 
         left: '100%',
 
         top: '50%',
 
         margin: 'auto',
 
-        paddingLeft:'20px'
 
+        paddingLeft: '20px',
 
+        textShadow: 'black 1px 0 10px',
 
       }}
 
       onClick={onClick}
 
     >
 
@@ -80,19 +89,17 @@ const SampleNextArrow = (props) => {
 
 }
 
 
 const SamplePrevArrow = (props) => {
 
-  const { className, style, onClick } = props
 
+  const {  onClick } = props
 
   return (
 
     <div
 
-      className="carousel-control-prev"
 
       style={{
 
-        color: '#a8a8a8',
 
+        color: '#41607d',
 
         fontSize: '50px',
 
         position: 'absolute',
 
         margin: 'auto',
 
         right: '100%',
 
         top: '50%',
 
-        paddingRight:'20px'
 
-
 
+        paddingRight: '20px',
 
       }}
 
       onClick={onClick}
 
     >
 
@@ -102,160 +109,143 @@ const SamplePrevArrow = (props) => {
 
 }
 
 
 export const MyCarousel = ({ images = [] }) => {
 
- // console.log('IMAGES', images)
 
   return (
 
     <>
 
-      <div className='MyCarousel'>
 
+      <div className="MyCarousel">
 
         <Carousel
 
           effect="fade"
 
           arrows
 
           nextArrow={<SampleNextArrow />}
 
           prevArrow={<SamplePrevArrow />}
 
         >
 
-          {
 
-            images
 
-              ?
 
-              (images.map((i, index) =>
 
+          {images ? (
 
+            images?.map(
 
+              (i, index) =>
 
                 i?.url && (
 
                   <div key={index}>
 
-                    <img
 
-                       key={index}
 
-                      className="PostImage"
 
-                      src={'/' + i?.url}
 
-                      style={{
 
-                        display: 'flex',
 
-                        alignItems: 'center',
 
-                        width: '50%',
 
-                        margin: '0 auto',
 
-                        maxWidth: '60%',
 
-                        height: '50%',
 
-                        minWidth: '40%',
 
-                        minHeight: '40%',
 
-                        maxHeight: '60%',
 
-                        marginBottom: '40px',
 
-                      }}
 
-                    />
 
+                    <img key={index} className="PostImage" src={'/' + i?.url} />
 
                   </div>
 
-                )
 
-              ))
 
-              
-              : (
 
-                <div>
 
-                  <img
 
-                    className="PostImage"
 
-                    src={photoNotFound}
 
-                    style={{ maxWidth: '400px', maxHeight: '400px' }}
 
-                  />
 
-                </div>
 
-              )
 
-               }
 
+                ),
 
+            )
 
+          ) : (
 
+            <div>
 
+              <img className="PostImage" src={photoNotFound} />
 
+            </div>
 
+          )}
 
         </Carousel>
 
       </div>
 
     </>
 
   )
 
 }
 
 
-
 
-export const PagePost = ({ my_Id, onePost, addComment,
 
-  addCommentReply, addLike, findSubComment, deleteLike,
 
-  match: { params: { _id } },
 
-  aboutUser = {}, onPost }) =>
 
-{
 
-  const [isModalVisible, setIsModalVisible] = useState(false);
 
-
 
-  const showModal = () => {
 
-    setIsModalVisible(true);
 
-  };
 
+export const PagePost = ({
 
+  my_Id,
 
+  onePost,
 
+  addComment,
 
+  match: {
 
+    params: { _id },
 
+  },
 
+  aboutUser = {},
 
+  onPost,
 
+}) => {
 
+  const [isModalVisible, setIsModalVisible] = useState(false)
 
   useEffect(() => {
 
     onPost(_id)
 
-    console.log('ONE POST _ID',onePost?._id)
 
+    console.log('ONE POST _ID', onePost?._id)
 
   }, [_id])
 
 
   return (
 
     <>
 
-         
-     <Row>
 
+      <Row>
 
         <Col span={14}>
 
-        <ConstructorModal title={'Edit post'} isModalVisible={isModalVisible}
 
-                  setIsModalVisible={setIsModalVisible}>
 
-           <CPostEditor/>
 
+          <ConstructorModal
 
+            title={'Edit post'}
 
+            isModalVisible={isModalVisible}
 
+            setIsModalVisible={setIsModalVisible}
 
+          >
 
+            <CPostEditor />
 
           </ConstructorModal>
 
-          
-      {/* <div  style={{display: 'flex'}}> */}
 
-      <MyCarousel style={{position: 'absolute'}} images={onePost?.images} />
 
-      <h3 style={{ textAlign: 'center', padding:'30px'}}>
 
-            Created Post: {new Intl.DateTimeFormat('en-GB').format(onePost?.createdAt)}
 
+
 
+          <MyCarousel
 
+            style={{ position: 'absolute' }}
 
+            images={onePost?.images}
 
+          />
 
+          <h3 style={{ textAlign: 'center', padding: '30px' }}>
 
+            Created Post:{' '}
 
+            {new Intl.DateTimeFormat('en-GB').format(onePost?.createdAt)}
 
           </h3>
 
-          <div style={{ marginLeft: '100px' }}>
 
-          {/* <Col span={3} offset={2}> */}
 
-          <CLike likes={onePost?.likes} postId={onePost?._id}/>
 
-              {/* </Col> */}
 
-           </div>
 
-    </Col>
 
-<Col span={8}>
 
-<div  style={{display: 'flex', flexDirection:'row'}}>
 
-       
-      {aboutUser?.avatar ? (
 
-        <Avatar
 
-          style={{ width: '50px', height: '50px' }}
 
-          src={ '/' + aboutUser?.avatar?.url}
 
-        />
 
-      ) : (
 
-        <Avatar style={{ width: '50px', height: '50px' }} src={user} />
 
-      )
 
-      }
 
-            <h1 style={{ marginLeft: '20px' }}> {aboutUser?.login || 'Anon'}</h1>
 
+        </Col>
 
+        <Col span={8}>
 
+          <div style={{ display: 'flex', flexDirection: 'row' }}>
 
+            {onePost?.owner?.avatar ? (
 
+              <Avatar
 
+                style={{ width: '50px', height: '50px' }}
 
+                src={'/' + onePost?.owner?.avatar?.url}
 
+              />
 
+            ) : (
 
+              <Avatar style={{ width: '50px', height: '50px' }} src={user} />
 
+            )}
 
+            <h1 style={{ marginLeft: '20px' }}>
 
+              {' '}
 
+              {onePost?.owner?.login || 'Anon'}
 
+            </h1>
 
             <Row span={1}>
 
-              {my_Id === aboutUser?._id && <Link  to={`/edit/post/${_id}`}> Edit post </Link>
 
-
 
-             }
 
+              {my_Id === onePost?.owner?._id && <EditMyPost _id={_id} />}
 
             </Row>
 
           </div>
 
-  
-      <Divider/>
 
-      <h2> Title: {onePost?.title || ''} </h2>
 
 
-      <h2> Text: {onePost?.text || ''} </h2>
 
-      <Divider>Comments</Divider>
 
-      <div className="Scroll">
 
+          <Divider />
 
+          <h2> Title: {onePost?.title || ''} </h2>
 
 
-            <CComments postId={onePost?._id} comments={onePost?.comments || []} />
 
-        
-     </div>
 
-
 
-          {/* <HeartTwoTone twoToneColor="#eb2f96" /> */}
 
-          <div style={{ display: 'flex',  margin: '100px 10px' }}>
 
+          <h2> Text: {onePost?.text || ''} </h2>
 
+          <Divider>Comments</Divider>
 
+          <div className="Scroll">
 
+            <CComments
 
+              postId={onePost?._id}
 
+              comments={onePost?.comments || []}
 
+            />
 
+          </div>
 
+          <div style={{ display: 'flex', margin: '50px 10px' }}>
 
+            <CLike likes={onePost?.likes} postId={onePost?._id} />
 
             <AddComment addComment={addComment} postId={onePost?._id} />
 
-            </div>
 
+          </div>
 
         </Col>
 
-     
-        </Row>
 
+      </Row>
 
     </>
 
   )
 
 }
 
 
-export const CPost = connect((state) => ({
 
-  onePost: state.promise?.onePost?.payload,
 
-  my_Id: state.auth.payload.sub.id || '',
 
-  aboutUser: state.profilePage?.aboutUser,
 
-  addComment: state.promise?.addComment?.payload,
 
-  
-}), {
 
-
 
-  addComment: actionAddFullComment, 
-  addCommentReply: actionAddSubFullComment,
 
-  onPost:actionFullOnePost
 
-})(PagePost)
 
-
 
-const AllLikeComp = ({ my_Id, addLike, deleteLike, likes, postId }) =>
 
-<Like my_Id={my_Id} addLike={addLike} deleteLike={deleteLike} likes={likes} postId={postId}>
 
-<Likes likes={likes} />
 
-</Like>
 
-export const CLike = connect((state) => ({
 
-  my_Id: state.auth.payload.sub.id || ''
 
-}), {
 
-  addLike: actionAddFullLike,
 
-  // findLikes: actionGetFindLiked,
 
-  deleteLike: actionDeleteFullLike,
 
-  // findLikes: actionFindLikes
 
-})(AllLikeComp)
 
+export const CPost = connect(
 
+  (state) => ({
 
+    onePost: state.promise?.onePost?.payload,
 
+    my_Id: state.auth.payload?.sub?.id || '',
 
+    aboutUser: state.profilePage?.aboutUser,
 
+    addComment: state.promise?.addComment?.payload,
 
+  }),
 
+  {
 
+    addComment: actionAddFullCommentFeed,
 
+    addCommentReply: actionAddSubFullComment,
 
+    onPost: actionFullOnePost,
 
+  },
 
+)(PagePost)
 
+
 
+const AllLikeComp = ({ my_Id, addLike, deleteLike, likes, postId }) => (
 
+  <Like
 
+    my_Id={my_Id}
 
+    addLike={addLike}
 
+    deleteLike={deleteLike}
 
+    likes={likes}
 
+    postId={postId}
 
+  >
 
+    <Likes likes={likes} />
 
+  </Like>
 
+)
 
+export const CLike = connect(
 
+  (state) => ({
 
+    my_Id: state.auth?.payload?.sub?.id || '',
 
+  }),
 
+  {
 
+    addLike: actionAddFullLikeFeed,
 
+    deleteLike: actionDeleteFullLikeFeed,
 
+  },
 
+)(AllLikeComp)

+ 125 - 104
src/components/PostFeed.js
Просмотреть файл 

@@ -1,142 +1,163 @@
 
 import React, { useMemo, useState, useEffect } from 'react'
 
 import {
 
   actionAllPostsFeed,
 
-  actionFullAllGetPosts, actionAddFullComment, actionFindSubComment,
 
-  actionAddSubFullComment, actionFindLikes, actionGetFindLiked, actionDeleteFullLike,
 
-  actionAddFullLikeForFeed,actionDeleteFullLikeForFeed,actionAddFullLike
 
+  actionFullAllGetPosts,
 
+  actionAddFullComment,
 
+  actionFindSubComment,
 
+  actionAddSubFullComment,
 
+  actionFindLikes,
 
+  actionGetFindLiked,
 
+  actionDeleteFullLike,
 
+  actionAddFullLikeForFeed,
 
+  actionDeleteFullLikeForFeed,
 
+  actionAddFullLike,
 
 } from '../actions'
 
-import {actionFullFeed
 
-  , actionClearFeedPosts, actionAddFullCommentFeed,
 
-  actionAddFullLikeFeed,actionDeleteFullLikeFeed
 
+import {
 
+  actionFullFeed,
 
+  actionClearFeedPosts,
 
+  actionAddFullCommentFeed,
 
+  actionAddFullLikeFeed,
 
+  actionDeleteFullLikeFeed,
 
 } from '../reducers'
 
 
-import { Link} from 'react-router-dom'
 
+import { Link } from 'react-router-dom'
 
 import { Provider, connect } from 'react-redux'
 
 import { Upload, Button, DatePicker, Space } from 'antd'
 
 import user from '../materials/user.png'
 
 import { Avatar, Image, Divider, Radio } from 'antd'
 
 import { CPost, MyCarousel } from './Post'
 
-import { Row, Col } from 'antd';
 
+import { Row, Col } from 'antd'
 
 import LinkToUser from './LinkToUser'
 
-import { CComments, AddComment, Comments } from './Post_Comment'
 
+import { AddComment, Comments } from './Post_Comment'
 
 import { Like, Likes } from './Like'
 
 
-const MyPostFeed = ({my_Id, postsFeed = [],onPostsFeed,addLike,deleteLike, clearDataProfile,addComment }) => {
 
-  const [checkScroll, setCheckScroll] = useState(true);
 
+const MyPostFeed = ({
 
+  my_Id,
 
+  postsFeed = [],
 
+  onPostsFeed,
 
+  addComment,
 
+}) => {
 
+  const [checkScroll, setCheckScroll] = useState(true)
 
 
   useEffect(() => {
 
     if (checkScroll) {
 
-      onPostsFeed();
 
-      setCheckScroll(false);
 
+      onPostsFeed()
 
+      setCheckScroll(false)
 
     }
 
-  }, [checkScroll]);
 
+  }, [checkScroll])
 
 
   useEffect(() => {
 
-    document.addEventListener('scroll', scrollHandler);
 
+    document.addEventListener('scroll', scrollHandler)
 
     return () => {
 
-      document.removeEventListener('scroll', scrollHandler);
 
-      // clearDataProfile()
 
+      document.removeEventListener('scroll', scrollHandler)
 
     }
 
-  }, [postsFeed]);
 
+  }, [postsFeed])
 
 
   const scrollHandler = (e) => {
 
-    if(e.target.documentElement.scrollHeight - e.target.documentElement.scrollTop - e.target.documentElement.clientHeight <20)
 
-    // if (e.target.documentElement.scrollHeight -
 
-    //   (e.target.documentElement.scrollTop + window.innerHeight) < 20)
 
-    { setCheckScroll(true) }
 
-  };
 
+    if (
 
+      e.target.documentElement.scrollHeight - e.target.documentElement.scrollTop - e.target.documentElement.clientHeight <20
 
+    ) {
 
+      setCheckScroll(true)
 
+    }
 
+  }
 
 
-  
   return (
 
     <>
 
-      <div className='PostsFeed'>
 
-      <h2 >Feed</h2>
 
-      <Row>
 
-        <Col span={12} offset={6}>
 
-          <div >
 
-              {/* {console.log('POSTFEED', postsFeed?.owner)} */}
 
-              {
 
-                (postsFeed?.length == 0) &&
 
+      <div className="PostsFeed">
 
+        
+        <Row>
 
+          <Col span={12} offset={6}>
 
+            <div>
 
+              {postsFeed?.length == 0 && (
 
                 <div>
 
-                <h1> У вас нету постов для ленты! </h1>
 
-              <h1> Выставляйте посты и подписывайтесь на других пользователей! </h1>
 
+                <center>
 
+                  <h1> You have no posts to feed! </h1>
 
+                  <h1>
 
+                    {' '}
 
+                    Post and follow other users!{' '}
 
+                    </h1>
 
+                  </center>
 
                 </div>
 
-              }
 
-            {
 
-                (postsFeed || []).map(({ _id, images, title, text, owner,comments,likes }) => (
 
-                <div className='PostFeed'>
 
-                <LinkToUser owner={owner} size='70px'/>
 
-                    {/* {console.log('POSTFEED OWNEEER', owner)} */}
 
-                  <MyCarousel images={images} style={{ marginTop: '60px' }} />
 
-                  <h1> Title: {title || ''}</h1>
 
-                    <h1> Text: {text || ''}</h1>
 
+              )}
 
+              {(postsFeed || []).map(
 
+                ({ _id, images, title, text, owner, comments, likes }) => (
 
+                  <div className="PostFeed">
 
+                    <LinkToUser owner={owner} size="70px" />
 
+                    <MyCarousel images={images} style={{ marginTop: '60px' }} />
 
+                    <h1 className='Title'> Title: {title || ''}</h1>
 
+                    <h1  className='Title'> Text: {text || ''}</h1>
 
                     <Divider>Comments</Divider>
 
-      <div className="ScrollForFeed">
 
+                    <div className="ScrollForFeed">
 
+                      <CCommentsForFeed
 
+                        postId={_id}
 
+                        comments={comments || []}
 
+                      />
 
+                      </div>
 
+                      <center>
 
+                      <div style={{ display: 'flex', padding: '20px', marginLeft:'100px' }}>
 
+                        <CLikeForFeed likes={likes} postId={_id} />
 
 
-      <CCommentsForFeed postId={_id}comments={comments || []} />
 
-        
-     </div>
 
-                    {console.log('post feed id', _id)}
 
-                    <div style={{ display: 'flex', margin: '50px 10px' }}>
 
-                      
-                    <CLikeForFeed likes={likes} postId={_id}/>
 
-        
-       {/* <HeartTwoTone twoToneColor="#eb2f96" /> */}
 
-            <AddComment addComment={addComment} postId={_id} />
 
-        </div>
 
-                </div>
 
-              ))
 
-            }
 
-          </div>
 
-        </Col>
 
-        </Row>
 
-        </div>
 
-      {/* </div> */}
 
-  
-      {/* <PagePost onePost={postsFeed}/> <MyCarousel images={postsFeed?.images} />*/}
 
+                        <AddComment addComment={addComment} postId={_id} />
 
+                      </div>
 
+                       </center>
 
+                    </div>
 
+                 
+                ),
 
+              )}
 
+            </div>
 
+          </Col>
 
+          </Row>
 
+      </div>
 
     </>
 
   )
 
 }
 
 
-const CCommentsForFeed = connect((state) => ({
 
-  
-  addComment: state.promise?.addComment?.payload,
 
-  addSubComment: state.promise?.addSubComment,
 
-}), {
 
-  addComment: actionAddFullCommentFeed, 
-  addCommentReply: actionAddSubFullComment,
 
-findSubComment: actionFindSubComment,
 
+const CCommentsForFeed = connect(
 
+  (state) => ({
 
+    addComment: state.promise?.addComment?.payload,
 
+    addSubComment: state.promise?.addSubComment,
 
+  }),
 
+  {
 
+    addComment: actionAddFullCommentFeed,
 
+    addCommentReply: actionAddSubFullComment,
 
+    findSubComment: actionFindSubComment,
 
+  },
 
+)(Comments)
 
 
-})(Comments)
 
-  
-  export const CPostForFeed = connect(
 
-    (state) => ({
 
-      my_Id: state.auth.payload.sub.id || '',
 
-      postsFeed: state.feed?.postsFeed,
 
-      addComment: state.promise?.addComment?.payload,
 
-    }),
 
-    {
 
-      onPostsFeed: actionFullAllGetPosts,
 
-      clearDataProfile: actionClearFeedPosts,
 
-      addComment: actionAddFullCommentFeed,
 
-      addCommentReply: actionAddSubFullComment,
 
-      addLike:actionAddFullLikeForFeed
 
-    },
 
+export const CPostForFeed = connect(
 
+  (state) => ({
 
+    my_Id: state.auth?.payload?.sub?.id || '',
 
+    postsFeed: state.feed?.postsFeed,
 
+    addComment: state.promise?.addComment?.payload,
 
+  }),
 
+  {
 
+    onPostsFeed: actionFullAllGetPosts,
 
+    clearDataProfile: actionClearFeedPosts,
 
+    addComment: actionAddFullCommentFeed,
 
+    addCommentReply: actionAddSubFullComment,
 
+    addLike: actionAddFullLikeForFeed,
 
+  },
 
 )(MyPostFeed)
 
 
-const AllLikeComp = ({ my_Id, addLike, deleteLike, likes, postId }) =>
 
-<Like my_Id={my_Id} addLike={addLike} deleteLike={deleteLike} likes={likes} postId={postId}>
 
-<Likes likes={likes} />
 
-</Like>
 
-export const CLikeForFeed = connect((state) => ({
 
-  my_Id: state.auth.payload.sub.id || '',
 
-  addLike: state.promise?.addLike?.payload,
 
-  deleteLike: state.promise?.deleteLike?.payload,
 
-
 
-
 
-}), {
 
-  addLike: actionAddFullLikeFeed,
 
-  // findLikes: actionGetFindLiked,
 
-  deleteLike: actionDeleteFullLikeFeed
 
-  // findLikes: actionFindLikes
 
-})(AllLikeComp)
 
+const AllLikeComp = ({ my_Id, addLike, deleteLike, likes, postId }) => (
 
+  <Like
 
+    my_Id={my_Id}
 
+    addLike={addLike}
 
+    deleteLike={deleteLike}
 
+    likes={likes}
 
+    postId={postId}
 
+  >
 
+    <Likes likes={likes} />
 
+  </Like>
 
+)
 
+export const CLikeForFeed = connect(
 
+  (state) => ({
 
+    my_Id: state.auth.payload?.sub?.id || '',
 
+    addLike: state.promise?.addLike?.payload,
 
+    deleteLike: state.promise?.deleteLike?.payload,
 
+  }),
 
+  {
 
+    addLike: actionAddFullLikeFeed,
 
+    deleteLike: actionDeleteFullLikeFeed,
 
+  },
 
+)(AllLikeComp)

+ 22 - 36
src/components/Post_Comment.js
Просмотреть файл 

@@ -1,30 +1,21 @@
 
-import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 
 import {
 
-  actionAllPosts, actionOnePost, actionAddFullComment, actionGetFindLiked,
 
-  actionFindSubComment, actionAddSubFullComment, actionDeleteFullLike, actionAddFullLike, actionAddLike, actionDeleteLike
 
+ actionAddFullComment,
 
+  actionFindSubComment, actionAddSubFullComment
 
 } from '../actions'
 
+import { Tooltip } from 'antd'
 
+import { connect } from 'react-redux'
 
 
-import photoNotFound from '../materials/photoNotFound.png'
 
-import {
 
-  LeftCircleFilled, RightCircleFilled,
 
-  HeartOutlined, HeartTwoTone, HeartFilled
 
-} from '@ant-design/icons'
 
-import { Carousel,Avatar,Tooltip } from 'antd'
 
-import user from '../materials/user.png'
 
-import { Provider, connect } from 'react-redux'
 
-import { Row, Col } from 'antd';
 
-import { Divider, Input, Button } from 'antd';
 
-import { EditOutlined, SmileOutlined} from '@ant-design/icons'
 
+import { Input, Button } from 'antd';
 
+import {SmileOutlined} from '@ant-design/icons'
 
 import moment from 'moment';
 
-import React, { useMemo, useState, useEffect } from 'react'
 
+import React, { useState } from 'react'
 
 import 'emoji-mart/css/emoji-mart.css'
 
 import { Picker } from 'emoji-mart'
 
 import data from 'emoji-mart/data/google.json'
 
 import { NimblePicker, Emoji } from 'emoji-mart'
 
-import {LinkToUser} from './LinkToUser'
 
-// import InputEmoji from 'react-input-emoji'; 
+import {LinkToUser} from './LinkToUser'; 
 import reactStringReplace from 'react-string-replace'
 
-// const postId="625afa1d069dca48a822ffb0"
 
+
 
 export const AddComment = ({ addComment, postId }) => {
 
   const [text, setComment] = useState('')
 
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
 
@@ -36,10 +27,10 @@ export const AddComment = ({ addComment, postId }) => {
 
     <>
 
       {
 
         showEmojiPicker && <Picker autoFocus={true}
 
-          style={{ color: '#ae65c5', bottom: '160px', marginRight:'440px' }}
 
+          style={{ color: '#74d2e7',position: 'absolute', bottom: '160px', right: '30px' }}
 
           onSelect={emojiTag => addEmoji(emojiTag)} set="apple" />
 
       }
 
-      <Input style={{ display:'flex',width:'60%',marginLeft:'20px', marginRight:'20px' }} size="large" placeholder='Add a comment...' 
+      <Input style={{ display:'flex',width:'40%',marginLeft:'10px', marginRight:'10px' }} size="large" placeholder='Add a comment...' 
           value={text} onChange={e => { setComment(e.target.value) }}
 
         onPressEnter={e => { setComment(e.target.value) }}/> 
          <SmileOutlined className='smile-btn' style={{ fontSize: 'xx-large', marginRight:'30px' }} 
@@ -49,8 +40,6 @@ export const AddComment = ({ addComment, postId }) => {
 
       <Button 
         size="large" disabled={text.length < 1} type="primary"
 
           onClick={(e) => addComment(postId, text)&&setComment(e.target.value="")}> Publish </Button>
 
-      {console.log('comment ', text )}
 
-     
         </>
 
     )
 
       
@@ -74,19 +63,7 @@ const SpoilerButton = ({text, close, children }) => {
 
       <div style={{ display: 'flex', flexDirection: 'row', padding: '5px', margin: '5px' }}>
 
         
         <LinkToUser owner={owner} size={'10px'} sizePadding={'0px' }/>
 
-        {/* {owner?.avatar ?
 
-            <Avatar
 
-              style={{ width: '25px', height: '25px',marginRight: '2%'}}
 
-              src={'/' + owner?.avatar?.url}
 
-            /> :
 
-            <Avatar style={{ width: '25px', height: '25px',marginRight: '2%' }} src={user} />
 
-          }
 
-          {owner?.login ? (
 
-            <h3 style={{ marginRight: '2%', fontWeight: 'bold' }}> {owner?.login} </h3>
 
-          ) : (
 
-            <h3 style={{ marginRight: '2%', fontWeight: 'bold' }}> anon </h3>
 
-          )
 
-      } */}
 
+  
       </div>
 
   </>
 
 
@@ -111,7 +88,16 @@ const CommentForReply =({addCommentReply, commentId, postId})=>{
 
   const CommentText = ({ text,close }) => {
 
     // const [edit, setEdited] = useState(close)
 
     return (
 
-      <div style={{width:'90%',display:'inline-block', background:'#c8c8c8'}}>
 
+      <div style={{
 
+        width: '90%',
 
+        margin: "20px",
 
+        paddingLeft:'5px',
 
+        display: "flex",
 
+        alignItems: "left",
 
+justifyContent: "left",
 
+transition: ".3s",
 
+boxShadow: "0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)"
 
+      }}>
 
    {/* <EditOutlined style={{float:'right',  fontSize: 'x-large' }}/> */}
 
         <h3 style={{display:'block'}}>  {reactStringReplace(text, /:(.+?):/g, (match, i) => (
 
           <Emoji emoji={match}  set='apple' size={20}/> ))}

+ 79 - 81
src/components/Search_Users.js
Просмотреть файл 

@@ -1,92 +1,90 @@
 
 import { Link } from 'react-router-dom'
 
 import { connect } from 'react-redux'
 
-import { Row, Col } from 'antd';
 
-import { Avatar, Input  } from 'antd'
 
-import { Carousel, Popover } from 'antd'
 
-import user from '../materials/user1.png'
 
-import {actionSearchUser} from '../actions'
 
-import { UploadOutlined, SearchOutlined } from '@ant-design/icons'
 
+import { Row, Col,Avatar, Input,  Popover } from 'antd'
 
+import user from '../materials/user.png'
 
+import { actionSearchUser } from '../actions'
 
+import {UserOutlined } from '@ant-design/icons'
 
 
-  import {actionFullProfilePageUser, actionFullProfilePage} from '../reducers'
 
-export const ResultUserFind = ({ my_Id, userFind = [], onPageData, size,handleCancel }) => {
 
-  
-  //const checkMyId = userFind.find(user => user?._id === my_Id)
 
-   return(<div className='ResultUserFind' >
 
-     {
 
-
 
-       userFind?.map(({ _id, login, avatar }) => (
 
+import { actionFullProfilePageUser } from '../reducers'
 
+export const ResultUserFind = ({
 
+  userFind = [],
 
+  handleCancel,
 
+}) => { 
+  return (
 
+    <div className="ResultUserFind">
 
+      {userFind?.map(({ _id, login, avatar }) => (
 
         <Link to={`/profile/${_id}`} onClick={handleCancel} key={_id}>
 
-       
-            <Row>
 
-             <Col offset={1}>
 
-            {avatar?.url ?  <Avatar
 
-              style={{
 
-                width: '50px',
 
-                height: '50px',
 
-                marginBottom:'10px'
 
-                 }}
 
-                //  ('/' + avatar?.url) ||
 
-              src={ '/' + avatar?.url}
 
-               />
 
-                 :
 
-                 
-                 <Avatar
 
-                 style={{
 
-                   width: '50px',
 
-                   height: '50px',
 
-                   marginBottom:'10px'
 
-                    }}
 
-                   //  ('/' + avatar?.url) ||
 
-                 src={user}
 
-                  />
 
-              }
 
-           
-              
-                </Col>
 
-                <Col offset={1}>
 
-                 <h3 style={{ marginBottom:'20px'}}> {login || 'Anon'}</h3>
 
-      
-                 </Col>
 
-                 </Row>
 
-                </Link>
 
-          
-      
+          <Row>
 
+            <Col offset={1}>
 
+              {avatar?.url ? (
 
+                <Avatar
 
+                  style={{
 
+                    width: '50px',
 
+                    height: '50px',
 
+                    marginBottom: '10px',
 
+                  }}
 
+                  src={'/' + avatar?.url}
 
+                />
 
+              ) : (
 
+                <Avatar
 
+                  style={{
 
+                    width: '50px',
 
+                    height: '50px',
 
+                    marginBottom: '10px',
 
+                  }}
 
+                  src={user}
 
+                />
 
+              )}
 
+            </Col>
 
+            <Col offset={1}>
 
+              <h3 style={{ marginBottom: '20px' }}> {login || 'Anon'}</h3>
 
+            </Col>
 
+          </Row>
 
+        </Link>
 
       ))}
 
-</div>)
 
+    </div>
 
+  )
 
 }
 
- const SearchUser = ({my_Id, onSearch, searchUser,onPageData }) => {
 
-    // const [value, setValue]=useState('')
 
-    const onSearchUser = (value) => onSearch(value)
 
-    const { Search } = Input
 
-    return (
 
-      <>
 
-        <Popover
 
-          placement="bottom"
 
-          destroyTooltipOnHide={true}
 
-          content={<ResultUserFind my_Id={my_Id} size={'20px'} onPageData={onPageData}
 
-            userFind={searchUser} />}
 
-            trigger="focus"
 
-        >
 
-          <Search style={{width:'30%'} }
 
-            placeholder="Input search user"
 
-            allowClear
 
-            enterButton="Search"
 
-            size="large"
 
-            onSearch={onSearchUser}
 
+const SearchUser = ({ my_Id, onSearch, searchUser, onPageData }) => {
 
+  const onSearchUser = (value) => onSearch(value)
 
+  const { Search } = Input
 
+  return (
 
+    <>
 
+      <Popover
 
+        placement="bottom"
 
+        destroyTooltipOnHide={true}
 
+        size="large"
 
+        content={
 
+          <ResultUserFind
 
+            my_Id={my_Id}
 
+            size={'20px'}
 
+            onPageData={onPageData}
 
+            userFind={searchUser}
 
           />
 
-        </Popover>
 
-      </>
 
-    )
 
-  }
 
- export const CSearch = connect(
 
-   (state) => ({
 
+        }
 
+      >
 
+        <Search
 
+          style={{ width: '25%' }}
 
+          placeholder="Enter search user"
 
+          allowClear
 
+          prefix={<UserOutlined />}
 
+          enterButton="Search"
 
+          size="large"
 
+          onSearch={onSearchUser}
 
+        />
 
+      </Popover>
 
+    </>
 
+  )
 
+}
 
+export const CSearch = connect(
 
+  (state) => ({
 
     aboutUser: state.profilePage?.aboutUser,
 
     searchUser: state.promise?.searchUser?.payload,
 
     my_Id: state.auth?.payload?.sub?.id || '',
 
-   }),
 
+  }),
 
 
-   {
 
-     onSearch: actionSearchUser,
 
-     onPageData: actionFullProfilePageUser,
 
-   },
 
-  )(SearchUser)
 
+  {
 
+    onSearch: actionSearchUser,
 
+    onPageData: actionFullProfilePageUser,
 
+  },
 
+)(SearchUser)

+ 14 - 85
src/components/User.js
Просмотреть файл 

@@ -1,66 +1,35 @@
 
 import {
 
-  actionAllPosts,
 
   actionOnePost,
 
-  actionAboutMe,
 
   actionUploadFile,
 
   actionFullUnSubscribe,
 
-  actionAddFullSubscribe,
 
   actionFullSubscribe,
 
-  actionPostsCount,
 
-  actionUserUpsert,
 
-  actionSetAvatar,
 
-  actionAvatar,
 
 } from '../actions'
 
-import user from '../materials/user1.png'
 
-import React, { useMemo, useState, useEffect } from 'react'
 
+import user from '../materials/user.png'
 
+import React, { useState, useEffect } from 'react'
 
 import { Card } from './Post'
 
-// import {Basic} from '../components/DropZone'
 
-import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 
-import { ResultUserFind } from '../components/Search_Users'
 
-import { ConstructorModal } from '../helpers'
 
 import ListFollowing from './ListFollowing'
 
 import ListFollowers from './ListFollowers'
 
 
-import { Provider, connect } from 'react-redux'
 
-import { Avatar, Image, Divider, Radio } from 'antd'
 
+import { connect } from 'react-redux'
 
+import { Avatar, Button} from 'antd'
 
 import {
 
-  actionAboutUser,
 
-  store,
 
-  actionAllPostsUser,
 
   actionFullProfilePageUser,
 
   actionRemoveDataUser,
 
 } from '../reducers'
 
-import { useDropzone } from 'react-dropzone'
 
-import { Upload, Button, DatePicker, Space } from 'antd'
 
-import { UploadOutlined, SearchOutlined } from '@ant-design/icons'
 
 import { Row, Col } from 'antd'
 
 import { CEditInfo } from '../components/EditAvatar'
 
-import { useDispatch } from 'react-redux'
 
-import { useParams } from 'react-router-dom'
 
 
 export const EditAccount = ({ open, children }) => {
 
   const [opened, setOpened] = useState(open)
 
   return (
 
     <>
 
-      {/* <Link to={`/editProfile`}> */}
 
       <button style={{ width: '100px' }} onClick={setOpened(!opened)}>
 
         Edit account
 
       </button>
 
       {opened && children}
 
-      {/* </Link> */}
 
     </>
 
   )
 
 }
 
-
 
-const Input = ({ state, onChangeText }) => (
 
-  <input
 
-    className="Input"
 
-    value={state}
 
-    placeholder={state || ''}
 
-    onChange={onChangeText}
 
-  />
 
-)
 
-
 
 export const PageAboutUser = ({
 
   match: {
 
     params: { _id },
 
@@ -83,17 +52,15 @@ export const PageAboutUser = ({
 
 
   useEffect(() => {
 
     onAboutUser(_id)
 
-    // actionPostsCount(_id)
 
-    console.log('USER DATA ', login, _id)
 
+    // console.log('USER DATA ', login, _id)
 
   }, [_id])
 
 
-  // console.log('COUNT ', countAllPostsUser)
 
   const checkMyId = _id === my_Id
 
 
   return (
 
     <>
 
       <Row>
 
-        <Col span={10} offset={6}>
 
+        <Col span={12} offset={6}>
 
           <section className="AboutMe">
 
             <Row>
 
               {avatar?.url ? (
 
@@ -136,9 +103,11 @@ export const PageAboutUser = ({
 
                     <h3> 0 posts </h3>
 
                   )}
 
 
-                  <ListFollowers aboutUserFollowers={aboutUserFollowers} followers={followers} onPageData={onPageData}/>
 
+                  <ListFollowers aboutUserFollowers={aboutUserFollowers}
 
+                    followers={followers} onPageData={onPageData} />
 
 
-                  <ListFollowing aboutUserFollowing={aboutUserFollowing} following={following} onPageData={onPageData}/>
 
+                  <ListFollowing aboutUserFollowing={aboutUserFollowing}
 
+                    following={following} onPageData={onPageData} />
 
 
                 </div>
 
                 <h3> nick: {nick == null ? login : nick}</h3>
 
@@ -180,34 +149,12 @@ export const PageAboutUser = ({
 
     </>
 
   )
 
 }
 
-// const ProfileFollowButton = ({ myID, userId, followers, onSubsuscribe, onUnSubsuscribe }) => {
 
-//   const followCheck = followers.find(f => f._id === myID && true)
 
-//   return (
 
-//       <Col className='Profile__setting'>
 
-//           {!!followCheck ?
 
-//               <Button onClick={() => onUnSubsuscribe(userId)}>UnSubscribe</Button> :
 
-//               <Button onClick={() => onSubsuscribe(userId)} type="primary">Subscribe</Button>}
 
-//       </Col>
 
-//   )
 
-// }
 
-
 
-// export const CProfileFollowButton = connect(state => ({
 
-//   myID: state?.auth?.payload?.sub.id,
 
-//   followers: state?.post?.userData?.followers || []
 
-// }), { onSubsuscribe: actionSubscribe, onUnSubsuscribe: actionUnSubscribe })(ProfileFollowButton)
 
-
 
 const Subscribe = ({
 
   my_Id,
 
-  postId,
 
-  addLike,
 
-  deleteLike,
 
-  following = [],
 
   deleteSubscribe,
 
   aboutMeFollowing = [],
 
-  aboutUserFollowing,
 
   addSubscribe,
 
   followId,
 
-  children,
 
 }) => {
 
   const checkFollowId = aboutMeFollowing?.find(
 
     (follower) => follower?._id === followId,
 
@@ -221,7 +168,7 @@ const Subscribe = ({
 
       <div style={{ display: 'flex' }}>
 
         {checkFollowId ? (
 
           <Button
 
-            size="large"
 
+            size="large" type="primary"
 
              danger
 
             onClick={() => deleteSubscribe(my_Id, followId)}
 
           >
 
@@ -230,39 +177,21 @@ const Subscribe = ({
 
         ) : (
 
           <Button
 
             size="large"
 
-           primary
 
+              type="primary"
 
+              primary
 
             onClick={() => addSubscribe(my_Id, followId)}
 
           >
 
             Subscribe
 
           </Button>
 
         )}
 
       </div>
 
-
 
-      {/* {console.log('follow _id', followId)} */}
 
-
 
-      {/* <button style={{ cursor: 'pointer', fontSize: 'xx-large', color: 'red' }}
 
-        onClick={() => addSubscribe(my_Id,followId)}>
 
-              subscribe
 
-            </button> */}
 
-
 
-      {/* {likes.length ? 
-          <h3 style={{ cursor: 'pointer', paddingLeft: 8 }} onClick={showModal}>
 
-            {likes.length} likes
 
-           
-        </h3>
 
-        :
 
-        '0 likes'}
 
-      </div>
 
-      <ConstructorModal isModalVisible={isModalVisible} setIsModalVisible={setIsModalVisible}>
 
-          <Likes likes={likes}/>
 
-      </ConstructorModal> */}
 
     </>
 
   )
 
 }
 
 
 export const CPageAboutUser = connect(
 
   (state) => ({
 
-    my_Id: state.auth.payload.sub.id,
 
+    my_Id: state.auth?.payload?.sub?.id,
 
     aboutUser: state.profilePage?.aboutUser,
 
     aboutUserFollowers: state.profilePage?.aboutUser?.followers,
 
     aboutUserFollowing: state.profilePage?.aboutUser?.following,

+ 0 - 0
src/components/WorkApp.js
Просмотреть файл


+ 19 - 21
src/helpers/index.js
Просмотреть файл 

@@ -1,31 +1,34 @@
 
-import { Modal } from 'antd';
 
-// import React, { useState } from 'react'
 
+import { Modal,Button } from 'antd'
 
 import { useDropzone } from 'react-dropzone'
 
-import { Upload, Button, DatePicker, Space } from 'antd'
 
-import React, { useMemo, useState, useEffect } from 'react'
 
-import { UploadOutlined, SearchOutlined } from '@ant-design/icons'
 
-
 
-export const ConstructorModal = ({title, children, isModalVisible, setIsModalVisible }) =>
 
-{
 
+import React, {useEffect } from 'react'
 
+import { UploadOutlined } from '@ant-design/icons'
 
 
+export const ConstructorModal = ({
 
+  title,
 
+  children,
 
+  isModalVisible,
 
+  setIsModalVisible,
 
+}) => {
 
   const handleCancel = () => {
 
-    setIsModalVisible(false);
 
-  };
 
+    setIsModalVisible(false)
 
+  }
 
 
   return (
 
     <>
 
-        <Modal title={title} centered className="Modal"
 
+      <Modal
 
+        title={title}
 
+        centered
 
+        className="Modal"
 
         footer={null}
 
         onCancel={handleCancel}
 
-        visible={isModalVisible}>
 
-
 
+        visible={isModalVisible}
 
+      >
 
         {children}
 
-        </Modal>
 
+      </Modal>
 
     </>
 
   )
 
 }
 
 
-
 
 export function Basic({ onLoad }) {
 
   const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
 
   const files = acceptedFiles.map((file) => (
 
@@ -41,15 +44,10 @@ export function Basic({ onLoad }) {
 
     <section className="container">
 
       <div {...getRootProps({ className: 'Dropzone' })}>
 
         <input {...getInputProps()} />
 
-        <Button icon={<UploadOutlined />}>
 
+        <Button type="default" size="medium" icon={<UploadOutlined />}>
 
           Drag 'n' drop some files here, or click to select files
 
         </Button>
 
       </div>
 
-      <aside>
 
-        <h4 style={{ color: 'black' }}>File</h4>
 
-        <ul>{files}</ul>
 
-        {/* <img src={files.}/> */}
 
-      </aside>
 
     </section>
 
   )
 
 }

+ 1 - 1
src/index.css
Просмотреть файл 

@@ -10,4 +10,4 @@ body {
 
 code {
 
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 
     monospace;
 
-}
 
+}

BIN
src/materials/user.png
Просмотреть файл


BIN
src/materials/user1.png
Просмотреть файл


BIN
src/materials/user2.png
Просмотреть файл


+ 218 - 231
src/reducers/index.js
Просмотреть файл 

@@ -1,140 +1,140 @@
 
-import thunk from 'redux-thunk';
 
+import thunk from 'redux-thunk'
 
 import {
 
-  actionAuthLogin, gql, actionPromise,
 
-  actionAllPosts, actionAboutMe, actionAllPostsUser, actionAboutUser,
 
-  actionPostsFeed, actionPostsFeedCount, actionOnePost, actionAddComment,
 
-  actionAddLike,actionDeleteLike,actionPostsCount,actionAuthLogout
 
+  actionAboutMe,
 
+  actionAllPostsUser,
 
+  actionAboutUser,
 
+  actionPostsFeed,
 
+  actionPostsFeedCount,
 
+  actionOnePost,
 
+  actionAddComment,
 
+  actionAddLike,
 
+  actionDeleteLike,
 
+  actionPostsCount,
 
+  actionAuthLogout,
 
 } from '../actions'
 
-import { createStore, combineReducers, applyMiddleware } from 'redux';
 
-
 
+import { createStore, combineReducers, applyMiddleware } from 'redux'
 
+import { history } from '../App'
 
 function promiseReducer(state = {}, { type, name, status, payload, error }) {
 
-    if (type === 'PROMISE') {
 
-      return {
 
-        ...state,
 
-        [name]: { status, payload, error },
 
-      }
 
+  if (type === 'PROMISE') {
 
+    return {
 
+      ...state,
 
+      [name]: { status, payload, error },
 
     }
 
-    return state
 
   }
 
-  
+  return state
 
+}
 
+
 
 const jwtDecode = (token) => {
 
-    try {
 
-      return JSON.parse(atob(token.split('.')[1]))
 
-    } catch (e) {
 
-      return null
 
-    }
 
+  try {
 
+    return JSON.parse(atob(token.split('.')[1]))
 
+  } catch (e) {
 
+    return null
 
+  }
 
 }
 
 
-export const actionProfilePageDataTypeUser= (aboutUser, allPosts) =>
 
-  ({ type: 'PROFILE-PAGE-USER', aboutUser, allPosts })
 
+export const actionProfilePageDataTypeUser = (aboutUser, allPosts) => ({
 
+  type: 'PROFILE-PAGE-USER',
 
+  aboutUser,
 
+  allPosts,
 
+})
 
 
 export const actionProfilePageData = (id) => ({ type: 'DATA_PROFILE', id })
 
-  
-  export const actionProfilePageDataType= (aboutMe) =>
 
-  ({ type: 'PROFILE-PAGE', aboutMe })
 
 
-  export const actionAvatarUpdate= (aboutUser) =>
 
-  ({ type: 'CHANGE-AVATAR-USER', aboutUser })
 
+export const actionProfilePageDataType = (aboutMe) => ({
 
+  type: 'PROFILE-PAGE',
 
+  aboutMe,
 
+})
 
 
-  export const actionFullProfilePageUser = (_id) =>
 
-  async dispatch => {
 
-    const aboutUser = await dispatch(actionAboutUser(_id))
 
-    console.log('ABOUTUSER ', aboutUser)
 
-    const allPosts = await dispatch(actionAllPostsUser(_id))
 
-    await dispatch(actionPostsCount(_id))
 
-    console.log('ALLPOSTS ', allPosts )
 
-    if (aboutUser && allPosts) {
 
-      await dispatch(actionProfilePageDataTypeUser(aboutUser, allPosts))
 
-    }
 
+export const actionAvatarUpdate = (aboutUser) => ({
 
+  type: 'CHANGE-AVATAR-USER',
 
+  aboutUser,
 
+})
 
+
 
+export const actionFullProfilePageUser = (_id) => async (dispatch) => {
 
+  const aboutUser = await dispatch(actionAboutUser(_id))
 
+  const allPosts = await dispatch(actionAllPostsUser(_id))
 
+  await dispatch(actionPostsCount(_id))
 
+  if (aboutUser && allPosts) {
 
+    await dispatch(actionProfilePageDataTypeUser(aboutUser, allPosts))
 
   }
 
-  export const actionClearDataUserType= () =>
 
-  ({ type: 'CLEAR-DATA' })
 
+}
 
+export const actionClearDataUserType = () => ({ type: 'CLEAR-DATA' })
 
 
-  export const actionClearUserData = () =>
 
-  async dispatch => {
 
-    const logOut = await dispatch(actionAuthLogout())
 
-    console.log('logOut ', logOut)
 
-  
-   
-    if (logOut) {
 
-      const clearData = await dispatch(actionClearDataUserType())
 
-       console.log('clearData ', clearData )
 
-      // await dispatch(actionClearDataUserType())
 
-    }
 
+export const actionClearUserData = () => async (dispatch) => {
 
+  const logOut = await dispatch(actionAuthLogout())
 
+  if (logOut) {
 
+    history.push('/input')
 
+     await dispatch(actionClearDataUserType())
 
   }
 
+}
 
 
-  export const actionFullProfilePage = (_id) =>
 
-  async dispatch => {
 
-    const aboutMe = await dispatch(actionAboutMe(_id))
 
-    console.log('попало ли в запрос на єбоут ми ', aboutMe)
 
-    // const allPostsMe = await dispatch(actionAllPosts(_id))
 
-    if (aboutMe) {
 
-      await dispatch(actionProfilePageDataType(aboutMe))
 
-    }
 
+export const actionFullProfilePage = (_id) => async (dispatch) => {
 
+  const aboutMe = await dispatch(actionAboutMe(_id))
 
+  if (aboutMe) {
 
+    await dispatch(actionProfilePageDataType(aboutMe))
 
   }
 
+}
 
 
-  export const actionRemoveDataUser= () =>
 
-  ({ type: 'REMOVE-DATA' })
 
-export const profileUserReducer = (state = {}, { type, aboutUser, allPosts,newPosts }) => {
 
+export const actionRemoveDataUser = () => ({ type: 'REMOVE-DATA' })
 
+export const profileUserReducer = (
 
+  state = {},
 
+  { type, aboutUser, allPosts, newPosts },
 
+) => {
 
   const types = {
 
     'PROFILE-PAGE-USER': () => {
 
       return {
 
-        ...state, aboutUser, allPosts
 
+        ...state,
 
+        aboutUser,
 
+        allPosts,
 
       }
 
     },
 
     'CLEAR-DATA': () => {
 
       return {
 
-        ...state = {},
 
+        ...(state = {}),
 
         aboutUser: {},
 
-        allPosts: []
 
+        allPosts: [],
 
       }
 
     },
 
     'CHANGE-AVATAR-USER': () => {
 
       return {
 
-        ...state, aboutUser
 
+        ...state,
 
+        aboutUser,
 
       }
 
-    }
 
-  
-    ,
 
+    },
 
   }
 
 
-    if (type in types) {
 
-        return types[type]()
 
-    }
 
-    return state
 
+  if (type in types) {
 
+    return types[type]()
 
   }
 
-    export const actionFeedType= (newPosts) =>
 
-  ({ type: 'ADD-POSTS', newPosts })
 
+  return state
 
+}
 
+export const actionFeedType = (newPosts) => ({ type: 'ADD-POSTS', newPosts })
 
 
-export const actionAddCommentPostInTape = (postId, newResult) =>
 
-  ({ type: 'ADD-COMMENT-POSTS', postId, newResult })
 
-  
+export const actionAddCommentPostInTape = (postId, newResult) => ({
 
+  type: 'ADD-COMMENT-POSTS',
 
+  postId,
 
+  newResult,
 
+})
 
 
 export const actionAddFullCommentFeed = (postId, newResult) => async (
 
-    dispatch,
 
-    getState,
 
-  ) => {
 
-    await dispatch(actionAddComment(postId, newResult))
 
-    const {
 
-      promise: {
 
-        addComment: { status },
 
-      },
 
-    } = getState()
 
-    if (status === 'FULFILLED') {
 
-      const onePost = await dispatch(actionOnePost(postId))
 
-      if (onePost)
 
-      await dispatch((actionAddCommentPostInTape(postId,newResult)))
 
-    }
 
-    // await dispatch(actionOnePost(postId));
 
-}
 
-const actionAddLikePostInTape = (postId,) =>
 
-  ({ type: 'ADD-LIKE-POSTS', postId })
 
-  
-
 
-export const actionAddFullLikeFeed = (postId) => async (
 
   dispatch,
 
   getState,
 
 ) => {
 
+  await dispatch(actionAddComment(postId, newResult))
 
+  const {
 
+    promise: {
 
+      addComment: { status },
 
+    },
 
+  } = getState()
 
+  if (status === 'FULFILLED') {
 
+    const onePost = await dispatch(actionOnePost(postId))
 
+    if (onePost) await dispatch(actionAddCommentPostInTape(postId, newResult))
 
+  }
 
+  // await dispatch(actionOnePost(postId));
 
+}
 
+const actionAddLikePostInTape = (postId) => ({ type: 'ADD-LIKE-POSTS', postId })
 
+
 
+export const actionAddFullLikeFeed = (postId) => async (dispatch, getState) => {
 
   await dispatch(actionAddLike(postId))
 
   const {
 
     promise: {
 
@@ -143,184 +143,171 @@ export const actionAddFullLikeFeed = (postId) => async (
 
   } = getState()
 
   if (status === 'FULFILLED') {
 
     const onePost = await dispatch(actionOnePost(postId))
 
-    if (onePost)
 
-      await dispatch((actionAddLikePostInTape(postId)))
 
+    if (onePost) await dispatch(actionAddLikePostInTape(postId))
 
   }
 
+}
 
+const actionDeleteLikePostInTape = (likeId, postId) => ({
 
+  type: 'DELETE-LIKE-POSTS',
 
+  likeId,
 
+  postId,
 
+})
 
+export const actionDeleteFullLikeFeed = (likeId, postId) => async (
 
+  dispatch,
 
+  getState,
 
+) => {
 
+  await dispatch(actionDeleteLike(likeId, postId))
 
+  const {
 
+    promise: {
 
+      deleteLike: { status },
 
+    },
 
+  } = getState()
 
+  if (status === 'FULFILLED') {
 
+    const onePost = await dispatch(actionOnePost(postId))
 
+    if (onePost) await dispatch(actionDeleteLikePostInTape(likeId, postId))
 
   }
 
-  const actionDeleteLikePostInTape = (likeId,postId) =>
 
-  ({ type: 'DELETE-LIKE-POSTS',likeId,postId })
 
-  export const actionDeleteFullLikeFeed = (likeId,postId) => async (
 
-    dispatch,
 
-    getState,
 
-  ) => {
 
-    await dispatch(actionDeleteLike(likeId,postId))
 
-    const {
 
-      promise: {
 
-        deleteLike: { status },
 
-      },
 
-    } = getState()
 
-    if (status === 'FULFILLED') {
 
-      const onePost = await dispatch(actionOnePost(postId))
 
-      if (onePost)
 
-        await dispatch((actionDeleteLikePostInTape(likeId,postId)))
 
-    }
 
 }
 
-    
-  export const actionFullFeed = () =>
 
-    async (dispatch, getState) => {
 
-    const postsFeed = await dispatch(actionPostsFeed(getState))
 
-     const skip = postsFeed.length
 
-    console.log('postsFeed ', postsFeed)
 
-    const postsFeedCount = await dispatch(actionPostsFeedCount(getState))
 
-    console.log('postsFeedCount ', postsFeedCount)
 
-      if (skip < postsFeedCount)
 
-      {
 
-        // console.log('SKIIIP ', skip)
 
-        const newPosts = await dispatch(actionPostsFeed(getState, skip))
 
-        if (newPosts) {
 
-          await dispatch(actionFeedType(newPosts));
 
-          // const postsFeedCount = await dispatch(actionPostsFeedCount(getState))
 
-          // console.log('postsFeedCount ', postsFeedCount)
 
-        }
 
 
-        }
 
-     
+export const actionFullFeed = () => async (dispatch, getState) => {
 
+  const postsFeed = await dispatch(actionPostsFeed(getState))
 
+  const skip = postsFeed.length
 
+  const postsFeedCount = await dispatch(actionPostsFeedCount(getState))
 
+  if (skip < postsFeedCount) {
 
+    const newPosts = await dispatch(actionPostsFeed(getState, skip))
 
+    if (newPosts) {
 
+      await dispatch(actionFeedType(newPosts))
 
     }
 
-    export const actionOnePostType= (onePost) =>
 
-    ({ type: 'ONE-POST', onePost })
 
-  
-  export const actionClearFeedPosts = () => ({ type: 'DELETE-POSTS' });
 
+  }
 
+}
 
+export const actionOnePostType = (onePost) => ({ type: 'ONE-POST', onePost })
 
+
 
+export const actionClearFeedPosts = () => ({ type: 'DELETE-POSTS' })
 
 
-  export const actionFullClearFeedPosts = () => (dispatch) => {
 
-    return dispatch(actionClearFeedPosts())
 
+export const actionFullClearFeedPosts = () => (dispatch) => {
 
+  return dispatch(actionClearFeedPosts())
 
+}
 
+export const actionFullOnePost = (_id) => async (dispatch) => {
 
+  const onePost = await dispatch(actionOnePost(_id))
 
+  if (onePost) {
 
+    await dispatch(actionOnePostType(onePost))
 
+    // await dispatch(actionClearDataUserType())
 
   }
 
-  export const actionFullOnePost = (_id) =>
 
-    async (dispatch) => {
 
-      console.log('ID POST ', _id)
 
-      const onePost = await dispatch(actionOnePost(_id))
 
-      console.log(' one post ', onePost)
 
-      
-    //  const skip = postsFeed.length
 
-    // console.log('postsFeed ', postsFeed)
 
-    // const postsFeedCount = await dispatch(actionPostsFeedCount(getState))
 
-    // console.log('postsFeedCount ', postsFeedCount)
 
-      // if (skip < postsFeedCount)
 
-      // {
 
-      //   console.log('SKIIIP ', skip)
 
-      //   const newPosts = await dispatch(actionPostsFeed(getState, skip))
 
-      if (onePost) {
 
-        console.log('УСПЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕХ')
 
-         await dispatch(actionOnePostType(onePost));
 
-          console.log('onePost ', onePost)
 
-        }
 
-      }
 
-export const feedReducer = (state = {}, {skip, type, newPosts=[], postId, postsFeed,postsFeedCount,newResult }) => {
 
+
 
+}
 
+export const feedReducer = (
 
+  state = {},
 
+  { skip, type, newPosts = [], postId, postsFeed, postsFeedCount, newResult },
 
+) => {
 
   const types = {
 
     'ADD-POSTS': () => {
 
       return {
 
         ...state,
 
-        postsFeed: postsFeed ? [...postsFeed, ...newPosts] : [...newPosts]
 
+        postsFeed: postsFeed ? [...postsFeed, ...newPosts] : [...newPosts],
 
       }
 
     },
 
     'DELETE-POSTS': () => {
 
       return {
 
         ...state,
 
-        postsFeed: []
 
+        postsFeed: [],
 
       }
 
     },
 
-    
+
 
     'ADD-LIKE-POSTS': () => ({
 
       ...state,
 
-      postsFeed: postsFeed?.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p)
 
+      postsFeed: postsFeed?.map((p) =>
 
+        p._id === postId ? (p = { ...p, likes: [...newResult] }) : p,
 
+      ),
 
     }),
 
     'DELETE-LIKE-POSTS': () => ({
 
       ...state,
 
-      postsFeed: postsFeed?.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p)
 
+      postsFeed: postsFeed?.map((p) =>
 
+        p._id === postId ? (p = { ...p, likes: [...newResult] }) : p,
 
+      ),
 
     }),
 
 
-  'ADD-COMMENT-POSTS': () => ({
 
+    'ADD-COMMENT-POSTS': () => ({
 
       ...state,
 
-      postsFeed: postsFeed?.map(p => p._id === postId ? p = { ...p, comments: [...newResult] } : p)
 
+      postsFeed: postsFeed?.map((p) =>
 
+        p._id === postId ? (p = { ...p, comments: [...newResult] }) : p,
 
+      ),
 
     }),
 
-  
-    }
 
-    if (type in types) {
 
-        return types[type]()
 
-    }
 
-    return state
 
   }
 
-  export const postReducer = (state = {}, {skip, type, newPosts=[],onePost, postsFeed,postsFeedCount }) => {
 
-    const types = {
 
-      'ONE-POST': () => {
 
-        return {
 
-          ...state,onePost
 
-        }
 
-      },
 
-      'CLEAR-POST-ONE': () => {
 
-        return {
 
-          ...state,
 
-          onePost: {}
 
-        }
 
-    }
 
-    
+  if (type in types) {
 
+    return types[type]()
 
+  }
 
+  return state
 
+}
 
+export const postReducer = (
 
+  state = {},
 
+  { skip, type, newPosts = [], onePost, postsFeed, postsFeedCount },
 
+) => {
 
+  const types = {
 
+    'ONE-POST': () => {
 
+      return {
 
+        ...state,
 
+        onePost,
 
       }
 
-      if (type in types) {
 
-          return types[type]()
 
+    },
 
+    'CLEAR-POST-ONE': () => {
 
+      return {
 
+        ...state,
 
+        onePost: {},
 
       }
 
-      return state
 
-    }
 
+    },
 
+  }
 
+  if (type in types) {
 
+    return types[type]()
 
+  }
 
+  return state
 
+}
 
 
 export const profileReducer = (state = {}, { type, aboutMe, newResult }) => {
 
   const types = {
 
-      'PROFILE-PAGE': () => {
 
-          return {
 
-              ...state, aboutMe
 
-          }
 
+    'PROFILE-PAGE': () => {
 
+      return {
 
+        ...state,
 
+        aboutMe,
 
+      }
 
     },
 
     'REMOVE-DATA': () => {
 
       return {
 
-        ...state = {},
 
-        aboutMe: {}
 
+        ...(state = {}),
 
+        aboutMe: {},
 
       }
 
-    }
 
-
 
+    },
 
   }
 
   if (type in types) {
 
-      return types[type]()
 
+    return types[type]()
 
   }
 
   return state
 
 }
 
 
-
 
-  function authReducer(state, { type, token }) {
 
-    if (state === undefined && localStorage.authToken) {
 
-      token = localStorage.authToken
 
-      type = 'AUTH_LOGIN'
 
-    }
 
-    if (type === 'AUTH_LOGIN') {
 
-      if (jwtDecode(token)) {
 
-        localStorage.authToken = token
 
-        return { token, payload: jwtDecode(token) }
 
-      }
 
-    }
 
-    if (type === 'AUTH_LOGOUT') {
 
-      localStorage.authToken = ''
 
-      return {}
 
+function authReducer(state, { type, token }) {
 
+  if (state === undefined && localStorage.authToken) {
 
+    token = localStorage.authToken
 
+    type = 'AUTH_LOGIN'
 
+  }
 
+  if (type === 'AUTH_LOGIN') {
 
+    if (jwtDecode(token)) {
 
+      localStorage.authToken = token
 
+      return { token, payload: jwtDecode(token) }
 
     }
 
-    return state || {}
 
   }
 
-  export const actionClearPostsOne = () => ({ type: 'CLEAR-POST-ONE' })
 
+  if (type === 'AUTH_LOGOUT') {
 
+    localStorage.authToken = ''
 
+    return {}
 
+  }
 
+  return state || {}
 
+}
 
+export const actionClearPostsOne = () => ({ type: 'CLEAR-POST-ONE' })
 
 
- export const store = createStore(
 
-    combineReducers({
 
-      promise: promiseReducer,
 
-      auth: authReducer,
 
-      profileData: profileReducer,
 
-      profilePage: profileUserReducer,
 
-      feed:feedReducer,
 
-      post:postReducer
 
-      
-    }),
 
-    applyMiddleware(thunk),
 
+export const store = createStore(
 
+  combineReducers({
 
+    promise: promiseReducer,
 
+    auth: authReducer,
 
+    profileData: profileReducer,
 
+    profilePage: profileUserReducer,
 
+    feed: feedReducer,
 
+    post: postReducer,
 
+  }),
 
+  applyMiddleware(thunk),
 
 )
 
-