Today I added styling and search functionality to the React app. Searching will be necessary because of the massive number of queries the Engineering.com staff may save to the tool. We want to make this as user friendly as possible for them. This is especially true because a number of their staff who may use the tool may not have a technical background.

searching_added_to_react_app_1

In addition to searching, I will soon be adding categorization so that they can simply choose a tab and it will display all queries that belong to that category. The search I made right now has a bug in that it simply hides some elements on the screen (but leaving their spot on the DOM reserved) which makes it look a bit amusing...

searching_added_to_react_app_2

React blows my mind in terms of how simple it is to maintain. I already know how I'll fix this bug. Assuming it's not simple a poor choice of CSS class, I'll need to split my "query" array into two arrays. One to store the queries and one to store the ones we're currently displaying (according to the current search term or tab selection). And there's only one spot in the application to make that change, one block of scope. I won't have to worry about that change of state affecting other parts of the web app because state flows downward from the ultimate parent "App" component down into the little components that make up what you see in those screenshots.

Next steps will be to add a graphing library to display the results in better results than just JSON...

searching_added_to_react_app_3

And to link in the queries my team mate developed according to Engineering.com's interests.

Note: This was originally posted on the blog I used for my co-op term while at Seneca College (mswelke.wordpress.com) before being imported here.