fixed blogpost editing functionality

src/router/index.js

@@ -1,5 +1,6 @@
 import Home from "../views/Home.vue";
 import Post from "../views/Post.vue";
+import EditPost from "../views/EditPost.vue";
 import Login from "../views/Login.vue";
 import Signup from "../views/Signup.vue";
 import User from "../views/User.vue";
@@ -14,6 +15,11 @@ export const routes = [
     component: Post,
     meta: { title: "myPlace() - Post" },
   },
+  {
+    path: "/post/:postID/edit",
+    component: EditPost,
+    meta: { title: "myPlace() - Editing Post" },
+  },
   { path: "/login", component: Login, meta: { title: "myPlace() - Login" } },
   {
     path: "/user/new_user",

src/views/EditPost.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+const route = useRoute();
+const router = useRouter();
+
+// make references
+const loading = ref(true);
+const post = ref(null);
+const emit = defineEmits(["title"]);
+
+// get post
+const getPost = async () => {
+  fetch(`${import.meta.env.VITE_BACKEND_URL}/post/${route.params.postID}`)
+    .then((res) => {
+      return res.json();
+    })
+    .then((json) => {
+      loading.value = false;
+      post.value = json.post;
+      emit("title", `Editing « ${json.post.title} »`);
+    });
+};
+
+getPost();
+
+const savePost = async (title, text) => {
+  let newTitle, newText;
+
+  title ? (newTitle = title) : (newTitle = post._rawValue.title);
+  text ? (newText = text) : (newText = post._rawValue.text);
+
+  // create JSON object and proper headers
+  const options = {
+    method: "PUT",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json;charset=UTF-8",
+    },
+    credentials: "include",
+    body: JSON.stringify({
+      title: newTitle,
+      text: newText,
+      published: post._rawValue.published,
+    }),
+  };
+
+  // send to backend
+  fetch(
+    `${import.meta.env.VITE_BACKEND_URL}/post/${route.params.postID}`,
+    options
+  ).then((res) => {
+    // if everything sent ok
+    if (res.ok) {
+      // fetch new posts
+      getPost();
+      // redirect
+      router.push(`/post/${route.params.postID}`);
+    } else {
+      alert("Errors encountered!");
+    }
+  });
+};
+</script>
+
+<template>
+  <div class="w-full flex flex-col items-center mt-10">
+    <div
+      class="h-full flex flex-col justify-center items-center"
+      v-if="loading"
+    >
+      <p class="text-3xl loading">
+        Loading<span>.</span><span>.</span><span>.</span>
+      </p>
+    </div>
+    <div class="flex flex-col align-center w-full items-center" v-else>
+      <div class="flex items-center justify-center mb-10 gap-10">
+        <label for="post_title">Title:</label>
+        <input
+          id="post_title"
+          class="bg-zinc-900 border p-5"
+          v-model="postTitle"
+          :placeholder="post.title"
+        />
+      </div>
+      <textarea
+        v-model="postText"
+        class="bg-zinc-900 border p-5 mb-10 w-2/3"
+        rows="4"
+        :placeholder="post.text"
+      ></textarea>
+      <div class="flex items-center justify-center gap-10">
+        <button
+          @keydown.enter="savePost(postTitle, postText)"
+          @click="savePost(postTitle, postText)"
+          class="hover:bg-emerald-700 py-5 w-[8rem] flex justify-center border"
+        >
+          &#x1F4BE; Save
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

src/views/Post.vue

@@ -163,7 +163,7 @@ const deletePost = async () => {
         </p>
         <div v-if="isAuthor" class="mt-10 flex items-center gap-10">
           <router-link
-            to="/post/new_post"
+            :to="`/post/${post._id}/edit`"
             class="hover:bg-zinc-700 py-5 w-[8rem] flex justify-center border"
             >&#128394;&#65039; Edit</router-link
           >