backend tryout -> profile layout prototype

package-lock.json

@@ -1923,6 +1923,15 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "1.1.6"
+      }
+    },
     "axobject-query": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
     "firebase": "^5.7.0",
     "node-sass": "^4.11.0",

src/components/common/privateRouter/index.js

@@ -1,12 +1,8 @@
 import React from 'react';
 import { Route, Redirect } from 'react-router';
 import * as routes from '../../../constants/routes';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 
-const PrivateRouter = ({ component: Component, user, ...rest }) => {
-
-    return (
+export default ({ component: Component, user, ...rest }) => (
         <Route
             {...rest}
             render={props => (
@@ -15,12 +11,5 @@ const PrivateRouter = ({ component: Component, user, ...rest }) => {
                     : <Redirect to={routes.SIGN_IN} />
             )}
         />
-    )
-}
-
-const
-    mapStateToProps = state => ({
-        user: state.user
-    })
+)
 
-export default connect(mapStateToProps)(PrivateRouter)

src/components/public-components/footer/index.js

@@ -7,7 +7,7 @@ export default props => (
             TOP-company
             "<span className="footer__us us__inline--red">T</span>est.<span className="footer__us us__inline--green">i</span>o"
         </p>
-        <p className="footer__copyright">&copy; 2018, "Test.io", all right reserved</p>
+        <p className="footer__copyright">&copy; 2018, 'Test.io', all right reserved</p>
         <button style={{"z-index": 4000, "color": "red"}} onClick={() => console.log(store.getState())}>Redux - State</button>
     </div>
 )

src/components/public-components/landingPage/index.js

@@ -4,7 +4,7 @@ import * as routes from './../../../constants/routes'
 
 export default props => (
     <div className="page landing-page">
-        <div className="landing-page__about">
+        <div className="container landing-page__about">
             <h1 className="description__header">
                 We are the powerfull servise providing you the ability to create and manage
                 your own tests, in any categories, choosing your own marking methods.
@@ -16,7 +16,7 @@ export default props => (
                 can easily pass them, get marks and <span className="description__inline--pretty">share</span> ones!
             </p>
         </div>
-        <div className="landing-page__links-container">
+        <div className="container landing-page__links-container">
             <Link to={routes.SIGN_IN} className="landing-page__links landing-page__links--sign-in">
                 Sign in
             </Link>

src/components/user-components/admin-components/createTestForm/index.js

@@ -12,13 +12,13 @@ class Form extends React.Component {
         const { handleSubmit } = this.props;
 
         return (
-            <form onSubmit={handleSubmit(this.sendRequest)}>
+            <form className="page" onSubmit={handleSubmit(this.sendRequest)}>
                 <h2>Make a title-page for your test!</h2>
 
                 <div className="title-page__block">
                     <p className="titles">Title</p>
                     <Field
-                        className="title-page__block--"
+                        className="title-page__block"
                         name="title"
                         type="input"
                         placeholder=""

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux'
+// import {} from './../../../actions'
+import axios from 'axios';
+
+// redux-connected container
+
+class profilePage extends React.Component {
+
+    state = {
+        user: {}
+    }
+
+    getUser = () => {
+        const randomUserId = Math.ceil(Math.random() * 10);
+
+        axios.get(`http://127.0.0.1:2000/api/users?id=${randomUserId}`)
+            .then(({ data }) => this.setState({
+                user: data
+            }))
+            .catch(({ message }) => console.warn(message))
+    }
+
+    componentDidMount() {
+        this.getUser();
+    }
+
+    render() {
+        const { user } = this.state;
+
+        console.log(user);
+
+        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>
+                    </div>
+                    <div className="section__element section__element--">
+                        <h3>E-mail</h3>
+                        <p>{user.email}<button className="link link--btn right">Change e-mail</button></p>
+                    </div>
+                    <div className="section__element section__element--">
+                        <h3>Status</h3>
+                        <p>{user.description}</p>
+                    </div>
+                </section>
+                <section className="container section section--stats">
+                    <div className="section__element section__element--">
+                        <h3>Member Since</h3>
+                        <p>{new Date(user.createdAt).toLocaleString()}</p>
+                    </div>
+                    <div className="section__element section__element--comments">
+                        <h3>Last comments</h3>
+                        <p className="comments-block">
+                            {
+                                user.comments && user.comments
+                                    .slice(0, 60)
+                                    .map(el => 
+                                    <p>
+                                        <h4>{new Date(el.createdAt).toLocaleString()}</h4>
+                                        {el.text}
+                                    </p>)
+                            }
+                        </p>
+                    </div>
+                </section>
+            </div>
+        )
+    }
+
+}
+
+const
+    mapStateToProps = state => ({
+        user: state.user
+    }),
+    mapDispatchToProps = dispatch => bindActionCreators({}, dispatch)
+
+export default connect(mapStateToProps)(profilePage);
+

src/constants/routes.js

@@ -10,5 +10,4 @@ export const CREATE_CATEGORY = '/create-category';
 export const DELETE_USER = '/delete-user'
 export const TESTS = '/test';
 export const CATEGORIES = '/categories';
-export const PROFILE = '/profile';
-// export const PERMISSON_DENIED = '/permisson-denied'
+export const PROFILE = '/profile';

src/containers/auth/SignUpPage/index.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router'
 import { HOME } from './../../../constants/routes';
 
-import SignUpForm from './../../../components/public-components/auth/signInForm';
+import SignUpForm from './../../../components/public-components/auth/signUpForm';
 
 class SignUpPage extends React.Component {
 

src/router.js

@@ -1,5 +1,6 @@
 import React, { Suspense, lazy } from "react";
 import { Switch, Route } from "react-router-dom";
+import { connect } from 'react-redux';
 
 import * as routes from './constants/routes';
 
@@ -18,6 +19,7 @@ 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'))
 
 class Router extends React.Component {
 
@@ -25,37 +27,35 @@ class Router extends React.Component {
         // localStorage.getItem(token)
     }
 
-    getSomeUsers() {
-        fetch('localhost:3306')
-            .then(res => console.log(res))
-            .catch(exc => console.warn(exc.message))
-    }
+    //chunk.js warnings are disabled !
 
     componentDidMount() {
-        this.getSomeUsers();
     }
 
     render() {
+        const { user } = this.props;
+
         return (
             <div className="app">
                 <Header />
                 <Suspense fallback={<Spinner />}>
                     <Switch>
                         <Route path={routes.LANDING} exact component={landingPage} />
-                        <Route path={routes.SIGN_IN} exact component={signInPage} />
                         <Route path={routes.SIGN_UP} exact component={signUpPage} />
+                        <Route path={routes.SIGN_IN} exact component={signInPage} />
                         <Route path={routes.HOME} exact component={homePage} />
 
-                        <PrivateRouter path={routes.HOME} exact component={homePage} />
-                        <PrivateRouter path={routes.TESTS} exact component={null} />
-                        <PrivateRouter path={routes.CATEGORIES} exact component={null} />
-                        <PrivateRouter path={routes.PROFILE} exact component={null} />
+                        {/* should be protected */}
+                        <Route path={routes.CREATE_TEST} exact component={createTestForm} /> 
+                        <Route path={routes.PROFILE} user={user} exact component={profilePage} />
 
-                        <PrivateAdminRouter path={routes.CREATE_TEST} exact component={createTestForm} />
-                        <PrivateAdminRouter path={routes.CREATE_CATEGORY} exact component={null} />
-                        <PrivateAdminRouter path={routes.DELETE_USER} exact component={null} />
+                        <PrivateRouter path={routes.HOME} user={user} exact component={homePage} />
+                        <PrivateRouter path={routes.TESTS} user={user} exact component={null} />
+                        <PrivateRouter path={routes.CATEGORIES} user={user} exact component={null} />
+
+                        <PrivateAdminRouter path={routes.CREATE_CATEGORY} user={user} exact component={null} />
+                        <PrivateAdminRouter path={routes.DELETE_USER} user={user} exact component={null} />
 
-                        {/* <Route path={routes.PERMISSON_DENIED} exact component={permissionDenied} /> */}
                         <Route component={notFound} />
                     </Switch>
                 </Suspense>
@@ -65,4 +65,11 @@ class Router extends React.Component {
     }
 }
 
+// const
+//     mapStateToProps = state => ({
+//         user: state.user
+//     })
+
+// export default connect()(Router)
+
 export default Router;

src/styles/abstracts/_variables.scss

@@ -15,5 +15,5 @@ $color-lightsteelgrey-transparent: rgba(190, 195, 221, .9);
 $color-lightsteelblue: #B0C4DE;
 $color-lightsteelblue-transparent: rgba(176, 196, 222, .9);
 
-$padding-top-fixed: 175px;
+$padding-top-fixed: 155px;
 $padding-bottom-fixed: 45px;

src/styles/components/_button.scss

@@ -31,6 +31,9 @@
             padding: 3vh 6vh;
             font-weight: 400;
         }
+        &-right {
+            float: right;
+        }
     }
     
 }

src/styles/components/_container.scss

@@ -0,0 +1,5 @@
+.container {
+    margin: auto;
+    background: $color-lightgrey-transparent;
+    box-shadow: 0 0 10px grey;
+}

src/styles/components/_landingPage.scss

@@ -5,12 +5,6 @@
     background-size: cover;
     background-position: top center;
     font-family: 'Cormorant Infant', serif;
-    &__about,
-    &__links-container, {
-        margin: auto;
-        background: rgba(211,211,211, .9);
-        box-shadow: 0 0 10px grey;
-    }
     &__about {
         width: 65%;
         text-align: center;

src/styles/components/_page.scss

@@ -1,5 +1,8 @@
 .page {
     padding-top: $padding-top-fixed;
     padding-bottom: $padding-bottom-fixed;
+    &--bottom-only {
+        padding-top: $padding-top-fixed - 40px;
+    }
 }
     

src/styles/components/_profilePage.scss

@@ -0,0 +1,24 @@
+.profile-page {
+    display: flex;
+    flex-wrap: wrap;
+    font-family: 'Cormorant Infant', serif;
+    font-size: 20px;
+    .section {
+        flex-grow: 1;
+        flex-basis: 400px;
+        margin: 10px;
+        padding: 10px;
+        &__element {
+
+            .comments-block {
+                height: 200px;
+                overflow: auto;
+            }
+            
+        }
+    }
+    .right {
+        float: right;
+    }
+}
+

src/styles/index.scss

@@ -4,6 +4,7 @@
 @import "base/typography";
 
 @import "components/page";
+@import "components/container";
 @import "components/button";
 @import "components/header";
 @import "components/spinner";
@@ -11,4 +12,5 @@
 @import "components/footer";
 @import "components/signPage";
 @import "components/notFound";
+@import "components/profilePage"
 

грабли.txt

@@ -0,0 +1,6 @@
+1. Редакс ломает роутер.
+Возможный костыль:
+https://github.com/ReactTraining/react-router/blob/v4.0.0-beta.8/packages/react-router/docs/guides/blocked-updates.md
+2. Анимация на кнопках хэдэра и нотфаунд не работает, хотя работает на кнопках формы.
+ХЗ
+3. Нету адекватного способа прокинуть юзера в роутер -> см. пункт 1.

костыли.txt

@@ -0,0 +1 @@
+Все еще впереди...