Still sidebar improvements.

2022-06-15 21:00:13 +04:30
parent 51b214200f
commit 5ff1f56a5d
7 changed files with 154 additions and 42 deletions
@@ -17,6 +17,7 @@
        "react-lazyload": "^3.2.0",
        "react-loader-spinner": "^6.0.0-0",
        "react-pro-sidebar": "^0.7.1",
+        "react-router-dom": "^6.3.0",
        "react-scripts": "5.0.0",
        "react-select": "^5.3.2",
        "web-vitals": "^2.1.4"
@@ -8155,6 +8156,14 @@
        "he": "bin/he"
      }
    },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
    "node_modules/hoist-non-react-statics": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13441,6 +13450,30 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-scripts": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -22177,6 +22210,14 @@
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
    },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
    "hoist-non-react-statics": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -25832,6 +25873,23 @@
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
    },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
    "react-scripts": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -13,6 +13,7 @@
    "react-lazyload": "^3.2.0",
    "react-loader-spinner": "^6.0.0-0",
    "react-pro-sidebar": "^0.7.1",
+    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "react-select": "^5.3.2",
    "web-vitals": "^2.1.4"
@@ -11,6 +11,8 @@ import concatTags from './modules/concatTags';
 import NoResults from './componets/NoResults';
 import Loader from './componets/Loader';
 import SideBar from './componets/SideBar';
+import Tags from './routes/Tags.js';
+import { Route, Routes } from "react-router-dom";

 function App() {
  const [data, setData] = useState([]),
@@ -109,47 +111,65 @@ function App() {
  return (
    <div className="App">
      <SideBar tags={tags} handleToggleSidebar={handleToggleSidebar} toggle={toggle} />
-      <div className='content'>
-        <div className="head">
-          <button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
-          <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
-          <button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
-          <button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
-        </div>
+      <Routes>
+        <Route path="/" element={<div className='content'>
+          <div className="head">
+            <button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
+            <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
+            <button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
+            <button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
+          </div>

-        {numberOfResults > 0 ? <p className="results">{numberOfResults} Bookmarks found</p> : null}
+          {numberOfResults > 0 ? <p className="results">{numberOfResults} Bookmarks found</p> : null}

-        <button className='btn' style={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
-        <button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</button>
-        <List lightMode={lightMode} SetLoader={SetLoader} data={filteredData} tags={tags} reFetch={fetchData} />
+          <button className='btn' style={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
+          <button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</button>
+          
+          <List
+            lightMode={lightMode} 
+            SetLoader={SetLoader} 
+            data={filteredData} 
+            tags={tags} 
+            reFetch={fetchData} 
+          />

-        {numberOfResults === 0 ? <NoResults /> : null}
+          {numberOfResults === 0 ? <NoResults /> : null}

-        {sortBox ? <Sort 
-          sortBy={sortByFunc}
-          onExit={exitSorting}
-        /> : null}
+          {sortBox ? <Sort 
+            sortBy={sortByFunc}
+            onExit={exitSorting}
+          /> : null}

-        {filterBox ? <Filters 
-          nameChecked={nameChecked}
-          handleNameCheckbox={handleNameCheckbox}
-          descriptionChecked={descriptionChecked}
-          handleDescriptionCheckbox={handleDescriptionCheckbox}
-          tagsChecked={tagsChecked} 
-          handleTagsCheckbox={handleTagsCheckbox}
-          onExit={exitFilter}
-        /> : null}
+          {filterBox ? <Filters 
+            nameChecked={nameChecked}
+            handleNameCheckbox={handleNameCheckbox}
+            descriptionChecked={descriptionChecked}
+            handleDescriptionCheckbox={handleDescriptionCheckbox}
+            tagsChecked={tagsChecked} 
+            handleTagsCheckbox={handleTagsCheckbox}
+            onExit={exitFilter}
+          /> : null}

-        {newBox ? <AddItem 
-          SetLoader={SetLoader}
-          onExit={exitAdding} 
-          reFetch={fetchData} 
-          lightMode={lightMode}
-          tags={() => tags} 
-        /> : null}
+          {newBox ? <AddItem 
+            SetLoader={SetLoader}
+            onExit={exitAdding} 
+            reFetch={fetchData} 
+            lightMode={lightMode}
+            tags={() => tags} 
+          /> : null}

-        {loader ? <Loader lightMode={lightMode} /> : null}
-      </div>
+          {loader ? <Loader lightMode={lightMode} /> : null}
+        </div>} />
+
+        <Route path="tags/:tagId" element={<Tags
+          lightMode={lightMode} 
+          SetLoader={SetLoader} 
+          data={filteredData} 
+          tags={tags} 
+          reFetch={fetchData}
+        />} />
+        
+      </Routes>
    </div>
  );
 }
@@ -1,6 +1,7 @@
-import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from 'react-pro-sidebar';
+import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
 import 'react-pro-sidebar/dist/css/styles.css';
 import '../styles/SideBar.css';
+import { Link } from "react-router-dom";

 const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
  return (
@@ -13,11 +14,20 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
        <h1>LinkWarden</h1>
    </SidebarHeader>
    <SidebarContent className='sidebar-content'>
-
-        <h3>Tags:</h3>
-        {tags.map((e) => {
-            return <p>{e}</p>
-        })}
+        <Menu iconShape="circle">
+            
+            <MenuItem><Link to="/"><h3>View All</h3></Link></MenuItem>
+            
+            <SubMenu title='Tags'>                
+                {tags.map((e, i) => {
+                    const path = `/tags/${e}`
+                    return <MenuItem key={i}><Link to={path}>{e}</Link></MenuItem>
+                })}
+            </SubMenu>
+                
+            
+            
+        </Menu>
    </SidebarContent>
    <SidebarFooter>
        <p className='credits'>©{new Date().getFullYear()} Made with 💙 by <a href='https://github.com/Daniel31x13'>Daniel 31X13</a></p>
@@ -2,10 +2,13 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./styles/index.css";
 import App from "./App";
+import { BrowserRouter } from "react-router-dom";

 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
  <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
  </React.StrictMode>
 );
@@ -0,0 +1,21 @@
+import { useParams } from 'react-router-dom';
+import List from '../componets/List';
+
+const Tags = ({ data }) => {
+  const { tagId } = useParams();
+  const dataWithMatchingTag = data.filter((e) => {
+    return e.tag.includes(tagId)
+  });
+
+  console.log(dataWithMatchingTag)
+
+  return (
+    <div className="content">
+      <List
+        data={dataWithMatchingTag} 
+      />
+    </div>
+  )
+}
+
+export default Tags
@@ -24,7 +24,6 @@
    text-decoration: underline;
 }

-
 .pro-sidebar-layout {
    background: #384952;
    text-shadow: none;