3 Ревизии 1b941bcbab ... 903f5e5d8d

Автор SHA1 Съобщение Дата
  makstravm 903f5e5d8d fix style преди 2 години
  makstravm 47c0b29f68 change favicon преди 2 години
  makstravm 9c68883059 fix render collection page, refactoring recursion functiion in redux преди 2 години
променени са 9 файла, в които са добавени 59 реда и са изтрити 79 реда
  1. 6 0
      public/.htaccess
  2. BIN
      public/favicon.ico
  3. 1 1
      public/index.html
  4. 15 4
      src/App.scss
  5. 1 1
      src/actions/index.js
  6. 1 1
      src/pages/Authorization.jsx
  7. 2 6
      src/pages/CollectionPage.jsx
  8. 31 64
      src/redux/reducers/postFeed-reducer.js
  9. 2 2
      src/redux/saga/index.js

+ 6 - 0
public/.htaccess

@@ -0,0 +1,6 @@
+RewriteEngine on
+# If a directory or a file exists, use the request directly
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+# Otherwise forward the request to index.html
+RewriteRule . index.html [L]

BIN
public/favicon.ico


+ 1 - 1
public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Hipstagram</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 15 - 4
src/App.scss

@@ -55,7 +55,6 @@ video {
             display: flex;
             align-items: center;
             justify-content: center;
-
             &.active {
                 svg {
                     fill: $defaultColorB;
@@ -101,7 +100,7 @@ video {
 }
 
 .Authorization {
-    height: 100%;
+    background-color: #fff;
     background-position: right top;
     background-repeat: no-repeat;
     background-size: cover;
@@ -115,7 +114,7 @@ video {
         margin-bottom: 10px;
     }
     &__form {
-        height: 100vh;
+        height: 96vh;
         padding-right: calc(10vw + 25px);
     }
     .login-form {
@@ -545,7 +544,7 @@ video {
 }
 
 .CommentPostFeed {
-    a{
+    a {
         font-size: 1.2em;
     }
     span {
@@ -670,6 +669,9 @@ video {
 }
 
 @media (max-width: 800px) {
+    .Authorization {
+        background-position: center top;
+    }
     .PostOne {
         padding-top: 30px;
         &__inner {
@@ -704,6 +706,15 @@ video {
 }
 
 @media (max-width: 560px) {
+        .Authorization {
+        background-position: center top;
+        &__form {
+            padding-right: 20px;
+        }
+        .ant-input-affix-wrapper {
+            width: 65vw;
+        }
+    }
     .Logo {
         img {
             width: 35vw;

+ 1 - 1
src/actions/index.js

@@ -62,7 +62,7 @@ export const actionUpsertAboutMe = (myData) =>
 
 //*************** Action Posts Feed ******************//
 
-export const actionGetPostAC = (postData) => ({ type: 'GET-POST', newResult: postData })
+
 export const actionAddPostsFeedAC = (postsData, count) => ({ type: 'ADD-POSTS-FEED', newResult: postsData, count })
 export const actionRemovePostsFeedAC = () => ({ type: 'REMOVE-POSTS-FEED' })
 export const actionPostsFeed = () => ({ type: 'POSTS_FEED' })

+ 1 - 1
src/pages/Authorization.jsx

@@ -7,7 +7,7 @@ export const Authorization = ({ match: { params: { _id } } }) =>
     <div className='Authorization' style={{ backgroundImage: `url(${authBg})` }}>
         <Row justify="end" align="middle" className='Authorization__form'>
             <Col >
-                <Card style={{ width: 380 }} >
+                <Card  >
                     <NavLink activeClassName='active' to={`/auth/login`}><span>Log In</span></NavLink>
                     <Divider type="vertical" />
                     <NavLink activeClassName='active' to={'/auth/registration'}>Registration</NavLink>

+ 2 - 6
src/pages/CollectionPage.jsx

@@ -15,16 +15,12 @@ export const CollectionPage = ({ posts, onLoadPosts, postsRemove }) => {
             postsRemove()
         }
     }, [])
-
+    console.log(posts);
     return (
         <Container>
             <CPreloader promiseName='onLoadMyCollections' />
             <Divider><Title level={1}>Collections</Title></Divider>
-            {posts.lenght
-                ? <CPosts />
-                : <Title level={4}>
-                    The collection is empty. Add posts to your collection
-                </Title>}
+            <CPosts />
         </Container>
     )
 }

+ 31 - 64
src/redux/reducers/postFeed-reducer.js

@@ -1,5 +1,22 @@
 export const postsFeedReducer = (state = {}, { type, findId, newResult, userData = {}, count = null }) => {
+
     const { posts } = state
+
+    const upsertSubComments = (commentList, id, nR, find) => {
+        return commentList.map(c => {
+            if (c._id === id) {
+                return { ...c, [find]:  nR }
+            } else if (c?.answers?.length) {
+                return {
+                    ...c,
+                    answers: upsertSubComments(c.answers, id, nR, find)
+                }
+            } else {
+                return { ...c }
+            }
+        })
+    }
+
     const types = {
 
         'ADD-POSTS-FEED': () => ({
@@ -10,8 +27,6 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
             count
         }),
 
-        'GET-POST': () => ({ ...state, posts: { ...newResult } }),
-
         'ADD-PROFILE-DATA': () => ({
             ...state,
             posts: !!posts ? [...posts, ...newResult] : [...newResult],
@@ -48,78 +63,30 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
                 : { ...state.posts, comments: [...newResult] }
         }),
 
-        'UPDATE-SUBCOMMENT': () => {
-            const upsertSubComments = (commentList, id, nR) => {
-                return commentList.map(c => {
-                    if (c._id === id) {
-                        return { ...c, answers: [...nR] }
-                    } else if (c?.answers?.length) {
-                        return {
-                            ...c,
-                            answers: upsertSubComments(c.answers, id, nR)
-                        }
-                    } else {
-                        return { ...c }
-                    }
-                })
-            }
-            return ({
-                ...state, posts: { ...state.posts, comments: upsertSubComments(posts.comments, findId, newResult) }
-            })
-        },
-
-        'EDIT-COMMENT': () => {
-            const { _id, text } = newResult
-            const editComments = (commentList, id, nR) => {
-                return commentList.map(c => {
-                    if (c._id === id) {
-                        return { ...c, text: nR }
-                    } else if (c?.answers?.length) {
-                        return {
-                            ...c,
-                            answers: editComments(c.answers, id, nR)
-                        }
-                    } else {
-                        return { ...c }
-                    }
-                })
-            }
-            return ({
-                ...state, posts: { ...state.posts, comments: editComments(posts.comments, _id, text) }
-            })
-        },
-
-        'UPSERT-LIKE-COMMENT': () => {
-            const upsertLikeComments = (commentList, id, nR) => {
-                return commentList.map(c => {
-                    if (c._id === id) {
-                        return { ...c, likes: [...nR] }
-                    } else if (c?.answers?.length) {
-                        return {
-                            ...c,
-                            answers: upsertLikeComments(c.answers, id, nR)
-                        }
-                    } else {
-                        return { ...c }
-                    }
-                })
-            }
+        'UPDATE-SUBCOMMENT': () => ({
+            ...state, posts: { ...state.posts, comments: upsertSubComments(posts.comments, findId, newResult, 'answers') }
+        }),
 
-            return ({
-                ...state, posts: {
-                    ...state.posts, comments: upsertLikeComments(posts.comments, findId, newResult)
-                }
-            })
-        },
+        'EDIT-COMMENT': () => ({
+            ...state, posts: { ...state.posts, comments: upsertSubComments(posts.comments, findId, newResult.text, 'text') }
+        }),
+
+        'UPSERT-LIKE-COMMENT': () => ({
+            ...state, posts: {
+                ...state.posts, comments: upsertSubComments(posts.comments, findId, newResult, 'likes')
+            }
+        }),
 
         'UPDATE-FOLLOWERS': () => ({
             ...state,
             userData: { ...state.userData, followers: [...newResult] }
         }),
     }
+    
     if (type in types) {
         return types[type]()
     }
+
     return state
 }
 

Файловите разлики са ограничени, защото са твърде много
+ 2 - 2
src/redux/saga/index.js