TGIMBA .NET Core Upgrade – Sorting – Vanilla JS, JQuery JS, Angular 6 Type Script and React/Redux JS w/Selenium Test

Git  Code Commit (all commits between last post and this commit (link))

Git  Selenium Code Commit

We will be sorting today!

Sorting in The Globe In My Bucket List Application (TGIMBA) is entirely a database function.  I could have implemented a set of code functions to do this, but I would be leaving out half of the application (something I learned from other developers in the past).  Databases are wonderful systems to can do amazing things if you let them.  Since I use Microsoft’s SQL Server, the T-SQL order by statement comes packed with a lot of options that can be changed quickly if your data model changes.  These sorts of changes may not be as easy if you have a custom sort system.

If you have been following along, you may have noticed the ‘encodedSortString’ parameter on TgimbaNetCoreWebShared\WebClient.cs -> GetBucketListItems(args).  This parameter is used to create a dynamic order by clause.  I chose this way (same as in the previous TGIMBA implementation) because its easy to apply and remove.

1

Server Side
There are no new ‘calls’ to make on the server.  Also, I choose to not add any new tests for sorting.  Why?  First, my tests are currently very happy path.  I have a ‘good’ and ‘bad’ unit test for each method of the web client and controller methods.  Plus, sorting is most apparent on the client.  So, I updated the Selenium tests to verify functionality.

Additionally, I choose not to update TestsAPI-Integration -> ApiTests.cs because it is using the legacy service.  After I complete the functional and Cascading Style Sheets (CSS) blog series, I am going to rip the service out of this code base and set up a new one hosted on its own.

Vanilla JS
First, I added the sort menu.  I chose to add it under the menu view folder since it is also a menu.  The menu consists of four sort options (i.e. name, created, category and completed/achieved), a descending option (ascending is default) and a cancel button that removes any previous sort and returns the user to the unsorted main view.

1

I also placed all of the event handlers in MenuController.js.  One method that each button calls and then another method that puts the sort column together (if selected) with a descending operator (again, ascending is the default).  I left a comment there because this is the same exact code (ish) that is in MainController.Index().  I do not like duplicating code.  But, I am not sure where to put the combined version that would serve both purposes (i.e. normal and sorted load).  I will eventually consolidate this 🙂

1

I also discovered that I had a SQL Injection vulnerability when reviewing my old (very old) data layer.  I (again) made a comment to fix it.  As stated earlier, once I am done with the functional coding (very close) and the Cascading Style Sheets (CSS) beautification phase (next), I am going to rip out this old monolith and replace with a stand alone HTTP .NET core service.  It also reminded me to be humble.  I believe eventually every developer finds themselves looking through old code saying ‘who wrote this crap’ only to discover it was them much earlier 🙂

1

The final step was to plug the value into ServerCalls.js.

JQuery JS
The only addition is the same server call update in the JQuery JS’s ServerCalls.js.

1

Angular 6 Type Script
This client was pretty quick.  I added a sort component borrowing heavily from the menu component.  The sort component has a method that takes a sort column.  In the markup, there are four different sort columns (represented by a button) the user can select.  They can also select the sort in descending order (the default is ascending).

1.PNG

I used a sort service to get the sort column from the sort component to the main component.   It is used in the bucket list load.   The sort service takes the column and allows it to be retrieved.

1

The main component pulls the sort order (if set) and loads the bucket list items in the desired sort order.

1

React Redux JS
With no server update, this went pretty quick.  I added the view Sort.js file.

1

The only really difference from other views is that four buttons call the same Sort(sortColumn, descending) method.  The ‘descending’ argument is the value of the at checkbox on that component.

1

I then added the store Redux Sort.js to take the sort order.  Here, I add it to the query string and send it over to Main.js

1

Component Main.js takes this in its constructor, grabs the value and then it is fed to the store Main.js.  There, the bucket list items are loaded with this sort order by applied.

1

Next will be a simple search function.    The next phase will be to use Cascading Style Sheets (CSS) only to make a mobile and desktop version that looks good.

Stay Tuned!

References

  1. https://stackoverflow.com/questions/11271057/how-to-use-moq-to-verify-that-a-similar-object-was-passed-in-as-argument

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s