Adding autocomplete logic to frontend

open-social-front-v2/components/search/ResultsList.js

@@ -3,7 +3,7 @@ const ResultsList = (props) => {
     <ul className="absolute left-6 right-0 mt-1 bg-white border border-primary rounded-md shadow-lg z-10 animate-fade">
       {props.results.length > 0 ?
         props.results.map(result =>
-          <li key={result.id} className="px-4 py-2 cursor-pointer hover:bg-gray-100">{result.value}</li>)
+          <li key={result._id} className="px-4 py-2 cursor-pointer hover:bg-gray-100">{result.description}</li>)
         :
         <span className="loading loading-spinner loading-md text-primary"></span>
       }

open-social-front-v2/components/search/SearchBar.js

@@ -2,14 +2,15 @@ import { useState } from "react"
 import ResultsList from "@/components/search/ResultsList"
 import SearchIcon from "@/components/search/SearchIcon"
 
-const SearchBar = (props) => {
-  const fakeResults = [
-    {id: 1, value: "Intersectional feminism project, blabla"},
-    {id: 2, value: "Incel culture study and anti-feminism negative impact"}
-  ]
+import useSWR from "swr"
+
+const fetcher = url => fetch(url).then(r => r.json())
 
+const SearchBar = (props) => {
   const [onFocus, setOnFocus] = useState("max-lg:w-42")
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
+
+  const { data, error } = useSWR(`https://api.open-social.net/autocomplete?query=${query}`, fetcher)
 
   const handleOnFocus = () => {
     setOnFocus("lg:w-96 max-lg:w-64")
@@ -21,8 +22,6 @@ const SearchBar = (props) => {
 
   const handleSearch = (event) => {
     setQuery(event.target.value)
-
-    // implement logic here
   }
 
   return (
@@ -37,7 +36,7 @@ const SearchBar = (props) => {
                placeholder="Search" />
         <SearchIcon />
       </label>
-      {query.length > 2 ? <ResultsList results={fakeResults} /> : null}
+      {data && data.length > 0 ? <ResultsList results={data} /> : null}
     </div>
   )
 }