Added sort button

src/App.js

@@ -4,11 +4,13 @@ import List from './componets/List';
 import AddItem from './componets/AddItem';
 import config from './config.json';
 import Filters from './componets/Filters';
+import Sort from './componets/Sort';
 
 function App() {
   const [data, setData] = useState([]);
-  const [isAdding, setIsAdding] = useState(false);
-  const [isFiltering, setIsFiltering] = useState(false);
+  const [newBox, setNewBox] = useState(false);
+  const [filterBox, setFilterBox] = useState(false);
+  const [sortBox, setSortBox] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [numberOfResults, setNumberOfResults] = useState(0);
   const [nameChecked, setNameChecked] = useState(true);
@@ -28,11 +30,15 @@ function App() {
   }
 
   function exitAdding() {
-    setIsAdding(!isAdding);
+    setNewBox(!newBox);
   }
 
   function exitFilter() {
-    setIsFiltering(!isFiltering);
+    setFilterBox(!filterBox);
+  }
+
+  function exitSorting() {
+    setSortBox(!sortBox);
   }
 
   function search(e) {
@@ -78,8 +84,6 @@ function App() {
     return tags;
   }
 
-  
-
   useEffect(() => {
     fetchData();
   }, []);
@@ -92,13 +96,21 @@ function App() {
     <div className="App">
       <div className="head">
         <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
-        <button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
+        <button className="btn" onClick={() => setNewBox(true)}>&#xf067;</button>
       </div>
 
       <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'No bookmarks found.'}</p>
 
-      <button className='filter-button' onClick={() => setIsFiltering(true)}>&#xf0b0;</button>
-      {isFiltering ? <Filters 
+      <button className='btn' onClick={() => setFilterBox(true)}>&#xf0b0;</button>
+      <button className='btn' onClick={() => setSortBox(true)}>&#xf0dc;</button>
+      <List data={filteredData} reFetch={fetchData} />
+
+      {sortBox ? <Sort 
+        onExit={exitSorting} 
+        reFetch={fetchData}
+      /> : null}
+
+      {filterBox ? <Filters 
         nameChecked={nameChecked}
         handleNameCheckbox={handleNameCheckbox}
         descriptionChecked={descriptionChecked}
@@ -108,9 +120,11 @@ function App() {
         onExit={exitFilter}
        /> : null}
 
-      <List data={filteredData} reFetch={fetchData} />
-
-      {isAdding ? <AddItem onExit={exitAdding} reFetch={fetchData} tags={concatTags} /> : null}
+      {newBox ? <AddItem 
+        onExit={exitAdding} 
+        reFetch={fetchData} 
+        tags={concatTags} 
+      /> : null}
     </div>
   );
 }