Merge pull request #116 from ctfguide-tech/feat-search-frontend

Introduce new Search UI/UX into dev.

Author: Laphatize

.env.development

@@ -9,8 +9,6 @@
 #NEXT_PUBLIC_APP_ID=1:166652277588:web:e08b9e19916451e14dcec1
 #NEXT_PUBLIC_APP_MEASUREMENT_ID=G-7ZNKM9VFN2
 
-# TDO
-
 NEXT_PUBLIC_API_URL=http://localhost:3001
 NEXT_PUBLIC_FRONTEND_URL=http://localhost:3000
 NEXT_PUBLIC_APP_API_KEY=AIzaSyAHz1s-UuNhlZ6aKvqwzmzzidzWxBKw9hw

src/components/nav/SearchModal.jsx

@@ -1,8 +1,31 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faBug, faLock, faUserSecret, faNetworkWired, faBrain, faTerminal } from '@fortawesome/free-solid-svg-icons';
+import { useState, useEffect } from 'react';
+import request from '@/utils/request';
+import {useRouter} from 'next/router';
 
 const SearchModal = ({ showSearchModal, setShowSearchModal }) => {
+  const [search, setSearch] = useState('');
+  const [results, setResults] = useState(null);
+  const router = useRouter();
+  const debouncedSearchTerm = useDebounce(search, 100); // 300ms delay
+
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      const endpoint = process.env.NEXT_PUBLIC_API_URL;
+      const url = `${endpoint}/search/${debouncedSearchTerm}`;
+      console.log(url);
+      request(url, "GET", null).then((res) => { 
+        setResults(res.results); 
+        console.log(res);
+      }).catch((err) => { console.log(err); });
+    }
+  }, [debouncedSearchTerm]);
+
+  const routeToChallenge = (id) => router.push("/challenges/"+id);
+  const routeToUser = (username) => router.push("/users/"+username);
+
   return (
     <>
       {showSearchModal && (
@@ -19,8 +42,31 @@ const SearchModal = ({ showSearchModal, setShowSearchModal }) => {
               <div className="px-4 py-5 sm:px-6 mx-auto">
                 <div className='flex items-center mx-auto'>
                   <FontAwesomeIcon icon={faSearch} className="w-5 h-5 mr-1 text-white" />
-                  <input placeholder="Search for challenges, users, or competitions" className='w-full border-0 text-xl focus:ring-0 bg-transparent text-white' autoFocus />
+                  <input onChange={e => {
+                    setSearch(e.target.value)
+                    if(e.target.value === '') setResults(null);
+                  }} placeholder="Search for challenges, users, or competitions" className='w-full border-0 text-xl focus:ring-0 bg-transparent text-white' autoFocus />
                 </div>
+
+                {
+                  results && search && (
+                    <div className='mt-5'>
+                      <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+                        {results.challenges.map((result, index) => (
+                          <div style={{cursor: "pointer"}} key={index} className='p-3 bg-neutral-700 rounded-lg' onClick={() => routeToChallenge(result.id)}>
+                            <h1 className='text-md text-white font-semibold'>{result.title}</h1>
+                          </div>
+                        ))}
+                        {results.users.map((result, index) => (
+                          <div style={{cursor: "pointer"}} key={index} className='p-3 bg-neutral-700 rounded-lg' onClick={() => routeToUser(result.username)}>
+                            <h1 className='text-md text-white font-semibold'>{result.username}</h1>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )
+                }
+
                 <h1 className='mt-10 text-xl text-white font-semibold mb-4'>Search by Category</h1>
                 <div className="flex flex-wrap gap-2">
                   <button className="px-4 py-2 rounded bg-blue-500 bg-opacity-50 border border-blue-800 hover:brightness-110 text-white flex items-center gap-2">
@@ -58,4 +104,20 @@ const SearchModal = ({ showSearchModal, setShowSearchModal }) => {
   );
 };
 
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
 export default SearchModal;

src/pages/login.jsx

@@ -50,7 +50,6 @@ export default function Login() {
 
   // do the same for google auth login
   async function handleSuccess(data) {
-    console.log("Setting account by google");
     const { credential } = data;
     const decode = jwtDecode(credential);
     const { email } = decode;