From 18baab692305f4b25fc30d96df26ac06b78b7061 Mon Sep 17 00:00:00 2001
From: rahul <rahulrnair007@outlook.com>
Date: Sat, 11 Dec 2021 08:21:20 +0530
Subject: [PATCH 1/7] add keyboard search feature

---
 src/components/AdvancedSearch.js | 67 +++++++++++++++++++++++++++-----
 1 file changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/components/AdvancedSearch.js b/src/components/AdvancedSearch.js
index bf46fe8..38d08e8 100644
--- a/src/components/AdvancedSearch.js
+++ b/src/components/AdvancedSearch.js
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react'
+import React, { forwardRef, useEffect, useState,useRef } from 'react'
 import { Container, Dropdown } from 'semantic-ui-react'
 import '../css/mainpagecss.css'
 
@@ -10,10 +10,13 @@ import AutoComplete from '../utils/AutoComplete'
 
 const { useImperativeHandle } = React;
 
-
 const AdvancedSearch = forwardRef((props, ref) => {
   const { buildSearchList } = props
   let inputElement;
+
+  const _searchBox=useRef(null)
+  const _inputHandle=useRef(null)
+
   const searchFilterOptions = [
     {
       key: 0,
@@ -42,6 +45,8 @@ const AdvancedSearch = forwardRef((props, ref) => {
   const [autoComplete, setAutoComplete] = useState(null)
   const [suggestions, setSuggestions] = useState([])
   const [isInputInFocus, setIsInputInFocus] = useState(false)
+  const [new_array,setNew_array]=useState([])
+  let [counter,setCounter]=useState(0)
 
   useImperativeHandle(ref, () => ({
     resetSearchState () {
@@ -49,7 +54,6 @@ const AdvancedSearch = forwardRef((props, ref) => {
       setFilter(0);
       setAutoComplete(null);
       setSuggestions([]);
-      setIsInputInFocus(false);
     }
   }));
 
@@ -60,10 +64,10 @@ const AdvancedSearch = forwardRef((props, ref) => {
   const handleSearch = e => {
     e && e.preventDefault()
     document.activeElement.blur()
-    buildSearchList(search, filter)
+    buildSearchList(_inputHandle.current.value, filter)
   }
-
   const focusHandler = e => {
+    setCounter(0)
     // setSuggestions(autoComplete.suggest(search))
     setTimeout(() => {
       setIsInputInFocus(document.activeElement === inputElement)
@@ -117,12 +121,53 @@ const AdvancedSearch = forwardRef((props, ref) => {
     autoComplete && setSuggestions(autoComplete.suggest(search))
   }, [search])
 
+const func=(e)=>{
+  if(e.code=='Enter'){
+    setSearch(new_array[counter]||_inputHandle.current.value)
+  }
+      if(new_array.length==0 && counter==0){
+      setCounter(0)
+    }else{
+      if(e.code=='ArrowDown'){
+        if(counter>new_array.length-1){
+          setCounter(counter--)
+        }else{
+          if(new_array[counter]==_inputHandle.current.value){
+          _inputHandle.current.value=new_array[counter+1]!=undefined?new_array[counter+1]:new_array[counter]
+          }else{
+            _inputHandle.current.value=new_array[counter]
+          }
+          setCounter(counter++)
+        }
+      }
+      if(e.code=='ArrowUp'){
+        counter==0?setCounter(0):setCounter(counter--)
+        if(new_array[counter]==_inputHandle.current.value){
+          _inputHandle.current.value=new_array[counter-1]!=undefined?new_array[counter-1]:new_array[counter]
+        }else{
+          _inputHandle.current.value=new_array[counter]
+        }
+      }
+  }
+}
+
+useEffect(()=>{
+_searchBox.current.addEventListener('keydown',func)
+return ()=>{
+  _searchBox.current.removeEventListener('keydown',func)
+}
+},[new_array])
+
+useEffect(()=>{
+  setCounter(0)
+  setNew_array(suggestions.map(el=>el))
+},[suggestions])
+
   return (
     <Container textAlign='center'>
       <form className="search-form" autocomplete="off">
-        <div id='searchBox'>
-          <input
-            value={search}
+        <div ref={_searchBox} id='searchBox'>
+          <input ref={_inputHandle} 
             onChange={e => {
               if (e.keyCode === 13) {
                 handleSearch()
@@ -143,7 +188,11 @@ const AdvancedSearch = forwardRef((props, ref) => {
                   key={content}
                   onClick={() => {
                     setSearch(content)
-                    buildSearchList(content, filter)
+                    /**buildSearchList is not needed because it is handled in handleSearch(),
+                     * buildSearchList should be called clickable route functionality needed, 
+                     * since search by keyboard is enabled buildSearchList need not be called
+                     */
+                    // buildSearchList(content, filter)
                   }}>{content}</p>
               ))}
             </div>)

From 34a0e4008f9e21e78a0e3676bd3cb303b97a6144 Mon Sep 17 00:00:00 2001
From: rahul r <rahulrnair007@outlook.com>
Date: Wed, 15 Dec 2021 09:26:13 +0530
Subject: [PATCH 2/7] update variable names

---
 src/components/AdvancedSearch.js | 294 +++++++++++++++++--------------
 1 file changed, 157 insertions(+), 137 deletions(-)

diff --git a/src/components/AdvancedSearch.js b/src/components/AdvancedSearch.js
index 38d08e8..8ae37e4 100644
--- a/src/components/AdvancedSearch.js
+++ b/src/components/AdvancedSearch.js
@@ -1,218 +1,238 @@
-import React, { forwardRef, useEffect, useState,useRef } from 'react'
-import { Container, Dropdown } from 'semantic-ui-react'
-import '../css/mainpagecss.css'
+import React, { forwardRef, useEffect, useState, useRef } from "react";
+import { Container, Dropdown } from "semantic-ui-react";
+import "../css/mainpagecss.css";
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
 
-import data from '../data/finalData.json'
-import AutoComplete from '../utils/AutoComplete'
+import data from "../data/finalData.json";
+import AutoComplete from "../utils/AutoComplete";
 
 const { useImperativeHandle } = React;
 
 const AdvancedSearch = forwardRef((props, ref) => {
-  const { buildSearchList } = props
+  const { buildSearchList } = props;
   let inputElement;
 
-  const _searchBox=useRef(null)
-  const _inputHandle=useRef(null)
+  const _searchBoxHandle = useRef(null);
+  const _inputHandle = useRef(null);
 
   const searchFilterOptions = [
     {
       key: 0,
-      text: 'Tech Stack',
-      value: 0
+      text: "Tech Stack",
+      value: 0,
     },
     {
       key: 1,
-      text: 'Organisation Name',
-      value: 1
+      text: "Organisation Name",
+      value: 1,
     },
     {
       key: 2,
-      text: 'Category',
-      value: 2
+      text: "Category",
+      value: 2,
     },
     {
       key: 3,
-      text: 'Topic',
-      value: 3
-    }
-  ]
+      text: "Topic",
+      value: 3,
+    },
+  ];
 
-  const [search, setSearch] = useState('')
-  const [filter, setFilter] = useState(0)
-  const [autoComplete, setAutoComplete] = useState(null)
-  const [suggestions, setSuggestions] = useState([])
-  const [isInputInFocus, setIsInputInFocus] = useState(false)
-  const [new_array,setNew_array]=useState([])
-  let [counter,setCounter]=useState(0)
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState(0);
+  const [autoComplete, setAutoComplete] = useState(null);
+  const [suggestions, setSuggestions] = useState([]);
+  const [isInputInFocus, setIsInputInFocus] = useState(false);
+  const [suggestionCopy, setsuggestionCopy] = useState([]);
+  let [searchCounter, setsearchCounter] = useState(0);
 
   useImperativeHandle(ref, () => ({
-    resetSearchState () {
-      setSearch('');
+    resetSearchState() {
+      setSearch("");
       setFilter(0);
       setAutoComplete(null);
       setSuggestions([]);
-    }
+    },
   }));
 
   const handleFilter = (unNeccesaryThing, e) => {
-    setFilter(e.value)
-  }
-
-  const handleSearch = e => {
-    e && e.preventDefault()
-    document.activeElement.blur()
-    buildSearchList(_inputHandle.current.value, filter)
-  }
-  const focusHandler = e => {
-    setCounter(0)
+    setFilter(e.value);
+  };
+
+  const handleSearch = (e) => {
+    e && e.preventDefault();
+    document.activeElement.blur();
+    buildSearchList(_inputHandle.current.value, filter);
+  };
+  const focusHandler = (e) => {
+    setsearchCounter(0);
     // setSuggestions(autoComplete.suggest(search))
     setTimeout(() => {
-      setIsInputInFocus(document.activeElement === inputElement)
+      setIsInputInFocus(document.activeElement === inputElement);
     }, 0);
-  }
+  };
 
   useEffect(() => {
-    document.body.addEventListener('click', focusHandler)
-    inputElement = document.getElementById('inputBox')
+    document.body.addEventListener("click", focusHandler);
+    inputElement = document.getElementById("inputBox");
     return () => {
-      document.body.removeEventListener('click', focusHandler)
-    }
-  }, [])
+      document.body.removeEventListener("click", focusHandler);
+    };
+  }, []);
 
   useEffect(() => {
-    let list = []
+    let list = [];
     if (filter === 0) {
       let dataSet = new Set();
-      data.forEach(e => {
-        dataSet.add(...e.tech)
-      })
-      list = [...[...dataSet].sort((a, b) => (a - b))]
+      data.forEach((e) => {
+        dataSet.add(...e.tech);
+      });
+      list = [...[...dataSet].sort((a, b) => a - b)];
     }
     if (filter === 1) {
-      data.forEach(e => {
-        list.push(e.name.replaceAll('/', '').replaceAll('  ', ' ').toLowerCase())
-      })
+      data.forEach((e) => {
+        list.push(
+          e.name.replaceAll("/", "").replaceAll("  ", " ").toLowerCase()
+        );
+      });
     }
     if (filter === 2) {
-      data.forEach(e => {
-        list.push(e.cat.replaceAll('/', '').replaceAll('  ', ' ').toLowerCase())
-      })
+      data.forEach((e) => {
+        list.push(
+          e.cat.replaceAll("/", "").replaceAll("  ", " ").toLowerCase()
+        );
+      });
     }
     if (filter === 3) {
       let dataSet = new Set();
-      data.forEach(e => {
-        dataSet.add(...e.top)
-      })
-      list = [...[...dataSet].sort((a, b) => (a - b))]
+      data.forEach((e) => {
+        dataSet.add(...e.top);
+      });
+      list = [...[...dataSet].sort((a, b) => a - b)];
     }
-    setAutoComplete(new AutoComplete(list))
-    setSuggestions([])
-    setSearch('')
-  }, [filter])
+    setAutoComplete(new AutoComplete(list));
+    setSuggestions([]);
+    setSearch("");
+  }, [filter]);
 
   useEffect(() => {
-    autoComplete && setSuggestions(autoComplete.suggest(''))
-  }, [autoComplete])
+    autoComplete && setSuggestions(autoComplete.suggest(""));
+  }, [autoComplete]);
 
   useEffect(() => {
-    autoComplete && setSuggestions(autoComplete.suggest(search))
-  }, [search])
-
-const func=(e)=>{
-  if(e.code=='Enter'){
-    setSearch(new_array[counter]||_inputHandle.current.value)
-  }
-      if(new_array.length==0 && counter==0){
-      setCounter(0)
-    }else{
-      if(e.code=='ArrowDown'){
-        if(counter>new_array.length-1){
-          setCounter(counter--)
-        }else{
-          if(new_array[counter]==_inputHandle.current.value){
-          _inputHandle.current.value=new_array[counter+1]!=undefined?new_array[counter+1]:new_array[counter]
-          }else{
-            _inputHandle.current.value=new_array[counter]
+    autoComplete && setSuggestions(autoComplete.suggest(search));
+  }, [search]);
+
+  const func = (e) => {
+    if (e.code == "Enter") {
+      setSearch(suggestionCopy[searchCounter] || _inputHandle.current.value);
+    }
+    if (suggestionCopy.length == 0 && searchCounter == 0) {
+      setsearchCounter(0);
+    } else {
+      if (e.code == "ArrowDown") {
+        if (searchCounter > suggestionCopy.length - 1) {
+          setsearchCounter(searchCounter--);
+        } else {
+          if (suggestionCopy[searchCounter] == _inputHandle.current.value) {
+            _inputHandle.current.value =
+              suggestionCopy[searchCounter + 1] != undefined
+                ? suggestionCopy[searchCounter + 1]
+                : suggestionCopy[searchCounter];
+          } else {
+            _inputHandle.current.value = suggestionCopy[searchCounter];
           }
-          setCounter(counter++)
+          setsearchCounter(searchCounter++);
         }
       }
-      if(e.code=='ArrowUp'){
-        counter==0?setCounter(0):setCounter(counter--)
-        if(new_array[counter]==_inputHandle.current.value){
-          _inputHandle.current.value=new_array[counter-1]!=undefined?new_array[counter-1]:new_array[counter]
-        }else{
-          _inputHandle.current.value=new_array[counter]
+      if (e.code == "ArrowUp") {
+        searchCounter == 0
+          ? setsearchCounter(0)
+          : setsearchCounter(searchCounter--);
+        if (suggestionCopy[searchCounter] == _inputHandle.current.value) {
+          _inputHandle.current.value =
+            suggestionCopy[searchCounter - 1] != undefined
+              ? suggestionCopy[searchCounter - 1]
+              : suggestionCopy[searchCounter];
+        } else {
+          _inputHandle.current.value = suggestionCopy[searchCounter];
         }
       }
-  }
-}
+    }
+  };
 
-useEffect(()=>{
-_searchBox.current.addEventListener('keydown',func)
-return ()=>{
-  _searchBox.current.removeEventListener('keydown',func)
-}
-},[new_array])
+  useEffect(() => {
+    _searchBoxHandle.current.addEventListener("keydown", func);
+    return () => {
+      _searchBoxHandle.current.removeEventListener("keydown", func);
+    };
+  }, [suggestionCopy]);
 
-useEffect(()=>{
-  setCounter(0)
-  setNew_array(suggestions.map(el=>el))
-},[suggestions])
+  useEffect(() => {
+    setsearchCounter(0);
+    setsuggestionCopy(suggestions.map((el) => el));
+  }, [suggestions]);
 
   return (
-    <Container textAlign='center'>
+    <Container textAlign="center">
       <form className="search-form" autocomplete="off">
-        <div ref={_searchBox} id='searchBox'>
-          <input ref={_inputHandle} 
-            onChange={e => {
+        <div ref={_searchBoxHandle} id="searchBox">
+          <input
+            ref={_inputHandle}
+            onChange={(e) => {
               if (e.keyCode === 13) {
-                handleSearch()
-                return
+                handleSearch();
+                return;
               }
-              setSearch(e.target.value.toLowerCase())
+              setSearch(e.target.value.toLowerCase());
             }}
-            type='text'
-            name='search'
-            placeholder='Search...'
+            type="text"
+            name="search"
+            placeholder="Search..."
             id="inputBox"
             autocomplete="off"
           />
-          {
-            (isInputInFocus && suggestions.length > 0 && suggestions[0] !== search) && (<div className="suggestions-dropDown">
-              {suggestions.map(content => (
-                content !== search && <p
-                  key={content}
-                  onClick={() => {
-                    setSearch(content)
-                    /**buildSearchList is not needed because it is handled in handleSearch(),
-                     * buildSearchList should be called clickable route functionality needed, 
-                     * since search by keyboard is enabled buildSearchList need not be called
-                     */
-                    // buildSearchList(content, filter)
-                  }}>{content}</p>
-              ))}
-            </div>)
-          }
+          {isInputInFocus &&
+            suggestions.length > 0 &&
+            suggestions[0] !== search && (
+              <div className="suggestions-dropDown">
+                {suggestions.map(
+                  (content) =>
+                    content !== search && (
+                      <p
+                        key={content}
+                        onClick={() => {
+                          setSearch(content);
+                          /**buildSearchList is not needed because it is handled in handleSearch(),
+                           * buildSearchList should be called when clickable route functionality needed,
+                           * since search by keyboard is enabled buildSearchList need not be called
+                           */
+                          // buildSearchList(content, filter)
+                        }}
+                      >
+                        {content}
+                      </p>
+                    )
+                )}
+              </div>
+            )}
         </div>
-        <button type='submit' onClick={handleSearch} className='search-btn'>
-          <FontAwesomeIcon color='white' className='fa-2x' icon={faSearch} />{' '}
+        <button type="submit" onClick={handleSearch} className="search-btn">
+          <FontAwesomeIcon color="white" className="fa-2x" icon={faSearch} />{" "}
         </button>
 
         <Dropdown
           value={filter}
           onChange={handleFilter}
-          id='searchFilter'
+          id="searchFilter"
           selection
           options={searchFilterOptions}
         />
-
       </form>
     </Container>
-  )
+  );
 });
 
-export default AdvancedSearch
+export default AdvancedSearch;

From 344448cdd6facbcb7e3277116eae3cd4168980db Mon Sep 17 00:00:00 2001
From: Rahul R <55950758+iamrahulrnair@users.noreply.github.com>
Date: Wed, 15 Dec 2021 12:36:04 +0530
Subject: [PATCH 3/7] Update AdvancedSearch.js

---
 src/components/AdvancedSearch.js | 52 ++++++++++++++++----------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/AdvancedSearch.js b/src/components/AdvancedSearch.js
index 8ae37e4..c711391 100644
--- a/src/components/AdvancedSearch.js
+++ b/src/components/AdvancedSearch.js
@@ -1,12 +1,12 @@
-import React, { forwardRef, useEffect, useState, useRef } from "react";
-import { Container, Dropdown } from "semantic-ui-react";
-import "../css/mainpagecss.css";
+import React, { forwardRef, useEffect, useState, useRef } from 'react';
+import { Container, Dropdown } from 'semantic-ui-react';
+import '../css/mainpagecss.css';
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
 
-import data from "../data/finalData.json";
-import AutoComplete from "../utils/AutoComplete";
+import data from '../data/finalData.json';
+import AutoComplete from '../utils/AutoComplete';
 
 const { useImperativeHandle } = React;
 
@@ -20,27 +20,27 @@ const AdvancedSearch = forwardRef((props, ref) => {
   const searchFilterOptions = [
     {
       key: 0,
-      text: "Tech Stack",
+      text: 'Tech Stack',
       value: 0,
     },
     {
       key: 1,
-      text: "Organisation Name",
+      text: 'Organisation Name',
       value: 1,
     },
     {
       key: 2,
-      text: "Category",
+      text: 'Category',
       value: 2,
     },
     {
       key: 3,
-      text: "Topic",
+      text: 'Topic',
       value: 3,
     },
   ];
 
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   const [filter, setFilter] = useState(0);
   const [autoComplete, setAutoComplete] = useState(null);
   const [suggestions, setSuggestions] = useState([]);
@@ -50,7 +50,7 @@ const AdvancedSearch = forwardRef((props, ref) => {
 
   useImperativeHandle(ref, () => ({
     resetSearchState() {
-      setSearch("");
+      setSearch('');
       setFilter(0);
       setAutoComplete(null);
       setSuggestions([]);
@@ -75,10 +75,10 @@ const AdvancedSearch = forwardRef((props, ref) => {
   };
 
   useEffect(() => {
-    document.body.addEventListener("click", focusHandler);
-    inputElement = document.getElementById("inputBox");
+    document.body.addEventListener('click', focusHandler);
+    inputElement = document.getElementById('inputBox');
     return () => {
-      document.body.removeEventListener("click", focusHandler);
+      document.body.removeEventListener('click', focusHandler);
     };
   }, []);
 
@@ -94,14 +94,14 @@ const AdvancedSearch = forwardRef((props, ref) => {
     if (filter === 1) {
       data.forEach((e) => {
         list.push(
-          e.name.replaceAll("/", "").replaceAll("  ", " ").toLowerCase()
+          e.name.replaceAll('/', '').replaceAll('  ', ' ').toLowerCase()
         );
       });
     }
     if (filter === 2) {
       data.forEach((e) => {
         list.push(
-          e.cat.replaceAll("/", "").replaceAll("  ", " ").toLowerCase()
+          e.cat.replaceAll('/', '').replaceAll('  ', ' ').toLowerCase()
         );
       });
     }
@@ -114,11 +114,11 @@ const AdvancedSearch = forwardRef((props, ref) => {
     }
     setAutoComplete(new AutoComplete(list));
     setSuggestions([]);
-    setSearch("");
+    setSearch('');
   }, [filter]);
 
   useEffect(() => {
-    autoComplete && setSuggestions(autoComplete.suggest(""));
+    autoComplete && setSuggestions(autoComplete.suggest(''));
   }, [autoComplete]);
 
   useEffect(() => {
@@ -126,13 +126,13 @@ const AdvancedSearch = forwardRef((props, ref) => {
   }, [search]);
 
   const func = (e) => {
-    if (e.code == "Enter") {
+    if (e.code == 'Enter') {
       setSearch(suggestionCopy[searchCounter] || _inputHandle.current.value);
     }
     if (suggestionCopy.length == 0 && searchCounter == 0) {
       setsearchCounter(0);
     } else {
-      if (e.code == "ArrowDown") {
+      if (e.code == 'ArrowDown') {
         if (searchCounter > suggestionCopy.length - 1) {
           setsearchCounter(searchCounter--);
         } else {
@@ -147,7 +147,7 @@ const AdvancedSearch = forwardRef((props, ref) => {
           setsearchCounter(searchCounter++);
         }
       }
-      if (e.code == "ArrowUp") {
+      if (e.code == 'ArrowUp') {
         searchCounter == 0
           ? setsearchCounter(0)
           : setsearchCounter(searchCounter--);
@@ -164,9 +164,9 @@ const AdvancedSearch = forwardRef((props, ref) => {
   };
 
   useEffect(() => {
-    _searchBoxHandle.current.addEventListener("keydown", func);
+    _searchBoxHandle.current.addEventListener('keydown', func);
     return () => {
-      _searchBoxHandle.current.removeEventListener("keydown", func);
+      _searchBoxHandle.current.removeEventListener('keydown', func);
     };
   }, [suggestionCopy]);
 
@@ -220,7 +220,7 @@ const AdvancedSearch = forwardRef((props, ref) => {
             )}
         </div>
         <button type="submit" onClick={handleSearch} className="search-btn">
-          <FontAwesomeIcon color="white" className="fa-2x" icon={faSearch} />{" "}
+          <FontAwesomeIcon color="white" className="fa-2x" icon={faSearch} />{' '}
         </button>
 
         <Dropdown

From 246b1e36426bbcbd40114db36856987e089f2be5 Mon Sep 17 00:00:00 2001
From: Rahul R <55950758+iamrahulrnair@users.noreply.github.com>
Date: Wed, 15 Dec 2021 12:43:40 +0530
Subject: [PATCH 4/7] Update AdvancedSearch.js

---
 src/components/AdvancedSearch.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/AdvancedSearch.js b/src/components/AdvancedSearch.js
index c711391..c7f742c 100644
--- a/src/components/AdvancedSearch.js
+++ b/src/components/AdvancedSearch.js
@@ -176,9 +176,9 @@ const AdvancedSearch = forwardRef((props, ref) => {
   }, [suggestions]);
 
   return (
-    <Container textAlign="center">
-      <form className="search-form" autocomplete="off">
-        <div ref={_searchBoxHandle} id="searchBox">
+    <Container textAlign='center'>
+      <form className='search-form' autocomplete='off'>
+        <div ref={_searchBoxHandle} id='searchBox'>
           <input
             ref={_inputHandle}
             onChange={(e) => {
@@ -188,16 +188,16 @@ const AdvancedSearch = forwardRef((props, ref) => {
               }
               setSearch(e.target.value.toLowerCase());
             }}
-            type="text"
-            name="search"
-            placeholder="Search..."
-            id="inputBox"
-            autocomplete="off"
+            type='text'
+            name='search'
+            placeholder='Search...'
+            id='inputBox'
+            autocomplete='off'
           />
           {isInputInFocus &&
             suggestions.length > 0 &&
             suggestions[0] !== search && (
-              <div className="suggestions-dropDown">
+              <div className='suggestions-dropDown'>
                 {suggestions.map(
                   (content) =>
                     content !== search && (
@@ -219,14 +219,14 @@ const AdvancedSearch = forwardRef((props, ref) => {
               </div>
             )}
         </div>
-        <button type="submit" onClick={handleSearch} className="search-btn">
-          <FontAwesomeIcon color="white" className="fa-2x" icon={faSearch} />{' '}
+        <button type='submit' onClick={handleSearch} className='search-btn'>
+          <FontAwesomeIcon color='white' className='fa-2x' icon={faSearch} />{' '}
         </button>
 
         <Dropdown
           value={filter}
           onChange={handleFilter}
-          id="searchFilter"
+          id='searchFilter'
           selection
           options={searchFilterOptions}
         />

From c2cd262aaf812b7f6bb75dd6406c367e94f03511 Mon Sep 17 00:00:00 2001
From: Rahul R <55950758+iamrahulrnair@users.noreply.github.com>
Date: Wed, 15 Dec 2021 12:45:33 +0530
Subject: [PATCH 5/7] Update AdvancedSearch.js

---
 src/components/AdvancedSearch.js | 170 +++++++++++++++----------------
 1 file changed, 85 insertions(+), 85 deletions(-)

diff --git a/src/components/AdvancedSearch.js b/src/components/AdvancedSearch.js
index c7f742c..76cdefc 100644
--- a/src/components/AdvancedSearch.js
+++ b/src/components/AdvancedSearch.js
@@ -1,21 +1,21 @@
-import React, { forwardRef, useEffect, useState, useRef } from 'react';
-import { Container, Dropdown } from 'semantic-ui-react';
-import '../css/mainpagecss.css';
+import React, { forwardRef, useEffect, useState, useRef } from 'react'
+import { Container, Dropdown } from 'semantic-ui-react'
+import '../css/mainpagecss.css'
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
 
-import data from '../data/finalData.json';
-import AutoComplete from '../utils/AutoComplete';
+import data from '../data/finalData.json'
+import AutoComplete from '../utils/AutoComplete'
 
-const { useImperativeHandle } = React;
+const { useImperativeHandle } = React
 
 const AdvancedSearch = forwardRef((props, ref) => {
-  const { buildSearchList } = props;
-  let inputElement;
+  const { buildSearchList } = props
+  let inputElement
 
-  const _searchBoxHandle = useRef(null);
-  const _inputHandle = useRef(null);
+  const _searchBoxHandle = useRef(null)
+  const _inputHandle = useRef(null)
 
   const searchFilterOptions = [
     {
@@ -38,142 +38,142 @@ const AdvancedSearch = forwardRef((props, ref) => {
       text: 'Topic',
       value: 3,
     },
-  ];
+  ]
 
-  const [search, setSearch] = useState('');
-  const [filter, setFilter] = useState(0);
-  const [autoComplete, setAutoComplete] = useState(null);
-  const [suggestions, setSuggestions] = useState([]);
-  const [isInputInFocus, setIsInputInFocus] = useState(false);
-  const [suggestionCopy, setsuggestionCopy] = useState([]);
-  let [searchCounter, setsearchCounter] = useState(0);
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState(0)
+  const [autoComplete, setAutoComplete] = useState(null)
+  const [suggestions, setSuggestions] = useState([])
+  const [isInputInFocus, setIsInputInFocus] = useState(false)
+  const [suggestionCopy, setsuggestionCopy] = useState([])
+  let [searchCounter, setsearchCounter] = useState(0)
 
   useImperativeHandle(ref, () => ({
     resetSearchState() {
-      setSearch('');
-      setFilter(0);
-      setAutoComplete(null);
-      setSuggestions([]);
+      setSearch('')
+      setFilter(0)
+      setAutoComplete(null)
+      setSuggestions([])
     },
-  }));
+  }))
 
   const handleFilter = (unNeccesaryThing, e) => {
-    setFilter(e.value);
-  };
+    setFilter(e.value)
+  }
 
   const handleSearch = (e) => {
-    e && e.preventDefault();
-    document.activeElement.blur();
-    buildSearchList(_inputHandle.current.value, filter);
-  };
+    e && e.preventDefault()
+    document.activeElement.blur()
+    buildSearchList(_inputHandle.current.value, filter)
+  }
   const focusHandler = (e) => {
-    setsearchCounter(0);
+    setsearchCounter(0)
     // setSuggestions(autoComplete.suggest(search))
     setTimeout(() => {
-      setIsInputInFocus(document.activeElement === inputElement);
-    }, 0);
-  };
+      setIsInputInFocus(document.activeElement === inputElement)
+    }, 0)
+  }
 
   useEffect(() => {
-    document.body.addEventListener('click', focusHandler);
-    inputElement = document.getElementById('inputBox');
+    document.body.addEventListener('click', focusHandler)
+    inputElement = document.getElementById('inputBox')
     return () => {
-      document.body.removeEventListener('click', focusHandler);
-    };
-  }, []);
+      document.body.removeEventListener('click', focusHandler)
+    }
+  }, [])
 
   useEffect(() => {
-    let list = [];
+    let list = []
     if (filter === 0) {
-      let dataSet = new Set();
+      let dataSet = new Set()
       data.forEach((e) => {
-        dataSet.add(...e.tech);
-      });
-      list = [...[...dataSet].sort((a, b) => a - b)];
+        dataSet.add(...e.tech)
+      })
+      list = [...[...dataSet].sort((a, b) => a - b)]
     }
     if (filter === 1) {
       data.forEach((e) => {
         list.push(
           e.name.replaceAll('/', '').replaceAll('  ', ' ').toLowerCase()
-        );
-      });
+        )
+      })
     }
     if (filter === 2) {
       data.forEach((e) => {
         list.push(
           e.cat.replaceAll('/', '').replaceAll('  ', ' ').toLowerCase()
-        );
-      });
+        )
+      })
     }
     if (filter === 3) {
-      let dataSet = new Set();
+      let dataSet = new Set()
       data.forEach((e) => {
-        dataSet.add(...e.top);
-      });
-      list = [...[...dataSet].sort((a, b) => a - b)];
+        dataSet.add(...e.top)
+      })
+      list = [...[...dataSet].sort((a, b) => a - b)]
     }
-    setAutoComplete(new AutoComplete(list));
-    setSuggestions([]);
-    setSearch('');
-  }, [filter]);
+    setAutoComplete(new AutoComplete(list))
+    setSuggestions([])
+    setSearch('')
+  }, [filter])
 
   useEffect(() => {
-    autoComplete && setSuggestions(autoComplete.suggest(''));
-  }, [autoComplete]);
+    autoComplete && setSuggestions(autoComplete.suggest(''))
+  }, [autoComplete])
 
   useEffect(() => {
-    autoComplete && setSuggestions(autoComplete.suggest(search));
-  }, [search]);
+    autoComplete && setSuggestions(autoComplete.suggest(search))
+  }, [search])
 
   const func = (e) => {
     if (e.code == 'Enter') {
-      setSearch(suggestionCopy[searchCounter] || _inputHandle.current.value);
+      setSearch(suggestionCopy[searchCounter] || _inputHandle.current.value)
     }
     if (suggestionCopy.length == 0 && searchCounter == 0) {
-      setsearchCounter(0);
+      setsearchCounter(0)
     } else {
       if (e.code == 'ArrowDown') {
         if (searchCounter > suggestionCopy.length - 1) {
-          setsearchCounter(searchCounter--);
+          setsearchCounter(searchCounter--)
         } else {
           if (suggestionCopy[searchCounter] == _inputHandle.current.value) {
             _inputHandle.current.value =
               suggestionCopy[searchCounter + 1] != undefined
                 ? suggestionCopy[searchCounter + 1]
-                : suggestionCopy[searchCounter];
+                : suggestionCopy[searchCounter]
           } else {
-            _inputHandle.current.value = suggestionCopy[searchCounter];
+            _inputHandle.current.value = suggestionCopy[searchCounter]
           }
-          setsearchCounter(searchCounter++);
+          setsearchCounter(searchCounter++)
         }
       }
       if (e.code == 'ArrowUp') {
         searchCounter == 0
           ? setsearchCounter(0)
-          : setsearchCounter(searchCounter--);
+          : setsearchCounter(searchCounter--)
         if (suggestionCopy[searchCounter] == _inputHandle.current.value) {
           _inputHandle.current.value =
             suggestionCopy[searchCounter - 1] != undefined
               ? suggestionCopy[searchCounter - 1]
-              : suggestionCopy[searchCounter];
+              : suggestionCopy[searchCounter]
         } else {
-          _inputHandle.current.value = suggestionCopy[searchCounter];
+          _inputHandle.current.value = suggestionCopy[searchCounter]
         }
       }
     }
-  };
+  }
 
   useEffect(() => {
-    _searchBoxHandle.current.addEventListener('keydown', func);
+    _searchBoxHandle.current.addEventListener('keydown', func)
     return () => {
-      _searchBoxHandle.current.removeEventListener('keydown', func);
-    };
-  }, [suggestionCopy]);
+      _searchBoxHandle.current.removeEventListener('keydown', func)
+    }
+  }, [suggestionCopy])
 
   useEffect(() => {
-    setsearchCounter(0);
-    setsuggestionCopy(suggestions.map((el) => el));
-  }, [suggestions]);
+    setsearchCounter(0)
+    setsuggestionCopy(suggestions.map((el) => el))
+  }, [suggestions])
 
   return (
     <Container textAlign='center'>
@@ -183,10 +183,10 @@ const AdvancedSearch = forwardRef((props, ref) => {
             ref={_inputHandle}
             onChange={(e) => {
               if (e.keyCode === 13) {
-                handleSearch();
-                return;
+                handleSearch()
+                return
               }
-              setSearch(e.target.value.toLowerCase());
+              setSearch(e.target.value.toLowerCase())
             }}
             type='text'
             name='search'
@@ -204,7 +204,7 @@ const AdvancedSearch = forwardRef((props, ref) => {
                       <p
                         key={content}
                         onClick={() => {
-                          setSearch(content);
+                          setSearch(content)
                           /**buildSearchList is not needed because it is handled in handleSearch(),
                            * buildSearchList should be called when clickable route functionality needed,
                            * since search by keyboard is enabled buildSearchList need not be called
@@ -232,7 +232,7 @@ const AdvancedSearch = forwardRef((props, ref) => {
         />
       </form>
     </Container>
-  );
-});
+  )
+})
 
-export default AdvancedSearch;
+export default AdvancedSearch

From 7a76feec8789aaf74ec16f6eaa79624306bfc626 Mon Sep 17 00:00:00 2001
From: Rahul R <55950758+iamrahulrnair@users.noreply.github.com>
Date: Tue, 21 Dec 2021 10:12:40 +0530
Subject: [PATCH 6/7] Update AdvancedSearch.js

---
 src/components/AdvancedSearch.js | 36 ++++++++++++++++----------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/AdvancedSearch.js b/src/components/AdvancedSearch.js
index 76cdefc..41cdc1a 100644
--- a/src/components/AdvancedSearch.js
+++ b/src/components/AdvancedSearch.js
@@ -8,11 +8,11 @@ import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import data from '../data/finalData.json'
 import AutoComplete from '../utils/AutoComplete'
 
-const { useImperativeHandle } = React
+const { useImperativeHandle } = React;
 
 const AdvancedSearch = forwardRef((props, ref) => {
   const { buildSearchList } = props
-  let inputElement
+  let inputElement;
 
   const _searchBoxHandle = useRef(null)
   const _inputHandle = useRef(null)
@@ -21,22 +21,22 @@ const AdvancedSearch = forwardRef((props, ref) => {
     {
       key: 0,
       text: 'Tech Stack',
-      value: 0,
+      value: 0
     },
     {
       key: 1,
       text: 'Organisation Name',
-      value: 1,
+      value: 1
     },
     {
       key: 2,
       text: 'Category',
-      value: 2,
+      value: 2
     },
     {
       key: 3,
       text: 'Topic',
-      value: 3,
+      value: 3
     },
   ]
 
@@ -50,18 +50,18 @@ const AdvancedSearch = forwardRef((props, ref) => {
 
   useImperativeHandle(ref, () => ({
     resetSearchState() {
-      setSearch('')
-      setFilter(0)
-      setAutoComplete(null)
-      setSuggestions([])
-    },
+      setSearch('');
+      setFilter(0);
+      setAutoComplete(null);
+      setSuggestions([]);
+    }
   }))
 
   const handleFilter = (unNeccesaryThing, e) => {
     setFilter(e.value)
   }
 
-  const handleSearch = (e) => {
+  const handleSearch = e => {
     e && e.preventDefault()
     document.activeElement.blur()
     buildSearchList(_inputHandle.current.value, filter)
@@ -71,7 +71,7 @@ const AdvancedSearch = forwardRef((props, ref) => {
     // setSuggestions(autoComplete.suggest(search))
     setTimeout(() => {
       setIsInputInFocus(document.activeElement === inputElement)
-    }, 0)
+    }, 0);
   }
 
   useEffect(() => {
@@ -85,11 +85,11 @@ const AdvancedSearch = forwardRef((props, ref) => {
   useEffect(() => {
     let list = []
     if (filter === 0) {
-      let dataSet = new Set()
-      data.forEach((e) => {
+      let dataSet = new Set();
+      data.forEach(e => {
         dataSet.add(...e.tech)
       })
-      list = [...[...dataSet].sort((a, b) => a - b)]
+      list = [...[...dataSet].sort((a, b) => (a - b))]
     }
     if (filter === 1) {
       data.forEach((e) => {
@@ -106,8 +106,8 @@ const AdvancedSearch = forwardRef((props, ref) => {
       })
     }
     if (filter === 3) {
-      let dataSet = new Set()
-      data.forEach((e) => {
+      let dataSet = new Set();
+      data.forEach(e => {
         dataSet.add(...e.top)
       })
       list = [...[...dataSet].sort((a, b) => a - b)]

From 030189be003ed78d1205eb5f5371fd16894436af Mon Sep 17 00:00:00 2001
From: Rahul R <55950758+iamrahulrnair@users.noreply.github.com>
Date: Tue, 21 Dec 2021 10:15:36 +0530
Subject: [PATCH 7/7] Update AdvancedSearch.js

---
 src/components/AdvancedSearch.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/AdvancedSearch.js b/src/components/AdvancedSearch.js
index 41cdc1a..b6b5408 100644
--- a/src/components/AdvancedSearch.js
+++ b/src/components/AdvancedSearch.js
@@ -110,7 +110,7 @@ const AdvancedSearch = forwardRef((props, ref) => {
       data.forEach(e => {
         dataSet.add(...e.top)
       })
-      list = [...[...dataSet].sort((a, b) => a - b)]
+      list = [...[...dataSet].sort((a, b) => (a - b))]
     }
     setAutoComplete(new AutoComplete(list))
     setSuggestions([])
@@ -177,11 +177,11 @@ const AdvancedSearch = forwardRef((props, ref) => {
 
   return (
     <Container textAlign='center'>
-      <form className='search-form' autocomplete='off'>
+      <form className="search-form" autocomplete='off'>
         <div ref={_searchBoxHandle} id='searchBox'>
           <input
             ref={_inputHandle}
-            onChange={(e) => {
+            onChange={e => {
               if (e.keyCode === 13) {
                 handleSearch()
                 return
@@ -191,8 +191,8 @@ const AdvancedSearch = forwardRef((props, ref) => {
             type='text'
             name='search'
             placeholder='Search...'
-            id='inputBox'
-            autocomplete='off'
+            id="inputBox"
+            autocomplete="off"
           />
           {isInputInFocus &&
             suggestions.length > 0 &&
@@ -205,10 +205,6 @@ const AdvancedSearch = forwardRef((props, ref) => {
                         key={content}
                         onClick={() => {
                           setSearch(content)
-                          /**buildSearchList is not needed because it is handled in handleSearch(),
-                           * buildSearchList should be called when clickable route functionality needed,
-                           * since search by keyboard is enabled buildSearchList need not be called
-                           */
                           // buildSearchList(content, filter)
                         }}
                       >
@@ -233,6 +229,6 @@ const AdvancedSearch = forwardRef((props, ref) => {
       </form>
     </Container>
   )
-})
+});
 
 export default AdvancedSearch