[Development - MemeIt.lol v2 ] - Added User Profile and Recent Memes by user

Repository

https://github.com/memeit-lol/interface

New Features

As mentioned in the task request on Github, the new memeit.lol interface needed a profile page where users can see their Steemit profile details( E.g. cover image, display picture, Balance etc.) and their recent memes posted on the memeit.lol website. I decided to take this challenge and completed it, as you can verify in this Pull Request. The added features are explained below.

User Profile

To create the profile page, I first had to create a route something like '/@username' that would redirect to the profile of that specific person. Also a 'profile' link in the top user menu needed to provided to let the current user navigate to his profile. This was done by adding the following route to src/Layout/index.js file.

<Menu.Item key='3' onClick={() => this.props.history.push('/@'+this.props.app.username)}>Profile</Menu.Item>

and add the following lines to routes.js file to define the route.

       {
          path: '/@:username',
         exact: true,   
         component: Profile 
       }     

Once the route is created, I had to create components for showing the user profile and his recent memes, which was done in src/shared/components/Profile/index.js and src/shared/components/UserProfile.js. In order to render the recent posts by the user, I had to use an element that fetched post data from the predefined API route as

  state = {
    posts: [],
    num: 1,
    user:[]
  }

  getMore () {
    axios.get(config.api + 'me?author='+this.props.match.params.username+'&skip=' + this.state.num ).then(d => {
      this.setState({ num:this.state.num, posts: [...this.state.posts, ...d.data.data] })
      console.log(this.state)
    })
  }

The User profile was rendered with the user profile data from the API before the UserProfile component gets mounted, like

componentWillMount () {
    axios.get(config.api + 'me?author='+this.props.match.params.username+'&skip=0' ).then(d => {
      this.setState({ num:this.state.num, posts:this.state.posts,user: [...this.state.user, ...d.data.user]  })
      console.log(this.state)
    })
  }

The profile page looks as shown in below pictures :

• With Banner , Display picture and Recent memes
  
• With Banner
  
• Without Banner
  

Relevant links

• Task Request
• Merged Pull Reqeust
• Commits

GitHub Account

https://github.com/aneilpatel05