Clickable tags + Improvements.

src/componets/AddItem.js

@@ -35,18 +35,20 @@ const AddItem = ({onExit, reFetch, tags, SetLoader, lightMode}) => {
   return (
     <>
       <div className='add-overlay' onClick={abort}></div>
-      <fieldset className='box'>
-        <legend>New bookmark</legend>
-        <div className='AddItem-content'>
-          <h3><span style={{color:"red"}}>* </span>Link:</h3>
-          <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
-          <h3>Name: <span className='optional'>(Optional)</span></h3>
-          <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
-          <h3>Tags: <span className='optional'>(Optional)</span></h3>
-          <TagSelection setTags={SetTags} tags={tags} lightMode={lightMode} />
-          <button onClick={newItem} className="send-btn">Add &#xf067;</button>
-        </div>
-      </fieldset>
+      <div className='send-box'>
+        <fieldset className='box'>
+          <legend>New bookmark</legend>
+          <div className='AddItem-content'>
+            <h3><span style={{color:"red"}}>* </span>Link:</h3>
+            <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
+            <h3>Name: <span className='optional'>(Optional)</span></h3>
+            <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
+            <h3>Tags: <span className='optional'>(Optional)</span></h3>
+            <TagSelection setTags={SetTags} tags={tags} lightMode={lightMode} />
+            <button onClick={newItem} className="send-btn">Add &#xf067;</button>
+          </div>
+        </fieldset>
+      </div>
     </>
   )
 }

src/componets/EditItem.js

@@ -38,20 +38,22 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch, lightMode }) => {
   return (
     <>
       <div className='add-overlay' onClick={abort}></div>
-      <fieldset className='box'>
-        <legend >Edit bookmark</legend>
-        <button className="delete" onClick={deleteItem}>&#xf2ed;</button>
-        <div className='AddItem-content'>
-        <h3>Link: <a target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
-        <h3 className='title'><b>{item.title}</b></h3>
-        
-          <h3>Name: <span className='optional'>(Optional)</span></h3>
-          <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
-          <h3>Tags: <span className='optional'>(Optional)</span></h3>
-          <TagSelection setTags={SetTags} tags={tags} tag={tag} lightMode={lightMode} />
-          <button onClick={EditItem} className="send-btn">Update &#xf303;</button>
-        </div>
-      </fieldset>
+      <div className='send-box'>
+        <fieldset className='box'>
+          <legend >Edit bookmark</legend>
+          <button className="delete" onClick={deleteItem}>&#xf2ed;</button>
+          <div className='AddItem-content'>
+          <h3>Link: <a className='link' target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
+          <h3 className='title'><b>{item.title}</b></h3>
+          
+            <h3>Name: <span className='optional'>(Optional)</span></h3>
+            <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
+            <h3>Tags: <span className='optional'>(Optional)</span></h3>
+            <TagSelection setTags={SetTags} tags={tags} tag={tag} lightMode={lightMode} />
+            <button onClick={EditItem} className="send-btn">Update &#xf303;</button>
+          </div>
+        </fieldset>
+      </div>
     </>
   )
 }

src/componets/Filters.js

@@ -10,12 +10,14 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes
   return (
     <>  
         <div className='filter-overlay' onClick={abort}></div>
-        <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>
-        </fieldset>
+        <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>
+            </fieldset>
+        </div>
     </>
   )
 }

src/componets/List.js

@@ -3,6 +3,7 @@ import LazyLoad from 'react-lazyload';
 import ViewArchived from './ViewArchived';
 import EditItem from './EditItem';
 import { useState } from 'react'
+import { Link } from "react-router-dom";
 
 const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
     const [editBox, setEditBox] = useState(false)
@@ -19,6 +20,14 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
 
     return (
         <div className="list">
+            {editBox ? <EditItem 
+                lightMode={lightMode} 
+                tags={() => tags} 
+                onExit={exitEditing} 
+                SetLoader={SetLoader} 
+                reFetch={reFetch} 
+                item={data[editIndex]} 
+            /> : null}
             {/* eslint-disable-next-line */}
             {data.map((e, i, array) => {
                 try {
@@ -30,12 +39,22 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
                                 <img alt='' src={favicon} />
                                 <div className="list-entity-content">
                                     <div className='row-name'>
-                                        <span className="num">{i + 1}.</span> {e.name} <a target="_blank" rel="noreferrer" href={e.link}>({url.hostname})</a>
+                                        <span className="num">{i + 1}.</span> 
+                                        {e.name} 
+                                        <a 
+                                            className='link' 
+                                            target="_blank" 
+                                            rel="noreferrer" 
+                                            href={e.link}
+                                        >
+                                            ({url.hostname})
+                                        </a>
                                     </div>
                                     <div className='title'>{e.title}</div>
                                     <div className="tags">
                                         {e.tag.map((e, i) => {
-                                            return (<div key={i}>{e}</div>)
+                                            const tagPath = `/tags/${e}`;
+                                            return (<Link to={tagPath} key={i}>{e}</Link>)
                                         })}
                                     </div>
                                     <div className='date'>{new Date(e.date).toDateString()}</div>
@@ -51,7 +70,6 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
                     console.log(e);
                 }
             })}
-            {editBox ? <EditItem lightMode={lightMode} tags={() => tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
         </div>
     )
 }

src/componets/SideBar.js

@@ -4,6 +4,14 @@ import '../styles/SideBar.css';
 import { Link } from "react-router-dom";
 
 const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
+    const sortedTags = tags.sort((a, b) => {
+        const A = a.toLowerCase(), B = b.toLowerCase();
+        if (A < B)
+            return -1;
+        if (A > B)
+            return 1;
+        return 0;
+    });
   return (
     <ProSidebar 
         toggled={toggle}
@@ -19,8 +27,8 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
             <MenuItem><Link to="/"><h3>Show Everything</h3></Link></MenuItem>
             
             <SubMenu icon='#' defaultOpen={true} title='Tags'>                
-                {tags.map((e, i) => {
-                    const path = `/tags/${e}`
+                {sortedTags.map((e, i) => {
+                    const path = `/tags/${e}`;
                     return <MenuItem key={i}><Link to={path}>{e}</Link></MenuItem>
                 })}
             </SubMenu>

src/componets/Sort.js

@@ -14,15 +14,17 @@ const Sort = ({ sortBy, onExit }) => {
   return (
     <>
         <div className='sort-overlay' onClick={abort}></div>
-        <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 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>
     </>
   )
 }

src/componets/ViewArchived.js

@@ -7,9 +7,9 @@ const ViewArchived = ({ id }) => {
 
   return (
     <div className='view-archived'>
-        <a href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a>
+        <a className='link' href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a>
         <hr className='seperator' />
-        <a href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
+        <a className='link' href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
     </div>
   )
 }