added frontend search functionality with a small menubar

Signed-off-by: rodude123 <rodude123@gmail.com>

src/blog/index.html

@@ -49,6 +49,22 @@
     </div>
 </header>
 
+<div class="menuBar">
+    <div class="menu">
+        <ul>
+            <li><a href="/blog" class="link active">All posts</a></li>
+            <li><a href="/blog/category" class="link">categories</a></li>
+            <li>
+                <label for="searchField" aria-hidden="true" hidden>search</label>
+                <input type="search" name="search" id="searchField"
+                       placeholder="Search...">
+                <button type="submit" id="searchBtn" class="btn btnPrimary"><i
+                        class="fa fa-search"></i></button>
+            </li>
+        </ul>
+    </div>
+</div>
+
 <main id="main">
 
 </main>

src/blog/js/index.js

@@ -44,7 +44,6 @@ function goToURL(url)
 	if (urlArray[2] === 'post')
 	{
 		// Create a new URL with the dynamic part
-		// window.history.pushState(null, null, url);
 		loadIndividualPost(urlArray[urlArray.length - 1]).catch(err => console.log(err));
 		return;
 	}
@@ -52,14 +51,20 @@ function goToURL(url)
 	if (urlArray[2] === 'category')
 	{
 		// Create a new URL with the dynamic part
-		// window.history.pushState(null, null, url);
 		if (urlArray[3])
 		{
 			loadPostsByCategory(urlArray[urlArray.length - 1]);
 			return;
 		}
 		
-		loadAllCategories();
+		loadAllCategories().catch(err => console.log(err));
+		return;
+	}
+	
+	if (urlArray[2] === 'search' && urlArray[3])
+	{
+		// Create a new URL with the dynamic part
+		loadSearchResults(urlArray[urlArray.length - 1]);
 		return;
 	}
 	
@@ -67,6 +72,26 @@ function goToURL(url)
 	
 }
 
+document.querySelector('#searchBtn').addEventListener('click', _ =>
+{
+	let searchTerm = document.querySelector('#searchField').value;
+	if (searchTerm.length > 0)
+	{
+		window.history.pushState(null, null, `/blog/search/${searchTerm}`);
+		document.querySelector('#searchField').value = '';
+		document.querySelector('#main').innerHTML = '';
+		goToURL(`/blog/search/${searchTerm}`);
+	}
+});
+
+document.querySelector('#searchField').addEventListener('keyup', e =>
+{
+	if (e.key === 'Enter')
+	{
+		document.querySelector('#searchBtn').click();
+	}
+});
+
 /**
  * Creates a large post element
  * @param post the post object
@@ -116,25 +141,6 @@ function createLargePost(post)
  */
 function loadHomeContent()
 {
-	let menuBar = document.createElement('div');
-	menuBar.classList.add('menuBar');
-	// language=HTML
-	menuBar.innerHTML = `
-        <div class="menu">
-            <ul>
-                <li><a href="/blog/category" class="link">categories</a></li>
-                <li>
-                    <label for="search" aria-hidden="true" hidden>search</label>
-                    <input type="search" name="search" id="search"
-                           placeholder="Search...">
-                    <button type="submit" class="btn btnPrimary"><i
-                            class="fa fa-search"></i></button>
-                </li>
-            </ul>
-        </div>
-	`;
-	document.querySelector('#main').appendChild(menuBar);
-	
 	fetch('/api/blog/post').then(res => res.json().then(json =>
 	{
 		for (let i = 0; i < json.length; i++)
@@ -458,6 +464,34 @@ function loadPostsByCategory(category)
 	}));
 }
 
+function loadSearchResults(searchTerm)
+{
+	document.title = 'Rohit Pai - Search Results for ' + decodeURI(searchTerm);
+	fetch(`/api/blog/search/${searchTerm}`).then(res => res.json().then(json =>
+	{
+		let main = document.querySelector('#main');
+		let posts = document.createElement('section');
+		posts.classList.add('catPosts');
+		posts.id = 'searchResults';
+		let h1 = document.createElement('h1');
+		h1.innerHTML = 'Search Results';
+		main.appendChild(h1);
+		for (let i = 0; i < json.length; i++)
+		{
+			let largePost = document.createElement('section');
+			largePost.classList.add('largePost');
+			if (i < json.length - 1)
+			{
+				largePost.classList.add('categoryPost');
+			}
+			let outerContent = createLargePost(json[i]);
+			largePost.appendChild(outerContent);
+			posts.appendChild(largePost);
+		}
+		main.appendChild(posts);
+	}));
+}
+
 /**
  * Shows the 404 page
  */