Actifit: Post Editing (Landingpage Update)

in utopian-io •  last month

Repository

https://github.com/mcfarhat/actifit-landingpage

Pull Request

https://github.com/mcfarhat/actifit-landingpage/pull/10

It is now possible to edit your own activity reports on the Actifit website.
If you log in to the website via SteemConnect you can access your activity reports via the menu in the top right corner.


image.png

The post cards now have an edit link in the bottom right corner.


image.png

This link will open a new modal where you can edit your post.


image.png

Implementation

I started with just the basic functionality, which is populating some text fields with the post's data and then updating it via SteemConnect.

The click on the edit button of a post, stores this post in the vuex store's editReport property and opens the new edit modal component.

This component gets the selected post from the store and uses it to fill the form with data. This happens in a watcher so that whenever the editReport property changes, the form gets updated.

The save method then triggers a loading animation and updates the post via SteemConnect. (See https://github.com/mktcode/vue-steemconnect for a very easy way to integrate SteemConnect in your Vue.js project!)

In the end the post needs to be updated in the vuex store (via this store action) to show the changes on the page.

Markdown Editor

https://github.com/mcfarhat/actifit-landingpage/pull/10/commits/dbaa64f4263e7b51a6c213d616cf40bb8c024fbc

To have a more convenient editor I used a Vue.js implementation of Simplemde. To avoid some issues with Nuxt's server side rendering, I implemented this as a plugin and configured it to not be rendered on the server.

This makes this component globally available and you can use the editor by simply using the <markdown-editor> tag.

In the editor's configuration I used a custom callback for the preview, so that usernames (starting with @) get converted to links.

Tag Input

https://github.com/mcfarhat/actifit-landingpage/pull/10/commits/7ffdb010a4c0398d8d6d96a0798e38b5104718f1

For the tag input I used matiastucci/vue-input-tag, a very easy to use Vue.js component.
With this component you just need to import it and then you can use this <tag-input> tag and bind it to an array of tags in your data.
With some additional styling you then have a nice and convenient tag input.

Small Bugfix

https://github.com/mcfarhat/actifit-landingpage/pull/10/commits/83b03fe5dd6a22c689c38621790db79aee7e0c2f

There was some unintended behavior that removed the first post of a user.
When you fetch posts via steem-js and you use the start_author and start_permlink parameters, the first post that is returned is actually that start post. But since this is also the last post of the result set that you already fetched before, you don't want that to be included in those new posts. But actually I forgot to disable this behavior on the first fetch, because then of course you want all the posts.

TODO

Currently the editor does not support image uploads. I don't know if and when I will find the time to do that.

That's it!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution. I really like the way you have explained each and every task you have done through this contribution, a very well written post.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @codingdefined!

So far this week you've reviewed 7 contributions. Keep up the good work!

@mkt, thank you for the information! I started using Actifit Fitness Tracker on September the 1st. I do like it! I will try to log in to the Actifit website today. Just curious what it looks like and what it offers to us.

Great job. Will waiting for the image uploads :)

Hi @mkt!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 4 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 7 SBD worth and should receive 122 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

Hello, as a member of @steemdunk you have received a free courtesy boost! Steemdunk is an automated curation platform that is easy to use and built for the community. Join us at https://steemdunk.xyz

Upvote this comment to support the bot and increase your future rewards!

Hey, @mkt!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!