Steeditor development update: unlimited content editing and dashboard

Repository

https://github.com/jakipatryk/steeditor

Steeditor keeps changing. This update brings two features for logged in users. Let's see what they do and how they were implemented!

Unlimited content editing

Pull Request: Implement posts editing

A few weeks ago an option to edit posts older than 7 days was added to the Steem blockchain. Some interfaces already use this change, but the most popular ones are still waiting to see more witnesses running a right version of the software.

With Steeditor you don't have to wait. (Unlimited) content editing is up and running!

This is not the only reason why you would use Steeditor for content editing. This application was built for those who want to have a 100% control over their posts. Not every option can be changed if a post has already been broadcasted, but the ones that can be, are changeable. So it is possible to:

• decrease maximal accepted payout
• decrease percent of SDB in the reward (now instead of SBD you get liquid STEEM)
• edit the metadata

Working on this feature was fun, and a bit challenging. Why? Lets take a look at some technical details...

Routed feature module PostsModule uses reusable EditorModule introduced in one of my previous contributions. The magic happens in PostEditorComponent, which creates a config for editor and passes it down to the EditorComponent.

Besides that, the implementation of PostsModule is similar to both TemplatesModule and DraftsModule. It doesn't do much besides communication with the Store (dispatching actions, selecting state).

However, PostsStoreModule is interesting. While working on it I found and fixed a bug in a tutorial about content patching available on Steem Developer Portal. If you haven't seen this website before, I highly recommend checking it out, it's a great place to learn. My implementation of this functionality is little bit different, but it's mostly due to fact that Steeditor uses different build setup:

Once a user decides to update a post, Steeditor first checks if it makes sense to use a patch from the old post's body to new. If it doesn't, Steeditor broadcasts a raw version of the updated body.

Light Steem RPC client

Pull Request: Implement Steem RPC NgModule

Posts are fetched from a JSON RPC node, so there was a need for a client. When you use Angular, it is very beneficial to use the HttpClient + Observables everywhere where it makes sense. This mix ensures good testability and performance (with async pipe and OnPush change detection strategy in components).

So I created a very simple client, based on a generic call method:

However, I couldn't find a method which returns only posts authored by a given user, so without reblogs (if you know one, please let me know). I had to implement a workaround. I couldn't just filter the response, I needed a reliable solution - if 5 posts are required, it should return 5 posts.

So I created a getUserPosts method:

The magic happens in the expand operator. It repeats doing HTTP requests (recursively) until either the lastCheckedId is equal to 0 (when there aren't any more posts on user's blog) or the length of concated results is equal to the requested limit.

The easiest way to understand how it works is probably to read unit tests.

User dashboard

Pull Requests:

• Add user data state handlers
• Add user dashboard page
• Add call for user data
• Add formatters for data from blockchain

I thought it might be a good idea to add a dashboard with some user data and recently created drafts/templates/posts. So I implemented this:

I started with adding a new property to AuthState - currentUserData. Next, I updated the standard set of nrgx elements - reducer, actions, selectors, and effects. The user data is fetched via Steem RPC client described above. I just added an extra method - getUserData.

The routed feature module (DashboardModule) is not complicated either. Dashboard container selects slices of state and dispatches actions. The selected state is then passed down to presentational components. There is no magic here. This NgModule is simple, and routed feature modules should be kept simple.

RPC node returns user data that needs to be formatted before showing them to the end user. For example, voting_power is not a current voting power, but voting power at the time of user's last vote. So the current value has to be calculated.

Roadmap to feature-complete status

A lot has been implemented so far, but there are a few things left to do to achieve feature-complete status:

• as a user, I want to delete my post
• as a user, I want to see my post and comments added to it
• as a user, I want to add a comment to my post with all the advanced options
• as a developer, I want to have the store module unit tested

Meanwhile, I'll be working on ngx-steemconnect (SteemConnect library for Angular) and maybe a bigger project, but I have to test out Hivemind first.

GitHub Account

https://github.com/jakipatryk

Used @adasq's github code screenshot for code screenshots.