Git Code Commit (all commits between last post and this commit (link))
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.
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.
- 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.
- 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.
- Sort Test -> The sort test just sorts in ascending and descending order using the ListItemName column.
Server Side – API Layer
This was very similar to the DAL update. To do so, I:
- Added a method parameter for the search term.
- Added a search test
- Added a sort test
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
- Added search term to shared bucket list controller
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.
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.
In ServerCalls.js, the parameter is added and the call is made.
When the server call returns, Display.js handles the display.
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.
- 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.
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.
- Added reducer store call
- Implemented reducer search call
Then, in the constructor, I add it to the load call.
The reducer load call adds the search term to the server call and makes it.
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.
Next will be the ‘beautification’ blog series!