VueComponent Post.vue

<script>
// => Plugins
import * as moment from "moment";
import axios from "axios";

// => Components
import Comment from "@/components/Comment";

export default {
  name: "Post",
  components: { Comment },
  data() {
    const loggedUser = localStorage.getItem("userId");
    const parsedUser = parseInt(loggedUser, 10);
    const userIds = this.post.Likes.map((like) => like.UserId);
    const likeActive = userIds.includes(parsedUser);

    const loggedUsername = localStorage.getItem("username");
    const splittedUser = loggedUsername.split(" ");
    const loggedFirstname = splittedUser[0];

    const admin = localStorage.getItem("admin");
    const authUpdatePost = parsedUser == this.post.UserId || admin === "true";

    return {
      toggleUpdateMenuAnimation: false,
      loggedUser: loggedUser,
      loggedFirstname: loggedFirstname,
      likeActive: likeActive,
      commentActive: false,
      inputCreateComment: "",
      authUpdatePost: authUpdatePost,
      deleteActive: false,
    };
  },
  props: ["post"],
  methods: {
    dateFormatter: function(date) {
      let formatDate = moment(date)
        .startOf("hour")
        .fromNow();

      return formatDate;
    },
    toggleUpdatePost() {
      console.log("[=>] TOGGLE UPDATE POST");
      console.log(this.post.id);

      this.toggleUpdateMenuAnimation = !this.toggleUpdateMenuAnimation;
    },
    updatePost: async function(updatedContent) {
      console.log("[=>] UPDATE POST");

      this.toggleUpdateMenuAnimation = false;

      if (
        updatedContent.length < 5 ||
        updatedContent == null ||
        updatedContent == undefined
      ) {
        console.log("not enough content!");
        return;
      }

      const API_SERVER = "http://localhost:3000/posts/";

      try {
        const response = await axios.put(
          API_SERVER + this.post.id,
          {
            content: updatedContent,
            // like IG, not picture update
            // imageUrl: "",
          },
          {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("token"),
            },
          }
        );
        console.log(response);
        this.$emit("postUpdated");
      } catch (error) {
        this.errors.push(error);
      }
      // remove input datas
      // => reset form vue
      this.inputCreatePost = "";
    },
    toggleDeletePost: function() {
      console.log("[=>] TOGGLE DELETE POST");
      this.deleteActive = !this.deleteActive;
    },
    deletePost: async function() {
      console.log("[=>] DELETE POST");

      const API_SERVER = "http://localhost:3000/posts/";

      try {
        const response = await axios.delete(API_SERVER + this.post.id, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });

        console.log(response);
        this.$emit("postUpdated");
      } catch (error) {
        this.errors.push(error);
      }
    },
    likeFunction: async function() {
      console.log("[=>] POST LIKES FUNC.");

      this.likeActive = !this.likeActive;

      const API_SERVER = "http://localhost:3000";
      try {
        const userId = localStorage.getItem("userId");
        const response = await axios.post(
          API_SERVER + `/posts/${this.post.id}/like`,
          {
            PostId: this.post.id,
            UserId: userId,
          },
          {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("token"),
            },
          }
        );
        this.likes = response.data;
      } catch (error) {
        this.errors.push(error);
      }
    },
    toggleComment: async function() {
      console.log("[=>] TOGGLE COMMENT Func.");

      this.commentActive = !this.commentActive;
    },
    createComment: async function() {
      console.log("[=>] CREATE COMMENT");

      const newCommentContent = this.inputCreateComment;

      const API_SERVER = "http://localhost:3000";

      try {
        const response = await axios.post(
          API_SERVER + `/posts/${this.post.id}/comments`,
          {
            content: newCommentContent,
          },
          {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("token"),
            },
          }
        );
        console.log(response);

        this.$emit("postUpdated");

        // clear input comment content
        this.inputCreateComment = "";
        this.commentActive = false;
      } catch (error) {
        this.errors.push(error);
      }
    },
    handleCommentDeleted: function() {
      this.$emit("postUpdated");
    },
  },
};
</script>