Editor screen

client/package.json

@@ -5,12 +5,15 @@
   "dependencies": {
     "axios": "^0.18.0",
     "bootstrap-css-only": "^4.1.0",
+    "immutable": "^3.8.2",
     "prop-types": "^15.5.10",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
-    "redux": "^3.7.2"
+    "redux": "^3.7.2",
+    "slate": "^0.33.5",
+    "slate-react": "^0.12.5"
   },
   "devDependencies": {
     "eslint": "^4.19.1",

client/src/components/NoteCard/noteCard.css

@@ -49,20 +49,24 @@
     color: var(--white-70);
 }
 
-.noteContainer:hover {
+.noteContainer:hover, .noteContainer.sel {
     box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12);
     background-color: var(--primary-color);
 
 }
 .noteContainer:hover h2,
-.noteContainer:hover p {
+.noteContainer.sel h2,
+.noteContainer:hover p,
+.noteContainer.sel p {
     color: var(--white-100);
 }
 
-.noteContainer:hover .noteContentTop>span{
+.noteContainer:hover .noteContentTop>span,
+.noteContainer.sel .noteContentTop>span{
     color:var(--white-70);
 }
-.noteContainer:hover .noteContentTop>div{
+.noteContainer:hover .noteContentTop>div,
+.noteContainer.sel .noteContentTop>div{
     visibility:visible;
 }
 

client/src/components/NoteCard/noteCard.js

@@ -2,27 +2,47 @@ import React, { Component } from "react";
 import "./noteCard.css";
 
 class NoteCard extends Component {
+  handleClick = ({ target, currentTarget }) => {
+    if (target.title === "") {
+      const ol = document.querySelector(".noteContainer.sel");
+      if (ol) {
+        ol.classList.remove("sel");
+      }
+      currentTarget.classList.add("sel");
+      this.props.onClick(currentTarget.getAttribute("data-note-slug"));
+    }
+  };
   render() {
+    const { updated_at, title, notes } = this.props.data;
+    debugger;
+    var day = new Date(Date.parse(updated_at));
+    day = day.getDate()+'/'+day.getMonth()+'/'+day.getFullYear();
+    console.log("fff", day);
     return (
-      <div className="noteContainer">
+      <div
+        className="noteContainer"
+        data-note-slug="note-1fn12"
+        onClick={this.handleClick}
+      >
         <div className="noteContentTop">
           <div>
-            <a href="" title="Share this note">
+            <a href="#share" title="Share this note">
               <i className="fas fa-share-square" />
             </a>
-            <a href="" title="Download this note">
+            <a href="#download" title="Download this note">
               <i className="fas fa-download" />
             </a>
-            <a href="" title="Delete this note">
+            <a href="#del" title="Delete this note">
               <i className="fas fa-trash-alt" />
             </a>
           </div>
-          <span>Date</span>
+          <span className="timestamp" title="date">
+            {day}
+          </span>
         </div>
-        <h2>Title</h2>
+        <h2>{title}</h2>
         <p>
-          I am some paragraph<br />
-          I am line two of the paragraph
+          {notes}
         </p>
       </div>
     );