Added results indicator + More UI change

src/App.js

@@ -8,15 +8,16 @@ function App() {
   const [data, setData] = useState([]);
   const [isAdding, setIsAdding] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const [numberOfResults, setNumberOfResults] = useState(0);
 
   function exitAdding() {
-    setIsAdding(!isAdding)
+    setIsAdding(!isAdding);
   }
 
   function search(e) {
     setSearchQuery(e.target.value);
   }
-
+  // setNumberOfResults(filteredData.length);
   const filteredData = data.filter((e) => {
     return (e.name.toLowerCase().includes(searchQuery.toLowerCase()) || e.title.toLowerCase().includes(searchQuery.toLowerCase()) || e.tag.toLowerCase().includes(searchQuery.toLowerCase()))
   });
@@ -32,6 +33,10 @@ function App() {
   useEffect(() => {
     fetchData();
   }, []);
+
+  useEffect(() => {
+    setNumberOfResults(filteredData.length);
+  }, [filteredData]);
   
   return (
     <div className="App">
@@ -39,7 +44,7 @@ function App() {
         <input className="search" type="search" placeholder="&#xf002; Search for Name / Title / Tag" onChange={search}/>
         <button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
       </div>
-      <p>hi</p>
+      <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'Nothing found.'}</p>
       <List data={filteredData} reFetch={fetchData} />
       {isAdding ? <AddModal onExit={exitAdding} reFetch={fetchData} /> : null}
     </div>

src/componets/List.js

@@ -28,10 +28,10 @@ const List = ({data, reFetch}) => {
             try {
                 const url = new URL(e.link);
                 const favicon = 'http://www.google.com/s2/favicons?domain=' + url.hostname;
-                return <div className="list-row">
+                return <div key={i} className="list-row">
                     <div className="img-content-grp">
                         <img src={favicon} />
-                        <div className="list-entity-content" key={i}>
+                        <div className="list-entity-content">
                             <div className='row-name'><span className="num">{i + 1}.</span> {e.name}</div>
                             <div>{e.title}</div>
                             <div><a href={e.link}>{url.hostname}</a></div>

src/styles/App.css

@@ -53,3 +53,8 @@
 textarea:focus, input:focus{
   outline: none;
 }
+
+.results {  
+  margin: 20px;
+  margin-left: 30px;
+}

src/styles/List.css

@@ -1,11 +1,14 @@
 .list {
   width: 100%;
   text-align: left;
-  padding-top: 20px;
   border-spacing: 10px 10px;
 }
 
 .list img {
+  pointer-events: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
   position: absolute;
   filter: blur(3px);
   margin: 20px;
@@ -30,7 +33,7 @@
 
 .list-entity-content {
   text-shadow: 1px 1px 2px black;
-  z-index: 1;
+  z-index: 0;
   margin-left: 50px;
   padding: 20px;
   justify-content: space-between;