From 880c8294766cbc1141c890227485548b7591acf6 Mon Sep 17 00:00:00 2001
From: Bishal Karki <bishal@kbishal.com.np>
Date: Thu, 11 Jul 2019 17:11:02 +0545
Subject: [PATCH] Animate insert, delete

---
 js/new-note.js    |  8 +++++---
 js/notes.js       |  6 ++++--
 js/update-note.js | 11 ++++++++++-
 php/create.php    | 25 +++++++++++++++++++------
 php/read.php      |  6 ++----
 5 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/js/new-note.js b/js/new-note.js
index 1645f6f..84cc037 100644
--- a/js/new-note.js
+++ b/js/new-note.js
@@ -106,7 +106,7 @@ $("#new_note").on('submit','#new_note_expanded',function(event){
     
     // bind form contents to hidden elements
     $("input[name='title']",this).val($("#note_title_input").text());
-    $("input[name='content']",this).val($("#note_content_input").text());
+    $("input[name='content']",this).val($("#note_content_input").html());
     $("input[name='color']",this).val($(".selected_dot",this).attr("value"));
     $("input[name='pinned']",this).val("false");
 
@@ -139,10 +139,12 @@ $("#new_note").on('submit','#new_note_expanded',function(event){
 
     // callback handler on success
     request.done(function(response, textStatus, jqXHR) {
-        console.log(response);
-
         // show small bar again
         new_note_small();
+
+        // add new note to the DOM
+        $(response).hide().prependTo("#existing_notes").fadeIn();
+        // $("#existing_notes").prepend(response).hide().fadeIn();
     });
 
     // handle failure
diff --git a/js/notes.js b/js/notes.js
index 1992970..695b832 100644
--- a/js/notes.js
+++ b/js/notes.js
@@ -1,6 +1,6 @@
 // delete note when user clicks on delete button
 
-$(".saved_note").on('click', '.delete', function(event) {
+$("#existing_notes").on('click', '.delete', function(event) {
     // get id of the note
     $id = $(this).parents(".saved_note").attr("id");
 
@@ -16,7 +16,9 @@ $(".saved_note").on('click', '.delete', function(event) {
     $request.done(function(response, textStatus, jqXHR) {
         if(response == 1) {
             // remove note element from DOM
-            $("#"+$id).remove();
+            $("#"+$id).fadeOut(300, function() {
+                $(this).remove();
+            });
         }
     });
 
diff --git a/js/update-note.js b/js/update-note.js
index 4be7a62..ec1e91a 100644
--- a/js/update-note.js
+++ b/js/update-note.js
@@ -73,4 +73,13 @@ function update_box() {
         }
     });
 }
-update_box();
\ No newline at end of file
+update_box();
+
+// show update box modal on click of note
+$("#existing_notes").on('click','.note_title, .note_content', function() {
+    $("#update_modal").modal("show");
+
+    // select the note
+    $note = $(this).parent();
+    
+});
\ No newline at end of file
diff --git a/php/create.php b/php/create.php
index 7d849e2..4a6f133 100644
--- a/php/create.php
+++ b/php/create.php
@@ -18,6 +18,11 @@
         $input_content = trim(isset($_POST['content']) ? $_POST['content'] : '');
         $input_color = trim(isset($_POST['color']) ? $_POST['color'] : $color);
 
+        // stop XSS
+        $input_title = htmlspecialchars($input_title, ENT_QUOTES, 'UTF-8', false);
+        $input_content = htmlspecialchars($input_content, ENT_QUOTES, 'UTF-8', false);
+        $input_color = htmlspecialchars($input_color, ENT_QUOTES, 'UTF-8', false);
+
         // discard if both empty
         if(!empty($input_title) || !empty($input_content)) {
             $title = $input_title;
@@ -26,7 +31,6 @@
         }
         else {
             $error = "Empty Note ! Discarded !!";
-            echo $error;
         }
 
         // check input errors before inserting into database
@@ -46,11 +50,20 @@
 
                 // attempt to execute prepared statement
                 if($stmt -> execute()) {
-                    echo "Success";
-                }
-                else {
-                    $error = "Something went wrong. Note cannot be saved.";
-                    echo $error;
+                    // return newly created object
+                    $id = $stmt -> insert_id;
+                    $sql = "SELECT * FROM notes WHERE id=".$id;
+                    $result = $conn -> query($sql);
+                    $result = $result -> fetch_assoc();
+
+                    echo '<div class="saved_note card" id ="'.$id.'" style="background-color:'.$result['color'].';"
+                    data-lastModified="'.$result['last_modified'].'" data-pinned="'.$result['pinned'].'">
+                        <div class="note_title card-header py-1">'.$result['title'].'</div>
+                        <div class="note_content card-body py-1">'.$result['content'].'</div>
+                        <div class="card-footer py-0">
+                            <i class="material-icons-outlined delete">delete</i>
+                        </div>
+                    </div>';
                 }
 
                 // close statement
diff --git a/php/read.php b/php/read.php
index fd7d833..27c1831 100644
--- a/php/read.php
+++ b/php/read.php
@@ -4,7 +4,7 @@
 
     if($_SERVER['REQUEST_METHOD'] == "GET") {
         $sql = "SELECT * FROM notes
-                ORDER BY last_modified ASC
+                ORDER BY last_modified DESC
                 LIMIT 10
                 ";
 
@@ -25,9 +25,7 @@
 
                 echo '<div class="saved_note card" id ="'.$id.'" style="background-color:'.$color.';"
                     data-lastModified="'.$lastModified.'" data-pinned="'.$pinned.'">
-                        <div class="card-header py-1">
-                            <div class="note_title">'.$title.'</div>
-                        </div>
+                        <div class="note_title card-header py-1">'.$title.'</div>
                         <div class="note_content card-body py-1">'.$content.'</div>
                         <div class="card-footer py-0">
                             <i class="material-icons-outlined delete">delete</i>