SOLVED:WEB422 Assignment 4

Description

Objective:
To work with React and practice working with Component based architecture. We will continue to connect to
our Teams API as a data source for our app. For an exemplar on how to retrieve Teams API data (using fetch
and the “componentDidMount” lifecycle method), refer to the Week 5 example here:
https://github.com/sictweb/web422/blob/master/Code%20Examples/week5/myapp/src/Employees/Employees.js
Specification:
For this application, we will be working entirely in React. Our application will feature 4 routes: Overview,
Projects, Teams & Employees. Each route will be responsible for rendering information from our Teams API
(often in a

format) – we will not be updating the data at this time using forms. When complete, the
main structure of the app and the “Overview” view will look like the following:
Please Note, once the app is working as expected, please feel free to add any extra design, Images or CSS to
your solution. Be creative – this is your app.
Getting Started:
To get started, create a new React app using the command “create-react-app” – if “create-react-app” is not
available on your system, you can use the command “npm install -g create-react-app”.
Once you have created your new React app – open the folder in Visual Studio Code and run the command
“npm start” to get the React development server running. This should open your default web browser and
show you http://localhost:3000:
At this point, you may go ahead and delete the files:
• App.test.js
• App.css
Next, use the code at the following links to replace your App.js & index.css files (this will give you a solid
starting point and a design to work from):
• https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2019/web422/A4/App.js
• https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2019/web422/A4/index.css
Once this is complete, you need to update your “public/index.html” file to include the following &

•
When you have made the above updates, your app should look like the following:
Dependencies:
This project will make use of several additional dependencies available from npm including:
• moment: https://www.npmjs.com/package/moment
• react-router-dom: https://www.npmjs.com/package/react-router-dom
At this point, it makes sense to "npm install --save …" each of the above modules, since you will need them in
your application
Creating Your Components:
As we know from class, the main building block for all React applications, is the "Component". The following
sections of the specification will outline each component that must be built to get your application working
properly.
NOTE: All Components created for this application must exist in their own file (ie: ComponentName.js).
The First Step is to create the following components based on the existing code within your App.js. We will
shrink down the "App" component to use all of the new components
NavBar
The NavBar is the simplest component. It simply renders the

…

with the following columns:
o "Name" (the Project Name)
o "Description" (the Project Description)
o "Start Date" (the Project Start Date - HINT: Use "moment" to format the date using "LL")
o "End Date" (the Project End Date - if this doesn't exist or is null, simply render "n/a", otherwise use
"moment" to format the date using "LL")
• Once Complete, your component should look like:
Teams
Like the "Overview" route - this route's "render()" method will be wrapped in a
… Component. However instead of sidebar="Overview", the sidebar
property will instead pass "Teams", ie ….
Also, the "page-header" must read "Teams".
This Component must also adhere to the below specifications:
• For this component, you will need to include the following module
o "MainContainer"
• This component has a "state" that includes a "teams" array
• Uses "fetch" to pull all teams from your Teams API (Heroku) and assign the results to the component state
"teams" array (Hint: Perform this operation in the "componentDidMount()" lifecycle method)
• It must render a responsive bootstrap table:

…

with the following columns:
o "Name" (the Team Name)
o "Projects" (an "unordered list" of all projects that the team is responsible for)
o "Employees" (The number of employees on the team)
o "Team Lead" (The full name (First & Last) of the Team Lead)
• Once Complete, your component should look like:
Employees
Like the "Overview" route - this route's "render()" method will be wrapped in a
… Component. However instead of sidebar="Overview", the sidebar
property will instead pass "Employees", ie ….
Also, the "page-header" must read "Employees".
This Component must also adhere to the below specifications:
• For this component, you will need to include the following modules
o "moment"
o "MainContainer"
• This component has a "state" that includes an "employees" array
• Uses "fetch" to pull all employees from your Teams API (Heroku) and assign the results to the component state
"employees" array (Hint: Perform this operation in the "componentDidMount()" lifecycle method)
• It must render a responsive bootstrap table:

…

with the following columns:
o "Name & Position" (The full name and position of the employee)
o "Address" (The full address of the employee)
o "Phone Num" (The phone number + extension of the employee)
o "Hire Date" (The hire date of the employee (HINT: Use "moment" to format the date using "LL")
o "Salary Bonus" (The employee's salary bonus, including a "$")
• Once Complete, your component should look like:
NotFound
The "NotFound" is a simple route that we will use whenever a route is not identified within the app. Like the
"Overview" route - this route's "render()" method will be wrapped in a …
Component (without a "sidebar" property).
Also, the "page-header" must read "Not Found" and the text below should simply be a element with
the text: "Page Not Found".
Once Complete, your component should look like:
Creating Routes
All of our custom components are finally complete. Now we must register the routes so that our application
knows how to handle navigation between routes.
• Update your "index.js" ReactDOM.render() line to wrap your component in a
element, ie:



• (Don't forget to import {BrowserRouter} from 'react-router-dom')
Next, we must update our "App" component to register the routes according to the following specification
(NOTE: Refer to the Week 5 notes on "React Routing" for further details on how to wire the below routes):
• "/" will render
• "/projects" will render
• "/teams" will render
• "/employees" will render
• Any other Route will render
Updating all internal Links
The last step is to ensure that all elements use the component to prevent the whole
page from reloading between routes. This can be done by simply updating any anchor elements that refer to
internal routes, ie:
• Everywhere you see …, replace the code with …
This should eliminate any full-page reloads between routes.
HINT: Do not forget to add the line: "import {Link} from 'react-router-dom';" in any components that require
the "Link" component
Assignment Submission:
• Add the following declaration at the top of your App.js file:
/*********************************************************************************
* WEB422 – Assignment 04
* I declare that this assignment is my own work in accordance with Seneca Academic Policy. No part of this
* assignment has been copied manually or electronically from any other source (including web sites) or
* distributed to other students.
*
* Name: ______________________ Student ID: ______________ Date: ________________
*
********************************************************************************/
• Compress (.zip) the all files in your Visual Studio code folder EXCEPT the node_modules folder (this will just
make your submission unnecessarily large, and all your module dependencies should be in your package.json file
anyway).
• Submit your compressed file (without the node_modules folder) to My.Seneca under Assignments ->
Assignment 4
Important Note:
• NO LATE SUBMISSIONS for assignments. Late assignment submissions will not be accepted and will receive a
grade of zero (0).
• After the end (11:59PM) of the due date, the assignment submission link on My.Seneca will no longer be
available.
• Submitted assignments must run locally, ie: start up errors causing the assignment/app to fail on startup will
result in a grade of zero (0) for the assignment.