Actifit: Landingpage Update

in utopian-io •  6 days ago

image.png

Repository

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

Pull Requests

https://github.com/mcfarhat/actifit-landingpage/pull/4
https://github.com/mcfarhat/actifit-landingpage/pull/5
https://github.com/mcfarhat/actifit-landingpage/pull/6

About the project:

https://steemit.com/actifit/@actifit/announcing-actifit-innovative-smt-for-rewarding-fitness-activity

https://actifit.io/

The actifit landingpage slowly becomes more and more complex.

  • Now you can log in via SteemConnect.
  • The frontpage/navbar has been reworked.
  • You can see all the Activity Reports on the website now, from a certain user or all of them.
  • All the data handling has moved to Vuex, Vue's state management.

SteemConnect


image.png

For that I now always use the Vue.js plugin I created the other day.

After adding the dependency it needs a plugin file for Nuxt.js to register the plugin.

Now SteemConnect is available globally as this.$steemconnect.

In the Vuex store it has to be initialized separately.

Then you need an auth page to receive the access token. The store has an action for login, where the user data is fetched, and one for logout which simply removes the access token from local storage and unsets the user property.

Vuex

All the data is now handled by Vuex.

In Nuxt.js you simply have to add an index.js in the store directory.
All the getters, mutations and actions live in their own files.

Here is the list of properties/data that is handled by the store.

Wallet only for logged in user

Before it was possible to simply enter a username on the frontpage and see that users balance and transactions. This changed now. You need to log in via SteemConnect to access your wallet.

There's now also a UserMenu Component that shows the current AFIT balance of the logged-in user.

Activity Reports

The website now shows all the Activity Reports.

image.png

The posts are fetched with steem-js by the actifit tag and then filtered to get only posts with the specific json metadata.

To show the "load more" button I implemented an extra check and state variable to see if there are more posts to load.

The same procedure is used for the user specific reports but since the posts are fetched with the getDiscussionsByBlog function, there needs to be another check for the actifit tag when filtering the posts.

Minor Fixes/Changes

I did not mention every single commit in this post but basically all commits since this one can be taken into account for this contribution.

Last but not least I even added and updated some comments in the code, to please the reviewing moderator! ;)

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:  

Thanks for the contribution, @mkt! Some great new features - I'm 100% sure @mcfarhat is really happy to have you, haha. Also seems like the experience gained working on the Magic Frog is really coming in handy!

Last but not least I even added and updated some comments in the code, to please the reviewing moderator! ;)

I think you went a bit overboard with this to be honest. Most of the code adds to the readability but stuff like this isn't really necessary in my opinion

// login
this.$store.dispatch('login')

;)

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]

·

most certainly am ! :)

·

Thank you for your review, @amosbastian!

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

Activity Reports details looks awesome

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

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

Vote for Utopian Witness!