![web_cover_2.png](https://ipfs.busy.org/ipfs/QmaREWvH5eMq66QZ5m9V9c4vJZtK1pRsRt9aQb47VkXRs1)
<center>_1Ramp is available on [Web](https://alpha.1ramp.io) and [Android](https://bit.ly/1ramp-android)_</center>

#### Repository
| App | Repo |
|------|------|
| Web | https://github.com/hapramp/alpha-web |
| Android | https://github.com/hapramp/1Rramp-Android |

----

## 1. The Rating Display Modal in Web App

The 1Ramp Android app displays the ratings on a post by clicking on the rating display section on a post. This feature is now also available for the web app.

<center>![ezgif.com-video-to-gif (2).gif](https://ipfs.busy.org/ipfs/QmPzDQ4KVGcRYqgfUaRrTZfntbfqmh6G7ZhJAM3sKAhedZ)</center>


### 1.2. Preparations

In order to get started with adding the display modal, I had to make a few changes/additions to the existing project -

#### 1.2.1. Allowing `UserAvatar` component without a link

The [`UserAvatar`](https://github.com/hapramp/alpha-web/blob/develop/src/components/UserAvatar/index.js) component makes it really easy to add a user's avatar given their username. This component is also rendered in the rating section of a post.

In order to make the click consistent throughout the rating section, it was required to be able to remove the link from the `UserAvatar` component. So I introduced a new `prop` to it called `noLink` - 

![carbon1.png](https://ipfs.busy.org/ipfs/QmZWJzD9Kg6odnH5rCWhr6fBG6qG25n66A5PPWioCXMY8M)

The links can now be safely turned off before adding the `onClick` handle to the rating section.

#### 1.2.2. Adding dependencies

[`react-custom-scrollbars`](https://github.com/malte-wessel/react-custom-scrollbars) and [`react-modal`](https://github.com/reactjs/react-modal) are the two dependencies which were added to display a decent looking scroll bar and the modal respectively. 

![carbon2.png](https://ipfs.busy.org/ipfs/QmZx7HmzPgUTne18q3djYmxwt8QViXNPY5dXHe8M1rzUmZ)

### 1.3. Implementation Details

Every post [`ActionBar`](https://github.com/hapramp/alpha-web/blob/develop/src/post/ActionBar/index.js) now has `showPostRatings`  in `state` to keep track of whether the overlap is open. The state variable gets set to `true` when a user clicks on the rating and the modal gets displayed.

#### 1.3.1. Handling document scroll issue
When the ratings in display modal are exhausted, the document below starts scrolling when the user scrolls. To prevent this, `Modal`'s props are used to enable/disable scroll - 

![carbon3.png](https://ipfs.busy.org/ipfs/QmPzhS5f4ziy5vA2EgHqmD9BuoVnv5Zq8FXNryuhsJASMS)

#### 1.3.2. Lazy loading ratings for faster rendering
Rendering all the votes for posts with a large number of votes makes the app very laggy. To prevent this, `react-infinite-scroller` is used and only the votes in view are rendered - 

![carbon4.png](https://ipfs.busy.org/ipfs/QmQbqsCJKVKQU1Fn5iBKjLpns381AgXziHwcXfQe2Ny2wG)

#### 1.3.3. More Optimizations

- Even when the modal is not active, the components inside it are rendered. So I adjusted the code to display no ratings in the beginning.
- When watching a list of posts with many votes associated, it becomes ineffective to calculate total `rshares` for each of the posts. So in this case, total `rshares` are calculated only when the modal is displayed -

  ![carbon5.png](https://ipfs.busy.org/ipfs/QmdDep8j2ghHpVXnP1Wo48rMwoWZk3vKaCHBRpeoBJioF5)

- Vote values are calculated only when a rating card is rendered. This prevents the overhead of calculating all the vote values at once.

### 1.4. Pull requests
- [#139: Add rating display modal](https://github.com/hapramp/alpha-web/pull/139)
- [#142: Add comments explaining rating modal behaviour](https://github.com/hapramp/alpha-web/pull/142)

-----

## 2. Image upload in the markdown editor
Recently we gave the markdown editor support in the web-app. Now you can upload images using the editor too.
<center>![ezgif.com-video-to-gif (3).gif](https://ipfs.busy.org/ipfs/QmXtkvP79rYMwRnPhnut9NfqsCmY83AragNZ4FHUHBadBk)</center>

### 2.1. Implementation Details

The image uploader reuses the `uploadImage` method and `<MediaSelector />` component from the project. Once the media is selected, it inserts the required markdown at the given position in the editor - 

![carbon6.png](https://ipfs.busy.org/ipfs/QmfJLfLcEHMGHhaF81NVYhnJMPbMXvWAYJDxS6EoGugHdM)

### 2.2. Pull Request
- [#141: Add feature to upload image in markdown editor](https://github.com/hapramp/alpha-web/pull/141)

-----

## 3. Land to the last page after logging in

Earlier in the web app, users used to land on the home page after logging in. While the expectation should be to land on the page where they started the login process.

This has been fixed now, ensuring a better browsing experience in the app.

### 3.1. Implementation Details

Using the state argument for SteemConnect's login URL builder, we can specify the redirect page after the authentication is successful.

This state is then used in the OAuth callback method to set the route accordingly.

![carbon7.png](https://ipfs.busy.org/ipfs/QmTSc8ACEFGbvRj31aNi3iSJgW2p2QsguUJZghgiGioJoi)

### 3.2. Pull request
- [#140: Use state from steemconnect callback to set route after login](https://github.com/hapramp/alpha-web/pull/140)

-----

## 4. Fix "New on 1Ramp" section in Android

The Android app earlier used condenser API to fetch the latest posts by a given tag. The latest changes in the Steem APII rendered it non-functional. To fix this, database API was used instead - 

![carbon8.png](https://ipfs.busy.org/ipfs/QmaumcQwV69qBk4ZQ6RYHd2fQANNPEsuU6aFVU6jN59SXw)
________________
## 5. What's next?
### 5.1. Participate in the ongoing contests on 1Ramp

![Screenshot 2019-01-23 at 11.45.04 PM.png](https://ipfs.busy.org/ipfs/QmQNNYsz4a19f8pnsQNiAfe4X27yd4w1w6qjcdau2zPQfk)

Check out more contests and winners from the previous contests here -- https://alpha.1ramp.io/competitions

### 5.2. We need your feedback
What features would you like to use on Steem? What do you think is missing from the 1Ramp platform? Give us your feedback on the [web](https://alpha.1ramp.io) and [Android](https://bit.ly/1ramp-android) applications. We'd love to work on them and build a better platform for creative communities on Steem.

____________
<center>![logo_hapramp_regular@48px.png](https://ipfs.busy.org/ipfs/QmVsvgkVmbc8tzrNR7LvyAAaWyCw8KpUCTK9uHkQ8bVSXw)</center>
###### [1Ramp](https://1ramp.io) is a Social Media platform for creators (powered by Steem blockchain). On 1Ramp, you can join communities of your interest: Art, Dance, Design, Fashion, Film, Literature, Photography, and Travel and earn rewards for sharing your work. We are on a mission to give all creative communities one stage where you can compete, collaborate, and make good art.
###### 1Ramp is Available on [Google Play](https://play.google.com/store/apps/details?id=com.hapramp~) and [Web](https://alpha.1ramp.io).
_____________
<center>
###### Join the conversation on [our Discord](https://discord.gg/c6N9kVM) or write us at [hi@1ramp.io](mailto:hi@1ramp.io)
![Communities_on_1Ramp.png](https://ipfs.busy.org/ipfs/QmNTCSNLxiuexTZ5Ry21jXWk9cayMBEp5yaikTb2RXJA9g)

[Twitter](https://twitter.com/the1ramp) | [Medium](https://medium.com/1ramp) | [Instagram](https://instagram.com/the1ramp) | [Facebook](https://facebook.com/the1ramp)</center>