[Steem Curator] - Sorting feature and Utopian posts

in utopian-io •  6 years ago  (edited)

Repository

Front end code: https://github.com/mightypanda-x/steem-curator
Middleware code deployed in heroku: https://github.com/mightypanda-x/utopian

Production URL:

https://steemcurator.com/

Introduction Posts

https://busy.org/@mightypanda/steem-curator-mvp-comments-curation
https://busy.org/@mightypanda/steem-curator-easies-curation-and-tech-debt

New Feature and associated commits

Commit 1 : Angular Material Table

Originally I implemented bootstrap table which doesn't provide much functionality other than organizing the data. So in this commit, i swap it out with angular material grid which offers much more functionality and better handling of data. It provides the sorting and filtering with little configuration.

  displayedColumns: string[] = ['sender', 'body', 'amount', 'net_votes', 'pending_payout_value', 'actions'];
  dataSource = new MatTableDataSource([]);
  @ViewChild(MatSort) sort: MatSort;

   .....

    this.postList$.pipe(takeWhile(() => this.isAlive)).subscribe((postsList) => {
      this.dataSource = new MatTableDataSource(postsList);
      this.dataSource.sort = this.sort;
    });

Commit 2 and Commit 3 : Utopian Front End code

This commit has the associated actions, effects, service, reducers and component code to display utopian post that are already reviewed. This data is also displayed in a nice material table with sorting and filtering functionality.

   public retrivePendingPosts(): Observable<UtopianPostModel[]> {
    return this.http
      .get<any>(`${this.proxyUrl}${this.apiUrl}/posts?status=pending`,
        {responseType: 'json'});
  }

Commit 4 - NodeJS code to get around CORS issue

utopian api does not have CORS header so I had to include NodeJS middleware to get around this problem but firebase doesn't allow calls to non google servers so now Node code is hosted on herokuapp and code is saved in its own GitHub.

const RETRIEVE_PENDING_URL = "https://utopian.rocks/api/posts?status=pending";
const RETRIEVE_UNREVIEWED_URL = "https://utopian.rocks/api/posts?status=unreviewed";
......
app.get('/api/pending', (req, res) => {
    request.get({
        url: RETRIEVE_PENDING_URL,
        json: true
    }, function (error, response, body) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Request-Method', '*');
        res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
        res.setHeader('Access-Control-Allow-Headers', '*');
        res.status(200).send(body);
    });
});
app.get('/api/unreviewed', (req, res) => {
    request.get({
        url: RETRIEVE_UNREVIEWED_URL,
        json: true
    }, function (error, response, body) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Request-Method', '*');
        res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
        res.setHeader('Access-Control-Allow-Headers', '*');
        res.status(200).send(body);
    });
});

Commit 5 - Unreviewed Posts and Filter

This commit has the code to get unreviewed posts and adds filtering capability to the Utopian posts module.

   getPendingPosts() {
    if (!this.pendingSelected) {
      this.filterText = '';
      this.pendingSelected = true;
      this.store.dispatch(new UtopianActions.RetrievePendingPosts());
    }
  }
   getUnreviewedPosts() {
    if (this.pendingSelected) {
      this.filterText = '';
      this.pendingSelected = false;
      this.store.dispatch(new UtopianActions.RetrieveUnreviewedPosts());
    }
  }   }

ezgif.com-video-to-gif.gif


Github: https://github.com/mightypanda-x

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:  
Loading...

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by mightyPanda from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

This post has been resteemed by Newbie Resteem. Keep up the great work. :)

Thnks

Hey @mightypanda
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!