feat: replaced the harperdb calls with APIs for shape list component

atapas · atapas · commit adac7eb972cd · 2021-06-27T23:45:04.000+05:30
diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js
@@ -74,7 +74,7 @@ const CreateShape = (props) => {
                 "name": props.shape.name, 
                 "formula": props.shape.formula,
                 "vertices": props.shape.vertices,
-                "private": true,
+                "private": props.shape.private,
                 "edges": props.shape.edges, 
                 "notes": props.shape.notes, 
                 "clipPathType": props.shape.type,
diff --git a/components/utils/ShapeList.js b/components/utils/ShapeList.js
@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from "react";
 
+// axios
+import axios from "axios";
+
 // Bootstrap
 import Container from 'react-bootstrap/Container'
 import Button from "react-bootstrap/Button";
@@ -10,9 +13,6 @@ 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";
 
@@ -350,64 +350,75 @@ const ShapeList = (
 
       // 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}'`,
+      const likedResponse = await axios.get("/api/GET/likes", {
+        params: {
+          shapeId: shapeId,
+          email: user.email
+        }
       });
+      const isPresent = likedResponse.data;
+      console.log({isPresent});
       // 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}'`,
+      const shapeResponse = await axios.get("/api/GET/shape", {
+        params: {
+          shapeId: shapeId
+        }
       });
+      const returnValue = shapeResponse.data;
           
       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}')`,
+        const insertLikeResponse = await axios.post('/api/POST/like', {
+          shapeId: shapeId,
+          email: user.email
         });
+        const insertLike = insertLikeResponse.data;
+        console.log({insertLike});
 
-        if (insertLike) {
+        if (insertLike.data.inserted_hashes.length > 0) {
           // 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 present, get the like id
+        const likeId = isPresent[0].like_id;
+        // delete to remove like
+        const deleteLikeResponse = await axios.post('/api/DELETE/like', {
+          likeId: likeId
         });
-        if (deleteLike) {
+        const deleteLike = deleteLikeResponse.data;
+        console.log({deleteLike});
+
+        if (deleteLike.data.deleted_hashes.length > 0) {
           // 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}'`
+      const updateShapeResponse = await axios.post('/api/PUT/shape', {
+        shapeId: shapeId,
+        likes: likes
       });
-
-      // 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]);
-      //setData(...[modifiedShapes]);
+      const updated = updateShapeResponse.data;
+      console.log({updated});
+
+      if (updated.data.update_hashes.length > 0) {
+        // 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]);
+      } else {
+        toast.error('Not able to update the likes at this moment.');
+      }
     }
   };
 
diff --git a/pages/api/DELETE/like.js b/pages/api/DELETE/like.js
@@ -0,0 +1,26 @@
+
+export default async function handler(req, res) {
+  
+    const { likeId } = req.body;
+  
+    console.log(likeId);
+  
+    const request = await fetch(process.env.NEXT_PUBLIC_DB_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Basic ${process.env.NEXT_PUBLIC_DB_AUTHORIZATION}`,
+      },
+      body: JSON.stringify({
+        operation: "delete",
+        schema: "tryshape",
+        table: "likes",
+        hash_values: [likeId],
+      }),
+    });
+  
+    const data = await request.json();
+  
+    res.status(200).json({ data });
+  }
+  
diff --git a/pages/api/GET/likes.js b/pages/api/GET/likes.js
@@ -1,11 +1,14 @@
 export default async function handler(req, res) {
-    const { email } = req.query;
+    const { email, shapeId } = req.query;
 
-    let sql = `SELECT *
-                FROM tryshape.likes 
-                WHERE email = '${email}'`;
+    let sql;
+    
+    if(shapeId) {
+        sql = `SELECT * FROM tryshape.likes WHERE shape_id='${shapeId}' AND email='${email}'`;
+    } else {
+        sql = `SELECT * FROM tryshape.likes WHERE email = '${email}'`;
+    }
     
-
     const request = await fetch(process.env.NEXT_PUBLIC_DB_URL, {
       method: "POST",
       headers: {
diff --git a/pages/api/GET/shape.js b/pages/api/GET/shape.js
@@ -0,0 +1,21 @@
+export default async function handler(req, res) {
+    const { shapeId } = req.query;
+    
+    let sql = `SELECT s.likes FROM tryshape.shapes s WHERE s.shape_id='${shapeId}'`;
+    
+    const request = await fetch(process.env.NEXT_PUBLIC_DB_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Basic ${process.env.NEXT_PUBLIC_DB_AUTHORIZATION}`,
+      },
+      body: JSON.stringify({
+        operation: "sql",
+        sql: sql,
+      }),
+    });
+  
+    const data = await request.json();
+  
+    res.status(200).json(data);
+  }
diff --git a/pages/api/GET/shapes.js b/pages/api/GET/shapes.js
@@ -1,8 +1,6 @@
 export default async function handler(req, res) {
     const { type, email } = req.query;
-    console.log(req.query);
-    console.log(`Shape type to query is ${type}`);
-
+    
     let sql;
     if (type === 'private') {
         sql = `SELECT * 
@@ -13,7 +11,6 @@ export default async function handler(req, res) {
     } else if(type === 'public') {
         sql = `SELECT * FROM tryshape.shapes`;
     } else if(type === 'public-logged-in') {
-        console.log(`email is ${email}`);
         sql = `SELECT *
             FROM tryshape.shapes s
             INNER JOIN tryshape.users u 
@@ -36,7 +33,6 @@ export default async function handler(req, res) {
     });
   
     const data = await request.json();
-    // console.log(data);
   
     res.status(200).json(data);
   }
diff --git a/pages/api/POST/like.js b/pages/api/POST/like.js
@@ -0,0 +1,30 @@
+
+export default async function handler(req, res) {
+  
+  const { shapeId, email } = req.body;
+
+  console.log(shapeId, email);
+
+  const request = await fetch(process.env.NEXT_PUBLIC_DB_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Basic ${process.env.NEXT_PUBLIC_DB_AUTHORIZATION}`,
+    },
+    body: JSON.stringify({
+      operation: "insert",
+      schema: "tryshape",
+      table: "likes",
+      records: [
+        {
+          shape_id: shapeId,
+          email: email
+        },
+      ],
+    }),
+  });
+
+  const data = await request.json();
+
+  res.status(200).json({ data });
+}
diff --git a/pages/api/PUT/shape.js b/pages/api/PUT/shape.js
@@ -0,0 +1,28 @@
+
+export default async function handler(req, res) {
+  
+  const { likes, shapeId } = req.body;
+
+  const request = await fetch(process.env.NEXT_PUBLIC_DB_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Basic ${process.env.NEXT_PUBLIC_DB_AUTHORIZATION}`,
+    },
+    body: JSON.stringify({
+      operation: "update",
+      schema: "tryshape",
+      table: "shapes",
+      records: [
+        {
+          shape_id: shapeId,
+          likes: likes,
+        },
+      ],
+    }),
+  });
+
+  const data = await request.json();
+
+  res.status(200).json({ data });
+}
