From 27b8a731f53f2cc1c5a5de96b85417668c53cff9 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Tue, 15 Jun 2021 19:08:46 +0530 Subject: [PATCH 1/2] feat: Now able to fetch the shapes private and public based on Authentication --- components/core/App.js | 26 +++++-- components/utils/Header.js | 2 +- components/utils/ShapeList.js | 104 ++++++++++++++++++++++----- components/utils/StyledComponents.js | 92 ------------------------ data/shapes.js | 91 +++++++++++++++++------ 5 files changed, 178 insertions(+), 137 deletions(-) delete mode 100644 components/utils/StyledComponents.js diff --git a/components/core/App.js b/components/core/App.js index fc8faba..36515f4 100644 --- a/components/core/App.js +++ b/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]); diff --git a/components/utils/Header.js b/components/utils/Header.js index 9401a62..df54226 100644 --- a/components/utils/Header.js +++ b/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() diff --git a/components/utils/ShapeList.js b/components/utils/ShapeList.js index f78c5e4..fedbff0 100644 --- a/components/utils/ShapeList.js +++ b/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 }) => { {shape.name} + {shape.private && } @@ -111,6 +179,10 @@ const ShapeList = ({ data }) => { showShadow={shape.showAdvanced} /> +
+ Created By {shape.createdBy} at {shape['__createdtime__']} +
+