implement edit button b00tc4mp#68

staff/nerina-castillo/ponies/app/logic/deletePost.js

@@ -1,10 +1,16 @@
-function deletePost(id) {
-  var posts = getAllPosts();
-  var index = posts.findIndex(function (element) {
-    return element.id === id;
+function deletePost(postId) {
+  if (postId.trim().length === 0) throw new Error("invalid postId");
+
+  var posts =
+    localStorage.posts !== undefined ? JSON.parse(localStorage.posts) : [];
+
+  var postIndex = posts.findIndex(function (post) {
+    return post.id === postId;
   });
 
-  posts.splice(index, 1);
+  if (postIndex < 0) throw new Error("post not found");
+
+  posts.splice(postIndex, 1);
 
   localStorage.posts = JSON.stringify(posts);
 }

staff/nerina-castillo/ponies/app/logic/editCaption.js

@@ -0,0 +1,16 @@
+function editCaption(postId, newCaption) {
+  if (postId.trim().length === 0) throw new Error("invalid postId");
+
+  var posts =
+    localStorage.posts !== undefined ? JSON.parse(localStorage.posts) : [];
+
+  var postIndex = posts.findIndex(function (post) {
+    return post.id === postId;
+  });
+
+  if (postIndex < 0) throw new Error("post not found");
+
+  posts[postIndex].caption = newCaption;
+
+  localStorage.posts = JSON.stringify(posts);
+}

staff/nerina-castillo/ponies/app/utils/generateId.js

@@ -0,0 +1,7 @@
+function generateId() {
+  var id10 = Math.random().toString().slice(2) + Date.now().toString();
+
+  var id36 = Math.round(+id10 / 1000000000000).toString(36);
+
+  return id36;
+}

staff/nerina-castillo/ponies/app/views/home/index.html

@@ -14,14 +14,15 @@ <h1>Home</h1>
     <button id="add-post-button">Add Post</button>
 
     <script src="../../utils/formatTime.js"></script>
-    <script src="../../utils/randomId.js"></script>
+    <script src="../../utils/generateId.js"></script>
 
     <script src="../../logic/getUserName.js"></script>
     <script src="../../logic/logoutUser.js"></script>
     <script src="../../logic/createPost.js"></script>
     <script src="../../logic/getAllPosts.js"></script>
     <script src="../../logic/getUserUsername.js"></script>
     <script src="../../logic/deletePost.js"></script>
+    <script src="../../logic/editCaption.js"></script>
 
     <script src="index.js"></script>
   </body>

staff/nerina-castillo/ponies/app/views/home/index.js

@@ -1,138 +1,196 @@
-try {
-  var name = getUserName();
-
-  var title = document.querySelector("h1");
-
-  title.innerText = "Hello, " + name + "!";
-} catch (error) {
-  alert(error.message);
-}
-
-var logoutButton = document.getElementById("logout-button");
-
-logoutButton.onclick = function () {
+(function () {
   try {
-    logoutUser();
+    var name = getUserName();
 
-    location.href = "../login";
+    var title = document.querySelector("h1");
+
+    title.innerText = "Hello, " + name + "!";
   } catch (error) {
     alert(error.message);
   }
-};
 
-var addPostButton = document.getElementById("add-post-button");
+  var logoutButton = document.getElementById("logout-button");
 
-addPostButton.onclick = function () {
-  var createPostSection = document.createElement("section");
-  document.body.appendChild(createPostSection);
+  logoutButton.onclick = function () {
+    try {
+      logoutUser();
 
-  var createPostTitle = document.createElement("h2");
-  createPostTitle.innerText = "Create Post";
-  createPostSection.appendChild(createPostTitle);
+      location.href = "../login";
+    } catch (error) {
+      alert(error.message);
+    }
+  };
 
-  var createPostForm = document.createElement("form");
-  createPostSection.appendChild(createPostForm);
+  var addPostButton = document.getElementById("add-post-button");
 
-  createPostForm.onsubmit = function (event) {
-    event.preventDefault();
+  addPostButton.onclick = function () {
+    var createPostSection = document.createElement("section");
+    document.body.appendChild(createPostSection);
 
-    var postImage = postImageInput.value;
-    var postCaption = postCaptionInput.value;
+    var createPostTitle = document.createElement("h2");
+    createPostTitle.innerText = "Create Post";
+    createPostSection.appendChild(createPostTitle);
 
-    try {
-      createPost(postImage, postCaption);
+    var createPostForm = document.createElement("form");
+    createPostSection.appendChild(createPostForm);
 
-      document.body.removeChild(createPostSection);
+    createPostForm.onsubmit = function (event) {
+      event.preventDefault();
 
-      for (var i = postListSection.children.length - 1; i > -1; i--) {
-        var child = postListSection.children[i];
+      var postImage = postImageInput.value;
+      var postCaption = postCaptionInput.value;
 
-        postListSection.removeChild(child);
-      }
+      try {
+        createPost(postImage, postCaption);
 
-      listPosts();
-    } catch (error) {
-      alert(error.message);
-    }
-  };
+        document.body.removeChild(createPostSection);
 
-  var postImageLabel = document.createElement("label");
-  postImageLabel.htmlFor = "post-image-input";
-  postImageLabel.innerText = "Image";
-  createPostForm.appendChild(postImageLabel);
-
-  var postImageInput = document.createElement("input");
-  postImageInput.id = postImageLabel.htmlFor;
-  createPostForm.appendChild(postImageInput);
-
-  var postCaptionLabel = document.createElement("label");
-  postCaptionLabel.htmlFor = "post-caption-input";
-  postCaptionLabel.innerText = "Caption";
-  createPostForm.appendChild(postCaptionLabel);
-
-  var postCaptionInput = document.createElement("input");
-  postCaptionInput.id = postCaptionLabel.htmlFor;
-  createPostForm.appendChild(postCaptionInput);
-
-  var postButtonSubmit = document.createElement("button");
-  postButtonSubmit.type = "submit";
-  postButtonSubmit.innerText = "Submit";
-  createPostForm.appendChild(postButtonSubmit);
-
-  var postCancelButton = document.createElement("button");
-  postCancelButton.innerText = "Cancel";
-  postCancelButton.type = "reset";
-  createPostForm.appendChild(postCancelButton);
-
-  var postCaptionEditButton = document.createElement("button");
-  postCaptionEditButton.innerText = "Edit";
-  postCaptionEditButton.type = "edit";
-  createPostForm.appendChild(postCaptionEditButton);
-
-  postCancelButton.onclick = function () {
-    document.body.removeChild(createPostSection);
-  };
-};
+        clearPosts();
+        listPosts();
+      } catch (error) {
+        alert(error.message);
+      }
+    };
+
+    var postImageLabel = document.createElement("label");
+    postImageLabel.htmlFor = "post-image-input";
+    postImageLabel.innerText = "Image";
+    createPostForm.appendChild(postImageLabel);
 
-var postListSection = document.createElement("section");
-document.body.appendChild(postListSection);
+    var postImageInput = document.createElement("input");
+    postImageInput.id = postImageLabel.htmlFor;
+    createPostForm.appendChild(postImageInput);
 
-function listPosts() {
-  var posts = getAllPosts();
+    var postCaptionLabel = document.createElement("label");
+    postCaptionLabel.htmlFor = "post-caption-input";
+    postCaptionLabel.innerText = "Caption";
+    createPostForm.appendChild(postCaptionLabel);
 
-  posts.forEach(function (post) {
-    var postArticle = document.createElement("article");
-    postListSection.appendChild(postArticle);
+    var postCaptionInput = document.createElement("input");
+    postCaptionInput.id = postCaptionLabel.htmlFor;
+    createPostForm.appendChild(postCaptionInput);
 
-    var postAuthorTitle = document.createElement("h3");
-    postAuthorTitle.innerText = post.author;
-    postArticle.appendChild(postAuthorTitle);
+    var postButtonSubmit = document.createElement("button");
+    postButtonSubmit.type = "submit";
+    postButtonSubmit.innerText = "Submit";
+    createPostForm.appendChild(postButtonSubmit);
 
-    var postImage = document.createElement("img");
-    postImage.src = post.image;
-    postArticle.appendChild(postImage);
+    var postCancelButton = document.createElement("button");
+    postCancelButton.innerText = "Cancel";
+    postCancelButton.type = "reset";
+    createPostForm.appendChild(postCancelButton);
 
-    var postCaptionText = document.createElement("p");
-    postCaptionText.innerText = post.caption;
-    postArticle.appendChild(postCaptionText);
+    postCancelButton.onclick = function () {
+      document.body.removeChild(createPostSection);
+    };
+  };
 
-    var postDateTime = document.createElement("time");
-    postDateTime.innerText = formatTime(new Date(post.date));
-    postArticle.appendChild(postDateTime);
+  var postListSection = document.createElement("section");
+  document.body.appendChild(postListSection);
 
-    if (post.author === getUserUsername()) {
-      var postDeleteButton = document.createElement("button");
-      postDeleteButton.innerText = "Delete";
-      postArticle.appendChild(postDeleteButton);
+  function clearPosts() {
+    for (var i = postListSection.children.length - 1; i > -1; i--) {
+      var child = postListSection.children[i];
 
-      postDeleteButton.onclick = function () {
-        var id = post.id;
+      postListSection.removeChild(child);
+    }
+  }
 
-        deletePost(id);
-        postListSection.removeChild(postArticle);
-      };
+  function listPosts() {
+    try {
+      var posts = getAllPosts();
+
+      posts.forEach(function (post) {
+        var postArticle = document.createElement("article");
+        postListSection.appendChild(postArticle);
+
+        var postAuthorTitle = document.createElement("h3");
+        postAuthorTitle.innerText = post.author;
+        postArticle.appendChild(postAuthorTitle);
+
+        var postImage = document.createElement("img");
+        postImage.src = post.image;
+        postArticle.appendChild(postImage);
+
+        var postCaptionText = document.createElement("p");
+        postCaptionText.innerText = post.caption;
+        postArticle.appendChild(postCaptionText);
+
+        var postDateTime = document.createElement("time");
+        postDateTime.innerText = formatTime(new Date(post.date));
+        postArticle.appendChild(postDateTime);
+
+        if (post.author === getUserUsername()) {
+          var postDeleteButton = document.createElement("button");
+          postDeleteButton.innerText = "Delete";
+          postArticle.appendChild(postDeleteButton);
+
+          postDeleteButton.onclick = function () {
+            if (confirm("Delete post?"))
+              try {
+                deletePost(post.id);
+
+                clearPosts();
+                listPosts();
+              } catch (error) {
+                alert(error.message);
+
+                if (error.message === "post not found") {
+                  clearPosts();
+                  listPosts();
+                }
+              }
+          };
+        }
+        if (post.author === getUserUsername()) {
+          var editButton = document.createElement("button");
+          editButton.innerText = "Edit";
+          postArticle.appendChild(editButton);
+
+          editButton.onclick = function () {
+            var editCaptionForm = document.createElement("form");
+            postArticle.appendChild(editCaptionForm);
+
+            var editCaptionLabel = document.createElement("label");
+            editCaptionLabel.htmlFor = "edit-caption-input";
+            editCaptionForm.appendChild(editCaptionLabel);
+
+            var editCaptionInput = document.createElement("input");
+            editCaptionInput.id = editCaptionLabel.htmlFor;
+            editCaptionInput.value = post.caption;
+            editCaptionForm.appendChild(editCaptionInput);
+
+            var editCaptionSubmit = document.createElement("button");
+            editCaptionSubmit.type = "submit";
+            editCaptionSubmit.innerText = "Submit";
+            editCaptionForm.appendChild(editCaptionSubmit);
+
+            editCaptionForm.onsubmit = function (event) {
+              event.preventDefault();
+
+              try {
+                var newCaption = editCaptionInput.value;
+
+                editCaption(post.id, newCaption);
+
+                clearPosts();
+                listPosts();
+              } catch (error) {
+                alert(error.message);
+
+                if (error.message === "post not found") {
+                  clearPosts();
+                  listPosts();
+                }
+              }
+            };
+          };
+        }
+      });
+    } catch (error) {
+      alert(error.message);
     }
-  });
-}
+  }
 
-listPosts();
+  listPosts();
+})();