TGIMBA .NET Core Upgrade – Searching – 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

Welcome back!  Today is the last post in the functional client upgrade and it will deal searching.  Before we get to that though, let’s recap!

This blog series has been about updating the previous version of The Globe in My Bucket List Application (TGIMBA) from .NET 4.6.x (aka ‘Classic’ .NET) to .NET Core X.  It started with a post on the upgrade of the Database Layer (DAL).  In hind sight, I probably should not have called it an upgrade because all I did was re-compile the existing code and update the portions that were not compatible with .NET Core.  In the following blog posts, I ripped out the Windows Communication Foundation (WCF) service and called it directly from the Model View Controller (MVC). I wanted to create a .NET Core X base that I could construct User Interface (UI) experiments on.

From there, it has come to this point.  I started with Angular because at the time, it was what was hot.  As time has moved on, React Redux JS seems to be in the front spot.  I had always wanted to get better as basic Vanilla JavaScript, so those are the three main clients that I am wrapping up with this last post.  There is a JQuery client…but really only when calling the server. I wrote the last TGIMBA version entirely in JQuery and wanted something new.  If I knew then what I knew now, I would not have included it.   With this blog post, I will have replicated the functionally the old TGIMBA application has (ish).

Server Side – Data Layer
Given that I am using a new method for searching, I went in the way back machine and updated code I have not really touched in a while.  More specifically:

  • I added a search string parameter to the Data Access Layer (DAL) GetBucketListV2(args) method.

1

  • Converting the search term to a fuzzy parameter (i.e. like ‘%searchTerm%’) did not work at first.  After a little digging (see reference #1), I was able to add it where it worked.  The secret was to use the ‘AddWithValue(args)’ method that is part of the SqlCommand object.

1

  • Added a search and sort integration test (just to prove basic functionality).
  • Search Test -> The search test breaks up the list item name into separate words and searches for a few.  There is one that is not expected to be there as well.

2

  • Sort Test -> The sort test just sorts in ascending and descending order using the ListItemName column.

1

Server Side – API Layer
This was very similar to the DAL update.  To do so, I:

  • Added a method parameter for the search term.

blah

  • Added a search test

search

  • Added a sort test

Sort.PNG

Server Side – Shared Controllers
With multiple clients, I did not want to duplicate the same code multiple times.  So, I added a shared controllers package.  For search, this involved:

  • Adding search term to the web client

1

  • Added search term to shared bucket list controller

1

I made minor updates to the related unit tests.

Vanilla and JQuery JS
The search implementation for this client involved adding a term text box w/button and a hide able results alert.  More specifically, I am re-using the bucket list panel to display search results.  So, when  search is conducted, this alert is shown.  It is hidden when no search call has been made.

1

The event handler resides in MainController.js and when called, it calls Index which places the search term into the server call parameter list..  One thing that was kinda unique about the Vanilla/JQuery JS clients was how to handle the toggle.  Because the server calls are asynchronous, I needed a way to let the result handling code know whether it should display the hidden search panel or not.  I could have pushed a parameter through the call stack, but that seemed like overkill when I could just use session. So, I toggle a session value that the result handling call uses to show/hide the search result page prompt.

1

In ServerCalls.js, the parameter is added and the call is made.

1

When the server call returns, Display.js handles the display.

1

Angular 6 Type Script
The implementation for this client was a bit easier.  Specifically:

  • I added the same term text box w/button and hide able prompt.

1

  • The event handler takes the search term and pumps it into the load method which adds it to the server call.  Because the call stack is not as complicated, I chose to test if a search term was present to decide if to show the search results prompt or not.

1

React Redux JS
This client was not hard, but the ‘view’ only portion of the React JS stack is still tough for me to get used to.   But I will explain that more in a second.  Just like the other clients, I added the term text box w/button and search results prompt.

1

  • Added reducer store call

1

  • Implemented reducer search call

1

This is where the easy part stopped.  Let me explain. Because it is a JavaScript file, I find it hard to think of it in view only terms.  For example, the Razor .cshtml view template is easy to think about this way.  It renders whatever is in the model provided.  That is it.  With the React JS  file, it combines a constructor with a render method and options for other properties and methods.  So, as I kept trying to figure out how to re-pipe the search term back into the load call, I got all kinds of weird results.  Long story short, I ended up getting this to work by adding the search term as a query string parameter and re-loading the page.

1

Then, in the constructor, I add it to the load call.

1

The reducer load call adds the search term to the server call and makes it.

1

The toggle is handled by testing for a search term on each render.  Additionally, I had to add a boolean to set the search term back to empty or the new search term as it was not always updating.1

Next will be the ‘beautification’ blog series!

Stay tuned!

References

  1. https://stackoverflow.com/questions/665129/use-of-sqlparameter-in-sql-like-clause-not-working
  2. https://stackoverflow.com/questions/15519527/vanilla-javascript-set-style-on-body
  3. https://stackoverflow.com/questions/18050761/toggle-visibility-property-of-div

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