feat: Committed the shape creation from no shape page

Author: atapas

components/core/App.js

@@ -115,6 +115,7 @@ const App = (props) => {
         <ShapeList 
           {...props} 
           data={ data } 
+          setSearchTerm = { setSearchTerm }
           searchTerm={searchTerm} 
           sort={sort} 
           shapeAction={shapeAction} 

components/core/CreateShape.js

@@ -370,6 +370,9 @@ const CreateShape = (props) => {
 
                 // Finally, close the modal and update the shape in UI
                 props.handleClose();
+                if (props.setSearchTerm) {
+                    props.setSearchTerm('');
+                }
                 toast.success(`Shape ${shapeInformation.name} created successfully.`);
                 props.setShapeAction({
                     ...props.shapeAction, 

components/utils/NoShapeFound.js

@@ -41,11 +41,26 @@ const PageWrapper = styled.div`
 
 `;
 
-const NoShapeFound = (props) => {
+const NoShapeFound = ({ 
+    setOpen, 
+    user,  
+    setSearchTerm,
+    shapeAction, 
+    setShapeAction
+  }) => {
 
     // Controls when CreateShape Modal Shows
     const [showCreateShape, setShowCreateShape] = useState(false);
 
+    const performCreate = () => {
+        
+        if (user.length === 0) {
+            setOpen(true);
+        } else {
+            setShowCreateShape(true);
+        }
+    }
+
     const closeModal = () => {
         setShowCreateShape(false);
     }
@@ -56,7 +71,7 @@ const NoShapeFound = (props) => {
                 <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)}>
+                <Button variant='secondary' onClick={() => performCreate()}>
                     <FiPlus />
                     Create Shape
                 </Button>
@@ -65,9 +80,10 @@ const NoShapeFound = (props) => {
                 show={showCreateShape} 
                 handleClose={closeModal} 
                 edit={false}
-                user={props.user}
-                shapeAction={props.shapeAction} 
-                setShapeAction={props.setShapeAction}
+                user={user}
+                shapeAction={shapeAction} 
+                setShapeAction={setShapeAction}
+                setSearchTerm={setSearchTerm}
             />
         </>
     )

components/utils/ShapeList.js

@@ -202,7 +202,8 @@ const ShapeList = (
     setOpen, 
     user, 
     data, 
-    searchTerm, 
+    searchTerm,
+    setSearchTerm, 
     sort, 
     shapeAction, 
     setShapeAction
@@ -426,7 +427,9 @@ const ShapeList = (
             <NoShapeFound 
               shapeAction = { shapeAction } 
               setShapeAction = { setShapeAction } 
-              user = { user } 
+              user = { user }
+              setOpen = { setOpen }
+              setSearchTerm = { setSearchTerm }
             /> : filteredShape.map((shape, index) => (
           <React.Fragment key={index}>
             <ShapeCard>