commit

Author: rivenbryan

part2/part2-practice/package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
+    "cors": "^2.8.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "^2.1.3",

part2/part2-practice/package.json

@@ -46,16 +46,9 @@ const App = ({ notesArr }) => {
   const [errorMessage, setErrorMessage] = useState(null)
   const hook = () => {
 
-    const nonExisting = {
-      id: 10000,
-      content: 'This not is not saved in the server',
-      data: '2019-05-30T17:30:31.098Z',
-      important: true
-  }
-
     noteService.getAll()
       .then(response => {
-        setNotes(response.data.concat(nonExisting))
+        setNotes(response.data)
       })
   }
   // Runs after every completed render 
@@ -100,7 +93,8 @@ const App = ({ notesArr }) => {
     // Create a new object {... note} creates a new object with copies of all the properties from the note object
     const changedNote = {...note, important: !note.important}
 
-    console.log('importance of ' + id + 'needs to be toggled')
+    console.log(changedNote)
+    console.log('importance of ' + id + ' needs to be toggled')
 
     // PUT request to the backend where it will replace the old object
     noteService.update(id, changedNote).then(response => {
@@ -110,7 +104,6 @@ const App = ({ notesArr }) => {
     }).catch(error => {
       // Add a descriptive error message
       setErrorMessage(`Note '${note.content}' is already removed from server`)
-      
       // After 5second, it will change to NULL
       setTimeout(()=>{
         setErrorMessage(null)

part2/part2-practice/src/App.js

@@ -4,7 +4,7 @@ import axios from 'axios'
 
 import App from './App'
 
-axios.get('http://localhost:3001/notes').then(response => {
+axios.get('http://localhost:3001/api/notes').then(response => {
 
   ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 })

part2/part2-practice/src/index.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-const baseURL = 'http://localhost:3001/notes'
+const baseURL = 'http://localhost:3001/api/notes'
 
 const getAll = () => {
     return axios.get(baseURL)
@@ -14,5 +14,6 @@ const update = (id, newObject) => {
     return axios.put(`${baseURL}/${id}`, newObject)
 }
 
+// ${baseURL}/${id}
 // Module returns an obejct that has three functions
 export default { getAll,create,update }

part2/part2-practice/src/services/notes.js

@@ -0,0 +1 @@
+web: npm start

part3/Procfile

@@ -23,13 +23,14 @@ let notes = [
 const express = require('express')
 // Creating an express application and store it into app
 const app = express()
+
+// Allow request from all origins
+const cors = require('cors')
+app.use(cors())
+
 // Activate json-parser 
 app.use(express.json())
 
-// #1 Route: Event handler that is used to handle HTTP GET request
-app.get('/', (request, response) => {
-    response.send('<h1>Hello World!</h1>')
-})
 
 // #2 Route: Event handler that is used to handle HTTP GET request
 app.get('/api/notes', (request, response) => {
@@ -97,7 +98,7 @@ app.post('/api/notes', (request, response) => {
 
 
 
-const PORT = 3001
+const PORT = process.env.PORT || 3001 
 app.listen(PORT, () => {
     console.log(`Server is running on port ${PORT}`)
 })