[Contest Hero] Contest Hero Development Update (Add prize to contest, edit prize, reblog, filter feed by prize)

Repository

https://github.com/tobias-g1/contest-hero

Contest Hero is a new app built on top of the Steem Blockchain that allows you to easily create, manage, find and enter great contests on the Steem blockchain. The following is an update surrounding the development of Contest Hero. If you want to take a look at the site, you can use the link below:

https://contesthero.io

You can also find out more about the Contest Hero in the following post:

https://steemit.com/@contest-hero/introducing-contest-hero-create-contests-on-the-steem

Here's an overview of the changes in this update, although there isn't as many as usual it's been over a week since my last update due to some other work I needed to complete so this release is long overdue.

New Features

1. Ability to assign prize type and prize value upon contest creation
2. Ability to edit prize type and prize value upon contest edit
3. Ability to filter feed by prize type
4. Ability to resteem post

Improvements

1. Improved code block styling (small, but mentioned by a member on Discord)
2. Created consistency between post and comment components
3. Created shared mixin between contest edit and creation pages
4. Added time since post indicator

Bug Fixes

1. Resolved issue with footer appended to contest and contest entries becoming skewed
2. Resolved issue with contest/entry/comment value disappearing following post-payout
3. Resolved issue with contest getting locked before deadline surpassing.

The changes mentioned above relate to the following pull requests:

https://github.com/tobias-g1/contest-hero/pull/118

and

https://github.com/tobias-g1/contest-hero/pull/120 (when reviewing my code for this post, I relealised I made a minor error)

One of the main features within this release was the ability to set both a prize type and prize value within the contest creation page. The following image shows how this looks on the contest creation page:

Currently, a Contest Hero user has the ability to select from the following prize types:

1. STEEM
2. SBD
3. Steem Monsters
4. Other
5. None

The main reason that I wanted to sort these into categories was to allow for filtering on the Contest page, now a user has the ability to select from the prize dropdown to filter their feed relevant to their selection. This can be seen in the image below:

The prize that is set by a user is also shown on the view contest page, currently, this is only a simple indicator to show whether the prize value and category. This can be seen in the image below:

From the above you can see there was a number of different client-side changes made during this release, this was combined with a few server-side adjustments that I need to make. In order to allow for a contest prize to be set, I needed to make an adjustment to the contest model to take into account the prize object.

prize:  {

type:  {

type:  String,

required:  true

},

value:  {

type:  String,

required:  true

}

Following this addition, I need to make an adjustment to the create_contests call in the controller to add the prize into the request body.

prize:  {

type:  req.body.prize.type,

value:  req.body.prize.value

}

and then in order to validate the request, I also need to add some additional validation to contests.valdation.js

prize:  {

type:  Joi.string().required(),

value:  Joi.string().required()

}

After I created the ability set prizes I needed to make an adjustment to both the get_contests and get_contests_by_category calls (I will be consolidating these calls in the next release as the planned features have quite a few API changes.), to provide the ability for the client to filter based on a user's selection within the feed, the following shows how currently form query for get_contest_by_category based on the parameters passed into the API:

let query =  (req.params.prize === 'any') ? { "category": req.params.category } : {"category": req.params.category, "prize.type": req.params.prize}

Contest.find(query,  function  (error,  contests)  {

if (error) {

console.error(error);

}

res.send({

contests:  contests

})

}).sort(sortmethod)

}

Based on a user selection with the UI, the call will be sent with the prize and category parameter in the response, following this the response will be filtered to their selection server side. Although the current method for building the query doesn’t scale well, I plan to rewrite both this call in the next release as there are numerous feed options that I want to implement.

The commits that related to the prize creation are here:

Add prize option contest form

https://github.com/tobias-g1/contest-hero/commit/8eaca6fcda407ca64846731697455852a163a5f0

Ability to filter feed by prize

https://github.com/tobias-g1/contest-hero/commit/c4f616b4ca5b2e5f1b4d37bbb390833d6fb7eebe

Show prize on contest page

https://github.com/tobias-g1/contest-hero/commit/a822510ec4e4f909043ac92ff58dbfb7874c12c5

Missed elements for prize entries, Ability to edit contest prizes, Contest Mixin

https://github.com/tobias-g1/contest-hero/commit/8545a6e78c77285a619ee39373acb8f08a45e970

Next, I added the ability for a user to reblog from Contest Hero. In order to do this I added a new icon to post-options component, when pressed this icon will trigger the dialog shown below:

A user then has the ability to select whether or not they would like to confirm their reblog of a particular post. Currently there is no indicator as to whether or not a contest or entry has been reblogged as their is no easy method to check this (at least in JS or I know of) so currently this is a known issue in the user experience. Although this particular feature makes us of existing functionality within vue-steemconnect this particular feature is important for contest creators who want to their contests to promote their contest using the Contest Hero front end.

This can be seen in this commit:

https://github.com/tobias-g1/contest-hero/commit/3991b29a373cee00702ee90c19532b5c5c343dda

Within this release I also realised that I was incorrect in my implementation surrounding how rewards were displayed on Contest Hero, I found that the value associated to a post would disappear following a post's payout. This was because I was only taking into account pending_post_payout, in order to resolve this issue I created the following computed property:

payout:  function  ()  {

let  postCreationDate  =  moment(this.post.created)._d

let  currentDate  =  moment()._d

let  timesince  =  moment(currentDate).diff(postCreationDate,  'minutes')

if (timesince  >  10080) {

return  parseFloat(this.post.curator_payout_value) +  parseFloat(this.post.total_payout_value)

}  else  {

return  this.post.pending_payout_value

}

}

Within this property I used moment.js to get the current date and format the creation time of the post, following that I would then calculate the difference and then if the time since was greater than 10080 minutes (7 days) I would return the sum of curator_payout_value and this.post.total_payout_value. The reason I mention this, is because it might be useful for somebody else who is thinking about building their own front end.

Aside from the mentioned above, I also took the chance to improve some of the duplication with the codebase, the area I tackled were related to the creation and editing contests. In order to do this I removed a lot of duplicated code in both create-contest.vue and edit-contest.vue and instead introduced mixins/contest.js. Within the newly created mixin I now am able to share code need for form validation, tag creation, image capture and prizes. Although there is still the issue to tackle surrounding the two identical form UI elements, this is a good start surrounding maintenance of those pages.

This can be seen in this commit:

https://github.com/tobias-g1/contest-hero/commit/8545a6e78c77285a619ee39373acb8f08a45e970

(Apologies, it's a bit mixed into the overall editing of a contest prize)

I also found that in a previous release I had adjusted the contest markdown parser without adjusting the comment or entry pages, this was mainly due the code being different being throughout all of the different pages. I therefore created a single component that can be used to reference when using the markdown panel. This can be seen in this commit:

https://github.com/tobias-g1/contest-hero/commit/505c783289724429161019bd9c7f2158eab28331

GitHub Account

A link to my GitHub can be found here:

https://github.com/tobias-g1/