[Steem Curator] - Sorting feature and Utopian posts

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());
    }
  }   }