This is my web sprint challenge advanced web applications

README.md

@@ -2,89 +2,128 @@
 
 **Read these instructions carefully. Understand exactly what is expected _before_ starting this Sprint Challenge.**
 
-This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project. This sprint explored **advanced web applications**. During this sprint, you studied **React testing, client-side auth, HTTP methods, and Vercel**. 
+This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project.
 
-In your challenge this week, you will demonstrate your mastery of these skills by creating **a login page** and **basic CRUD application.**
+This is an individual assessment. All work must be your own. All projects will be submitted to codegrade for automated review. You will also be given feedback by code reviewers the Monday (Wednesday for PT) after challenge submissions. For more information on the review process [click here.](https://www.notion.so/lambdaschool/How-to-View-Feedback-in-CodeGrade-c5147cee220c4044a25de28bcb6bb54a)
 
-This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.
+You are not allowed to collaborate during the sprint challenge.
 
-You are not allowed to collaborate during the sprint challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your TL if you need direction. 
+## Introduction
 
-_You have **three hours** to complete this challenge. Plan your time accordingly._
+In this challenge you will create a login page and request a token from the server that you'll use to send all other requests to the server. You will then be able to fetch the article data array, update data, and delete data.
 
+## Project Setup
+[ ] Run npm install to install your dependencies.
+[ ]  Run npm start to run your frontend and backend code automatically.
+[ ]  Note your backend code will run automatically when your run npm start. There is no need to seperately run a server.js file and no means to test the server through postman or the browser. Feel free to ignore any messages related to MSW or mock service workers.
 
-## Introduction
+## Project Instructions
+In this project, you will demonstrate your mastery of these skills by creating **a login page** and **basic CRUD application.** You will implement basic security using **token authentication** and build private routes within the applcation.
+
+## Project Requirements
+
+**See reference materials at the bottom of the this document for API Reference Details.**
+
+### Basic Routing
+> *Build the needed utilities to restrict access to private routes.*
+* [ ] Build a `Route` component that renders rendering `Login.js` to the path `/`.
+* [ ] Build a `Route` component that renders rendering `Login.js` to the path `/login`.
+* [ ] Build a `Route` component that renders rendering `View.js` to the path `/view`.
+* [ ] Build a `Route` component that renders rendering `Logout.js` to the path `/logout`.
 
-In this project you will create a login page and request a token from the server that you'll use to send all other requests to the server. You will then be able to fetch the color data array, update data, and delete data, and watch the fun happen!
+### Login Authentication
+> *Build a login form to authenticate your users along with all the components and utilities needed to support authentication.*
 
-**Note** You can use the sites like the following to get color hex codes:
+* [ ] In `Login.js`, build all UI and state functionality needed to capture a username and password. On a successful login, redirect user to the `View.js` component.
+* [ ] **Make sure that the input for your username and password includes the id="username" and id="password" attributes. Codegrade autotests will fail without them.**
+* [ ] **Make sure that the submit button to your login form includes the id="submit" attribute.  Codegrade autotests will fail without them.**
+* [ ] In `Login.js`, add a p tag that will display an error if one occurs. Add in all state functionality needed to support error display.
+* [ ] **Make sure your error p tag has an id="error" attribute attached. Codegrade autotests will fail without them.**
+* [ ] Construct an http request that retrieves an auth token from the server when the username `Lambda` and the password `School` is passed into the request. Complete successful login auth flow and redirect to `View.js.`
+* [ ] Display an appropriate error message when login is not successful.
 
-* [Color-Hex](https://www.color-hex.com/)
+### Route Authentication
+* [ ] Build a `PrivateRoute` component within the components folder.
+* [ ] Use the `PrivateRoute` component to build a route rendering `View.js` to the path `/view`.
+* [ ] Use the `PrivateRoute` component to build a route rendering `Logout.js` to the path `/logout`.
 
-### Commits
+### Request Authentication
+> *Complete the requests needed to execute all CRUD functions.*
+* [ ] Build a `axiosWithAuth` module within the utils folder to create an instance of axios with the authentication header.
+* [ ] Complete the `services/articleService.js` module. It should use make an authenticated call to retrieve and return all articles from the server.
 
-Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons) and your team lead as the evaluate your solution.
+* [ ] In `View.js`, when the component mounts, use `articleService` to make an http request and add all articles to state.
 
-## Instructions
+* [ ] In `View.js`, complete `handleDelete` so that a http request is made that deletes the article with the included id. After successfully deleting the article on the api, update local state to reflect these changes.
 
-### Task 1: Project Set Up
+* [ ] `editId` is passed into the `EditForm` component. In `EditForm.js`, make a http request on mount to get the article with the id `editId`. Save the result in state.
 
-- [ ] Create a forked copy of this project
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!)
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly
-- [ ] Push commits: git push origin `<firstName-lastName>`
- - [ ] **LOOK** at the files in your root directory and notice it' is just a plain ol' React App that we've built using create-react-app.
- - [ ] **RUN** npm install install your dependences
- - [ ] **RUN** npm start to fire up your React application.
+* [ ] In `View.js`, complete `handleEdit` so that a http request is made that updates the passed in article. Set the editing state to false when the request is complete. After successfully deleting the article on the api, update local state to reflect these changes.
 
- **Setting up the CodeGrade webhook**
-Go [here](./CodeGrade-webhook.md) to setup the CodeGrade webhook before you begin.
 
+### Logout Authentication
+> *Add in the http requests needed to logout of the application.*
 
-### Task 2: Project Requirements
-Your finished project must include all of the following requirements.
+* [ ] In `Logout.js`, execute a http request to logout on mount. When the request is complete, the user's security token should be removed and the browser should redirect to the login page.
 
-#### Stage 1 - Authentication
-Build a login form to authenticate your users.
+### Advanced Testing
+> *Add the following tests within Article.test.js.*
+* [ ] Build a test that shows the `Article` component, given the correct props, can render without errors.
+* [ ] Build a test that shows that when a correctly formatted article is passed into the `Article` component, the correct headline, author, summary and body are displayed.
+* [ ] The `Article` component should display "Associated Press" when an author attribute is not avalible. Build a test that verifies that that is true.
+* [ ] Build a test that show that when the deleteButton is pressed on an Article, the handleDelete functional property is executed.
 
-- [ ] Construct an AXIOS request to retrieve a token from the server. You'll use this token to interact with the API
-- [ ] Save the token to localStorage
-- [ ] Build a `axiosWithAuth` module to create an instance of axios with the authentication header
-- [ ] Build a `PrivateRoute` component and use it to protect a route that renders the `BubblesPage` component
+> *Add the following tests within View.test.js.*
+* [ ] Build a test that shows the `View` component can render zero articles without errors. Make sure the mock service called made when View mounts.
+* [ ] Build a test that shows the `View` component can render three articles without errors. Make sure the mock service called made when View mounts.
 
-#### Stage 2 - Consuming the API
+## Important Notes:
+* You are welcome to create additional files but **do not move or rename existing files** or folders.
+* Do not change your `package.json` file except to install additional libraries.
+* In your solution, it is essential that you follow best practices and produce clean and professional results.
+* Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work.
+* It is better to submit a challenge that meets MVP than one that attempts too much and does not.
 
-- [ ] When `BubblePages` renders, make a GET request to fetch the color data for your bubbles.
-- [ ] In `ColorList.js`, complete the `saveEdit` and `deleteColor` functions to make AJAX requests to the API to edit/delete data
-- [ ] Watch and enjoy as your app responds to updates in the data. Check out `Bubbles.js` to see how this is built.
+### API Documentation
+* **[POST]** * to `http://localhost:5000/api/login`: returns a the current authenication information of the user. Pass in the following credentials as the `body` of the request: `{ username: 'Lambda', password: 'School' }` for a successful login.
 
-#### API Documentation
+* **[POST]** * to `http://localhost:5000/api/logout`: returns the expired authentication information of the user.
 
-  * **[POST]** * to `http://localhost:5000/api/login`: returns a token to be added to the header of all other requests. Pass in the following credentials as the `body` of the request: `{ username: 'Lambda School', password: 'i<3Lambd4' }`
-  * **[GET]** to `http://localhost:5000/api/colors`: returns the list of colors and their hex codes.
-  * **[POST]** to `http://localhost:5000/api/colors`: creates a new color object. Pass the color as the `body` of the request (the second argument passed to `axios.post`).
-  * **[PUT]** to `http://localhost:5000/api/colors/:id`: updates the color using the `id` passed as part of the URL. Send the color object with the updated information as the `body` of the request (the second argument passed to `axios.put`).
-  * **[DELETE]** to `http://localhost:5000/api/colors/123`: removes the color using the `id` passed as part of the URL (123 in example).
+* **[GET]** to `http://localhost:5000/api/articles`: returns the all articles currently available. **This endpoint can only be accessed by an authenticated user.**
 
-#### Stage 3 Testing
-- [ ] Finish the test in `BubblePage.test.js` to test that your app is fetching the bubble data from the API
+* **[GET]** to `http://localhost:5000/api/articles/:id`: returns a single article with the id. **This endpoint can only be accessed by an authenticated user.**
 
-In your solution, it is essential that you follow best practices and produce clean and professional results. You will be scored on your adherence to proper code style and good organization. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not.
+* **[POST]** to `http://localhost:5000/api/articles`: creates a article object. Returns all available articles. Pass the article as the `body` of the request. **This endpoint can only be accessed by an authenticated user.**
 
-### Task 3: Stretch Goals 
+* **[PUT]** to `http://localhost:5000/api/articles/:id`: updates the article using the `id` passed as part of the URL. Returns all available articles. Send the updated article object as the `body` of the request. **This endpoint can only be accessed by an authenticated user.**
 
-After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals:
+* **[DELETE]** to `http://localhost:5000/api/articles/:id`: removes the article with the `id` referenced. Returns all available articles. **This endpoint can only be accessed by an authenticated user.**
 
-* [ ] Build out another form to add a new color to your color list
-* [ ] Build a custom hook called `useApi` that you can use to make all of your API calls
-* [ ] Add more tests to give you further confidence in the code you're shipping
+#### Article Data Structure
+```
+{
+    id: 'aMqwd', //unique article id
+    headline: "headline", //title of article
+    createdOn: '2021-08-09T18:02:38-04:00 
+', //timestamp of when article was added
+    summary: "summary", //short summary statement of article
+      body: ""  //paragraph of article text
+}
+```
 
 ## Submission format
+* [ ] Submit via Codegrade by commiting and pushing any new changes to **your main branch.**
+* [ ] Check Codegrade before the deadline to compare its results against your local tests.
+* [ ] Check Codegrade on the days following the Sprint Challenge for reviewer feedback. For more information on how to access and read your feedback, check [here](https://www.notion.so/lambdaschool/How-to-View-Feedback-in-CodeGrade-c5147cee220c4044a25de28bcb6bb54a)
+* [ ] New commits will be evaluated by Codegrade if pushed before the sprint challenge deadline.
+
+## Interview Questions
+
+Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. Add your answers to the questions within `interview_answers.md` file. These will not be counted as a part of your sprint score but will be helpful for preparing you for your endorsement interview, and enhancing overall understanding.
+1. Explain what a token is used for.
+
+2. What steps can you take in your web apps to keep your data secure?
 
-Follow these steps for completing your project.
+3. Describe how web servers work.
 
-- [ ] Ensure that your projects are complete on your <firstName-lastName> branch.
-- [ ] Merge your <firstName-lastName> branch into your main branch.
-- [ ] Push your main branch to github and check that it is registers within codegrade.
-- [ ] Check your personal feedback the following Monday. For more information check [here](https://www.notion.so/lambdaschool/How-to-View-Feedback-in-CodeGrade-Student-facing-c5147cee220c4044a25de28bcb6bb54a)
+4. Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.

babel.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    testing: { // matches the `NODE_ENV=testing` in "test" script in package.json
+      plugins: [
+        '@babel/plugin-transform-runtime',
+      ],
+      presets: [
+        ['@babel/preset-react'],
+        [
+          '@babel/preset-env',
+          {
+            modules: 'commonjs',
+            debug: false
+          }
+        ]
+      ]
+    }
+  }
+};