Add : sidgureja7803 - Added Voice Search and Skills Dropdown Functionality

public/data/sidgureja7803.json

@@ -0,0 +1,39 @@
+{
+    "name": "Siddhant Gureja",
+    "location": "Rishikesh, Uttarakhand, India",
+    "bio": "Hi! I am Siddhant currently pursuing B.E. in Computer and Electronics. I am a Mern Stack Developer and want to collaborate with fellow developers.",
+    "avatar": "https://github.com/sidgureja7803.png",
+    "portfolio": "https://github.com/sidgureja7803",
+    "skills": [
+      "HTML",
+      "CSS",
+      "JavaScript",
+      "React",
+      "Node.js",
+      "MongoDB",
+      "Express.js",
+      "Redux",
+      "MERN Stack",
+      "Database Management Systems (DBMS)",
+      "Cloud Computing",
+      "AWS",
+      "Docker",
+      "Kubernetes",
+      "NoSQL Databases (MongoDB, Cassandra, Redis)",
+      "Data Structure and Algorithms",
+      "Operating Systems",
+      "System Programming",
+      "Networking",
+      "Software Engineering",
+      "Project Management",
+      "Agile Methodologies",
+      "Version Control Systems (Git, SVN)",
+      "Sc"
+    ],
+    "social": {
+      "GitHub": "https://github.com/sidgureja7803",
+      "Twitter": "https://twitter.com/sidgureja",
+      "LinkedIn": "www.linkedin.com/in/sidgureja"
+    }
+  }
+

src/Homepage.jsx

@@ -9,7 +9,7 @@ import Pagination from './components/Pagination/Pagination';
 import './App.css';
 import filenames from './ProfilesList.json';
 
-function App() {
+function Homepage() {
   const profilesRef = useRef();
   const [profiles, setProfiles] = useState([]);
   const [searching, setSearching] = useState(false);
@@ -67,7 +67,6 @@ function App() {
         .replace(/\s*,\s*/g, ' ')
         .replace(/\s+/g, ' ')
         .trim();
-
     if (criteria !== 'skill') {
       let normalizedValue = normalizeString(value);
 
@@ -81,23 +80,9 @@ function App() {
       });
 
       setProfiles(filteredResults);
-    } else if (criteria === 'skill') {
-      // if criteria is skill the it will filter the data
-      if (value.length > 0) {
-        let setOfSearchSkills = new Set(value.map((skill) => skill.toLowerCase())); // Convert searchSkills to lowercase for comparison
-        const filteredUsers = shuffledProfiles.filter(
-          (user) => user.skills.some((skill) => setOfSearchSkills.has(skill.toLowerCase())), // Ensure skill is also lowercase
-        );
-        setProfiles(filteredUsers);
-      } else {
-        //if skills are empty it will reset the data
-        setProfiles(shuffledProfiles);
-      }
-    } else {
-      setProfiles(false);
     }
-
     setSearching(true);
+    setCurrentPage(1); // Reset to first page when searching
   };
 
   const handleNextPage = () => {
@@ -164,4 +149,4 @@ function App() {
   );
 }
 
-export default App;
+export default Homepage;

src/ProfilesList.json

@@ -321,8 +321,7 @@
   "HarshS16.json",
   "jaya005.json",
   "divanshiii09.json",
-  "cypher4802.json",
-  "puneet426.json",
+  "sidgureja7803.json",
   "ritumehta302002.json",
   "Vivek-C365.json",
   "kumar1035.json",

src/components/Search/Search.jsx

@@ -1,16 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
 import useDebounce from '../../hooks/useDebouncer';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMagnifyingGlass, faXmark } from '@fortawesome/free-solid-svg-icons';
-import SearchSkillsContainer from './SearchSkillsContainer';
+
 
 function Search({ onSearch }) {
   const [searchValue, setSearchValue] = useState('');
   const [prevSearchValue, setPrevSearchValue] = useState('');
   const [searchCriteria, setSearchCriteria] = useState('name');
   const searchInput = useRef(null);
-
-  const [searchSkills, setSearchSkills] = useState([]);
+  const [isListening, setIsListening] = useState(false);
 
   const normalizeString = (str) =>
     str
@@ -99,19 +97,39 @@ function Search({ onSearch }) {
     searchInput.current.focus();
   }, []);
 
+  const handleVoiceSearch = () => {
+    if ('webkitSpeechRecognition' in window) {
+      const recognition = new window.webkitSpeechRecognition();
+      recognition.continuous = false;
+      recognition.interimResults = false;
+
+      recognition.onstart = () => {
+        setIsListening(true);
+      };
+
+      recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        setSearchValue(transcript);
+        handleSearch();
+      };
+
+      recognition.onerror = (event) => {
+        console.error('Speech recognition error', event.error);
+        setIsListening(false);
+      };
+
+      recognition.onend = () => {
+        setIsListening(false);
+      };
+
+      recognition.start();
+    } else {
+      alert('Speech recognition is not supported in your browser.');
+    }
+  };
+
   return (
-    <div className="relative pb-6">
-      <div className="relative flex items-center justify-end space-x-4 ">
-        <select
-          className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
-          value={searchCriteria}
-          onChange={handleCriteriaChange}
-        >
-          <option value="name">Name</option>
-          <option value="location">Location</option>
-          <option value="skill">Skill</option>
-        </select>
-        <div className="relative w-full">
+
           <input
             className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 w-full rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 pr-12 font-spaceMono text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
             ref={searchInput}
@@ -120,21 +138,6 @@ function Search({ onSearch }) {
             value={searchValue}
             placeholder={`Search user by ${searchCriteria}`}
             onKeyDown={handleSearchOnEnter}
-          />
-          {searchValue ? (
-            <FontAwesomeIcon
-              onClick={handleDeleteButtonClick}
-              className="hover:text-primaryFocus dark:hover:text-secondaryFocus absolute right-4 top-1/2 -translate-y-1/2 scale-125 transform cursor-pointer text-xl text-secondaryColor dark:text-white"
-              icon={faXmark}
-            />
-          ) : (
-            <FontAwesomeIcon
-              onClick={handleSearchButtonClick}
-              className="hover:text-primaryFocus dark:hover:text-secondaryFocus absolute right-4 top-1/2 -translate-y-1/2 transform cursor-pointer text-xl text-secondaryColor dark:text-white"
-              icon={faMagnifyingGlass}
-            />
-          )}
-        </div>
       </div>
 
       {/* This block show the skills the user searched */}