[27][28] Add paste rating

Author: MCHSL

.gitignore

@@ -0,0 +1,19 @@
+# Generated by Django 4.0.3 on 2022-03-30 17:01
+
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wklejki', '0005_alter_paste_created_at'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='paste',
+            name='likers',
+            field=models.ManyToManyField(blank=True, related_name='liked_pastes', to=settings.AUTH_USER_MODEL),
+        ),
+    ]

Backend/wklejki/migrations/0006_paste_likers.py

@@ -22,6 +22,8 @@ class Paste(models.Model):
     author = models.ForeignKey(
         CustomUser, on_delete=models.CASCADE, related_name="pastes"
     )
+    likers = models.ManyToManyField(CustomUser, related_name="liked_pastes", blank=True)
+
     title = models.CharField(max_length=30)
     content = models.TextField()
     created_at = models.DateTimeField(auto_now_add=True, db_index=True)

Backend/wklejki/models.py

@@ -1,7 +1,7 @@
 # Standard Library
 import logging
-from typing import Optional
 import re
+from typing import Optional
 
 # Django
 from django.contrib.auth import get_user_model
@@ -38,7 +38,7 @@ class Meta:
         take=graphene.Int(description="Take n items when paginating"),
     )
 
-    paste_count = graphene.Int(description="Total number of pastes")
+    paste_count = graphene.Int(description="Total number of pastes for this user")
 
     @gql_optimizer.resolver_hints(model_field='pastes')
     def resolve_pastes(
@@ -141,7 +141,9 @@ def mutate(
             raise Exception("Username contains restricted special characters")
         if not re.match("^[A-Za-z0-9._%+-]*$", password):
             raise Exception("Password contains restricted special characters")
-        if not re.fullmatch(r'\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b', email):
+        if not re.fullmatch(
+            r'\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b', email
+        ):
             raise Exception("Enter a valid e-mail")
         user = get_user_model()(
             username=username,
@@ -178,7 +180,9 @@ def mutate(
         user = get_user_model().objects.get(pk=id)
         if not re.match("^[A-Za-z0-9._%+-]*$", username):
             raise Exception("Username contains restricted special characters")
-        if not re.fullmatch(r'\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b', email):
+        if not re.fullmatch(
+            r'\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b', email
+        ):
             raise Exception("Enter a valid e-mail")
         if username is not None:
             user.username = username
@@ -226,7 +230,16 @@ class Meta:
         model = Paste
 
     id = graphene.Int()
-    paste_count = graphene.Int(description="Total number of pastes")
+    like_count = graphene.Int(description="Number of users who like this paste")
+    is_liked = graphene.Boolean(description="Does the current user like this paste?")
+
+    def resolve_like_count(self: Paste, info: ResolveInfo) -> int:
+        return self.likers.count()
+
+    def resolve_is_liked(self: Paste, info: ResolveInfo) -> bool:
+        if info.context.user.is_authenticated:
+            return self.likers.filter(pk=info.context.user.pk).exists()
+        return False
 
 
 class PasteQuery(graphene.ObjectType):
@@ -377,10 +390,43 @@ def mutate(self, info: ResolveInfo, id: int) -> "DeletePaste":
         return DeletePaste(ok=True)
 
 
+class LikePaste(graphene.Mutation):
+    """Likes or unlikes a paste"""
+
+    paste = graphene.Field(PasteType)
+
+    class Arguments:
+        id = graphene.Int(required=True)
+        liking = graphene.Boolean(required=True)
+
+    @login_required
+    def mutate(self, info: ResolveInfo, id: int, liking: bool) -> Paste:
+        paste: Paste = Paste.objects.get(pk=id)
+
+        if paste.private and info.context.user != paste.author:
+            raise Paste.DoesNotExist("Paste matching query does not exist")
+
+        if liking:
+            paste.likers.add(info.context.user)
+            logging.info(
+                f"User '{info.context.user}' liked paste '{paste}'"
+                f"by user '{paste.author}' :)"
+            )
+        else:
+            paste.likers.remove(info.context.user)
+            logging.info(
+                f"User '{info.context.user}' unliked paste '{paste}'"
+                f"by user '{paste.author}' :("
+            )
+
+        return LikePaste(paste=paste)
+
+
 class PasteMutation(graphene.ObjectType):
     create_paste = CreatePaste.Field()
     update_paste = UpdatePaste.Field()
     delete_paste = DeletePaste.Field()
+    like_paste = LikePaste.Field()
 
 
 class Query(UserQuery, PasteQuery, graphene.ObjectType):

Backend/wklejki/schema.py

@@ -91,7 +91,7 @@
   border-color: #282c34 !important;
 }
 
-.heart-button {
+.paste-like-button {
   padding: 0;
   border: none;
   background-color: transparent;

Frontend/pz-ip-app/src/App.css

@@ -41,6 +41,7 @@ const PasteList = (props: Props) => {
             <th className="text-muted col-2">Utworzona</th>
             <th className="text-muted col-2">Zmieniona</th>
             <th className="text-muted col-1">Autor</th>
+            <th className="text-muted col-1">Lajki</th>
             <th className="text-muted col-1 text-center">Prywatna</th>
             <th className="text-muted col-1"></th>
           </tr>

Frontend/pz-ip-app/src/Components/Paste/PasteLists/Base/PasteList.tsx

@@ -63,6 +63,10 @@ const PasteRow = ({ paste, refetch }: Props) => {
           {paste.author.username}
         </td>
 
+        <td className="text-muted" style={{ verticalAlign: "middle" }}>
+          {paste.likeCount}
+        </td>
+
         <td
           className="text-muted"
           style={{ verticalAlign: "middle", textAlign: "center" }}

Frontend/pz-ip-app/src/Components/Paste/PasteLists/Base/PasteRow.tsx

@@ -5,4 +5,6 @@ export interface PasteInfo {
   createdAt: Date;
   updatedAt: Date;
   isPrivate: boolean;
+  likeCount: number;
+  isLiked: boolean;
 }

Frontend/pz-ip-app/src/Components/Paste/Types.tsx

@@ -77,13 +77,13 @@ const ViewEditPaste = ({ id }: Props) => {
     }
   }
 
-  useQuery(get_paste, {
+  const { data } = useQuery(get_paste, {
     variables: { id },
-    onCompleted: (data) => {
-      setPasteTitle(data.paste.title);
-      setPasteContent(data.paste.content);
-      setPasteAuthor(data.paste.author);
-      setPasteIsPrivate(data.paste.isPrivate);
+    onCompleted: (cdata) => {
+      setPasteTitle(cdata.paste.title);
+      setPasteContent(cdata.paste.content);
+      setPasteAuthor(cdata.paste.author);
+      setPasteIsPrivate(cdata.paste.isPrivate);
     },
   });
 
@@ -109,7 +109,13 @@ const ViewEditPaste = ({ id }: Props) => {
       {error === "" ? null : (
         <div className="alert alert-danger mt-3 text-center">{error}</div>
       )}
-      {!isEditing && <Rate />}
+      {!isEditing && data && (
+        <Rate
+          id={data.paste.id}
+          pasteLikes={data.paste.likeCount}
+          liking={data.paste.isLiked}
+        />
+      )}
       <RenderPaste
         editable={isEditing}
         title={pasteTitle}

Frontend/pz-ip-app/src/Components/Paste/ViewEditPaste.tsx

@@ -1,28 +1,50 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
 import { useState } from "react";
-import { Stack, Button } from "react-bootstrap";
+import { useMutation } from "@apollo/client";
+import { like_paste } from "../../Queries/queries";
+
+interface Props {
+  id: number;
+  pasteLikes: number;
+  liking: boolean;
+}
+
+const Rate = ({ id, pasteLikes, liking }: Props) => {
+  const [isLiking, setLiking] = useState(liking);
+  const [likeCount, setLikeCount] = useState(pasteLikes);
+  const heartColor: string = isLiking ? "red" : "grey";
+
+  const saved_state = { liking, likeCount };
+
+  const [doLike] = useMutation(like_paste, {
+    onError: (error) => {
+      console.log(error);
+      setLiking(saved_state.liking);
+      setLikeCount(saved_state.likeCount);
+    },
+  });
 
-const Rate = () => {
-  const [like, setLike] = useState(false);
-  const [likeCount, setLikeCount] = useState(1233);
-  const heartColor: string = like ? "red" : "grey";
   function likeHandler() {
-    setLike(!like);
-    {
-      like ? setLikeCount(likeCount - 1) : setLikeCount(likeCount + 1);
+    if (isLiking) {
+      setLikeCount(likeCount - 1);
+    } else {
+      setLikeCount(likeCount + 1);
     }
+
+    setLiking(!isLiking);
+    doLike({
+      variables: {
+        id,
+        liking: !isLiking,
+      },
+    });
   }
+
   return (
     <span className="float-end mt-5 pt-1 pb-1">
       <span className="align-middle">{likeCount}</span>
-      <button
-        //variant="link"
-        className="heart-button align-middle"
-        onClick={() => {
-          likeHandler();
-        }}
-      >
+      <button className="paste-like-button align-middle" onClick={likeHandler}>
         <FontAwesomeIcon
           style={{ fontSize: "30px", color: heartColor }}
           icon={solid("heart")}

Frontend/pz-ip-app/src/Components/Rating/Rate.tsx

@@ -85,6 +85,8 @@ export const get_paste = gql`
       title
       content
       isPrivate: private
+      isLiked
+      likeCount
       author {
         id
         username
@@ -108,6 +110,9 @@ export const update_paste = gql`
     ) {
       paste {
         id
+        title
+        content
+        private
       }
     }
   }
@@ -131,6 +136,18 @@ export const delete_paste = gql`
   }
 `;
 
+export const like_paste = gql`
+  mutation ($id: Int!, $liking: Boolean!) {
+    likePaste(id: $id, liking: $liking) {
+      paste {
+        id
+        isLiked
+        likeCount
+      }
+    }
+  }
+`;
+
 export const get_pastes = gql`
   query ($skip: Int, $take: Int) {
     pasteCount
@@ -155,6 +172,8 @@ export const get_paste_titles = gql`
       title
       createdAt
       updatedAt
+      likeCount
+      isLiked
       isPrivate: private
       author {
         id
@@ -175,6 +194,8 @@ export const get_paste_titles_for_user = gql`
         createdAt
         updatedAt
         isPrivate: private
+        likeCount
+        isLiked
         author {
           id
           username

Frontend/pz-ip-app/src/Queries/queries.tsx

@@ -1,8 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: "Lato", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }