From 96dcfc693e2bbd5fbb00a4c1b5339ea6fec01bc8 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Wed, 16 Dec 2020 12:58:27 -0500
Subject: [PATCH] [Demo] Add New button and Search placeholder

---
 src/App.server.js  | 12 +++++++++++-
 src/Note.server.js | 20 +++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/App.server.js b/src/App.server.js
index d7200e2..4a818bf 100644
--- a/src/App.server.js
+++ b/src/App.server.js
@@ -8,6 +8,7 @@
 
 import Note from './Note.server';
 import NoteList from './NoteList.server';
+import EditButton from './EditButton.client';
 
 export default function App({selectedId, isEditing}) {
   return (
@@ -24,7 +25,16 @@ export default function App({selectedId, isEditing}) {
           />
           <strong>React Notes</strong>
         </section>
-        <nav>
+        <section className="sidebar-menu" role="menubar">
+          <form className="search" role="search">
+            <label className="offscreen" htmlFor="sidebar-search-input">
+              Search for a note by title
+            </label>
+            <input id="sidebar-search-input" placeholder="Search" />
+          </form>
+          <EditButton noteId={null}>New</EditButton>
+        </section>
+        <nav role="navigation">
           <NoteList />
         </nav>
       </section>
diff --git a/src/Note.server.js b/src/Note.server.js
index 2d67d4c..431e01b 100644
--- a/src/Note.server.js
+++ b/src/Note.server.js
@@ -22,13 +22,19 @@ export default function Note({selectedId, isEditing}) {
       : null;
 
   if (note === null) {
-    return (
-      <div className="note--empty-state">
-        <span className="note-text--empty-state">
-          Click a note on the left to view something! 🥺
-        </span>
-      </div>
-    );
+    if (isEditing) {
+      return (
+        <NoteEditor noteId={null} initialTitle="Untitled" initialBody="" />
+      );
+    } else {
+      return (
+        <div className="note--empty-state">
+          <span className="note-text--empty-state">
+            Click a note on the left to view something! 🥺
+          </span>
+        </div>
+      );
+    }
   }
 
   let {id, title, body, updated_at} = note;