Props added and intialized

Drougnov · Sep 17, 2022 · f044d6b · f044d6b
1 parent 7d6fdf8
commit f044d6b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/src/Components/Editor.js b/src/Components/Editor.js
@@ -1,21 +1,22 @@
-import React from "react";
-import ReactMde from "react-mde";
-import Showdown from "showdown";
+import React from "react"
+import ReactMde from "react-mde"
+import Showdown from "showdown"
 
-export default function Editor(){
-    const [selectedTab, setSelectedTab] = React.useState('write')
+export default function Editor(props) {
+    const [selectedTab, setSelectedTab] = React.useState("write")
 
-    console.log(selectedTab)
     const converter = new Showdown.Converter({
         tables: true,
         simplifiedAutoLink: true,
         strikethrough: true,
-        tasklists: true
-    });
+        tasklists: true,
+    })  
 
-    return(
+    return (
         <div className="editor">
             <ReactMde
+                value={props.currentNote.body}
+                onChange={props.updateNote}
                 selectedTab={selectedTab}
                 onTabChange={setSelectedTab}
                 generateMarkdownPreview={(markdown) =>
@@ -26,4 +27,4 @@ export default function Editor(){
             />
         </div>
     )
-}
+}
diff --git a/src/Components/Sidebar.js b/src/Components/Sidebar.js
@@ -1,14 +1,22 @@
-export default function Sidebar(){
+export default function Sidebar(props){
+    const noteList = props.notes.map((note, index)=> (
+        <li key={note.id}
+            className={`title ${
+                note.id === props.currentNote.id ? "selected-note" : ""
+            }`}
+            onClick={() =>props.setCurrentNoteId(note.id)}
+        >
+            <span className="text-snippet">Note {index + 1}</span>
+        </li>
+    ))
     return(
         <section className="sidebar">
             <div className="sidebar__header">
                 <h1 className="sidebar__header-logo">Notes</h1>
-                <button className="sidebar__header-btn">+</button>
+                <button className="sidebar__header-btn" onClick={props.newNote}>+</button>
             </div>
             <ul className="note-list">
-                <li>Note 1</li>
-                <li>Note 2</li>
-                <li>Note 3</li>
+                {noteList}
             </ul>
         </section>
     )