Redirect to root if search query is empty (#260)

oyepriyansh · Sep 11, 2024 · 576f85d · 576f85d
1 parent 9d59816
commit 576f85d
Showing 1 changed file with 18 additions and 11 deletions.
diff --git a/scripts/app.js b/scripts/app.js
@@ -1,3 +1,9 @@
+// Redirect if the URL contains an empty search query
+const urlParams = new URLSearchParams(window.location.search);
+if (urlParams.has('search') && urlParams.get('search').trim() === '') {
+  window.location.href = '/'; // Redirect to the root URL if search parameter is empty
+}
+
 const container = document.querySelector('.container');
 const defaultImage = "https://oyepriyansh.pages.dev/i/5nf5fd.png";
 const searchInput = document.getElementById('searchInput'); // Assuming there's an input field for searching
@@ -33,11 +39,11 @@ const displayProfiles = async (profiles) => {
     // Skills
     const skills = profile.skills.map(skill => `<span class="skill">${skill}</span>`).join('');
 
-    // Social links
+    // Social links with improved accessibility
     const social = `
-      ${profile.github ? `<a href="${profile.github}" target="_blank" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>` : ''}
-      ${profile.twitter ? `<a href="${profile.twitter}" target="_blank" aria-label="Twitter"><i class="fa-brands fa-x-twitter"></i></a>` : ''}
-      ${profile.linkedin ? `<a href="${profile.linkedin}" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>` : ''}
+      ${profile.github ? `<a href="${profile.github}" target="_blank" aria-label="${profile.name}'s GitHub Profile"><i class="fa-brands fa-github"></i></a>` : ''}
+      ${profile.twitter ? `<a href="${profile.twitter}" target="_blank" aria-label="${profile.name}'s Twitter Profile"><i class="fa-brands fa-x-twitter"></i></a>` : ''}
+      ${profile.linkedin ? `<a href="${profile.linkedin}" target="_blank" aria-label="${profile.name}'s LinkedIn Profile"><i class="fa-brands fa-linkedin-in"></i></a>` : ''}
     `;
 
     // Adding profile HTML content
@@ -89,9 +95,15 @@ let debounceTimer;
 searchInput.addEventListener('keyup', () => {
   clearTimeout(debounceTimer);
   const searchTerm = searchInput.value.trim().toLowerCase();
-  updateURL(searchTerm); // Update the URL with the search term
+
+  // Redirect if the search input is empty
+  if (searchTerm === '') {
+    window.location.href = '/'; // Redirect to the root URL if search input is empty
+    return; // Exit the function early
+  }
 
   debounceTimer = setTimeout(() => {
+    updateURL(searchTerm); // Update the URL with the search term
     filterProfiles(searchTerm);
   }, 300); // 300ms debounce time
 });
@@ -121,11 +133,7 @@ const filterProfiles = (searchTerm) => {
   });
 
   // Show or hide the no profiles message based on search results
-  if (visibleProfiles === 0 && searchTerm !== '') {
-    noProfileMessage.style.display = 'block'; // Show message if no profiles found
-  } else {
-    noProfileMessage.style.display = 'none'; // Hide message if profiles are found
-  }
+  noProfileMessage.style.display = (visibleProfiles === 0 && searchTerm !== '') ? 'block' : 'none'; // Show message if no profiles found
 };
 
 // Scroll to top button functionality
@@ -144,7 +152,6 @@ document.getElementById("currentYear").textContent = new Date().getFullYear();
 loadProfiles();
 
 // Load search term from URL on page load
-const urlParams = new URLSearchParams(window.location.search);
 const searchTerm = urlParams.get('search') || '';
 searchInput.value = searchTerm; // Set the input value from the URL
 filterProfiles(searchTerm); // Filter profiles based on the URL search term