Issue 3 setup using fetch call

components/core/App.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+
+// harperDb fetch call
+import { harperFetch } from "../../utils/HarperFetch";
+
+// Dummy Shape Data
+// import { shapes } from "../../data/shapes";
+// loader
+import Loader from "react-loader-spinner";
+
+// ShapeListing
+import { ShapeList } from '..';
+
+const App = (props) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(async () => {
+    setData([]);
+    setLoading(true);
+
+    // fetching the shape data
+    const shapes = await harperFetch({
+      operation: "sql",
+      sql: "SELECT * FROM tryshape.shapes",
+    });
+    console.log(shapes);
+    let modifiedShapes = shapes.map((shape, index) => {
+      shape.showAdvanced = false;
+      return shape;
+    });
+
+    console.log(modifiedShapes);
+
+    await setData(modifiedShapes);
+    setLoading(false);
+  }, []);
+
+
+
+  return (
+    <>
+      {loading ? (
+        <Loader
+          style={{margin: '20% auto auto 42%'}}
+          type="Circles"
+          color="#eb3d86"
+          height={300}
+          width={300}
+        />
+      ) : (
+        <ShapeList data={ data } />
+      )}
+    </>
+  );
+};
+
+export default App;

components/index.js

@@ -0,0 +1,3 @@
+export { default as App } from "./core/App";
+
+export { default as ShapeList } from './utils/ShapeList';

components/utils/ShapeList.js

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import dynamic from "next/dynamic";
+
+// Toast
+import toast from "react-hot-toast";
+
+// Clip-Path
+const Shape = dynamic(import("react-clip-path"), { ssr: false });
+
+// Switch
+import Switch from "react-switch";
+
+// Shape Listing Styled-Componentns
+import {
+    ShapeCards,
+    ShapeCard,
+    ShapeName,
+    ShapePallete,
+    ShapeDetailsItems,
+    ShapeCardSwitch,
+    ShapeActions,
+    ShapeCardHeader,
+    CopyIcon,
+    DownloadIcon,
+    LikeIcon,
+  } from './StyledComponents';
+
+const ShapeList = ({ data }) => {
+
+  const [shapes, setShapes] = useState(data);
+
+  const handleSwicth = (shapeName) => {
+    console.log(shapeName);
+
+    let modifiedShapes = shapes.map((shape, index) => {
+      if (shape.name === shapeName) {
+        return {
+          ...shape,
+          showAdvanced: !shape.showAdvanced,
+        };
+      }
+      return shape;
+    });
+    console.log(modifiedShapes);
+    setShapes(...[modifiedShapes]);
+  };
+
+  const getShapeFileName = (name) => {
+    return name.split(" ").join("-");
+  };
+
+  async function performCopy(event, formula) {
+    event.preventDefault();
+    try {
+      await navigator.clipboard.writeText(formula);
+      toast.success("Successfully Copied!");
+      console.log("The clip-path formula copied to clipboard");
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  }
+
+  return (
+    <ShapePallete>
+      <ShapeCards>
+        {shapes.map((shape, index) => (
+          <React.Fragment key={index}>
+            <ShapeCard>
+              <ShapeCardHeader>
+                <ShapeName>{shape.name}</ShapeName>
+                <ShapeActions>
+                  <span title="Like">
+                    <LikeIcon size={24} />
+                  </span>{" "}
+                  <span title="Download">
+                    <DownloadIcon
+                      size={24}
+                      onClick={(event) =>
+                        saveAsPng(
+                          event,
+                          `${getShapeFileName(shape.name)}-id`,
+                          getShapeFileName(shape.name)
+                        )
+                      }
+                    />
+                  </span>
+                </ShapeActions>
+              </ShapeCardHeader>
+              <Shape
+                width="300px"
+                height="300px"
+                name={shape.name}
+                id={`${getShapeFileName(shape.name)}-id`}
+                backgroundColor="#eb3d86"
+                showShadow={shape.showAdvanced}
+              />
+
+              <ShapeCardSwitch>
+                <label htmlFor={`${getShapeFileName(shape.name)}-form`}>
+                  <span>Show Clip-Path Info</span>{" "}
+                  <Switch 
+                    onChange={() => handleSwicth(shape.name)}
+                    checked={shape.showAdvanced}
+                    id={`${getShapeFileName(shape.name)}-form`}
+                  />
+                </label>
+              </ShapeCardSwitch>
+
+              {shape.showAdvanced && (
+                <ShapeDetailsItems>
+                  <span>
+                    <b>Clip-Path:</b>{" "}
+                    <code>
+                      <b>{shape.formula}</b>
+                    </code>
+                  </span>{" "}
+                  <span title="Copy">
+                    <CopyIcon
+                      size={24}
+                      onClick={(event) => performCopy(event, shape.formula)}
+                    />
+                  </span>
+                </ShapeDetailsItems>
+              )}
+            </ShapeCard>
+          </React.Fragment>
+        ))}
+      </ShapeCards>
+    </ShapePallete>
+  );
+};
+
+export default ShapeList;

components/utils/StyledComponents.js

@@ -0,0 +1,92 @@
+import styled from "styled-components";
+import { FiCopy, FiDownload, FiHeart } from 'react-icons/fi';
+
+const ShapeCards = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+`;
+
+const ShapeCard = styled.div`
+  width: 400px;
+  min-height: 456px;
+  border: 1px solid #ececec;
+  border-radius: 4px;
+  padding: 5px;
+  margin: 5px;
+  background-color: #ebebeb;
+`;
+
+const ShapeActions = styled.div`
+  float: right;
+`;
+
+const ShapeName = styled.span`
+  font-weight: bold;
+  font-size: 20px;
+`;
+
+const Playground = styled.div`
+  width: 100%;
+`;
+
+const ShapeDetails = styled.ul`
+  background-color: #ebebeb;
+  border-radius: 4px;
+  padding: 10px;
+  width: 100%;
+`;
+
+const ShapeDetailsItems = styled.li`
+  word-wrap: break-word;
+`;
+
+const ShapePallete = styled.div`
+  margin-top: 5px;
+`;
+
+const ShapeCardHeader = styled.div`
+  padding: 5px;
+  margin: 5px;
+`;
+
+const ShapeCardSwitch = styled.div`
+  margin: 5px auto auto 9px;
+`;
+
+const CopyIcon = styled(FiCopy)`
+  cursor: pointer;
+  &:hover {
+    color: #f71b76;
+  }
+`;
+
+const DownloadIcon = styled(FiDownload)`
+  cursor: pointer;
+  &:hover {
+    color: #f71b76;
+  }
+`;
+
+const LikeIcon = styled(FiHeart)`
+  cursor: pointer;
+  &:hover {
+    color: #f71b6f;
+  }
+`;
+
+export { 
+  ShapeCards, 
+  ShapeCard, 
+  ShapeName, 
+  Playground, 
+  ShapeDetails, 
+  ShapeDetailsItems,
+  ShapeCardSwitch, 
+  ShapePallete,
+  CopyIcon,
+  DownloadIcon,
+  LikeIcon,
+  ShapeActions,
+  ShapeCardHeader };