src/user/Profile.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, { Component } from 'react'; class Profile extends Component { constructor() { super() this.state = { } } render() { return ( <div className="container"> <h2 className="mt-5 mb-5">Profile</h2> </div> ); } } export default Profile |
Notice when we added our Profile page, the path is /user/:userId.
This says whenever we have a URL in that format, we’ll hit the Profile component.
src/MainRouter.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React from 'react' import {Route, Switch} from 'react-router-dom' import Home from './core/Home' import Signup from './user/Signup' import Signin from './user/Signin' import Profile from './user/Profile' import Menu from './core/Menu' const MainRouter = () => ( <div> <Menu /> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/signup" component={Signup} /> <Route exact path="/signin" component={Signin} /> <Route exact path="/user/:userId" component={Profile} /> </Switch> </div> ) export default MainRouter; |
Use the user object you get from localStorage. Inside that object, you’ll get the user object. Access the _id of the user and use it for the url parameter when we click on the profile link.
src/core/Menu.js
|
1 2 3 4 5 |
<li className="nav-item"> <Link to={`user/${IsAuthenticated().user._id}`}> {`${IsAuthenticated().user.name}'s profile`} </Link> </li> |
When fetching data from Server
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import React, { Component } from 'react'; import { IsAuthenticated} from '../auth'; import { Redirect } from 'react-router-dom'; class Profile extends Component { constructor() { super() this.state = { user: "", redirectToSignin: false } } getUserInfo = async (userId, token) => { console.log(`1) get user info for user id: ${userId}` ) return await fetch(`http://localhost:8080/user/${userId}`, { method: "GET", mode: "cors", headers: { Accept : "application/json", "Content-Type": "application/json", Authorization: `Bearer ${token}`, 'Access-Control-Allow-Origin':'*' } }) .then(response => { console.log('3) response received') return response.json() }) .catch(err => { this.setState({ redirectToSignin: true }) return err }) } componentDidMount() { const userId = this.props.match.params.userId let token = IsAuthenticated().token console.log('0) get user info') this.getUserInfo(userId, token).then(response => { console.log('4) callback for logging and presentation') this.setState({ user: response }) }) console.log('2) finish him!!!') } render() { const { user, redirectToSignin } = this.state if (redirectToSignin) return <Redirect to="/signin" /> return ( <div className="container"> <h2 className="mt-5 mb-5">Profile</h2> <ul> <li>Hi, {user.name}</li> <li>{user._id}</li> <li>{user.email}</li> <li>{`Joined on ${new Date(user.created).toDateString()}`}</li> </ul> </div> ); } } export default Profile |