Prechádzať zdrojové kódy

creating profile page

Tanya Sashyna 5 rokov pred
rodič
commit
f9520b3bc9

+ 24 - 7
src/components/sidebar/Sidebar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from "react-router-dom";
-//import { connect } from "react-redux";
+import { connect } from "react-redux";
 
 import './sidebar.scss';
 
@@ -29,16 +29,12 @@ const siteMenu = [
         text: 'Reviews',
         href: '/reviews',
         id: 4
-    },
-    {
-        text: 'Login',
-        href: '/login',
-        id: 5
     }
 ];
 
-export default class Sidebar extends React.Component {
+export class Sidebar extends React.Component {
     render() {
+	const { showProfile } = this.props;
         return (
             <div className="menu">
                 <nav>
@@ -48,6 +44,10 @@ export default class Sidebar extends React.Component {
                         </Link>
                     </div>
                     <ul>
+						{
+							showProfile && <li><Link to="/profile">Profile</Link></li>
+						}
+						
                         {
                             siteMenu.map(link =>
                                 <li key={link.id}>
@@ -55,6 +55,13 @@ export default class Sidebar extends React.Component {
                                 </li>
                             )
                         }
+						{
+							!showProfile && <li><Link to="/login">Login</Link></li>
+						}
+						{
+							showProfile && <li><button>Logout</button></li>
+						}
+						
                     </ul>
                 </nav>
                 <div className="menu-skew">
@@ -64,3 +71,13 @@ export default class Sidebar extends React.Component {
         )
     }
 }
+
+const mapStateToProps = state => {
+    return {
+        showProfile: state.login.showProfile
+    };
+};
+
+export default connect(
+    mapStateToProps
+)(Sidebar);

+ 20 - 0
src/conteiners/profile/Profile.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import './profile.scss';
+
+import Sidebar from '../../components/sidebar/Sidebar';
+
+export default class Profile extends React.Component {
+    render() {
+        return (
+            <>
+                <Sidebar/>
+                <div className="container-wrap events">
+                    <div className="caption-page">
+                        <h2>Profile page</h2>
+                    </div>
+                </div>
+            </>
+        )
+    }
+}

+ 1 - 0
src/conteiners/profile/profile.scss

@@ -0,0 +1 @@
+@import "../../styles/variables";

+ 4 - 2
src/reducers/login.js

@@ -1,7 +1,8 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    user: {}
+    user: {},
+	showProfile: false
 }
 
 export default (state = initialState, action) => {
@@ -15,7 +16,8 @@ export default (state = initialState, action) => {
             console.log('user:', action.payload.user);
             return {
                 ...state,
-                user: action.payload.user
+                user: action.payload.user,
+				showProfile: true
             };
         }
 

+ 4 - 0
src/router.js

@@ -17,6 +17,8 @@ import RegistrationPage from './conteiners/registrationPage/RegistrationPage';
 import Events from './conteiners/events/Events';
 import EventCard from './conteiners/eventCard/EventCard';
 
+import Profile from './conteiners/profile/Profile';
+
 import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
 
 export class Router extends React.Component {
@@ -51,6 +53,8 @@ export class Router extends React.Component {
 
                     <Route exact path="/login" component={Login} />
                     <Route exact path="/registration" component={RegistrationPage} />
+
+					<Route exact path="/profile" component={Profile} />
                     
 			           
 			        <Route exact path = '/admin' component = {AdminMainPage} />