Widget Component refactory

meigiyanto · Jan 1, 2024 · 570cbb6 · 570cbb6
1 parent 794dfc3
commit 570cbb6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 19 deletions.
diff --git a/src/components/widget/Category.js b/src/components/widget/Category.js
@@ -1,17 +1,16 @@
 import { Link } from 'react-router-dom';
+import posts from './../../data/posts';
 
 export default function Category() {
+  const categories = [...new Set(posts.map(post => post.category.title))];
 	return (
 		<>
 	    <h3 className="sidebar-title">Categories</h3>
 	    <div className="sidebar-item categories">
 	      <ul>
-	        <li><Link to="#">General <span>(25)</span></Link></li>
-	        <li><Link to="#">Lifestyle <span>(12)</span></Link></li>
-	        <li><Link to="#">Travel <span>(5)</span></Link></li>
-	        <li><Link to="#">Design <span>(22)</span></Link></li>
-	        <li><Link to="#">Creative <span>(8)</span></Link></li>
-	        <li><Link to="#">Educaion <span>(14)</span></Link></li>
+	      {
+	      	categories.map((category, idx) => <li key={idx}><Link to={`${category[0].toLowerCase()+category.slice(1)}`}>{category}<span></span></Link></li>)
+	      }
 	      </ul>
 	    </div>
 		</>

diff --git a/src/components/widget/Search.js b/src/components/widget/Search.js
@@ -1,10 +1,19 @@
+import { useSearchParams } from 'react-router-dom';
+
 export default function Search() {
+	let [searchParams, setSearchParams] = useSearchParams();
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		// let params = serializeFormQuery(event.target);
+    // setSearchParams(params);
+	}
+
 	return (
 		<>
 	    <h3 className="sidebar-title">Search</h3>
 	    <div className="sidebar-item search-form">
-	      <form action="">
-	        <input type="text" />
+	      <form onSubmit={handleSubmit}>
+	        <input type="text" name="q"/>
 	        <button type="submit"><i className="bi bi-search"></i></button>
 	      </form>
 	    </div>

diff --git a/src/components/widget/Tag.js b/src/components/widget/Tag.js
@@ -1,22 +1,33 @@
 import { Link } from 'react-router-dom';
+import posts from './../../data/posts';
 
 export default function Tag() {
+	let newArr;
+	let arr = [...new Set(posts.map(post => post.tag))];
+
+	arr.map(val => newArr = val.split(','))
+
+	let removeDuplicate = (data) => {
+		let duplicates = data.reduce((acc, el, i, arr) => {
+			if(arr.indexOf(el) !== i && acc.indexOf(el) < 0) {
+				acc.push(el);
+			}
+			return acc;
+		},[]);
+		return duplicates;
+	}
+
+	removeDuplicate(newArr);
+	let tags = newArr;
+
 	return (
 		<>
 	    <h3 className="sidebar-title">Tags</h3>
 	    <div className="sidebar-item tags">
 	      <ul>
-	        <li><Link to="#">App</Link></li>
-	        <li><Link to="#">IT</Link></li>
-	        <li><Link to="#">Business</Link></li>
-	        <li><Link to="#">Mac</Link></li>
-	        <li><Link to="#">Design</Link></li>
-	        <li><Link to="#">Office</Link></li>
-	        <li><Link to="#">Creative</Link></li>
-	        <li><Link to="#">Studio</Link></li>
-	        <li><Link to="#">Smart</Link></li>
-	        <li><Link to="#">Tips</Link></li>
-	        <li><Link to="#">Marketing</Link></li>
+	      {
+	      	tags.map((tag, idx) => (<li><Link>{tag}</Link></li>))
+	      }
 	      </ul>
 	    </div>
 		</>