Searching Added to React App

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.

Screenshot_20161102_163647.png

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…

screenshot_20161102_163614

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…

screenshot_20161102_164049

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

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s