Create a Modern Application with Django and Vue Part Five

# Comment modelclass Comment(models.Model):    content = models.TextField(max_length=1000)    created_at = models.DateField(auto_now_add=True)    is_approved = models.BooleanField(default=False)    # Each comment belongs to one user and one post    user = models.ForeignKey(User, on_delete=models.SET_NULL, null=True)    post = models.ForeignKey(Post, on_delete=models.SET_NULL, null=True)

python manage.py makemigrationspython manage.py migrate

class CommentType(DjangoObjectType):    class Meta:        model = models.Comment

class CreateComment(graphene.Mutation):    comment = graphene.Field(types.CommentType)    class Arguments:        content = graphene.String(required=True)        user_id = graphene.ID(required=True)        post_id = graphene.ID(required=True)    def mutate(self, info, content, user_id, post_id):        comment = models.Comment(            content=content,            user_id=user_id,            post_id=post_id,        )        comment.save()        return CreateComment(comment=comment)

class Mutation(graphene.ObjectType):    ...    create_comment = CreateComment.Field()

<script>import { POST_BY_SLUG } from "@/queries";import CommentSectionComponent from "@/components/CommentSection.vue";export default {  name: "PostView",  components: { CommentSectionComponent },  data() {    return {      postBySlug: null,      comments: null,      userID: null,    };  },  computed: {    // Filters out the unapproved comments    approvedComments() {      return this.comments.filter((comment) => comment.isApproved);    },  },  async created() {    // Get the post before the instance is mounted    const post = await this.$apollo.query({      query: POST_BY_SLUG,      variables: {        slug: this.$route.params.slug,      },    });    this.postBySlug = post.data.postBySlug;    this.comments = post.data.postBySlug.commentSet;  },};</script>

export const POST_BY_SLUG = gql`  query ($slug: String!) {    postBySlug(slug: $slug) {      ...      commentSet {        id        content        createdAt        isApproved        user {          username          avatar        }        numberOfLikes        likes {          id        }      }    }  }`;

<template>  <div class="home">    ...    <!-- Comment Section -->    <!-- Pass the approved comments, the user id and the post id to the comment section component -->    <comment-section-component      v-if="this.approvedComments"      :comments="this.approvedComments"      :postID="this.postBySlug.id"      :userID="this.userID"    ></comment-section-component>  </div></template>

<script>import { SUBMIT_COMMENT } from "@/mutations";import CommentSingle from "@/components/CommentSingle.vue";import { useUserStore } from "@/stores/user";export default {  components: { CommentSingle },  name: "CommentSectionComponent",  setup() {    const userStore = useUserStore();    return { userStore };  },  data() {    return {      commentContent: "",      commentSubmitSuccess: false,      user: {        isAuthenticated: false,        token: this.userStore.getToken || "",        info: this.userStore.getUser || {},      },    };  },  props: {    comments: {      type: Array,      required: true,    },    postID: {      type: String,      required: true,    },    userID: {      type: String,      required: true,    },  },  async created() {    if (this.user.token) {      this.user.isAuthenticated = true;    }  },  methods: {    submitComment() {      if (this.commentContent !== "") {        this.$apollo          .mutate({            mutation: SUBMIT_COMMENT,            variables: {              content: this.commentContent,              userID: this.userID,              postID: this.postID,            },          })          .then(() => (this.commentSubmitSuccess = true));      }    },  },};</script>

export const SUBMIT_COMMENT = gql`  mutation ($content: String!, $userID: ID!, $postID: ID!) {    createComment(content: $content, userId: $userID, postId: $postID) {      comment {        content      }    }  }`;

<template>  <div class="...">    <p class="font-bold text-2xl">Comments:</p>    <!-- If the user is not authenticated -->    <div v-if="!this.user.isAuthenticated">      You need to      <router-link to="/account" >sign in</router-link>      before you can leave your comment.    </div>    <!-- If the user is authenticated -->    <div v-else>      <div v-if="this.commentSubmitSuccess" class="">        Your comment will show up here after is has been approved.      </div>      <form action="POST" @submit.prevent="submitComment">        <textarea          type="text"          class="..."          rows="5"          v-model="commentContent"        />        <button class="...">          Submit Comment        </button>      </form>    </div>    <!-- List all comments -->    <comment-single      v-for="comment in comments"      :key="comment.id"      :comment="comment"      :userID="this.userID"    >    </comment-single>  </div></template>

<template>  <div class="border-2 p-4">    <div      class="flex flex-row justify-start content-center items-center space-x-2 mb-2"    >      <img        :src="`http://127.0.0.1:8000/media/${this.comment.user.avatar}`"        alt=""        class="w-10"      />      <p class="text-lg font-sans font-bold">        {{ this.comment.user.username }}      </p>    </div>    <p>      {{ this.comment.content }}    </p>  </div></template>

<script>export default {  name: "CommentSingleComponent",  data() {    return {      ...    };  },  props: {    comment: {      type: Object,      required: true,    },    userID: {      type: String,      required: true,    },  },};</script>

# Post modelclass Post(models.Model):    ...    # Each post can receive likes from multiple users, and each user can like multiple posts    likes = models.ManyToManyField(User, related_name='post_like')    ...    def get_number_of_likes(self):        return self.likes.count()

class PostType(DjangoObjectType):    class Meta:        model = models.Post    number_of_likes = graphene.String()    def resolve_number_of_likes(self, info):        return self.get_number_of_likes()

class UpdatePostLike(graphene.Mutation):    post = graphene.Field(types.PostType)    class Arguments:        post_id = graphene.ID(required=True)        user_id = graphene.ID(required=True)    def mutate(self, info, post_id, user_id):        post = models.Post.objects.get(pk=post_id)        if post.likes.filter(pk=user_id).exists():            post.likes.remove(user_id)        else:            post.likes.add(user_id)        post.save()        return UpdatePostLike(post=post)

<template>  <div class="home">    ...    <!-- Like, Comment and Share -->    <div      class="..."    >      <div v-if="this.liked === true" @click="this.updateLike()">        <i class="fa-solid fa-thumbs-up">          <span class="font-sans font-semibold ml-1">{{            this.numberOfLikes          }}</span>        </i>      </div>      <div v-else @click="this.updateLike()">        <i class="fa-regular fa-thumbs-up">          <span class="font-sans font-semibold ml-1">{{            this.numberOfLikes          }}</span>        </i>      </div>      ...    </div>    ...  </div></template>

<script>import { POST_BY_SLUG } from "@/queries";import { UPDATE_POST_LIKE } from "@/mutations";...export default {  ...  async created() {    ...    // Find if the current user has liked the post    let likedUsers = this.postBySlug.likes;    for (let likedUser in likedUsers) {      if (likedUsers[likedUser].id === this.userID) {        this.liked = true;      }    }    // Get the number of likes    this.numberOfLikes = parseInt(this.postBySlug.numberOfLikes);  },  methods: {    updateLike() {      if (this.liked === true) {        this.numberOfLikes = this.numberOfLikes - 1;      } else {        this.numberOfLikes = this.numberOfLikes + 1;      }      this.liked = !this.liked;      this.$apollo.mutate({        mutation: UPDATE_POST_LIKE,        variables: {          postID: this.postBySlug.id,          userID: this.userID,        },      });    },  },};</script>

export const POST_BY_SLUG = gql`  query ($slug: String!) {    postBySlug(slug: $slug) {      ...      numberOfLikes      likes {        id      }      ...    }  }`;

export const UPDATE_POST_LIKE = gql`  mutation ($postID: ID!, $userID: ID!) {    updatePostLike(postId: $postID, userId: $userID) {      post {        id        title        likes {          id        }      }    }  }`;