added react- responsive and primitive adaptive

package.json

@@ -14,6 +14,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-redux": "^7.2.6",
+        "react-responsive": "^9.0.0-beta.6",
         "react-router-dom": "^5.3.0",
         "react-scripts": "5.0.0",
         "react-sortable-hoc": "^2.0.0",

src/App.js

@@ -6,21 +6,26 @@ import { connect, Provider } from 'react-redux';
 import store from './redux/redux-store';
 import { Content, Main } from './pages/Content';
 import { CProfilePage } from './pages/ProfilePage';
-import HeaderComponent from './pages/Header';
+import HeaderComponent from './components/header/Header';
 import { CMainPostsFeed } from './pages/MainPostsFeed';
-import { CRRoute, promiseName } from './helpers';
+import { CRRoute } from './helpers';
 import { CPostPage } from './pages/PostPage';
 import { CAllPosts } from './pages/AllPosts';
 import { CEntityEditorPost } from './pages/EntityEditorPost';
 import { SettingsPage } from './pages/SettingsPage';
 import { Authorization } from './pages/Authorization';
-import { CPreloader } from './pages/Preloader';
 import { CCollectionPage } from './pages/CollectionPage';
+import { useMediaQuery } from 'react-responsive';
+import { FooterComponent } from './components/Footer';
 
 export const history = createHistory()
 
-const AppContent = ({ isToken }) =>
-    <Router history={history}>
+
+const AppContent = ({ isToken }) => {
+    const isTabletDevice = useMediaQuery({
+        query: "(max-width: 786px)"
+    })
+    return <Router history={history}>
         {!isToken
             ?
             <Switch>
@@ -30,6 +35,7 @@ const AppContent = ({ isToken }) =>
             </Switch>
             :
             <Content>
+
                 <HeaderComponent />
                 <Main>
                     <Switch>
@@ -37,7 +43,7 @@ const AppContent = ({ isToken }) =>
                         <Route path='/profile/:_id' component={CProfilePage} />
                         {/* <Route path='/message' component={Aside} /> */}
                         <Route path='/edit/post/new' component={CEntityEditorPost} exact />
-                        <Route path='/edit/post/:_id' component={CEntityEditorPost}/>
+                        <Route path='/edit/post/:_id' component={CEntityEditorPost} />
                         <Route path='/my-settings' component={SettingsPage} />
                         <Route path='/all' component={CAllPosts} />
                         <Route path='/my-collection' component={CCollectionPage} />
@@ -45,10 +51,12 @@ const AppContent = ({ isToken }) =>
                         <Redirect from='/*' to='/feed' />
                     </Switch>
                 </Main>
+                {isTabletDevice && <FooterComponent />}
+
             </Content >
         }
     </Router >
-
+}
 const CAppContent = connect(state => ({ isToken: state.auth?.token }))(AppContent)
 store.subscribe(() => console.log(store.getState()))
 

src/App.scss

@@ -58,6 +58,7 @@ body {
 video {
     width: 100%;
     margin: 0 auto;
+    height: auto;
     max-height: 500px;
 }
 .Header {
@@ -207,7 +208,8 @@ video {
     }
 }
 
-.ant-layout-header {
+.ant-layout-header,
+.ant-layout-footer {
     height: 58px;
     line-height: 58px;
     padding: 0 20px;
@@ -218,6 +220,7 @@ video {
 .Main {
     position: relative;
     padding-top: 58px;
+    padding-bottom: 60px;
     &__inner {
         padding-top: 22px;
     }
@@ -237,6 +240,7 @@ video {
     }
     &__dots.slick-dots {
         bottom: -14px;
+        z-index: 1;
         li {
             border-radius: 50%;
             background-color: rgba($color: #1890ff, $alpha: 0.5);
@@ -266,7 +270,7 @@ video {
         border: none;
         position: absolute;
         padding: 0;
-        background-color: rgba($color: #FFF, $alpha: 0.7);
+        background-color: rgba($color: #fff, $alpha: 0.7);
         height: 39px;
         width: 39px;
         border-radius: 50%;
@@ -431,7 +435,7 @@ video {
         img,
         video {
             width: 100%;
-            height: 100%;
+            height: auto;
             max-height: 175px;
             margin: 0 auto;
             object-fit: cover;
@@ -462,7 +466,6 @@ video {
     max-width: 1250px;
     padding: 40px 15px 0;
     margin: 0 auto;
-
     &__inner {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
@@ -472,7 +475,6 @@ video {
         align-items: center;
         box-shadow: 0 0 6px 2px rgba($color: $defaultColorB, $alpha: 0.5);
         border-radius: 5px;
-        max-height: 650px;
     }
     &__title {
         grid-area: 1 / 2 / 2 / 3;
@@ -486,13 +488,12 @@ video {
     &__image {
         grid-area: 1 / 1 / 3 / 2;
         width: 60vw;
-        max-width: 700px;
+        overflow: auto;
         height: 100%;
         background-color: rgb(87, 87, 87);
         img {
             max-width: 100%;
-            max-height: 550px;
-            min-height: 450px;
+            max-height: 600px;
             margin: 0 auto;
             object-fit: cover;
         }
@@ -518,13 +519,15 @@ video {
         flex-direction: column;
         justify-content: space-between;
         height: 100%;
-        max-height: 475px;
     }
     &__description-top {
         flex-grow: 1;
-        overflow: auto;
         height: 100%;
     }
+    &__comments {
+        max-height: 350px;
+        overflow: auto;
+    }
     &__comment-edit {
         display: block;
         text-align: right;
@@ -651,15 +654,21 @@ video {
 .ant-dropdown {
     box-shadow: 0 0 2px 0 $defaultColorB;
 }
-.avatar-uploader > .ant-upload {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    position: relative;
-    .edit-icon {
-        position: absolute;
-        top: 0;
-        right: 0;
+.avatar-uploader {
+    display: flex;
+justify-content: center;
+    bottom: 10px;
+
+    .ant-upload {
+        width: 150px;
+        height: 150px;
+        border-radius: 50%;
+        position: relative;
+        .edit-icon {
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
     }
 }
 
@@ -703,3 +712,59 @@ video {
         }
     }
 }
+
+@media (max-width: 800px) {
+    .PostOne {
+        padding-top: 30px;
+        &__inner {
+            display: block;
+            grid-template-columns: 1fr;
+            grid-template-rows: (45px, 1fr, 1fr);
+            max-height: 100%;
+        }
+        &__title {
+        }
+        &__image {
+            width: 100%;
+        }
+        &__description {
+        }
+        &__image img,
+        video {
+            height: auto;
+        }
+    }
+    .Profile {
+        &__box {
+            img,
+            video {
+                max-height: 120px;
+            }
+        }
+    }
+}
+
+@media (max-width: 560px) {
+    .Logo {
+        img {
+            width: 35vw;
+        }
+    }
+    .ant-input-affix-wrapper {
+        width: 45vw;
+        padding: 2px 5px 2px 7px;
+    }
+    .ant-layout-header {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    .PostOne {
+        padding-top: 20px;
+        padding-left: 0;
+        padding-right: 0;
+        &__description {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
+}

src/actions/index.js

@@ -32,15 +32,15 @@ export const actionRegister = (login, password) =>
                                     }
                                 }`, { login, password }))
 
+
 //*************** Action ABOUT ME ******************//
 
 export const actionAboutMeAC = (data) => ({ type: 'ABOUTME-DATA-ADD', data })
 export const actionFullAboutMe = () => ({ type: 'ABOUT_ME' })
 export const actionRemoveMyDataAC = () => ({ type: 'REMOVE-MYDATA' })
-
-
 export const actionFullAboutMeUpsert = (nick, login) => ({ type: 'ABOUT_ME_UPSERT', nick, login })
 
+
 export const actionAboutMe = (id) =>
     actionPromise('aboutMe', gql(`query userOned($myID:String!){
                         UserFindOne(query: $myID){
@@ -59,13 +59,12 @@ export const actionUpsertAboutMe = (myData) =>
                         }
                 }`, { user: 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' })
 
 export const actionPostsMyFollowing = (skip, myFollowing) =>
@@ -100,11 +99,8 @@ export const actionPostsCount = (_id) =>
 
 
 export const actionProfileDataAC = (postsData, count, userData) => ({ type: 'ADD-PROFILE-DATA', newResult: postsData, count, userData })
-
 export const actionProfilePageData = (id) => ({ type: 'DATA_PROFILE', id })
 
-// export const actionFindPostOne = (_id) => ({ type: 'FIND_POST_ONE', _id })
-
 export const actionProfileData = (_id) =>
     actionPromise('userOneData', gql(` query userOned($id:String!){
                         UserFindOne(query: $id){
@@ -117,9 +113,9 @@ export const actionProfileData = (_id) =>
             } `, { id: JSON.stringify([{ _id }]) }))
 
 export const actionProfilePagePost = (_id, skip) => actionPromise('userOneDataPosts', gql(` query userOned($id:String!){
-                PostFind(query:$id){
-                    _id   images{ url _id originalFileName }
-                }
+                    PostFind(query:$id){
+                        _id   images{ url _id originalFileName }
+                    }
                 }`, {
     id: JSON.stringify([{
         ___owner: _id
@@ -131,8 +127,10 @@ export const actionProfilePagePost = (_id, skip) => actionPromise('userOneDataPo
     }])
 }))
 
+
 //****************---All FIND POSTS---*************************//
 
+
 export const actionAllPosts = () => ({ type: 'ALL_POSTS' })
 
 export const actionGetAllPosts = (skip) =>
@@ -152,7 +150,7 @@ export const actionAllPostsCount = () =>
     actionPromise('userPostsCount', gql(` query userPostsCount($id:String!){
                 PostCount(query:$id)
                 }`, { id: JSON.stringify([{}]) }))
-//    ,
+
 
 //****************---Action FindUsers ---*************************//
 
@@ -181,9 +179,8 @@ export const actionLoadSearchUsers = (value) =>
 
 export const actionAddLikePostAC = (findId, newResult) => ({ type: 'ADD-POST-LIKE', findId, newResult })
 export const actionRemoveLikePostAC = (findId, newResult) => ({ type: 'REMOVE-POST-LIKE', findId, newResult })
-
-
 export const actionLikePost = (postId) => ({ type: 'LIKE_POST', postId })
+export const actionDelLikePost = (likeId, postId) => ({ type: 'DEL_LIKE_POST', likeId, postId })
 
 export const actionAddLikePost = (_id) =>
     actionPromise('likePost', gql(`mutation LikePost($like:LikeInput){
@@ -192,9 +189,6 @@ export const actionAddLikePost = (_id) =>
         }
     }`, { like: { post: { _id } } }))
 
-
-export const actionDelLikePost = (likeId, postId) => ({ type: 'DEL_LIKE_POST', likeId, postId })
-
 export const actionRemoveLikePost = (_id) =>
     actionPromise('removelikePost', gql(`mutation LikeRemove($like:LikeInput){
             LikeDelete(like:$like){
@@ -202,7 +196,6 @@ export const actionRemoveLikePost = (_id) =>
             }
         }`, { like: { _id } }))
 
-
 export const actionMyLikePost = (findId) =>
     actionPromise('myLikes', gql(`query likeFindPost ($id:String!){
         PostFindOne(query:$id){
@@ -215,8 +208,6 @@ export const actionMyLikePost = (findId) =>
 
 
 export const actionUpsertLikeCommentAC = (findId, newResult) => ({ type: 'UPSERT-LIKE-COMMENT', findId, newResult })
-// export const actionRemoveLikeCommentAC = (findId, newResult) => ({ type: 'REMOVE-LIKE-COMMENT', findId, newResult })
-
 export const actionLikeComment = (commentId) => ({ type: 'LIKE_COMMENT', commentId })
 export const actionDelLikeComment = (likeId, commentId) => ({ type: 'DEL_LIKE_COMMENT', likeId, commentId })
 
@@ -245,6 +236,7 @@ export const actionFindLikeComment = (findId) =>
 
 export const actionUpsertCollectionAC = (data) => ({ type: 'UPSERT-COLLECTION', data })
 export const actionHandlerUpsertCollection = (_id, flag) => ({ type: 'HANDLER_UPSERT_COLLECTION', _id, flag })
+export const actionFullMyCollectionLoad = () => ({ type: 'LOAD_COLLECTION' })
 
 export const actionAddPostInCollections = (collectionId, newCollection) =>
     actionPromise('addInCollections', gql(`mutation addInCollections($collection:CollectionInput ){
@@ -260,8 +252,6 @@ export const actionFindMyCollections = (_id) =>
         }
     }`, { id: JSON.stringify([{ ___owner: _id }]) }))
 
-export const actionFullMyCollectionLoad = () => ({ type: 'LOAD_COLLECTION' })
-
 export const actionOnLoadMyCollection = (_id, skip) =>
     actionPromise('onLoadMyCollections', gql(`query loadCollections($id:String! ){
        CollectionFind(query:$id){
@@ -275,8 +265,6 @@ export const actionOnLoadMyCollection = (_id, skip) =>
         }])
     }))
 
-//  posts{ images { url _id originalFileName } } 
-
 
 //****************---Action Subscribe ---*************************//
 
@@ -293,6 +281,7 @@ export const actionLoadSubscribe = (myID, myFollowing, userId) =>
             following{_id}
         }
       }`, { user: { _id: myID, following: [...myFollowing || [], { _id: userId }] } }))
+
 export const actionloadUnSubscribe = (myID, myFollowing) =>
     actionPromise('unSubscribe', gql(`mutation followingUn($user:UserInput){
         UserUpsert( user:$user){
@@ -319,14 +308,10 @@ export const actionUpdateFollowers = (_id) =>
 
 
 export const actionAddCommentAC = (newResult) => ({ type: 'ADD-COMMENT', newResult })
-
 export const actionUpdateSubCommentAC = (findId, newResult) => ({ type: 'UPDATE-SUBCOMMENT', findId, newResult })
-
 export const actionEditCommentAC = (findId, newResult) => ({ type: 'EDIT-COMMENT', findId, newResult })
 export const actionEditComment = (commentId, text) => ({ type: 'COMMENT_EDIT', commentId, text })
-
 export const actionFullAddComment = (postId, text) => ({ type: 'COMMENT_POST', postId, text })
-
 export const actionAddSubComment = (commentId, text) => ({ type: 'ADD_SUB_COMMENT', commentId, text })
 export const actionSubComment = (commentId) => ({ type: 'FIND_SUBCOMMENT', commentId })
 
@@ -379,7 +364,6 @@ export const actionSubAddComment = (commentId, text) =>
         }
     }`, { comment: { answerTo: { _id: commentId }, text } }))
 
-
 export const actionFindCommentText = (findId) =>
     actionPromise('subComments', gql(`query commentFindOne ($id:String!){
         CommentFindOne(query:$id){
@@ -396,12 +380,13 @@ export const actionUpsertEditComment = (commentId, text) =>
         }
     }`, { comment: { _id: commentId, text } }))
 
+
 //****************---Action Udate Avatar ---*************************//
 
+
 export const actionUpdateAvatar = (file) => ({ type: 'UPDATE_AVATAR', file })
 export const actionUpdateMyAvatart = (data) => ({ type: 'ABOUTME-UPDATE-AVATAR', data })
 
-
 export const actionSetAvatar = (file, id) =>
     actionPromise('uploadPhoto', gql(`mutation avaUpsert($ava: UserInput){
                 UserUpsert(user: $ava){
@@ -409,6 +394,7 @@ export const actionSetAvatar = (file, id) =>
                 }
             }`, { ava: { _id: id, avatar: { _id: file._id } } })
     )
+
 export const actionGetAvatar = (id) =>
     actionPromise('uploadPhoto', gql(`query userOned($myID: String!){
         UserFindOne(query: $myID) {
@@ -416,6 +402,7 @@ export const actionGetAvatar = (id) =>
         }
     }`, { myID: JSON.stringify([{ _id: id }]) }))
 
+
 //****************--- Find FOllowing/Follovwrs---*************************//
 
 export const actionFindFollowing = (_id) => ({ type: 'FIND_FOLLOWING', _id })
@@ -456,6 +443,7 @@ export const actionGetFindLiked = (_id) =>
 
 //****************---Create Post ---*************************/
 
+
 export const actionFullSentPost = (images, title, text) => ({ type: 'CREATE_POST', images, text, title })
 
 export const actionUpsertPost = (upSertPostObj) =>
@@ -463,14 +451,4 @@ export const actionUpsertPost = (upSertPostObj) =>
               PostUpsert(post: $post){
                     _id images{_id url originalFileName}
                 }
-            }`, { post: upSertPostObj }))
-
-
-
-
-        //запросить все коменты этого псота с ансвер (айди)
-        // по ансверс.файди найти дочерные коменты и засунуть в массив ансверс как елементы
-        // таким оюразом получтьь дерево
-        // отдать в рекувсивный компонкнт на отрисовку дерева.
-        // каждый лист дерева приконектить к экшонам лайк и добавление дочернего коммета.Там жк=е должен быть известен пост.айди для создания комментов
-
+            }`, { post: upSertPostObj }))

src/components/Footer.jsx

@@ -0,0 +1,11 @@
+import { Footer } from 'antd/lib/layout/layout';
+import React from 'react';
+import { UserNav } from './header/Header';
+
+export const FooterComponent = () => {
+    return (
+        <Footer style={{ position: 'fixed', zIndex: 3, width: '100%', bottom: 0 }}>
+            <UserNav />
+        </Footer>
+    )
+};

src/components/FormAuthorization.jsx

@@ -1,14 +1,16 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 import { Form, Input, Button, Checkbox, message } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { actionFullLogIn, actionFullRegister } from '../actions';
 
 const FormAuthorization = ({ buttonTitle, onSignIn, loginChek }) => {
-
+    const [loading, setLoading] = useState(false);
     useEffect(() => {
+        if (loginChek.status === "PENDING") {
+            setLoading(loading => loading = true)
+        }
         if (loginChek.status === "RESOLVED" && loginChek.payload === null) {
-            console.log(loginChek?.payload);
             message.error({
                 content: 'Wrong login or password',
                 className: 'custom-class',
@@ -16,6 +18,7 @@ const FormAuthorization = ({ buttonTitle, onSignIn, loginChek }) => {
                     marginTop: '20vh',
                 },
             })
+            setLoading(loading => loading = false)
         }
     }, [loginChek.status]);
 
@@ -71,7 +74,7 @@ const FormAuthorization = ({ buttonTitle, onSignIn, loginChek }) => {
                 <Checkbox>Remember me</Checkbox>
             </Form.Item>
             <Form.Item >
-                <Button type="primary" className="login-form-button" htmlType="submit">
+                <Button type="primary" className="login-form-button" loading={loading} htmlType="submit">
                     {buttonTitle}
                 </Button>
             </Form.Item>
@@ -84,3 +87,69 @@ export const CRegisterForm = connect(state => ({ status: state?.promise?.login }
 
 
 
+// import { Button, Space } from 'antd';
+// import { PoweroffOutlined } from '@ant-design/icons';
+
+// class App extends React.Component {
+//     state = {
+//         loadings: [],
+//     };
+
+//     enterLoading = index => {
+//         this.setState(({ loadings }) => {
+//             const newLoadings = [...loadings];
+//             newLoadings[index] = true;
+
+//             return {
+//                 loadings: newLoadings,
+//             };
+//         });
+//         setTimeout(() => {
+//             this.setState(({ loadings }) => {
+//                 const newLoadings = [...loadings];
+//                 newLoadings[index] = false;
+
+//                 return {
+//                     loadings: newLoadings,
+//                 };
+//             });
+//         }, 6000);
+//     };
+
+//     render() {
+//         const { loadings } = this.state;
+//         return (
+//             <>
+//                 <Space style={{ width: '100%' }}>
+//                     <Button type="primary" loading>
+//                         Loading
+//                     </Button>
+//                     <Button type="primary" size="small" loading>
+//                         Loading
+//                     </Button>
+//                     <Button type="primary" icon={<PoweroffOutlined />} loading />
+//                 </Space>
+
+//                 <Space style={{ width: '100%' }}>
+//                     <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
+//                         Click me!
+//                     </Button>
+//                     <Button
+//                         type="primary"
+//                         icon={<PoweroffOutlined />}
+//                         loading={loadings[1]}
+//                         onClick={() => this.enterLoading(1)}
+//                     >
+//                         Click me!
+//                     </Button>
+//                     <Button
+//                         type="primary"
+//                         icon={<PoweroffOutlined />}
+//                         loading={loadings[2]}
+//                         onClick={() => this.enterLoading(2)}
+//                     />
+//                 </Space>
+//             </>
+//         );
+//     }
+// }

src/pages/Header.jsx

@@ -1,24 +1,22 @@
 import React from 'react'
-import logo from '../logo.svg';
+import logo from '../../logo.svg';
 import { Link, NavLink } from 'react-router-dom';
-import { CFieldSearch } from '../components/header/Search';
+import { CFieldSearch } from './Search';
 import { connect } from 'react-redux';
-import { actionAuthLogout, actionRemoveMyDataAC } from '../actions';
-import Layout, { Header } from 'antd/lib/layout/layout';
+import { actionAuthLogout, actionRemoveMyDataAC } from '../../actions';
+import { Header } from 'antd/lib/layout/layout';
 import { Col, Menu, Popover, Row } from 'antd';
 import { UserOutlined, CompassOutlined, SettingOutlined, HomeOutlined, ImportOutlined, MessageOutlined, PlusCircleOutlined } from '@ant-design/icons/lib/icons';
-import { UserAvatar } from '../components/header/UserAvatar';
-import { CollectionEmptySvg } from '../helpers';
+import { UserAvatar } from './UserAvatar';
+import { CollectionEmptySvg } from '../../helpers';
+import MediaQuery from "react-responsive";
 
-const UserNav = () =>
+
+export const UserNav = () =>
     <div className='UserNav'>
         <CUserNavIcon />
     </div>
 
-
-
-
-
 const ProfileDropMenu = ({ myID, onLogOut, removeMydata }) =>
     <Menu className='dropMenu'>
         <Menu.Item key={'0'}>
@@ -57,10 +55,16 @@ const UserNavIcon = ({ userData: { _id, avatar, login } }) =>
             <NavLink to='/all'><CompassOutlined /></NavLink>
         </Col>
         <Col>
-            <Popover placement="bottomRight" content={<CProfileDropMenu myID={_id} />}>
-                <></>
-                <UserAvatar avatar={avatar} login={login} avatarSize={'45px'} />
-            </Popover>
+            <MediaQuery minWidth={768}>
+                <Popover placement="bottomRight" content={<CProfileDropMenu myID={_id} />}>
+                    <UserAvatar avatar={avatar} login={login} avatarSize={'45px'} />
+                </Popover>
+            </MediaQuery>
+            <MediaQuery maxWidth={768}>
+                <Popover placement="topRight"  content={<CProfileDropMenu myID={_id} />}>
+                    <UserAvatar avatar={avatar} login={login} avatarSize={'45px'} />
+                </Popover>
+            </MediaQuery>
         </Col>
     </Row >
 
@@ -74,21 +78,21 @@ const Logo = () =>
 
 
 const HeaderComponent = () =>
-    <Layout>
-        <Header style={{ position: 'fixed', zIndex: 3, width: '100%' }}>
-            <Row justify="space-between" align="middle" className='Header__inner'>
-                <Col span={8}>
-                    <Logo />
-                </Col>
-                <Col span={8}>
-                    <CFieldSearch />
-                </Col>
-                <Col span={8}>
+    <Header style={{ position: 'fixed', zIndex: 3, width: '100%' }}>
+        <Row justify="space-between" align="middle" className='Header__inner'>
+            <Col >
+                <Logo />
+            </Col>
+            <Col >
+                <CFieldSearch />
+            </Col>
+            <MediaQuery minWidth={768}>
+                <Col >
                     <UserNav />
                 </Col>
-            </Row>
-        </Header>
-    </Layout>
+            </MediaQuery>
+        </Row>
+    </Header>
 
 
 export default HeaderComponent 

src/components/header/Search.jsx

@@ -5,6 +5,8 @@ import { Link } from 'react-router-dom';
 import {  actionSearchUsers } from '../../actions';
 import { SearchOutlined } from '@ant-design/icons';
 import { UserAvatar } from './UserAvatar';
+
+
 const FindUsersResult = ({ usersRes }) =>
     <div className='Header__search-drop' >
         {

src/components/main/Posts.jsx

@@ -20,42 +20,17 @@ const Posts = ({ posts }) =>
                             </div>
                             : p.images.length === 1
                                 ?
-                                <img src={backURL + '/' + p.images[0]?.url} />
+                                <img src={backURL + '/' + p.images[0]?.url} alt="images post" />
                                 : <div className='Profile__box' >
                                     <CircularGalleryIcon className='Profile__box-icon' style={{ stroke: 'black' }} />
                                     <img src={(backURL + '/' + p?.images[0]?.url)} alt='post Img' />
                                 </div>
-                        : <img src={postNoData} />
+                        : <img src={postNoData} alt='no data' />
                     }
                 </Card>
             </Link>
         </Col>)
         }
     </Row >
-export const CPosts = connect(state => ({ posts: state.postsFeed?.posts || [] }))(Posts)
-
-
-// const Posts = ({ posts }) =>
-//     <Row gutter={[15, 15]}>
-//         {Array.isArray(posts) && posts.map(p => <Col key={p._id} span={8}>
-//             <Link to={`/post/${p._id}`}>
-//                 <Card className='Profile__post' hoverable>
-//                     {p?.url
-//                         ? videoRegExp.test(p?.originalFileName)
-//                             ? <div className='Profile__box' >
-//                                 <video>
-//                                     <source src={backURL + '/' + p?.url} />
-//                                 </video>
-//                                 <PlayCircleOutlined className='Profile__box-icon--video' />
-//                             </div>
-
-//                             : <img src={backURL + '/' + p?.url} />
-
-//                         : <img src={postNoData} />
-//                     }
-//                 </Card>
-//             </Link>
-//         </Col>)
-//         }
-//     </Row >
-// export const CPosts = connect(state => ({ posts: state.postsFeed?.posts || [] }))(Posts)
+    
+export const CPosts = connect(state => ({ posts: state.postsFeed?.posts || [] }))(Posts)

src/components/main/post/PostComment.js

@@ -0,0 +1,119 @@
+import React, { useState } from 'react'
+import { Divider, Dropdown, Menu } from 'antd';
+import { connect } from 'react-redux'
+import Text from 'antd/lib/typography/Text';
+ import { Comment, Tooltip } from 'antd';
+import moment from 'moment';
+import { Link } from 'react-router-dom';
+import { EditOutlined, LikeFilled, LikeOutlined, MoreOutlined } from '@ant-design/icons';
+import Paragraph from 'antd/lib/typography/Paragraph';
+import { UserAvatar } from '../../header/UserAvatar';
+import { CFieldSubCommentSend, CFieldUpsertCommentSend } from '../postsFeed/FieldComment';
+import { actionDelLikeComment, actionLikeComment, actionSubComment } from '../../../actions';
+
+
+
+const PostCommentAuthor = ({ owner }) =>
+    <>
+        <Link className='PostCommentAuthor' to={`/profile/${owner?._id}`} >
+            {owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}
+        </Link>
+    </>
+
+
+const EditMenu = ({ setEditComment }) =>
+    <Menu>
+        <Menu.Item key="1" onClick={() => setEditComment(true)}><EditOutlined /> Edit</Menu.Item>
+    </Menu>
+
+const PostCommentText = ({ myID, commentId, owner, text }) => {
+    const [editComment, setEditComment] = useState(false)
+    return (
+        <>
+            {owner?._id === myID && <Dropdown overlay={<EditMenu setEditComment={setEditComment} />} placement="bottomRight">
+                <span className='PostOne__comment-edit'
+                >
+                    <MoreOutlined />
+                </span >
+            </Dropdown>}
+            {!editComment
+                ? <Dropdown overlay={owner?._id === myID && <EditMenu setEditComment={setEditComment} />} trigger={['contextMenu']}>
+                    <Paragraph ellipsis={{ rows: 2, expandable: true, symbol: 'more' }} >
+                        {text}
+                    </ Paragraph>
+                </Dropdown>
+                : <CFieldUpsertCommentSend value={text} id={commentId} autoFocus={true} setOpen={setEditComment} rows={4} bordered={true} />}
+        </>)
+}
+
+const CPostCommentText = connect(state => ({ myID: state.auth.payload.sub.id || '' }))(PostCommentText)
+
+
+const PostCommentDate = ({ createdAt }) =>
+    <Tooltip title={moment(new Date(+createdAt)).format('DD-MM-YYYY HH:mm:ss')} >
+        {moment(new Date(+createdAt)).startOf().fromNow()}
+    </ Tooltip>
+
+
+const PostCommentAction = ({ myID, commentId, likes, delLikeComment, addLikeComment }) => {
+    const [open, setOpen] = useState(false);
+    const likeId = likes.find(l => l?.owner?._id === myID)?._id
+
+    const changeLike = () => likeId ? delLikeComment(likeId, commentId) : addLikeComment(commentId)
+
+    return (
+        <>
+            <span onClick={changeLike}>
+                {likeId ? <LikeFilled /> : <LikeOutlined />}
+                <span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes.length ? likes.length : ''}</span>
+            </span>
+            <span onClick={() => setOpen(!open)}>Reply to</span>
+            {open && <CFieldSubCommentSend autoFocus={true} id={commentId} setOpen={setOpen} />}
+        </>
+    )
+}
+
+const CPostCommentAction = connect(state => ({
+    myID: state.auth.payload.sub.id || ''
+}), {
+    addLikeComment: actionLikeComment,
+    delLikeComment: actionDelLikeComment
+})(PostCommentAction)
+
+const PostComments = ({ comments, findSubComment, parentId, }) => {
+    return (<>
+        {comments?.length && Object.keys(comments[0]).length > 1
+            ? comments.map(c => {
+                return (
+                    <Comment
+                        key={c._id}
+                        author={<PostCommentAuthor owner={c.owner} />}
+                        avatar={< UserAvatar avatar={c?.owner?.avatar} avatarSize={'35px'} />}
+                        datetime={<PostCommentDate createdAt={c.createdAt} />}
+                        content={<CPostCommentText text={c.text} commentId={c._id} owner={c.owner} />}
+                        actions={[<CPostCommentAction likes={c.likes} commentId={c._id} />]}
+                    >
+                        {
+                            c.answers && c.answers?.length
+                                ? <>
+                                    <PostComments comments={c?.answers} parentId={c._id} findSubComment={findSubComment} />
+                                </>
+                                : null
+                        }
+                    </Comment>
+                )
+            })
+            :
+            !!comments.length && <Divider plain>
+                <Text type='secodary' onClick={() => findSubComment(parentId)} >
+                    View answers {comments.length}
+                </Text>
+            </Divider>
+        }
+    </>)
+}
+
+export const CPostComments = connect(state => ({
+    comments: state?.postsFeed?.posts?.comments || [],
+
+}), { findSubComment: actionSubComment })(PostComments)

src/components/main/postsFeed/PostImage.jsx

@@ -3,7 +3,7 @@ import { Carousel, Empty } from "antd";
 import React, { createRef } from "react";
 import nodata from '../../../images/nodata.png'
 import { backURL, videoRegExp } from '../../../helpers/index'
-
+import MediaQuery from "react-responsive";
 
 class PostImage extends React.Component {
     constructor(props) {
@@ -46,10 +46,13 @@ class PostImage extends React.Component {
                     key={i._id}
                     onMouseEnter={() => this.moveOnDivArray(images.length, index)}
                     onMouseLeave={this.downOnDivArray}>
-                    <button onClick={() => this.handlePrev()}
-                        className={`Post__prev Post__btn ${this.state.movePrev ? '--active' : ''}`}><LeftCircleOutlined /></button>
-                    <button onClick={() => this.handleNext()}
-                        className={`Post__next Post__btn ${this.state.moveNext ? '--active' : ''}`}><RightCircleOutlined /></button>
+                    <MediaQuery minWidth={768}>
+                        <button onClick={() => this.handlePrev()}
+                            className={`Post__prev Post__btn ${this.state.movePrev ? '--active' : ''}`}><LeftCircleOutlined /></button>
+                        <button onClick={() => this.handleNext()}
+                            className={`Post__next Post__btn ${this.state.moveNext ? '--active' : ''}`}><RightCircleOutlined /></button>
+                    </MediaQuery>
+
                     {videoRegExp.test(i.originalFileName)
                         ? <video controls loop preload="true" height="500">
                             <source src={backURL + '/' + i.url} />

src/components/main/postsFeed/PostUserPanel.jsx

@@ -1,5 +1,5 @@
 import { HeartFilled, HeartOutlined } from "@ant-design/icons"
-import { Button, Col, Row, Tooltip } from "antd"
+import { Button, Col, Row} from "antd"
 import { useState } from "react"
 import { connect } from "react-redux"
 import { actionDelLikePost, actionHandlerUpsertCollection, actionLikePost, } from "../../../actions"

src/helpers/index.js

@@ -6,8 +6,10 @@ import { Route } from 'react-router-dom';
 
 export const backURL = 'http://hipstagram.asmer.fs.a-level.com.ua'
 
+
 export const videoRegExp = (/\.(mp4|mov|avi|wmv|flv|flv|3gp|mpg)$/i)
 
+
 export const propsUploadFile = {
     name: 'photo',
     action: `${backURL}/upload`,
@@ -48,6 +50,7 @@ const getGQL = url =>
 
 export const gql = getGQL(backURL + '/graphql');
 
+
 const CircularGallerySvg = () =>
     <svg aria-label="Кольцевая галерея" color="#ffffff" fill="#ffffff" height="22" role="img" viewBox="0 0 48 48" width="22">
         <path d="M34.8 29.7V11c0-2.9-2.3-5.2-5.2-5.2H11c-2.9 0-5.2 2.3-5.2 5.2v18.7c0 2.9 2.3 5.2 5.2 5.2h18.7c2.8-.1 5.1-2.4 5.1-5.2zM39.2 15v16.1c0 4.5-3.7 8.2-8.2 8.2H14.9c-.6 0-.9.7-.5 1.1 1 1.1 2.4 1.8 4.1 1.8h13.4c5.7 0 10.3-4.6 10.3-10.3V18.5c0-1.6-.7-3.1-1.8-4.1-.5-.4-1.2 0-1.2.6z"></path>
@@ -56,13 +59,14 @@ const CircularGallerySvg = () =>
 export const CircularGalleryIcon = props =>
     <Icon component={CircularGallerySvg} {...props} />
 
-const CollectionSvgEmpty = () =>
-    <svg  viewBox="0 0 24 24" ><polygon fill="none" points="20 21 12 13.44 4 21 4 3 20 3 20 21" stroke="currentColor"  strokeWidth="2"></polygon></svg>
 
+const CollectionSvgEmpty = () =>
+    <svg viewBox="0 0 24 24" ><polygon fill="none" points="20 21 12 13.44 4 21 4 3 20 3 20 21" stroke="currentColor" strokeWidth="2"></polygon></svg>
 
 export const CollectionEmptySvg = props =>
     <Icon component={CollectionSvgEmpty} {...props} />
 
+
 const CollectionFillSvg = () =>
     <svg aria-label="Удалить" color="#262626" fill="#262626" height="24" role="img" viewBox="0 0 24 24" width="24"><path d="M20 22a.999.999 0 01-.687-.273L12 14.815l-7.313 6.912A1 1 0 013 21V3a1 1 0 011-1h16a1 1 0 011 1v18a1 1 0 01-1 1z"></path></svg>
 
@@ -80,4 +84,5 @@ const RRoute = ({ action, component: Component, ...routeProps }) => {
     return <Route {...routeProps} component={WrapperComponent} />
 }
 
-export const CRRoute = connect(null, { action: match => ({ type: 'ROUTE', match }) })(RRoute)
+export const CRRoute = connect(null, { action: match => ({ type: 'ROUTE', match }) })(RRoute)
+

src/pages/PostPage.jsx

@@ -1,20 +1,15 @@
-import React, { useState } from 'react'
-import { Button, Divider, Dropdown, Menu } from 'antd';
+import React from 'react'
+import { Divider } from 'antd';
 import { connect } from 'react-redux'
 import PostImage from '../components/main/postsFeed/PostImage'
 import { PostDescription } from './MainPostsFeed';
 import Text from 'antd/lib/typography/Text';
-import { CFieldCommentSend, CFieldSubCommentSend, CFieldUpsertCommentSend } from '../components/main/postsFeed/FieldComment';
+import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment';
 import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
-import { Comment, Tooltip } from 'antd';
-import moment from 'moment';
-import { Link } from 'react-router-dom';
-import {  EditOutlined, LikeFilled, LikeOutlined, MoreOutlined } from '@ant-design/icons';
-import { actionLikeComment, actionDelLikeComment, actionSubComment } from '../actions';
 import { CPostTitle } from '../components/main/post/PostTitle';
-import { UserAvatar } from '../components/header/UserAvatar';
 import { CPreloader } from './Preloader';
-import Paragraph from 'antd/lib/typography/Paragraph';
+import { CPostComments } from '../components/main/post/PostComment';
+
 
 
 const PostPageTitle = ({ data: { owner }, postId }) =>
@@ -22,118 +17,14 @@ const PostPageTitle = ({ data: { owner }, postId }) =>
 
 const CPostPageTitle = connect(state => ({ data: state?.postsFeed?.posts || {}, postId: state?.postsFeed?.posts?._id }))(PostPageTitle)
 
-const PostCommentAuthor = ({ owner }) =>
-    <>
-        <Link className='PostCommentAuthor' to={`/profile/${owner?._id}`} >
-            {owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}
-        </Link>
-    </>
-
-
-const EditMenu = ({ setEditComment }) =>
-    <Menu>
-        <Menu.Item key="1" onClick={() => setEditComment(true)}><EditOutlined /> Edit</Menu.Item>
-    </Menu>
-
-const PostCommentText = ({ myID, commentId, owner, text }) => {
-    const [editComment, setEditComment] = useState(false)
-    return (
-        <>
-            {owner?._id === myID && <Dropdown overlay={<EditMenu setEditComment={setEditComment} />} placement="bottomRight">
-                <span className='PostOne__comment-edit'
-                >
-                    <MoreOutlined />
-                </span >
-            </Dropdown>}
-            {!editComment
-                ? <Dropdown overlay={owner?._id === myID && <EditMenu setEditComment={setEditComment} />} trigger={['contextMenu']}>
-                    <Paragraph ellipsis={{ rows: 2, expandable: true, symbol: 'more' }} >
-                        {text}
-                    </ Paragraph>
-                </Dropdown>
-                : <CFieldUpsertCommentSend value={text} id={commentId} autoFocus={true} setOpen={setEditComment} rows={4} bordered={true} />}
-        </>)
-}
-
-const CPostCommentText = connect(state => ({ myID: state.auth.payload.sub.id || '' }))(PostCommentText)
-
-
-const PostCommentDate = ({ createdAt }) =>
-    <Tooltip title={moment(new Date(+createdAt)).format('DD-MM-YYYY HH:mm:ss')} >
-        {moment(new Date(+createdAt)).startOf().fromNow()}
-    </ Tooltip>
-
-
-const PostCommentAction = ({ myID, commentId, likes, delLikeComment, addLikeComment }) => {
-    const [open, setOpen] = useState(false);
-    const likeId = likes.find(l => l?.owner?._id === myID)?._id
-
-    const changeLike = () => likeId ? delLikeComment(likeId, commentId) : addLikeComment(commentId)
-
-    return (
-        <>
-            <span onClick={changeLike}>
-                {likeId ? <LikeFilled /> : <LikeOutlined />}
-                <span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes.length ? likes.length : ''}</span>
-            </span>
-            <span onClick={() => setOpen(!open)}>Reply to</span>
-            {open && <CFieldSubCommentSend autoFocus={true} id={commentId} setOpen={setOpen} />}
-        </>
-    )
-}
-
-const CPostCommentAction = connect(state => ({
-    myID: state.auth.payload.sub.id || ''
-}), {
-    addLikeComment: actionLikeComment,
-    delLikeComment: actionDelLikeComment
-})(PostCommentAction)
-
-
-const PostComments = ({ comments, findSubComment, parentId, }) => {
-    return (<>
-        {comments?.length && Object.keys(comments[0]).length > 1
-            ? comments.map(c => {
-                return (
-                    <Comment
-                        key={c._id}
-                        author={<PostCommentAuthor owner={c.owner} />}
-                        avatar={< UserAvatar avatar={c?.owner?.avatar} avatarSize={'35px'} />}
-                        datetime={<PostCommentDate createdAt={c.createdAt} />}
-                        content={<CPostCommentText text={c.text} commentId={c._id} owner={c.owner} />}
-                        actions={[<CPostCommentAction likes={c.likes} commentId={c._id} />]}
-                    >
-                        {
-                            c.answers && c.answers?.length
-                                ? <>
-                                    <PostComments comments={c?.answers} parentId={c._id} findSubComment={findSubComment} />
-                                </>
-                                : null
-                        }
-                    </Comment>
-                )
-            })
-            :
-            !!comments.length && <Divider plain>
-                <Text type='secodary' onClick={() => findSubComment(parentId)} >
-                    View answers {comments.length}
-                </Text>
-            </Divider>
-        }
-    </>)
-}
-
-const CPostComments = connect(state => ({
-    comments: state?.postsFeed?.posts?.comments || [],
-
-}), { findSubComment: actionSubComment })(PostComments)
-
 const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =>
     <div className='PostOne__description-inner'>
         <div className='PostOne__description-top'>
             <PostDescription title={title} description={text} date={createdAt} />
             <Divider plain><Text type='secodary'>Comments</Text></Divider>
-            <CPostComments />
+            <div className='PostOne__comments'>
+                <CPostComments />
+            </div>
         </div>
         <div className='PostOne__description-bottom'>
             <Divider />

src/pages/Preloader.jsx

@@ -2,12 +2,13 @@ import { message, Spin } from 'antd'
 import { connect } from 'react-redux'
 import preloader from '../images/preloader.gif'
 
+<Spin size="large" />
 const PreloaderImg = () =>
     <div className='PreloaderImg'>
-        <Spin size="large" />
+        <img src={preloader} alt="preloader" />
     </div>
 
-const Preloader = ({ promiseName, promiseState}) =>
+const Preloader = ({ promiseName, promiseState }) =>
     <>
         {promiseState[promiseName]?.status === 'PENDING'
             ? <PreloaderImg />

src/pages/ProfilePage.jsx

@@ -101,7 +101,6 @@ const ProfilePage = ({ match: { params: { _id } }, getProfileUser, clearDataProf
 
     useEffect(() => {
         if (checkScroll) {
-
             getProfileUser(_id)
             setCheckScroll(false)
         }

src/pages/SettingsPage.jsx

@@ -96,7 +96,7 @@ const EditMyData = ({ myData, status, onUpsert }) => {
     return (
         <>
             <EditMyDataIput title='Nick' propValue={nick} propHandler={setNick} setChekEdit={setChekEdit} error={error} setError={setError} />
-            <EditMyDataIput title='Login' error={error} setError={setError} propValue={login} propHandler={setLogin} setChekEdit={setChekEdit} error={error} setError={setError} />
+            <EditMyDataIput title='Login' propValue={login} propHandler={setLogin} setChekEdit={setChekEdit} error={error} setError={setError} />
             <Button type='primary'
                 disabled={!error ? false : true}
                 className={!checkEdit && '--block'}

src/redux/reducers/myProfile-reducer.js

@@ -1,4 +1,3 @@
-import React from 'react'
 
 export const myProfileReducer = (state = {}, { type, data }) => {
     const types = {

src/redux/reducers/promise-reducer.js

@@ -1,4 +1,3 @@
-
 export function promiseReducer(state = {}, { type, status, payload, error, name }) {
     if (type === 'PROMISE') {
         return {

yarn.lock

@@ -3213,6 +3213,11 @@ css-loader@^6.5.1:
     postcss-value-parser "^4.1.0"
     semver "^7.3.5"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
+
 css-minimizer-webpack-plugin@^3.2.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.3.1.tgz#5afc4507a4ec13dd223f043cda8953ee0bf6ecfa"
@@ -4763,6 +4768,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+hyphenate-style-name@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -5922,6 +5932,13 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+matchmediaquery@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.1.tgz#8247edc47e499ebb7c58f62a9ff9ccf5b815c6d7"
+  integrity sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -7098,7 +7115,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.7:
+prop-types@^15.5.7, prop-types@^15.6.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7621,6 +7638,16 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-responsive@^9.0.0-beta.6:
+  version "9.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.0-beta.6.tgz#78dcc9c2af3b176dfa4088dae617a73dba8adbe7"
+  integrity sha512-Flk6UrnpBBByreva6ja/TsbXiXq4BXOlDEKL6Ur+nshUs3CcN5W0BpGe6ClFWrKcORkMZAAYy7A4N4xlMmpgVw==
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmediaquery "^0.3.0"
+    prop-types "^15.6.1"
+    shallow-equal "^1.2.1"
+
 react-router-dom@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
@@ -8173,6 +8200,11 @@ setprototypeof@1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shallow-equal@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"