Finalized filters & Tags + UI changes

2022-05-30 21:14:34 +04:30 · 2022-05-30 21:14:34 +04:30 · 43251a85d5
parent a4b925cf0d
commit 43251a85d5
9 changed files with 182 additions and 167 deletions
--- 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>
  );
 }
--- a/src/componets/AddModal.js
+++ b/src/componets/AddModal.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
--- a/src/componets/Filters.js
+++ 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
--- 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',
@ -27,11 +21,10 @@ const customStyles = {
  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}
    />
  );
 }
--- a/src/styles/AddItem.css
+++ 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;
+}
--- 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;
-}
--- a/src/styles/Filters.css
+++ 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;
+}
--- 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 {
--- a/src/styles/Modal.css
+++ b/src/styles/Modal.css
@ -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;
-}