From ee1a1bead40f0bf9c758026507cd2101556e6336 Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Wed, 23 Jun 2021 18:53:38 +0530
Subject: [PATCH] feat: Added the no shape component and the search clear icon
 will not be shown until there s a search term

---
 components/index.js              |  3 ++-
 components/utils/Header.js       |  2 +-
 components/utils/NoShapeFound.js | 10 ++++++++++
 components/utils/ShapeList.js    |  7 +++++--
 4 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 components/utils/NoShapeFound.js

diff --git a/components/index.js b/components/index.js
index b00c2a0..3264a34 100644
--- a/components/index.js
+++ b/components/index.js
@@ -8,4 +8,5 @@ export {default as CopyShapeSource} from "./core/CopyShapeSource";
 // utils
 export { default as Header } from "./utils/Header";
 export { default as ShapeList } from './utils/ShapeList';
-export { default as Radios } from './utils/Radios';
\ No newline at end of file
+export { default as Radios } from './utils/Radios';
+export { default as NoShapeFound } from './utils/NoShapeFound';
\ No newline at end of file
diff --git a/components/utils/Header.js b/components/utils/Header.js
index 1b0ece8..1579101 100644
--- a/components/utils/Header.js
+++ b/components/utils/Header.js
@@ -170,7 +170,7 @@ const Header = ({
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          <CloseIcon title="Clear Search Query" color='#ffffff' size='24px' onClick={() => setSearchTerm('')}/>
+          {searchTerm && <CloseIcon title="Clear Search Query" color='#ffffff' size='24px' onClick={() => setSearchTerm('')}/>}
         </NavbarSearchInput>
         <DropdownButton variant="outline-secondary" size="sm" id="dropdown-basic-button" title={`Sort by ${sort}`} className="border-0">
           <Dropdown.Item 
diff --git a/components/utils/NoShapeFound.js b/components/utils/NoShapeFound.js
new file mode 100644
index 0000000..c3be364
--- /dev/null
+++ b/components/utils/NoShapeFound.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const NoShapeFound = () => {
+
+    return(
+        <h1>No Shape Found!</h1>
+    )
+};
+
+export default NoShapeFound;
\ No newline at end of file
diff --git a/components/utils/ShapeList.js b/components/utils/ShapeList.js
index 0d74813..554f15b 100644
--- a/components/utils/ShapeList.js
+++ b/components/utils/ShapeList.js
@@ -28,7 +28,7 @@ import { BiExport } from "react-icons/bi";
 import { BsFillHeartFill, BsHeart} from "react-icons/bs";
 
 // Export Shape
-import { ExportShape, CopyShapeSource } from '..';
+import { ExportShape, CopyShapeSource, NoShapeFound } from '..';
 
 // misc unitless
 import { getShapeFileName, getShapeId } from '../../utils/misc';
@@ -347,6 +347,8 @@ const ShapeList = (
     }
   };
 
+  
+
   return (
     <ShapeCardsContainer>
       <Container>
@@ -362,7 +364,8 @@ const ShapeList = (
           shape= { shapeToSourceCopy } />
         }
 
-        {filteredShape.map((shape, index) => (
+        {
+          filteredShape.length === 0 ? <NoShapeFound /> : filteredShape.map((shape, index) => (
           <React.Fragment key={index}>
             <ShapeCard>
               <ShapeCardBody>