swap with newer sprint

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "commonjs": true,
+    "es2021": true,
+    "node": true,
+    "browser": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {}
+}

.gitignore

@@ -1,26 +1,133 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
 
-# dependencies
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
 node_modules/
-/.pnp
-.pnp.js
+jspm_packages/
 
-# testing
-/coverage
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
 
-# production
-/build
+# TypeScript cache
+*.tsbuildinfo
 
-# misc
-.DS_Store
-.env.local
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
 .env.development.local
 .env.test.local
 .env.production.local
-.vscode
+.env.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+dist
 
-.vercel
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.vscode
+.DS_Store

README.md

@@ -1,125 +1,87 @@
-# Advanced Web Applications Sprint Challenge
+# Sprint Challenge: Advanced Web Applications
 
-**Read these instructions carefully. Understand exactly what is expected _before_ starting this Sprint Challenge.**
+In this challenge, you will write the logic for [THIS APP](https://advanced-apps-articles.herokuapp.com/).
 
-This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project.
+## Tools
 
-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)
+- Node 16.x
+- NPM 8.x (update NPM executing `npm i -g npm`)
+- Unix-like shell (Gitbash/bash/zsh)
+- Chrome >= 98.x
 
-You are not allowed to collaborate during the sprint challenge.
-
-## Introduction
-
-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.
+❗ Other configurations might work but haven't been tested.
 
 ## 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.
-
-## 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 application.
-
-### API Documentation
-* **[POST]** * to `http://localhost:9000/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.
-
-* **[POST]** * to `http://localhost:9000/api/logout`: returns the expired authentication information of the user.
-
-* **[GET]** to `http://localhost:9000/api/articles`: returns the all articles currently available. **This endpoint can only be accessed by an authenticated user.**
-
-* **[GET]** to `http://localhost:9000/api/articles/:id`: returns a single article with the id. **This endpoint can only be accessed by an authenticated user.**
-
-* **[POST]** to `http://localhost:9000/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.**
-
-* **[PUT]** to `http://localhost:9000/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.**
-
-* **[DELETE]** to `http://localhost:9000/api/articles/:id`: removes the article with the `id` referenced. Returns all available articles. **This endpoint can only be accessed by an authenticated user.**
-
-#### 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
-}
-```
-
-## 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`.
-
-### Login Authentication
-> *Build a login form to authenticate your users along with all the components and utilities needed to support authentication.*
 
-* [ ] 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.
+- Fork, clone, and `npm install`. You won't need to add any extra libraries.
+- Launch the project in a development server executing `npm run dev`.
+- Visit your app by navigating Chrome to `http://localhost:3000`.
+- Run tests locally executing `npm test`. The local test file is `codegrade_mvp.test.js`.
 
-### 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`.
+## Studying the prototype
 
-### 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.
+Open the live prototype linked above and study its functionality using the following **Chrome Dev Tools**:
 
-* [ ] 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.
+- **Elements tab** shows the exact DOM rendered as we interact with the UI. Look at texts but also at ids and class names.
+- **Network tab** shows the HTTP messages. "Payload" shows the request payload from the client (if any) and "Preview" shows the payload in the server response.
+- **Components tab** shows application state and the props each component gets passed (although the names of the components are minified during deployment).
 
-* [ ] 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.
+### Important notes from "Product"
 
-* [ ] `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.
+- The structure of the DOM must match that of the prototype
 
-* [ ] 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.
+## Studying the API
 
+The endpoints needed for this project are the following:
 
-### Logout Authentication
-> *Add in the http requests needed to logout of the application.*
+- `[POST] http://localhost:9000/api/login`
+  - Expects a payload with the following properties: `username`, `password`
+  - Example of payload: `{ "username": "foo", "password": "12345678" }`
+  - The `username` length must be >= 3, and the `password` >= 8, after trimming
+  - The response to a proper request includes `200 OK` and the auth token
+- `[GET] http://localhost:9000/api/articles`
+  - Expects an `Authorization` request header containing a valid auth token
+  - The response to a proper request includes `200 OK` and a list of articles which could be empty
+- `[POST] http://localhost:9000/api/articles`
+  - Expects an `Authorization` request header containing a valid auth token
+  - Expects a payload with the following properties: `title`, `text`, `topic`
+  - The `title` and `text` length must be >= 1, after trimming
+  - The `topic` needs to be one of three values: `React`, `JavaScript`, `Node`
+  - Example of payload: `{ "title": "foo", "text": "bar", "topic": "React" }`
+  - The response to a proper request includes `201 Created`, a success message and the new article
+- `[PUT] http://localhost:9000/api/articles/:article_id`
+  - Expects an `Authorization` request header containing a valid auth token
+  - Expects a payload with the following properties: `title`, `text`, `topic`
+  - The `title` and `text` length must be >= 1, after trimming
+  - The `topic` needs to be one of three values: `React`, `JavaScript`, `Node`
+  - Example of payload: `{ "title": "foo", "text": "bar", "topic": "React" }`
+  - The response to a proper request includes `200 OK`, a success message and the updated article
+- `[DELETE] http://localhost:9000/api/articles/:article_id`
+  - Expects an `Authorization` request header containing a valid auth token
+  - The response to a proper request includes `200 OK` and a success message
 
-* [ ] 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.
+❗ Test drive all these endpoints with [Postman](https://www.postman.com/downloads/) before starting with the project.
 
-### 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.
+## MVP
 
-## 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.
+In order to complete this project, you must fix the following modules:
 
-## 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.
+- [frontend/axios/index.js](frontend/axios/index.js)
+- [frontend/components/App.js](frontend/components/App.js)
+- [frontend/components/LoginForm.js](frontend/components/LoginForm.js)
+- [frontend/components/Articles.js](frontend/components/Articles.js)
+- [frontend/components/ArticleForm.js](frontend/components/ArticleForm.js)
 
-## Interview Questions
+You must also also test the Spinner component in this module:
 
-Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. Add your answers below.
+- [frontend/components/Spinner.test.js](frontend/components/Spinner.test.js)
 
-1. Explain what a token is used for.
+### Notes
 
-2. What steps can you take in your web apps to keep your data secure?
+- Find specific instructions inside each of the modules above.
+- Most components include a prop-types declaration at the bottom, to explain what props, and of what data types, they expect.
+- Try to get the functionality as close as possible to that of the prototype.
 
-3. Describe how web servers work.
+## MVP Short Explanation
 
-4. Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.
+❗ ALL TESTS MUST PASS