updated note

Author: Samuel Weke

package-lock.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
     "bootstrap": "^4.3.1",
     "react": "^16.10.2",

package.json

@@ -12,4 +12,8 @@ body {
 a {
   color: #333;
   text-decoration: none;
+}
+
+.single-note{
+  width: '900px',
 }

src/App.css

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import Navbar from './components/Navbar';
 import Notes from './components/Notes';
+import { Container, Row } from 'react-bootstrap'
 import uuid from 'uuid';
 import './App.css';
 
@@ -31,6 +32,10 @@ class App extends Component {
       });
   };
 
+  // editBtn = (id) => {
+  //   console.log(id)
+  // };
+
   deleteBtn = (id) => {
     const notes = this.state.notes.filter((note) => 
       note.id !== id
@@ -45,15 +50,16 @@ class App extends Component {
     return (
       <div className="App">
         <Navbar addNote={this.addNote}/>
-        <div className="container">
-          <div className="row">
+        <Container>
+          <Row>
             <Notes 
               notes={this.state.notes}
               handleDelete={this.deleteBtn}
+              handleEdit={this.editBtn}
               addNote={this.addNote} 
             />
-         </div>
-        </div>
+         </Row>
+        </Container>
       </div>
     )
   }

src/App.js

@@ -1,35 +1,46 @@
 import React, { Component } from 'react';
-
+import { Col } from 'react-bootstrap'
+import { faTrash, faWindowClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 class Note extends Component {
     render() {
         return (
-            <div className="col-4 mb-3">
-                <div style={noteStyle} className="card">
+            <Col>
+                <div style={noteStyle} className="card mb-3">
                     <div style={cardHeader} className="card-header bg-dark">{this.props.note.title}</div>
                     <div style={cardBody} className="card-body">{this.props.note.body}</div>
-                    <div className="d-flex justify-content-between">
-                        <button className="btn btn-danger btn-sm" onClick={() => this.props.handleDelete(this.props.note.id)}>Del</button>
-                        <button className="btn btn-primary btn-sm">Edit</button>
+                    <div className="d-flex justify-content-flex-end ml-2 mb-2">
+                        <FontAwesomeIcon
+                            icon={faWindowClose}
+                            style= {{fontSize: '20px'}}
+                            className="text-danger mr-3" 
+                            onClick={() => this.props.handleDelete(this.props.note.id)}
+                        />
+                        {/* <FontAwesomeIcon 
+                            icon={faEdit}
+                            onClick={() => this.props.handleEdit(this.props.note.id)} /> */}
                     </div>
                 </div>
-            </div>
+            </Col>
         )
     }
 }
 
 const noteStyle = {
-    width: '320px',
+    width: '330px',
     height: '250px',
+    backgroundColor: '#FCFCFA',
 };
 
 const cardHeader = {
     color: '#fff'
 };
 
 const cardBody = {
-    overflow: 'visible',
+    overflowY: 'auto',
 }
 
 
+
 export default Note;

src/components/Note.js

@@ -5,7 +5,7 @@ class Notes extends Component {
     render() {
         return (
             this.props.notes.map(note => 
-                <Note key={note.id} note={note} handleDelete={this.props.handleDelete} />
+                <Note key={note.id} note={note} handleEdit={this.props.handleEdit} handleDelete={this.props.handleDelete} />
             )
         )
     }