feat: Now in we have replaced the HarperFetch with API call in edit shape

Author: atapas

components/core/CreateShape.js

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from "react";
 
+// axios
+import axios from "axios";
+
 // Bootstrap
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
@@ -302,34 +305,28 @@ const CreateShape = (props) => {
         // Editing Shape
         if (props.edit) {
 
-            const editShape = await harperFetch({
-                operation: "sql", 
-                sql: `
-                    UPDATE tryshape.shapes
-                    SET
-                        name = '${shapeInformation.name}', 
-                        formula = '${shapeInformation.formula}', 
-                        vertices = '${shapeInformation.vertices}', 
-                        private = '${shapeInformation.private}', 
-                        edges = '${shapeInformation.edges}', 
-                        notes = '${shapeInformation.notes}', 
-                        type = '${shapeInformation.clipPathType}', 
-                        backgroundColor = '${shapeInformation.backgroundColor}'
-                    WHERE
-                        shape_id === '${props.shape.shape_id}'
-                `
+            const updateShapeResponse = await axios.post('/api/PUT/shape', {
+                shapeId: props.shape.shape_id,
+                name: shapeInformation.name, 
+                formula: shapeInformation.formula, 
+                vertices: shapeInformation.vertices, 
+                visibility: shapeInformation.private, 
+                edges: shapeInformation.edges, 
+                notes: shapeInformation.notes, 
+                type: shapeInformation.clipPathType, 
+                backgroundColor: shapeInformation.backgroundColor
             });
+            const editShape = updateShapeResponse.data;
+            console.log({editShape});
 
-            console.log(editShape);
-
-            if (editShape["update_hashes"].length > 0) {
+            if (editShape.data["update_hashes"].length > 0) {
                 props.handleClose();
                 toast.success(`Shape ${shapeInformation.name} edited successfully.`);
                 props.setShapeAction({
                     ...props.shapeAction, 
                     "action": "edit",
                     "payload": {
-                        "shape_id": editShape['update_hashes']
+                        "shape_id": editShape.data['update_hashes']
                     } 
                 });
             } else {

pages/api/PUT/shape.js

@@ -1,7 +1,36 @@
 
 export default async function handler(req, res) {
 
-  const { likes, shapeId } = req.body;
+  const { 
+    name, 
+    formula, 
+    vertices, 
+    visibility, 
+    edges, 
+    notes, 
+    type, 
+    backgroundColor, 
+    likes,
+    createdBy, 
+    shapeId } = req.body;
+
+
+  console.log({shapeId});  
+
+  const record = {};
+  record['shape_id'] = shapeId;
+  record['private'] = visibility;
+  record['name'] = name;
+  record['formula'] = formula;
+  record['vertices'] = vertices;
+  record['edges'] = edges;
+  record['notes'] = notes;
+  record['type'] = type;
+  record['backgroundColor'] = backgroundColor;
+  record['createdBy'] = createdBy;
+  record['likes'] = likes;
+  
+  console.log({record});
 
   const request = await fetch(process.env.NEXT_PUBLIC_DB_URL, {
     method: "POST",
@@ -14,10 +43,7 @@ export default async function handler(req, res) {
       schema: "tryshape",
       table: "shapes",
       records: [
-        {
-          shape_id: shapeId,
-          likes: likes,
-        },
+        record
       ],
     }),
   });