feat: linked NoShapeFound button to open CreateShape Modal

Author: williamzhu17

components/utils/Header.js

@@ -256,7 +256,8 @@ const Header = ({
         edit={false}
         user={user}
         shapeAction={shapeAction} 
-        setShapeAction={setShapeAction} />
+        setShapeAction={setShapeAction} 
+      />
     </AppHeader>
   );
 };

components/utils/NoShapeFound.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 // Bootstrap
 import Button from "react-bootstrap/Button";
@@ -10,6 +10,9 @@ import styled from "styled-components";
 // icons
 import { FiPlus } from 'react-icons/fi';
 
+// CreateShape modal
+import { CreateShape } from "..";
+
 const PageWrapper = styled.div`
     display: flex;
     flex-direction: column;
@@ -38,18 +41,35 @@ const PageWrapper = styled.div`
 
 `;
 
-const NoShapeFound = () => {
+const NoShapeFound = (props) => {
+
+    // Controls when CreateShape Modal Shows
+    const [showCreateShape, setShowCreateShape] = useState(false);
+
+    const closeModal = () => {
+        setShowCreateShape(false);
+    }
 
     return(
-        <PageWrapper>
-            <img src={ImgFeelingSad} width="360"/>
-            <h2 className="title">Whooops!</h2>
-            <p className="desc">We couldn't find the shape you are looking for. Why dont you start creating a shape of your own choice? or try to refine your search. </p>
-            <Button variant='secondary'>
-                <FiPlus />
-                Create Shape
-            </Button>
-        </PageWrapper>
+        <>
+            <PageWrapper>
+                <img src={ImgFeelingSad} width="360"/>
+                <h2 className="title">Whooops!</h2>
+                <p className="desc">We couldn't find the shape you are looking for. Why don't you start creating a shape of your own choice? or try to refine your search. </p>
+                <Button variant='secondary' onClick={() => setShowCreateShape(true)}>
+                    <FiPlus />
+                    Create Shape
+                </Button>
+            </PageWrapper>
+            <CreateShape
+                show={showCreateShape} 
+                handleClose={closeModal} 
+                edit={false}
+                user={props.user}
+                shapeAction={props.shapeAction} 
+                setShapeAction={props.setShapeAction}
+            />
+        </>
     )
 };
 

components/utils/ShapeList.js

@@ -397,7 +397,12 @@ const ShapeList = (
         }
 
         {
-          filteredShape.length === 0 ? <NoShapeFound /> : filteredShape.map((shape, index) => (
+          filteredShape.length === 0 ? 
+            <NoShapeFound 
+              shapeAction = { shapeAction } 
+              setShapeAction = { setShapeAction } 
+              user = { user } 
+            /> : filteredShape.map((shape, index) => (
           <React.Fragment key={index}>
             <ShapeCard>
               <ShapeCardBody>