Much neater filters + cleaner code.

src/componets/Filters.js

@@ -1,50 +1,137 @@
 import "../styles/Filters.css";
+import { useState } from "react";
 
 const Filters = ({
-  nameChecked,
-  handleNameCheckbox,
-  descriptionChecked,
-  handleDescriptionCheckbox,
-  tagsChecked,
-  handleTagsCheckbox,
+  filterCheckbox,
+  handleFilterCheckbox,
+  sortBy,
+  sort,
   onExit,
 }) => {
+  const [nameChecked, setNameChecked] = useState(filterCheckbox[0]),
+    [titleChecked, setTitleChecked] = useState(filterCheckbox[1]),
+    [tagChecked, setTagChecked] = useState(filterCheckbox[2]),
+    [radio, setRadio] = useState(sort);
+
   function abort(e) {
     if (e.target.className === "filter-overlay") {
       onExit();
     }
   }
 
+  function handleRadio(e) {
+    setRadio(e.target.value);
+  }
+
+  function applyChanges() {
+    handleFilterCheckbox([nameChecked, titleChecked, tagChecked]);
+    sortBy(radio);
+  }
+
   return (
     <>
       <div className="filter-overlay" onClick={abort}></div>
       <div className="filter-box">
         <fieldset className="filter">
-          <legend>Filter by</legend>
-          <label>
-            <input
-              type="checkbox"
-              checked={nameChecked}
-              onChange={handleNameCheckbox}
-            />
-            Name
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              checked={descriptionChecked}
-              onChange={handleDescriptionCheckbox}
-            />
-            Website title
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              checked={tagsChecked}
-              onChange={handleTagsCheckbox}
-            />
-            Tags
-          </label>
+          <legend>Filter search</legend>
+
+          <div className="filter-groups">
+            <div className="section">
+              <h4>Sort by</h4>
+              <label>
+                <input
+                  name="sort"
+                  checked={radio == 1}
+                  onChange={handleRadio}
+                  type="radio"
+                  value={1}
+                />
+                &#xf271; Date (Newest first)
+              </label>
+              <label>
+                <input
+                  name="sort"
+                  checked={radio == 2}
+                  onChange={handleRadio}
+                  type="radio"
+                  value={2}
+                />
+                &#xf272; Date (Oldest first)
+              </label>
+              <label>
+                <input
+                  name="sort"
+                  checked={radio == 3}
+                  onChange={handleRadio}
+                  type="radio"
+                  value={3}
+                />
+                &#xf15d; Name (A-Z)
+              </label>
+              <label>
+                <input
+                  name="sort"
+                  checked={radio == 4}
+                  onChange={handleRadio}
+                  type="radio"
+                  value={4}
+                />
+                &#xf15e; Name (Z-A)
+              </label>
+              <label>
+                <input
+                  name="sort"
+                  checked={radio == 5}
+                  onChange={handleRadio}
+                  type="radio"
+                  value={5}
+                />
+                &#xf15d; Website title (A-Z)
+              </label>
+              <label>
+                <input
+                  name="sort"
+                  checked={radio == 6}
+                  onChange={handleRadio}
+                  type="radio"
+                  value={6}
+                />
+                &#xf15e; Website title (Z-A)
+              </label>
+            </div>
+
+            <div className="section">
+              <h4>Include/Exclude</h4>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={nameChecked}
+                  onChange={() => setNameChecked(!nameChecked)}
+                />
+                Name
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={titleChecked}
+                  onChange={() => setTitleChecked(!titleChecked)}
+                />
+                Website title
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={tagChecked}
+                  onChange={() => setTagChecked(!tagChecked)}
+                />
+                Tags
+              </label>
+            </div>
+          </div>
+
+          <button className="apply-btn" onClick={applyChanges}>
+            Apply
+          </button>
         </fieldset>
       </div>
     </>

src/componets/Sort.js

@@ -1,44 +0,0 @@
-import "../styles/Sort.css";
-
-const Sort = ({ sortBy, onExit }) => {
-  function abort(e) {
-    if (e.target.className === "sort-overlay") {
-      onExit();
-    }
-  }
-
-  function sort(e) {
-    sortBy(e.target.value);
-  }
-
-  return (
-    <>
-      <div className="sort-overlay" onClick={abort}></div>
-      <div className="sort-box">
-        <fieldset className="sort" onClick={sort}>
-          <legend>Sort by</legend>
-          <button className="sort-by-btn" value="Default">
-            &#xf271; Date (Newest first)
-          </button>
-          <button className="sort-by-btn" value="Date (Oldest first)">
-            &#xf272; Date (Oldest first)
-          </button>
-          <button className="sort-by-btn" value="Name (A-Z)">
-            &#xf15d; Name (A-Z)
-          </button>
-          <button className="sort-by-btn" value="Name (Z-A)">
-            &#xf15e; Name (Z-A)
-          </button>
-          <button className="sort-by-btn" value="Title (A-Z)">
-            &#xf15d; Website title (A-Z)
-          </button>
-          <button className="sort-by-btn" value="Title (Z-A)">
-            &#xf15e; Website title (Z-A)
-          </button>
-        </fieldset>
-      </div>
-    </>
-  );
-};
-
-export default Sort;