Amy Reid

.circleci/config.yml

@@ -1,3 +1,4 @@
+
 # Javascript Node CircleCI 2.0 configuration file
 #
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details

README.md

@@ -0,0 +1,130 @@
+# Checkpoint: React
+
+## Setup
+
+Fork and clone this repo.
+
+**Before you begin anything, run `npm install`.**
+
+## Before You Begin
+
+Every component has a test suite associated with it. There are 18 tests in
+total, grouped into 5 suites.
+
+To run the tests in the terminal, run `npm test`. The tests will rerun every
+time you save a file. When running `npm test` in the root of the repo there is
+an prompt to run all of the tests by entering `a`.
+
+When you start, all of the tests will be failing; your goal is to make as many
+pass as you can in the hour provided.
+
+> HINT: read the output of the failing tests.
+
+> Don't write anything in the `.test.js` files.
+
+## Instructions
+
+You're going to build a simple contact list manager using React and React
+Router. An initial set of contacts has been provided in `contacts.json` and some
+CSS has been provided in `src/styles/index.css`.
+
+> See a demo of the final app at
+> [http://quickest-beam.surge.sh/](http://quickest-beam.surge.sh/)
+
+Add Tweety as a contact in `contacts.json`:
+
+```
+{
+  name: "Tweety",
+  email: "tweety@gmail.com",
+  profile_picture: "https://upload.wikimedia.org/wikipedia/en/0/02/Tweety.svg"
+}
+```
+
+### Setup
+
+Inside `index.js`, import React Router and pass it to `ReactDOM.render()` as the
+root component with `<App>` as a child component. We've imported the starter
+contacts for you, pass these in to your `<App>` component as a prop, `contacts`.
+
+### `<App>`
+
+Your `<App>` component should accept `contacts` as a prop and use them to set
+the initial state for your component. Setting props as initial state looks like
+this:
+
+```js
+constructor(props) {
+  super(props)
+
+  this.state = {
+    contacts: props.contacts
+  }
+}
+```
+
+Your `<App>` component should also render:
+
+- A div with a class name of `'App'`
+- Your `<Header>` component
+- Two `<Route />` components
+- If the route is `"/"` then render the `<ContactList>` component; if the route
+  is `"/new-contact"` then render the `<NewContact>` component;
+
+### `<Header>`
+
+Your `<Header>` component should render:
+
+- A `<header>` element with an `<h1>`
+- A `<nav>` containing two React Router `<Link>`s, one to the homepage (`"/"`)
+  and the other to create a new contact (`"/new-contact"`).
+
+### `<ContactList>`
+
+`<ContactList>` should take `contacts` as a prop
+
+It should render:
+
+- A `<Contact>` component for each contact object inside of the `contacts` prop.
+- A `<div>` with a class of `contact-list`.
+
+### `<Contact>`
+
+Your `<Contact>` component will render a single contact.
+
+It should render:
+
+- An outer `<div>` with a class of `contact`
+- An include an `<img>` for the `profile_picture`,
+- `<h3>` for the `name`
+- `<h4>` for the `email`.
+
+### `<NewContact>`
+
+Your `<NewContact>` component should render:
+
+- An `<h1>` with a text of `New Contact`
+- A form with inputs for the `name`, `email` and `profile_picture`.
+
+When submitted, you should save the new contact by updating your state inside of
+`<App>` and redirect the user back to the homepage/list of contacts.
+
+## Rubric
+
+- App component is defined and exported
+- App component accepts the `contacts` json objects as a prop and the `contacts`
+  json object is properly passed
+- Router is defined and setup using the browser History API
+- Router includes a route for the homepage (`"/"`) and for the new contact page
+  (`"/new-contact"`)
+- Header component is defined and exported
+- Header component contains a title and two `<Link>`s, one to the homepage and
+  the other to the new contact page
+- ContactList component is defined and exported
+- ContactList component iterates through the contacts, rendering a Contact
+  component for each
+- Contact component is defined and exported
+- Contact component is rendering the image, name and email address of a contact
+- NewContact is defined and exported
+- NewContact contains a form that adds a new contact to the parent App component
+  state

controllers/notes.js

@@ -0,0 +1,15 @@
+const express = require("express")
+const router = express.Router()
+const Note = require("../models/Note")
+
+router.get("/", (req, res) => {
+    Note.find({}).then(note => res.json(note))
+})
+
+router.get("/:id", (req, res) => {
+    console.log(req.params.id)
+    const noteId = req.params.id
+    Note.findOne({ _id: noteId }).then(note => res.json(note))
+})
+
+module.exports = router

controllers/users.js

@@ -0,0 +1,15 @@
+const express = require("express")
+const router = express.Router()
+const User = require("../models/User")
+
+router.get("/", (req, res) => {
+    User.find({}).then(user => res.json(user))
+})
+
+router.get("/:id", (req, res) => {
+    console.log(req.params.id)
+    const userId = req.params.id
+    User.findOne({ _id: userId }).then(user => res.json(user))
+})
+
+module.exports = router

db/seed.js

@@ -0,0 +1,27 @@
+const Note = require('../models/Note')
+const User = require('../models/User')
+const seedData = require('./seedData')
+
+User.deleteMany({}).then(() => {
+    User.collection.insert(seedData)
+        .then(user => {
+            console.log(user)
+            process.exit()
+        })
+        .catch(err => {
+            console.log(err)
+            process.exit()
+    })
+})
+
+Note.deleteMany({}).then(() => {
+    Note.collection.insert(seedData)
+        .then(Note => {
+            console.log(Note)
+            process.exit()
+        })
+        .catch(err => {
+            console.log(err)
+            process.exit()
+    })
+})

index.js

@@ -1,3 +1,19 @@
+const express = require('express')
+const parser = require('body-parser')
+const app = express()
+const usersController = require("./controllers/users")
+const notesController = require("./controllers/notes")
+
+app.use(parser.urlencoded({ extended: true }))
+app.use(parser.json())
+
+app.get("/", (req, res) => {
+    res.redirect("/notes")
+})
+
+app.use("/users/", usersController)
+app.use("/notes/", notesController)
+
 app.listen(3000, () => console.log('app is running'))
 
 // DO NOT REMOVE THIS LINE:

models/Note.js

@@ -1,5 +1,15 @@
 const mongoose = require('../db/connection')
 
-const noteSchema = new mongoose.Schema({})
+const noteSchema = new mongoose.Schema({
+    title: String,
+    body: String,
+    author: [
+        {
+            ref: "User",
+            type: mongoose.Schema.Types.ObjectId
+        }
+    ]
+
+})
 
 module.exports = mongoose.model('Note', noteSchema)

models/User.js

@@ -1,5 +1,12 @@
 const mongoose = require('../db/connection')
 
-const userSchema = new mongoose.Schema({})
+const userSchema = new mongoose.Schema({
+    username: String,
+    email: String,
+    notes: [{
+        ref: "Note",
+        type: mongoose.Schema.Types.ObjectId
+    }]
+})
 
 module.exports = mongoose.model('User', userSchema)

package.json

@@ -9,7 +9,10 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "dependencies": {},
+  "dependencies": {
+    "express": "^4.17.1",
+    "mongoose": "^5.8.9"
+  },
   "devDependencies": {
     "chai": "*",
     "chai-http": "^4.3.0",

readme.md

@@ -81,4 +81,4 @@ For this checkpoint, you need to build a simple application for tracking Notes.
 Fork this repository and clone your fork locally. Commit as you go. When you are
 finished, push to GitHub.
 
-**Wait until the end of the hour to make your Pull Request**
+**Wait until the end of the hour to make your Pull Request**