steemcontest.com development update (changed date display, added page for sorting from oldest to ending and going to end, remove ended contest)

in hive-153176 •  3 years ago 

since the first launch of steemcontest.com, there have been several updates that we have made in the development of this site to be even better. In the past two days, we have managed to update several sections, namely:

  • change the display of the end date of the contest

Previously, the display of the contest end date was in the format "End Mon Aug 30 2021", after the change to the number of days from today to the contest end date. For example a contest that ends on the 31st, so it will appear "end in 1 day". This will make it easier for you to see when the contest ends, without having to count the days again like before.
image.png
for the coding formula, we subtract the ending date with today's date with the result in the form of a timestamp then we
var inday=(s.data().end.toDate().getTime() - now.getTime() ) / (1000 * 3600 * 24)

  • Sort from oldest to ending

the next change, on the "NEW" menu. Here we will display the contests in the order of the longest ending. This will make it easier for you to find contests that have a long time to end. we do this sorting process with the 'orderBy' function from firebase. The following is a display of the results and the code snippet.

Screen Shot 2021-08-30 at 00.03.57.png

  db.get().then(contest=>{
            var dataall=[];
            contest.docs.forEach(s=>{
                var now=new Date();
                var inday=(s.data().end.toDate().getTime() - now.getTime() ) / (1000 * 3600 * 24)
                dataall.push({'prize':s.data().prize, 'end':inday, 'title':s.data().title, 'thumbnail':s.data().thumbnail, 'id':s.data().id, 'link':s.data().link, 'user':s.data().user, 'category':s.data().category})
            })
            this.setState({contests:dataall})      
        })
  • sort from going to end

then on the "ended soon" menu we show contests based on the expiration time will run out. You can use this to see the contest that will end soon and you can follow it to get results quickly without having to wait for a long time to end. for display and code snippets we will show below.

Screen Shot 2021-08-30 at 00.11.23.png

db.get().then(contest=>{
            var dataall=[];
            contest.docs.forEach(s=>{
                var now=new Date();
                var inday=(s.data().end.toDate().getTime() - now.getTime() ) / (1000 * 3600 * 24)
                dataall.push({'prize':s.data().prize, 'end':inday, 'title':s.data().title, 'thumbnail':s.data().thumbnail, 'id':s.data().id, 'link':s.data().link, 'user':s.data().user, 'category':s.data().category})
            })
            this.setState({contests:dataall})
        })
  • Remove ended contest

Lastly, we are eliminating contests whose expiration times have expired. Later we will display it on a special page. We will continue this in the next changes. This aims to make it easier for you to see contests that are still ongoing and have expired. For the sorting process, we check every loading of the main page from steemcontest.com. the system will check if the contest ending time is less than the current time then the status will be changed to "end". here is the code snippet:

 checkEnd(){
        var db=firebase.firestore().collection('/contests')
        .orderBy('added', 'desc')
        .where("status","==", "paid");

        db.get().then(contest=>{
            contest.docs.forEach(s=>{
                var now=new Date();
                var inday=(s.data().end.toDate().getTime() - now.getTime() ) / (1000 * 3600 * 24)
                if(inday<=0){
                    var db=firebase.firestore().collection('/contests');
                    db.doc(s.data().id).update({
                        status:'ended'
                    })
                }
            })
        
        })
    }

Proof of work

You can check our commit here : https://github.com/sogatanco/steem-contest/commits/master

Screen Shot 2021-08-30 at 00.18.56.png

Can we get the program code from steemcontest.com ?

steemcontest.com is open source, so we provide every program code to the public. if you want to view, download, run our project on your local computer or you want to modify it. You can directly visit our github at: https://github.com/sogatanco/steem-contest

We really need your advice

In order to achieve the perfection of this project, we really hope for your suggestions. If you have an idea to add a feature on the steemcontest site, don't hesitate to contact us immediately. We really hope to make steemcontest.com more perfect in the future.

Kind Regards

@sogata / Steemcontest Dev

Our Other Project :

  • Bank STEEM : STEEM / SBD exchange site with IDR (Indonesian Rupiah), and vice versa.
  • Promosteem.Com :promosteem community tool to see the delegates and member status of the community
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!