Actifit: Landingpage Update

mkt (66)in #utopian-io • 6 years ago

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

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

https://github.com/mcfarhat/actifit-landingpage/commit/94d85543239762d072f67d309e0a907928653c7a

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.

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! ;)

#development #actifit #vuejs #steemdev

6 years ago in #utopian-io by mkt (66)

$95.43

Sort:

Trending

[-]

amosbastian (72) 6 years ago

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]