Merge pull request #24 from TryShape/implement-like-functionality

feat: Implemented basic likes functionality

Author: atapas

components/core/App.js

@@ -25,37 +25,63 @@ const App = (props) => {
     let shapes = [];
 
     if(user.length === 0) {
-      // User is not logged In
+      // User is not logged In. Fetch all the public shapes
       shapes = await harperFetch({
         operation: "sql",
         sql: `SELECT * 
           FROM tryshape.shapes s 
           INNER JOIN tryshape.users u 
           ON s.createdBy=u.email 
-          WHERE s.private=false`,
+          WHERE s.private=false
+          ORDER BY s.likes DESC`,
       });
     } else {
-      // User is logged in. Let's fetch the private shape and pther public shapes.
+      // User is logged in. Let's fetch the private shape and other public shapes.
       shapes = await harperFetch({
         operation: "sql",
         sql: `SELECT *
           FROM tryshape.shapes s
           INNER JOIN tryshape.users u 
           ON s.createdBy=u.email 
           WHERE s.private=false 
-          OR createdBy = '${user.email}'`,
+          OR createdBy = '${user.email}'
+          ORDER BY s.likes DESC`,
       });
+
+      // Fetch the shapes liked by the logged-in user
+      const likedShapes = await harperFetch({
+        operation: "sql",
+        sql: `SELECT *
+          FROM tryshape.likes 
+          WHERE email = '${user.email}'`,
+      });
+
+      // If there are liked shapes, take out the shape_id
+      if (likedShapes.length > 0) {
+        let likedShapeIds = likedShapes.map((liked, index) => {
+          return liked['shape_id'];
+        })
+        shapes.map((shape, index) => {
+         
+            if (likedShapeIds.includes(shape['shape_id'])) {
+              shape['liked'] = true;
+            } else {
+              shape['liked'] = false;
+            }
+            return shape;
+        });
+      }
     }
 
-    console.log(shapes);
-    let modifiedShapes = shapes.map((shape, index) => {
+    // Add the showAdvanced property
+    shapes.map((shape, index) => {
       shape.showAdvanced = false;
       return shape;
     });
 
-    console.log(modifiedShapes);
+    console.log(shapes);
 
-    await setData(modifiedShapes);
+    await setData(shapes);
     setLoading(false);
   }, [user]);
 

components/utils/ShapeList.js

@@ -6,6 +6,9 @@ import styled from "styled-components";
 // dynamic from Next.js
 import dynamic from "next/dynamic";
 
+// harperDb fetch call
+import { harperFetch } from "../../utils/HarperFetch";
+
 // Toast
 import toast from "react-hot-toast";
 
@@ -16,8 +19,9 @@ const Shape = dynamic(import("react-clip-path"), { ssr: false });
 import Switch from "react-switch";
 
 // icons
-import { FiCopy, FiDownload, FiHeart, FiLock } from 'react-icons/fi';
+import { FiCopy, FiDownload, FiLock } from 'react-icons/fi';
 import { BiExport } from "react-icons/bi";
+import { BsFillHeartFill, BsHeart} from "react-icons/bs";
 
 // Export Shape
 import { ExportShape } from '..';
@@ -97,8 +101,17 @@ const ExportIcon = styled(BiExport)`
   }
 `;
 
-const LikeIcon = styled(FiHeart)`
+const LikeIcon = styled(BsHeart)`
+  cursor: pointer;
+  color: red;
+  &:hover {
+    color: #f71b6f;
+  }
+`;
+
+const LikeFilledIcon = styled(BsFillHeartFill)`
   cursor: pointer;
+  color: red;
   &:hover {
     color: #f71b6f;
   }
@@ -124,6 +137,9 @@ const ShapeList = ({ setOpen, user, data }) => {
     setShapes(...[modifiedShapes]);
   };
 
+  /**
+   * Copy the clip-path value to clipboard
+   */
   async function performCopy(event, formula) {
     event.preventDefault();
     try {
@@ -135,15 +151,96 @@ const ShapeList = ({ setOpen, user, data }) => {
     }
   }
 
+  /**
+   * Method to execute when user clicks on the export shape
+   */
   const performExport = shape => {
+    // Check if user logged-in
     if (user.length === 0) {
+      // Show the login modal if user is not authenticated
       setOpen(true);
     } else {
+      // Set the shape details to export
       setShapeToExport(shape);
+      // Show the export modal
       setShowExportModal(true);
     }
   }
 
+  /**
+   * Method to execute when user clicks on the likes
+   */
+  const performLike = async (event, shapeId) => {
+    // Check if user logged-in
+    if (user.length === 0) {
+      // Show the login modal if user is not authenticated
+      setOpen(true);
+    } else {
+      // Good to go. Initialize likes
+      let likes = 0;
+
+      // Check if already an entry for this user's like
+      // for the shape present.
+      const isPresent = await harperFetch({
+        operation: "sql",
+        sql: `SELECT * 
+            FROM tryshape.likes 
+            WHERE shape_id='${shapeId}' AND email='${user.email}'`,
+      });
+      // Get the latest likes count from db
+      const returnValue = await harperFetch({
+        operation: "sql",
+        sql: `SELECT s.likes 
+          FROM tryshape.shapes s 
+          WHERE s.shape_id='${shapeId}'`,
+      });
+          
+      if (isPresent.length === 0) {
+        // If not present, add for like
+        const insertLike = await harperFetch({
+          operation: "sql",
+          sql: `INSERT into tryshape.likes(shape_id, email) 
+              values('${shapeId}', '${user.email}')`,
+        });
+
+        if (insertLike) {
+          // Update the count by 1
+          likes = returnValue[0].likes + 1;
+        }
+      } else {
+        // If present, delete to remove like
+        const deleteLike = await harperFetch({
+          operation: "sql",
+          sql: `DELETE from tryshape.likes 
+              WHERE shape_id='${shapeId}' AND email='${user.email}'`,
+        });
+        if (deleteLike) {
+          // update the like count decrease by 1
+          likes = returnValue[0].likes - 1;
+        }
+      }
+
+      // Update the shape data with the updated count
+      const updated = await harperFetch({
+        operation: "sql",
+        sql: `UPDATE tryshape.shapes SET likes = ${likes} WHERE shape_id='${shapeId}'`
+      });
+
+      // Update the shape data in the shapes array
+      let modifiedShapes = shapes.map((shape, index) => {
+        if (shape['shape_id'] === shapeId) {
+          return {
+            ...shape,
+            liked: !shape.liked,
+            likes: likes
+          };
+        }
+        return shape;
+      });
+      setShapes(...[modifiedShapes]);
+    }
+  };
+
   return (
     <ShapePallete>
       <ShapeCards>
@@ -161,7 +258,17 @@ const ShapeList = ({ setOpen, user, data }) => {
                 {shape.private && <FiLock />}
                 <ShapeActions>
                   <span title="Like">
-                    <LikeIcon size={24} />
+                    {
+                      shape.liked ? 
+                        (<LikeFilledIcon 
+                          size={24} 
+                          onClick={(event, shapeId) => performLike(event, shape['shape_id'])}/>) 
+                        :
+                        (<LikeIcon 
+                          size={24} 
+                          onClick={(event, shapeId) => performLike(event, shape['shape_id'])}/>)
+                    }
+                    {shape.likes}
                   </span>{" "}
                   <span title="Export">
                     <ExportIcon