Fullstack_Part3_Exercise.txt

3.1 - 3.6 Phonebook Backend

const express = require("express")
const app = express()
const bodyParser = require('body-parser')

app.use(bodyParser.json())


let persons = [
    { 
      "name": "Arto Hellas", 
      "number": "040-123456",
      "id": 1
    },
    { 
      "name": "Ada Lovelace", 
      "number": "39-44-5323523",
      "id": 2
    },
    { 
      "name": "Dan Abramov", 
      "number": "12-43-234345",
      "id": 3
    },
    { 
      "name": "Mary Poppendieck", 
      "number": "39-23-6423122",
      "id": 4
    }
]


app.get("/info", (req, res) => {
	const date = new Date()
	
	res.send(`<h1>Phonebook has info for ${persons.length} people</h1> <h2>${date}</h2>`)
})

app.get("/api/persons", (req, res) => {
	res.json(persons)
})

app.get("/api/persons/:id", (req, res) => {
	const id = Number(req.params.id)
	
	const person = persons.find(person => person.id === id)
	
	if (person) {
		res.json(person)
	} else {
		res.status(404).end()
	}
})

app.delete("/api/persons/:id", (req, res) => {
	const id = Number(req.params.id)

	persons = persons.filter(p => p.id !== id)
	
	res.status(204).end()
})

const generateID = () => {
	const Gid = Math.floor(Math.random() * 1000)
	
	return Gid
}
	
app.post("/api/persons", (req, res) => {
	const body = req.body
	
	
	if (!body.name || !body.number) {
		console.log("No content")
		return res.status(400).json({
			error: "Content Missing"
		})
	}
	
	let a = persons.find(person => person.name === body.name)
	
	if (a) {
		return res.status(400).json({
			error: "Name must be unique"
		})
	}
	
	
	const personObject = {
		name: body.name,
		number: body.number,
		id: generateID()
	}
	
	persons = persons.concat(personObject)
	
	res.json(personObject)
})


const PORT = 3001
app.listen(PORT, () => {
	console.log(`Server running on port ${PORT}`)
})



3.7 - 3.8 Phonebook Backend

const express = require("express")
const app = express()
const bodyParser = require("body-parser")
const morgan = require("morgan")

app.use(bodyParser.json())

morgan.token("body", function(req, res) {
	console.log(res)
	
	return JSON.stringify(res.req.body)
})


app.use(morgan(':method :url :status :res[content-length] - :response-time ms :body'))



let persons = [
    { 
      "name": "Arto Hellas", 
      "number": "040-123456",
      "id": 1
    },
    { 
      "name": "Ada Lovelace", 
      "number": "39-44-5323523",
      "id": 2
    },
    { 
      "name": "Dan Abramov", 
      "number": "12-43-234345",
      "id": 3
    },
    { 
      "name": "Mary Poppendieck", 
      "number": "39-23-6423122",
      "id": 4
    }
]


app.get("/api/persons", (req, res) => {
	res.json(persons)
})


const generateID = () => {
	const Gid = Math.floor(Math.random() * 1000)
	
	return Gid
}
	
app.post("/api/persons", (req, res) => {
	const body = req.body
	
	
	if (!body.name || !body.number) {
		console.log("No content")
		return res.status(400).json({
			error: "Content Missing"
		})
	}
	
	let a = persons.find(person => person.name === body.name)
	
	if (a) {
		return res.status(400).json({
			error: "Name must be unique"
		})
	}
	
	
	const personObject = {
		name: body.name,
		number: body.number,
		id: generateID()
	}
	
	persons = persons.concat(personObject)
	
	res.json(personObject)
})
	

const PORT = 3001
app.listen(PORT, () => {
	console.log(`Server running on port ${PORT}`)
})



3.9 - 3.11 Phonebook Backend -> Fullstack 

***************************************************
Production Mode
FrontEnd:
https://aqueous-caverns-88259.herokuapp.com
BackEnd:
https://aqueous-caverns-88259.herokuapp.com/persons

Development Mode
FrontEnd: 
http://localhost:3000
BackEnd: 
http://localhost: 3001



3.12 Command-line database

const mongoose = require('mongoose')

if ( process.argv.length<5 ) {
  console.log('give password as argument')
  process.exit(1)
}

const password = process.argv[2]
const firstName = process.argv[3]
const lastName = process.argv[4]
const tele = process.argv[5]

const url =
  `mongodb+srv://daisy:${password}@cluster0-vrqjx.mongodb.net/Database?retryWrites=true&w=majority`

mongoose.connect(url, { useNewUrlParser: true })

const noteSchema = new mongoose.Schema({
  name: String,
  telephone: String
})

const Note = mongoose.model('Note', noteSchema)

const note = new Note({
  name: `${firstName} ${lastName}`,
  telephone: String(tele)
})

note.save().then(response => {
  console.log(`added ${firstName} number ${tele} to phonebook`)
  mongoose.connection.close()
})


Note
	.find({})
	.then(response => {
		console.log("Phonebook")
		response.forEach(note => {
			console.log(note.name, note.telephone)
		})
	mongoose.connection.close()
})



3.13 - 3.21 Phonebook Fullstack(Frontend +++ Backend +++ Database)

************************************************************Frontend: index.js************************************************************
import axios from "axios";
import React, {useState, useEffect} from "react";
import ReactDOM from "react-dom";
import Axios from "./Axios.js";
import cors from "cors"


const Notification = (props) => {
	const style = {
		color: "green",
		fontSize: 30,
		border: "2px solid green",
		borderRadius: "10px",
		margin: "20px",
		paddingLeft: "20px"
	}
	
	if (props.message === null) {
		return null
	} else {
		return (
			<div style = {style}>
				{props.message}
			</div>
		)
	}
}

const App = () => {
	
	const [ persons, setPersons ] = useState([])
	const [ newName, setNewName ] = useState("")
	const [ newNumber, setNewNumber ] = useState("")
	const [ search, setSearch ] = useState("")
	const [ showAll, setShowAll ] = useState(false)
	const [ message, setMessage ] = useState("")
	
	
	
	useEffect(() => {
		Axios
			.getAll()
			.then(response => setPersons(response))
	} , [])
	
	const addPersons = (event) => {
		
		const newObject = {
			name: newName,
			number: newNumber
		}
		
		Axios
			.create(newObject)
			.then(response => setPersons(persons.concat(response)))
			

		
		setNewName("")
		setNewNumber("")
		
		
		setMessage(newName + " Added")
		setTimeout(()=>setMessage(null), 2000)
	}
	
	const handleNameChange = (event) => {
		setNewName(event.target.value)
	}
	
	const handleNumberChange = (event) => {
		setNewNumber(event.target.value)
	}
	
	const handleSearch = (event) => {
		setSearch(event.target.value)
		setShowAll(true)
	}
	
	const Filter = (query) => {
		const filter_result = persons.filter(person => person.name.toLowerCase().split(" ").join("").indexOf(query.toLowerCase()) !== -1)
		
		return filter_result
	}
	
	const displayToShow = showAll
	? Filter(search)
	: persons
	
	const handleDelete = (id) => {
		
		Axios
			.getOne(id)
			.then(response => {
				const result = window.confirm("Do you really want to delete " + response.name)
		
					if (result) {
						Axios
							.deleteObject(id)
							.then(response => console.log(response))
					} 
					
				setTimeout(() => {
					Axios
						.getAll()
						.then(response => setPersons(response))
				}, 1000)
			})
	}

	const handleChange = (name) => {
		const person = persons.find(n => n.name === name) 
		const change = {...person, number:newNumber}
		const id = person.id 
		
		const result = window.confirm(name + " is already added to Phonebook, replace the old number with a new one?")
		
		if (result) {
			Axios
				.update(id, change)
				.then(response => setPersons(persons.map(person => person.id === id ? response : person)))
		}
	}
	
	
	return (
		<div>
		
			<h2>Phonebook</h2>
			Search by Name: <input value = {search} onChange = {handleSearch} />
		
		
			<Notification message = {message} />
			<h2>Add A New Contact</h2>
			<form onSubmit = {addPersons}>
				Name: <input value = {newName} onChange = {handleNameChange} />
				&nbsp; &nbsp; &nbsp;
				Number: <input value = {newNumber} onChange = {handleNumberChange} />
				<br />
				<br />
				<button type = "submit">ADD</button>
			</form>
			
			
			<br />
			<form onSubmit = {() => handleChange(newName)}>
				<button type = "submit">Change Contact</button>
			</form>
			
			
			<h2>Numbers</h2>
			{displayToShow.map(person => {
				return(
					<div key = {person.id}>
						<p>{person.name}: {person.number}</p>
						<button onClick = {() => handleDelete(person.id)}>Delete</button>
					</div>
				)})
			}
			
		</div>
	)
}


ReactDOM.render(
  <App />, 
  document.getElementById('root'))

***********************************************************Frontend: Axios.js***************************************************************
import React from 'react';
import axios from "axios";


const baseUrl = "http://localhost:3001/persons"


const getAll = () => {
	const request = axios.get(baseUrl)
	return request.then(response => response.data)
}

const getOne = (id) => {
	const request = axios.get(`${baseUrl}/${id}`)
	return request.then(response => response.data)
}

const create = (newObject) => {
	const request = axios.post(baseUrl, newObject)
	return request.then(response => response.data)
}

const update = (id, newObject) => {
	const request = axios.put(`${baseUrl}/${id}`, newObject)
	return request.then(response => response.data)
}

const deleteObject = (id) => {
	const request = axios.delete(`${baseUrl}/${id}`)
	return request.then(response => response.data)
}



export default {getAll, getOne, create, update, deleteObject}

***********************************************************Backend: index.js***************************************************************
const express = require("express")
const app = express()
const bodyParser = require("body-parser")
const cors = require('cors')
const Person = require("./Mongoose")


app.use(cors())
app.use(express.static('build'))
app.use(bodyParser.json())


app.get("/persons", (req, res, next) => {
	Person
		.find({})
		.then(people => {
			res.json(people.map(person => person.toJSON()))
	})
		.catch(error => next(error))
})

app.get("/persons/:id" , (req, res) => {
	const id = req.params.id
	
	Person
		.find({})
		.then(people => {
		const person = people.find(person => person.id === id)
			if (person) {
				res.json(person.toJSON())
			} else {
				res.status(404).end()
			}
	})
		.catch(error => {
			console.log(error)
			res.status(400).send({error: "malformatted id"})
		})
})

app.delete("/persons/:id", (req, res, next) => {
	const id = req.params.id
	
	Person
		.findByIdAndRemove(id)
		.then(result => {
			res.status(204).end()
    })
		.catch(error => next(error))
})

app.post("/persons" , (req, res, next) => {
	const body = req.body

	if (!body.name || !body.number) {
		return res.status(400).json({error: "information missing"})
	}
	
	const person = new Person({
		name: body.name,
		number: body.number
	}) 
	
	person
		.save()
		.then(Savedperson => {
			res.json(Savedperson.toJSON)
	})
		.catch(error => next(error))
})

app.put('/persons/:id', (req, res, next) => {
  const body = req.body
  const id = req.params.id

  const person = {
	name: body.name,
	number: body.number
  }

  Person
		.findByIdAndUpdate(id, person, { new: true })
		.then(updatedNote => {
			res.json(updatedNote.toJSON())
		})
		.catch(error => next(error))
})

const errorHandler = (error, req, res, next) => {
	console.log(error)
	res.status(404).end()
}

app.use(errorHandler)


const PORT = process.env.PORT || 3001
app.listen(PORT, () => {
	console.log(`Server running on port ${PORT}`)
})

***********************************************************Backend: Mongoose.js***************************************************************
const mongoose = require('mongoose')
const validator = require("mongoose-unique-validator")


const url = process.env.MONGODB_URI

console.log('connecting to', url)


mongoose.connect(url, { useFindAndModify: false, useCreateIndex: true, useUnifiedTopology: true, useNewUrlParser: true })
  .then(result => {
		console.log('connected to MongoDB')
  })
  .catch((error) => {
		console.log('error connecting to MongoDB:', error.message)
  })


const personSchema = new mongoose.Schema({
  name: {
	  type: String,
	  minlength: 5,
	  unique: true,
	  required: true
  },
  number: {
	  type: String,
	  minlength: 10,
	  required: true
  }
})

personSchema.plugin(validator)

personSchema.set('toJSON', {
  transform: (document, person) => {
    person.id = person._id.toString()
    delete person._id
    delete person.__v
  }
})


module.exports = mongoose.model('Person', personSchema)