feat: Now able to fetch the shapes private and public based on Authentication

Author: atapas

components/core/App.js

@@ -5,7 +5,7 @@ import dynamic from "next/dynamic";
 import { harperFetch } from "../../utils/HarperFetch";
 
 // Dummy Shape Data
-import { shapes } from "../../data/shapes";
+// import { shapes } from "../../data/shapes";
 
 // loader
 import Loader from "react-loader-spinner";
@@ -16,16 +16,28 @@ import { ShapeList, Header } from '..';
 const App = (props) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
+  const { user } = props;
 
   useEffect(async () => {
     setData([]);
     setLoading(true);
 
-    // fetching the shape data
-    /*const shapes = await harperFetch({
-      operation: "sql",
-      sql: "SELECT * FROM tryshape.shapes",
-    });*/
+    let shapes = [];
+
+    if(user.length === 0) {
+      // User is not logged In
+      shapes = await harperFetch({
+        operation: "sql",
+        sql: "SELECT * from tryshape.shapes as s where s.private = false",
+      });
+    } else {
+      // User is logged in. Let's fetch the private shape and pther public shapes.
+      shapes = await harperFetch({
+        operation: "sql",
+        sql: `SELECT * from tryshape.shapes WHERE createdBy = '${user.email}' OR private = false`,
+      });
+    }
+
     console.log(shapes);
     let modifiedShapes = shapes.map((shape, index) => {
       shape.showAdvanced = false;
@@ -36,7 +48,7 @@ const App = (props) => {
 
     await setData(modifiedShapes);
     setLoading(false);
-  }, []);
+  }, [user]);
 
 
 

components/utils/Header.js

@@ -16,7 +16,7 @@ import { FaShapes } from "react-icons/fa";
 import Button from "react-bootstrap/Button";
 
 const Header = ({ setOpen, user, setUser }) => {
-  console.log(user);
+  // console.log(user);
   // sign out function
   const signOut = () => {
     auth()

components/utils/ShapeList.js

@@ -1,4 +1,9 @@
 import React, { useState } from "react";
+
+// Styled Component
+import styled from "styled-components";
+
+// dynamic from Next.js
 import dynamic from "next/dynamic";
 
 // Toast
@@ -16,28 +21,91 @@ import { toPng } from 'html-to-image';
 // downloadjs
 import download from 'downloadjs';
 
+// icons
+import { FiCopy, FiDownload, FiHeart, FiLock } from 'react-icons/fi';
+
 // Shape Listing Styled-Componentns
-import {
-    ShapeCards,
-    ShapeCard,
-    ShapeName,
-    ShapePallete,
-    ShapeDetailsItems,
-    ShapeCardSwitch,
-    ShapeActions,
-    ShapeCardHeader,
-    CopyIcon,
-    DownloadIcon,
-    LikeIcon,
-  } from './StyledComponents';
+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;
+  }
+`;
 
 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 {
@@ -47,7 +115,6 @@ const ShapeList = ({ data }) => {
       }
       return shape;
     });
-    console.log(modifiedShapes);
     setShapes(...[modifiedShapes]);
   };
 
@@ -84,6 +151,7 @@ const ShapeList = ({ data }) => {
             <ShapeCard>
               <ShapeCardHeader>
                 <ShapeName>{shape.name}</ShapeName>
+                {shape.private && <FiLock />}
                 <ShapeActions>
                   <span title="Like">
                     <LikeIcon size={24} />
@@ -111,6 +179,10 @@ const ShapeList = ({ data }) => {
                 showShadow={shape.showAdvanced}
               />
 
+              <div>
+                <span>Created By {shape.createdBy} at {shape['__createdtime__']}</span>
+              </div>
+
               <ShapeCardSwitch>
                 <label htmlFor={`${getShapeFileName(shape.name)}-form`}>
                   <span>Show Clip-Path Info</span>{" "}