From 43251a85d52682bc019d95643635c8780fb8e15f Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Mon, 30 May 2022 21:14:34 +0430
Subject: [PATCH] Finalized filters & Tags + UI changes

---
 src/App.js                                | 54 ++++++++-----
 src/componets/{AddModal.js => AddItem.js} | 30 ++++----
 src/componets/Filters.js                  | 22 ++++++
 src/componets/TagSelection.js             | 27 +++----
 src/styles/AddItem.css                    | 65 ++++++++++++++++
 src/styles/App.css                        | 29 ++-----
 src/styles/Filters.css                    | 26 +++++++
 src/styles/List.css                       |  3 +-
 src/styles/Modal.css                      | 93 -----------------------
 9 files changed, 182 insertions(+), 167 deletions(-)
 rename src/componets/{AddModal.js => AddItem.js} (68%)
 create mode 100644 src/componets/Filters.js
 create mode 100644 src/styles/AddItem.css
 create mode 100644 src/styles/Filters.css
 delete mode 100644 src/styles/Modal.css

diff --git a/src/App.js b/src/App.js
index bb430fe..3f65915 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,26 +1,20 @@
 import { useEffect, useState } from 'react';
 import './styles/App.css';
 import List from './componets/List';
-import AddModal from './componets/AddModal';
+import AddItem from './componets/AddItem';
 import config from './config.json';
+import Filters from './componets/Filters';
 
 function App() {
   const [data, setData] = useState([]);
   const [isAdding, setIsAdding] = useState(false);
+  const [isFiltering, setIsFiltering] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [numberOfResults, setNumberOfResults] = useState(0);
   const [nameChecked, setNameChecked] = useState(true);
   const [descriptionChecked, setDescriptionChecked] = useState(true);
   const [tagsChecked, setTagsChecked] = useState(true);
 
-  function toggleFilterBtn(e) {    
-    if(e.target.nextSibling.style.display === 'none') {
-      e.target.nextSibling.style.display = '';
-    } else if(e.target.nextSibling.style.display === '') {
-      e.target.nextSibling.style.display = 'none';
-    }
-  }
-
   function handleNameCheckbox() {
     setNameChecked(!nameChecked);
   }
@@ -37,6 +31,10 @@ function App() {
     setIsAdding(!isAdding);
   }
 
+  function exitFilter() {
+    setIsFiltering(!isFiltering);
+  }
+
   function search(e) {
     setSearchQuery(e.target.value);
   }
@@ -68,6 +66,20 @@ function App() {
     setData(Data);
   }
 
+  const concatTags = () => {
+    let tags = [];
+
+    for (let i = 0; i < data.length; i++) {
+      tags = tags.concat(data[i].tag)
+    }
+
+    tags = tags.filter((v, i, a) => a.indexOf(v) === i);
+
+    return tags;
+  }
+
+  
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -82,17 +94,23 @@ function App() {
         <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
         <button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
       </div>
+
       <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks' : 'No bookmarks.'}</p>
-      <div className='filter'>
-        <button onClick={(e) => toggleFilterBtn(e)}>&#xf0b0;</button>
-        <div>
-          <label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
-          <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Title/Description</label>
-          <label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
-        </div>
-      </div>
+
+      <button className='filter-button' onClick={() => setIsFiltering(true)}>&#xf0b0;</button>
+      {isFiltering ? <Filters 
+        nameChecked={nameChecked}
+        handleNameCheckbox={handleNameCheckbox}
+        descriptionChecked={descriptionChecked}
+        handleDescriptionCheckbox={handleDescriptionCheckbox}
+        tagsChecked={tagsChecked} 
+        handleTagsCheckbox={handleTagsCheckbox}
+        onExit={exitFilter}
+       /> : null}
+
       <List data={filteredData} reFetch={fetchData} />
-      {isAdding ? <AddModal onExit={exitAdding} reFetch={fetchData} /> : null}
+
+      {isAdding ? <AddItem onExit={exitAdding} reFetch={fetchData} tags={concatTags} /> : null}
     </div>
   );
 }
diff --git a/src/componets/AddModal.js b/src/componets/AddItem.js
similarity index 68%
rename from src/componets/AddModal.js
rename to src/componets/AddItem.js
index c9bf644..bca9aba 100644
--- a/src/componets/AddModal.js
+++ b/src/componets/AddItem.js
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { nanoid } from 'nanoid'
-import '../styles/Modal.css';
+import '../styles/AddItem.css';
 import config from '../config.json';
 import TagSelection from './TagSelection';
 
-const AddModal = ({onExit, reFetch}) => {
+const AddItem = ({onExit, reFetch, tags}) => {
   const [name, setName] = useState('');
   const [link, setLink] = useState('');
   const [tag, setTag] = useState([]);
@@ -17,9 +17,9 @@ const AddModal = ({onExit, reFetch}) => {
     setLink(e.target.value);
   }
 
-  function SetTag(e) {
-    setTag([e.target.value]);
-    setTag(e.target.value.split(/(\s+)/).filter( e => e.trim().length > 0).map(e => e.toLowerCase()))
+  function SetTags(value) {
+    setTag(value);
+    setTag(value.map(e => e.value.toLowerCase()));
   }
 
   async function submitBookmark() {
@@ -71,29 +71,27 @@ const AddModal = ({onExit, reFetch}) => {
   }
 
   function abort(e) {
-    if (e.target.className === "overlay" || e.target.className === "cancel-btn") {
+    if (e.target.className === "add-overlay") {
       onExit();
     }
   }
 
   return (
-    <div className='overlay' onClick={abort}>
+    <>
+      <div className='add-overlay' onClick={abort}></div>
       <div className='box'>
-        <div className='modal-content'>
-          <h2>New Bookmark</h2>
+        <div className='AddItem-content'>
           <h3>Name:</h3>
-          <input onChange={SetName} className="modal-input" type="search" placeholder="e.g. Example Tutorial"/>
+          <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
           <h3>Link:</h3>
-          <input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
+          <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Tags:</h3>
-          <TagSelection />
-          {/* <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials (Seperate with spaces)"/> */}
+          <TagSelection setTags={SetTags} tags={tags} />
           <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
-          <button className="cancel-btn">Cancel</button>
         </div>
       </div>
-    </div>
+    </>
   )
 }
 
-export default AddModal
+export default AddItem
diff --git a/src/componets/Filters.js b/src/componets/Filters.js
new file mode 100644
index 0000000..bb17802
--- /dev/null
+++ b/src/componets/Filters.js
@@ -0,0 +1,22 @@
+import '../styles/Filters.css'
+
+const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDescriptionCheckbox, tagsChecked, handleTagsCheckbox, onExit}) => {
+    function abort(e) {
+        if (e.target.className === "filter-overlay") {
+            onExit();
+        }
+    }
+
+  return (
+    <>
+        <div className='filter-overlay' onClick={abort}></div>
+        <div className='filter'>
+            <label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
+            <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Title/Description</label>
+            <label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
+        </div>
+    </>
+  )
+}
+
+export default Filters
\ No newline at end of file
diff --git a/src/componets/TagSelection.js b/src/componets/TagSelection.js
index 9f42fa6..ff35b57 100644
--- a/src/componets/TagSelection.js
+++ b/src/componets/TagSelection.js
@@ -8,12 +8,6 @@ const options = [
 ];
 
 const customStyles = {
-  container: (provided) => ({
-    ...provided,
-    marginLeft: '20%',
-    marginRight: '20%',
-  }),
-
   placeholder: (provided) => ({
     ...provided,
     color: '#a9a9a9',
@@ -23,15 +17,14 @@ const customStyles = {
     ...provided,
     display: 'none',
   }),
-  
+
   menu: (provided) => ({
     ...provided,
     padding: '5px',
-    borderRadius: '10px',
     opacity: '90%',
     color: 'gray',
     background: '#273949',
-    boxShadow: 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',
+    boxShadow: 'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px',
   }),
 
   input: (provided) => ({
@@ -39,25 +32,25 @@ const customStyles = {
     color: 'white',
 }),
 
-  control: (provided) => ({
+  control: (provided, state) => ({
     ...provided,
     background: '#273949',
     border: 'none',
-    borderRadius: '10px',
-    boxShadow: 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',
+    boxShadow: state.isFocused ? 'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px' : 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',
   }),
 }
 
-export default function TagSelection() {
-  const [selectedOption, setSelectedOption] = useState(null);
+export default function TagSelection({setTags, tags}) {
+  const data = tags().map((e) => {
+      return { value: e, label: e }
+  })
 
   return (
     <CreatableSelect
         styles={customStyles}
         isMulti
-        defaultValue={selectedOption}
-        onChange={setSelectedOption}
-        options={options}
+        onChange={setTags}
+        options={data}
     />
   );
 }
diff --git a/src/styles/AddItem.css b/src/styles/AddItem.css
new file mode 100644
index 0000000..d17f80f
--- /dev/null
+++ b/src/styles/AddItem.css
@@ -0,0 +1,65 @@
+.add-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+}
+
+.box {
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+    position: absolute;
+    z-index: 2;
+    top: 70px;
+    right: 20px;
+    background-color: #1f2c38;
+    width: 40%;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.box h3 {
+    font-weight: 300;
+}
+
+.AddItem-content {
+    padding: 20px;
+}
+
+.AddItem-input {
+    font-size: 1rem;
+    padding: 10px;
+    border: none;
+    width: 100%;
+    color: white;
+    background-color:#273949;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+}
+
+.AddItem-input:focus {
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+.upload-btn {
+    font-family: 'Font Awesome 5 Free';
+    font-size: 1.1rem;
+    padding: 5px;
+    cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+    color: #ffffffb6;
+    background-color:#273949;
+    border: none;
+    margin-top: 20px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    transition: background-color 0.1s;
+}
+
+.upload-btn:hover {
+    background-color: rgb(76, 117, 170);
+}
+
+.upload-btn:active {
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
\ No newline at end of file
diff --git a/src/styles/App.css b/src/styles/App.css
index d6d5803..96925d7 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -9,7 +9,6 @@
 }
 
 .search {
-  border-radius: 10px;
   margin: 20px 20px 0px 20px;
   padding: 10px;
   font-family: 'Font Awesome 5 Free';
@@ -32,7 +31,7 @@
 }
 
 .add-btn {
-  border-radius: 10px;
+  border-radius: 100%;
   margin: 20px 20px 0px auto;
   font-family: 'Font Awesome 5 Free';
   padding: 10px;
@@ -58,12 +57,8 @@ textarea:focus, input:focus{
   display: inline-block;
 }
 
-.filter {
-  display: inline-block;
-}
-
-.filter button {
-  border-radius: 10px;
+.filter-button {
+  border-radius: 100%;
   font-family: 'Font Awesome 5 Free';
   padding: 10px;
   font-size: 1rem;
@@ -75,18 +70,10 @@ textarea:focus, input:focus{
   transition: background-color 0.1s;
 }
 
-.filter button:hover {
+.filter-button:active {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+.filter-button:hover {
   background-color: rgb(76, 117, 170);
 }
-
-.display {
-  visibility: visible;
-}
-
-.filter div {
-  position: absolute;
-  margin: -30px 0 0 50px;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
\ No newline at end of file
diff --git a/src/styles/Filters.css b/src/styles/Filters.css
new file mode 100644
index 0000000..ca0495b
--- /dev/null
+++ b/src/styles/Filters.css
@@ -0,0 +1,26 @@
+.filter {
+    display: flex;
+    flex-direction: column;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+    z-index: 2;
+    background-color: #273949;
+    padding: 10px;
+    left: 150px;
+    position: absolute;
+    margin-top: 4px;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.filter label {
+    margin: 10px;
+}
+
+.filter-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+}
\ No newline at end of file
diff --git a/src/styles/List.css b/src/styles/List.css
index d48dd06..c91965a 100644
--- a/src/styles/List.css
+++ b/src/styles/List.css
@@ -24,7 +24,6 @@
 }
 
 .list-row {
-  border-radius: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -77,7 +76,7 @@
   width: fit-content;
   height: fit-content;
   margin: 10px;
-  border-radius: 10px;
+  border-radius: 100%;
 }
 
 .delete:hover {
diff --git a/src/styles/Modal.css b/src/styles/Modal.css
deleted file mode 100644
index 4cc8c99..0000000
--- a/src/styles/Modal.css
+++ /dev/null
@@ -1,93 +0,0 @@
-.overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: rgba(39, 60, 78, 0.781);
-    width: 100vw;
-    height: 100vh;
-}
-
-.box {
-    border-radius: 10px;
-    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-    position: absolute;
-    top: 20%;
-    left: 20%;
-    background-color: #1b2e3f;
-    width: 60%;
-    height: 60%;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-.box h2 {
-    margin-top: -1px;
-    margin-bottom: 30px;
-    text-align: center;
-}
-
-.box h3 {text-align: center;}
-
-.modal-content {
-    padding: 20px;
-}
-
-.modal-input {
-    border-radius: 10px;
-    font-size: 1.3rem;
-    padding: 10px;
-    border: none;
-    width: 100%;
-    color: white;
-    background-color:#273949;
-    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-}
-
-.modal-input:focus {
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-}
-
-.upload-btn {
-    border-radius: 10px;
-    font-family: 'Font Awesome 5 Free';
-    font-size: 2rem;
-    padding: 10px;
-    cursor: pointer;
-    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-    color: #ffffffb6;
-    background-color:#273949;
-    border: none;
-    margin-top: 50px;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    transition: background-color 0.1s;
-}
-
-.upload-btn:hover {
-    background-color: rgb(76, 117, 170);
-}
-
-.cancel-btn {
-    border-radius: 10px;
-    padding: 5px;
-    cursor: pointer;
-    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-    color: #ffffffb6;
-    background-color:#273949;
-    border: none;
-    margin-top: 5px;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    transition: background-color 0.1s;
-    font-weight: 900;
-}
-
-.cancel-btn:hover {
-    background-color: rgb(255, 123, 123);
-}
-
-.upload-btn:active, .cancel-btn:active {
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-}
\ No newline at end of file