Update correct work scrolling in feed posts page

src/App.scss

@@ -8,7 +8,32 @@ body {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 20px;
 }
+// ::-webkit-scrollbar { /* 1 - скроллбар */
+//   width: 10px;
+//   height: 10px;
+//   background-color: #8e1919;
+//   background-color: darkgrey;
+// }
+// ::-webkit-scrollbar-thumb {
+//   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+// }
+/* width */
+::-webkit-scrollbar {
+width: 20px;
+// height: 20px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+box-shadow: inset 0 0 5px #32373b;
+// border-radius: 2px;
+}
 
+/* Handle */
+::-webkit-scrollbar-thumb {
+background: #1d5b78;
+border-radius: 3px;
+}
 @import '~antd/dist/antd.css';
 
 .Dropzone {

src/actions/index.js

@@ -2,7 +2,6 @@ import { ConsoleSqlOutlined } from '@ant-design/icons'
 import {
   actionFullProfilePageUser,
   actionFullProfilePage,
-
 } from '../redux/thunk'
 import { actionFeedTypeCount } from '../redux/reducers/feed/feedReducer'
 import { actionFeedType } from '../redux/reducers/feed/feedReducer'
@@ -110,7 +109,7 @@ export const actionRegister = (login, password) =>
     ),
   )
 
-  export const actionChangePassword = (login, password, newPassword) =>
+export const actionChangePassword = (login, password, newPassword) =>
   actionPromise(
     'newPassword',
     gql(
@@ -119,7 +118,7 @@ export const actionRegister = (login, password) =>
                   _id login
                 }
               }`,
-      { login, password , newPassword},
+      { login, password, newPassword },
     ),
   )
 export const actionFullRegister = (login, password) => async (dispatch) => {
@@ -142,9 +141,9 @@ export const uploadFile = (file) => {
 }
 
 export const uploadFileType = {
-    name: 'photo',
-    action: `/upload`,
-    headers: localStorage.authToken
+  name: 'photo',
+  action: `/upload`,
+  headers: localStorage.authToken
     ? { Authorization: 'Bearer ' + localStorage.authToken }
     : {},
 }
@@ -194,7 +193,7 @@ mutation PostUpsert($post:PostInput){
         {
           post: {
             ...post,
-            _id:_id,
+            _id: _id,
             images: post.images.map(({ _id }) => ({ _id })),
           },
         },
@@ -613,10 +612,16 @@ export const actionFullAllGetPosts = () => async (dispatch, getState) => {
     profileData: { aboutMe },
     promise,
   } = getState()
-  const myFollowing =
+  let myFollowing =
     aboutMe?.following && aboutMe?.following?.map(({ _id }) => _id)
+  const myId = getState().auth.payload?.sub?.id
+  console.log('myId', myId)
+  if (!myFollowing) await dispatch(actionFullProfilePage(myId))
+  myFollowing =
+    getState().profileData.aboutMe?.following &&
+    getState().profileData.aboutMe?.following?.map(({ _id }) => _id)
   console.log('myFollowing ', myFollowing)
-  const myId = aboutMe?._id
+
   const skip = postsFeed?.length
   // console.log('skip ', skip)
   console.log('postsFeed', postsFeed)

src/components/Comment.js

@@ -91,7 +91,7 @@ const SpoilerButton = ({ text, close, children }) => {
     </>
   )
 }
-const CommentAuthor = ({ owner }) => (
+const CommentAuthor = ({ owner:{_id, login, avatar} }) => (
   <>
     <div
       style={{
@@ -101,7 +101,7 @@ const CommentAuthor = ({ owner }) => (
         margin: '5px',
       }}
     >
-      <LinkToUser owner={owner} size={'10px'} sizePadding={'0px'} />
+      <LinkToUser _id={_id} login={login} avatar={avatar} size={'10px'} sizePadding={'0px'} />
     </div>
   </>
 )

src/pages/feedPosts/FeedPosts.js

@@ -40,14 +40,13 @@ const MyPostFeed = ({
 }) => {
   const [checkScroll, setScroll] = useState(true)
   useEffect(() => {
-    if (checkScroll && profileData.following?.length ) {
-      onPostsFeed()
-      setScroll(false)
+    if (checkScroll) {
+       console.log('попало в новую порцию постов')
+          onPostsFeed()
     }
+    setScroll(false)
   }, [checkScroll])
-  console.log('check scroll ', checkScroll)
   useEffect(() => {
-    
     document.addEventListener('scroll', scrollHandler)
     return () => {
       document.removeEventListener('scroll', scrollHandler)
@@ -55,13 +54,19 @@ const MyPostFeed = ({
     }
   }, [])
 
-  const scrollHandler = (e) => {
-    if (e.target.documentElement.scrollHeight -
-      (e.target.documentElement.scrollTop + window.innerHeight) < 200) {
-      setScroll(true)
-      
-    }
-  }
+  console.log('check scroll ', checkScroll)
+  useEffect(() => {
+     document.addEventListener('scroll', scrollHandler)
+     }, [postsFeed.length])
+  
+    const scrollHandler = (e) => {
+         if (e.target.documentElement.scrollHeight -
+           (e.target.documentElement.scrollTop + window.innerHeight) < 200) {
+          console.log('SCROLL HANDLER', checkScroll)
+          setScroll(true)
+          document.removeEventListener('scroll', scrollHandler)
+         }
+       }
 
   return (
     <div style={{  marginTop: '50px'}}>

src/redux/thunk/index.js

@@ -25,9 +25,7 @@ import { actionProfilePageDataTypeUser } from '../reducers/profileUserPage/profi
 export const actionFullProfilePage = (_id) => async (dispatch) => {
     const aboutMe = await dispatch(actionAboutMe(_id))
     if (aboutMe) {
-     const data = await dispatch(actionProfilePageDataType(aboutMe))
-      if (data)
-        await dispatch(actionFullAllGetPosts())
+    await dispatch(actionProfilePageDataType(aboutMe))
   }
  
   }