Keeping track of employees is no joke, and as we've seen in our favorite tv show, "The Simpsons" (at least the "classic era"), management needs the latest in online rosters to search and sort their workers by name.
View the Gitbhub repository:
https://github.com/GCaplan777/ReactEmpTracker
View the deployed app on Heroku:
https://reacttracker.herokuapp.com/
With access to Node.js, you can open your terminal and run: "$npm init" to create your package-lock.json. If already there from a fork of my repo, simply run "$npm install". To use Eat-Da-Burger web application application from your local environment, you must accomplish the following steps below:
Step 1 - Clone my repo using the command line below.
git clone https://github.com/GCaplan777/ReactEmpTracker.git
Step 2 - Change directory to the cloned repo folder.
cd ReactEmpTracker
Step 3 - Install all required NPM packages.
npx create-react-app ReactEmpTracker. ***Here you may want to first delete the "src" folder from your React app. Go into the cloned repo, and copy and paste the src folder from the cloned repo into your React app.
Step 4 - Start the application server using the command line below
npm run start
Node.js, React.js, Heroku, Github
License Copyright: Unknown.
https://opensource.org/licenses/MIT
https://github.com/kao-ring
All test requirements met.
https://github.com/gcaplan777
Gif!
Screenshots
In App.js, our handleInputChange listened for letters typed into the search bar. A variable was created to filter the results, comparing the letter typed with letters in the our compared object, "Employee" by name. We then reset the state.
In App.JS, line 9, a second property for state "order" was set to ascending. That away, when "name" is clicked, we are listening and rendering ascending or descending based on the state. As we are in ascending to start, the first click will put us in ascending order, and also reset the state to descending, so that the next click received will use the descending funciton in our "if/ if else" statement. Our state is our switch back and forth.
In TableBody.js, we're receiveing the props being rendered in the App.js file.
