profile additional && categories page prototypes

src/components/user-components/categoriesPage/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import axios from 'axios';
+
+class categoriesPage extends React.Component {
+
+    state = {
+        categories: []
+    }
+
+    getCategories = () => {
+        axios.get('http://127.0.0.1:2000/api/categories')
+            .then(({ data }) => this.setState({
+                categories: data
+            }))
+            .catch(({ message }) => console.warn(message))
+    }
+
+    componentDidMount() {
+        this.getCategories()
+    }
+
+    render() {
+        const { categories } = this.state;
+        console.log("Categories - ", categories);
+
+        return (
+            <div className="page page--bottom-only categories-page">
+                <div className="container categories-grid">
+                    {categories.map(el => (
+                        <div
+                            className="categories-grid__element"
+                            style={{ background: `url("${el.cover}") no-repeat center center` }}
+                        >
+                            <a href={el.title}>
+                                <div className="container categories-grid__content-wrapper">
+                                    <h2>{el.title}</h2>
+                                    <hr className="divider" />
+                                    <p>{el.description}</p>
+                                </div>
+                            </a>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        )
+    }
+}
+
+export default categoriesPage;

src/components/user-components/profilePage/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux'
+// import { bindActionCreators } from 'redux'
 // import {} from './../../../actions'
 import axios from 'axios';
 
@@ -34,13 +34,11 @@ class profilePage extends React.Component {
         return (
             <div className="page page--bottom-only profile-page">
                 <section className="container section section--about">
-                    <h2 className="section__element section__element--">{user.name}</h2>
-                    <div className="section__element--combined">
-                        <img src={user.avatar} alt="avatar"/>
-                        <div>
-                            <h3>Login</h3>
-                            <p>{user.login}<button className="link link--btn right">Change login</button></p>
-                        </div>
+                    <h2 className="section__element section__element--header">{user.name}</h2>
+                    <img className="section__element section__element--image" src={user.avatar} alt="avatar" />
+                    <div className="sedtion__element section__element--login">
+                        <h3>Login</h3>
+                        <p>{user.login}<button className="link link--btn right">Change login</button></p>
                     </div>
                     <div className="section__element section__element--">
                         <h3>E-mail</h3>
@@ -62,11 +60,11 @@ class profilePage extends React.Component {
                             {
                                 user.comments && user.comments
                                     .slice(0, 60)
-                                    .map(el => 
-                                    <p>
-                                        <h4>{new Date(el.createdAt).toLocaleString()}</h4>
-                                        {el.text}
-                                    </p>)
+                                    .map(el =>
+                                        <p>
+                                            <h4>{new Date(el.createdAt).toLocaleString()}</h4>
+                                            {el.text}
+                                        </p>)
                             }
                         </p>
                     </div>
@@ -80,8 +78,8 @@ class profilePage extends React.Component {
 const
     mapStateToProps = state => ({
         user: state.user
-    }),
-    mapDispatchToProps = dispatch => bindActionCreators({}, dispatch)
+    })
+// mapDispatchToProps = dispatch => bindActionCreators({}, dispatch)
 
 export default connect(mapStateToProps)(profilePage);
 

src/router.js

@@ -19,7 +19,8 @@ const homePage = lazy(() => import("./components/user-components/homePage"));
 const signInPage = lazy(() => import("./containers/auth/SignInPage"));
 const signUpPage = lazy(() => import("./containers/auth/SignUpPage"));
 const createTestForm = lazy(() => import("./components/user-components/admin-components/createTestForm"));
-const profilePage = lazy(() => import('./components/user-components/profilePage'))
+const profilePage = lazy(() => import('./components/user-components/profilePage'));
+const categoriesPage = lazy(() => import('./components/user-components/categoriesPage'));
 
 class Router extends React.Component {
 
@@ -48,6 +49,7 @@ class Router extends React.Component {
                         {/* should be protected */}
                         <Route path={routes.CREATE_TEST} exact component={createTestForm} /> 
                         <Route path={routes.PROFILE} user={user} exact component={profilePage} />
+                        <Route path={routes.CATEGORIES} user={user} exact component={categoriesPage} />
 
                         <PrivateRouter path={routes.HOME} user={user} exact component={homePage} />
                         <PrivateRouter path={routes.TESTS} user={user} exact component={null} />

src/styles/components/_categoriesPage.scss

@@ -0,0 +1,31 @@
+
+
+.categories {
+    &-page {
+        width: 95%;
+        margin: auto;
+    }
+    &-grid {
+        display: flex;
+        flex-wrap: wrap;
+        font-family: 'Cormorant Infant', serif;
+        text-align: center;
+        &__element {
+            min-width: 250px;
+            max-width: 370px;
+            margin: 1vw auto;
+            border: 2px solid lightsteelblue;
+            height: 300px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        &__content-wrapper {
+            width: 80%;
+            height: 80%;
+        }
+        .divider {
+            width: 60%;
+        }
+    }
+}

src/styles/components/_page.scss

@@ -5,4 +5,12 @@
         padding-top: $padding-top-fixed - 40px;
     }
 }
+
+// .app {
+//     background-image: url('https://structureofintellect.files.wordpress.com/2017/09/bubble-test.jpg');
+//     background-attachment: fixed;
+//     background-repeat: no-repeat;
+//     background-size: cover;
+//     background-position: top center;
+// }
     

src/styles/components/_profilePage.scss

@@ -9,9 +9,15 @@
         margin: 10px;
         padding: 10px;
         &__element {
-
+            &--image {
+                border: 3px solid $color-lightsteelblue;
+                margin-bottom: 20px;
+            }
+            p {
+                margin-top: 5px;
+            }
             .comments-block {
-                height: 200px;
+                height: 250px;
                 overflow: auto;
             }
             

src/styles/components/_signPage.scss

@@ -1,5 +1,6 @@
 .sign {
     &-form {
+        // background: $color-lightgrey-transparent;
         font-size: 18px;
         font-family: 'Poiret One', cursive;
         font-weight: bold;

src/styles/index.scss

@@ -12,5 +12,6 @@
 @import "components/footer";
 @import "components/signPage";
 @import "components/notFound";
-@import "components/profilePage"
+@import "components/profilePage";
+@import "components/categoriesPage";