debouncing results and sort of getting results back

packages/api/routes/search.ts

@@ -1,7 +1,7 @@
 import express, { Application, Request, Response } from "express";
 
-import SearchResponse from "@nirvana/core/responses/search.response";
 import { User } from "@nirvana/core/models";
+import UserSearchResponse from "../../core/responses/userSearch.response";
 import { UserService } from "../services/user.service";
 import { authCheck } from "../middleware/auth";
 
@@ -11,12 +11,12 @@ export default function getSearchRoutes() {
   router.use(express.json());
 
   // get user details based on id token
-  router.get("/", authCheck, handleSearch);
+  router.get("/users", authCheck, handleUserSearch);
 
   return router;
 }
 
-async function handleSearch(req: Request, res: Response) {
+async function handleUserSearch(req: Request, res: Response) {
   try {
     const { query } = req.query;
 
@@ -30,7 +30,7 @@ async function handleSearch(req: Request, res: Response) {
       query as string
     );
 
-    const resObj = new SearchResponse(users ?? []);
+    const resObj = new UserSearchResponse(users ?? []);
 
     res.send(resObj);
   } catch (error) {

packages/core/responses/userSearch.response.ts

@@ -3,7 +3,7 @@ import { User } from "@nirvana/core/models";
 /**
  * Full results from the global search
  */
-export default class SearchResponse {
+export default class UserSearchResponse {
   // all friends/contacts matching search
   contacts?: User[];
 

packages/desktop/src/components/User/basicUserDetailsRow.tsx

@@ -0,0 +1,35 @@
+import { FaAngleRight } from "react-icons/fa";
+import { Tooltip } from "antd";
+import { User } from "@nirvana/core/models/user.model";
+
+export default function renderUserRow(user: User) {
+  return (
+    <span
+      key={user._id.toString()}
+      className="border-t border-t-zinc-500 py-5 flex flex-row justify-start 
+    items-center w-full hover:bg-zinc-600 cursor-pointer group"
+    >
+      <span className="relative mx-5">
+        <img
+          src={user.picture}
+          className="rounded-lg h-8 hover:bg-zinc-200 hover:cursor-pointer hover:scale-110"
+          alt=""
+        />
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+      </span>
+
+      <span className="flex flex-col items-start">
+        <span className="text-zinc-200 text-lg font-semibold">{user.name}</span>
+
+        <span className="text-zinc-300">{user.email}</span>
+      </span>
+
+      {/* actions */}
+      <Tooltip title="Request connect">
+        <button className="hover:bg-zinc-300 p-1 flex flex-row items-center justify-center ml-auto">
+          <FaAngleRight className="group-hover:text-zinc-300 text-lg" />
+        </button>
+      </Tooltip>
+    </span>
+  );
+}

packages/desktop/src/controller/index.tsx

@@ -23,15 +23,11 @@ export function useGetUserDetails() {
   });
 }
 
-// export function useSearch() {
-//   const authTokens = useRecoilValue($authTokens);
-//   const searchQuery = useRecoilValue($searchQuery);
-
-//   return useQuery(
-//     Querytypes.GET_SEARCH_RESULTS,
-//     () => search(authTokens.idToken, searchQuery),
-//     { enabled: searchQuery ? true : false, refetchOnWindowFocus: false }
-//   );
-// }
+export function useUserSearch(searchQuery: string) {
+  return useQuery("USER_SEARCH", () => ApiCalls.userSearch(searchQuery), {
+    enabled: searchQuery ? true : false,
+    refetchOnWindowFocus: false,
+  });
+}
 
 // =========== MUTATIONS

packages/desktop/src/controller/nirvanaApi.ts

@@ -3,6 +3,7 @@ import axios, { AxiosRequestConfig, AxiosResponse, Method } from "axios";
 import LoginResponse from "../../../core/responses/login.response";
 import { User } from "@nirvana/core/models";
 import UserDetailsResponse from "../../../core/responses/userDetails.response";
+import UserSearchResponse from "../../../core/responses/userSearch.response";
 
 // export const localHost = process.env.REACT_APP_API_DOMAIN;
 
@@ -60,8 +61,17 @@ async function getUserDetails(): Promise<UserDetailsResponse> {
   return await NirvanaApi.fetch(`/user`, "GET", true);
 }
 
+async function userSearch(searchQuery: string): Promise<UserSearchResponse> {
+  return await NirvanaApi.fetch(
+    `/search/users?query=${searchQuery}`,
+    "GET",
+    true
+  );
+}
+
 export const ApiCalls = {
   login,
   authCheck,
   getUserDetails,
+  userSearch,
 };

packages/desktop/src/pages/Home/newConvo/index.tsx

@@ -6,23 +6,81 @@ import {
   InputLabel,
   TextField,
 } from "@mui/material";
+import { useEffect, useState } from "react";
 
+import { $newConvoPage } from "../../../controller/recoil";
 import { Search } from "@mui/icons-material";
+import renderUserRow from "../../../components/User/basicUserDetailsRow";
+import { useSetRecoilState } from "recoil";
+import { useUserSearch } from "../../../controller/index";
 
 export default function NewConvo() {
+  const setNewPageConvo = useSetRecoilState($newConvoPage);
+  const [userSearchQuery, setuserSearchQuery] = useState<string>("");
+  const [debUserSearchQ, setDebUserSearchQ] = useState<string>("");
+
+  const { data, isLoading, isError, refetch } = useUserSearch(debUserSearchQ);
+
+  const [debTimeout, setdebTimeout] = useState<any>();
+
+  // trigger the react query to refetch once our deb/"final" search query is set
+  useEffect(() => {
+    if (debUserSearchQ) refetch();
+  }, [debUserSearchQ]);
+
+  const handleGoBack = () => {
+    setNewPageConvo(false);
+  };
+
+  const triggerSearch = (searchQ: string) => {
+    // update search query now and
+
+    setDebUserSearchQ(searchQ);
+  };
+
+  const handleUpdateSearchInput = (event: any) => {
+    const newSearchQuery = event.target.value;
+
+    // wait 2 seconds to hit api
+    const currInitInterval = setTimeout(() => {
+      console.log("triggering debounced search");
+
+      triggerSearch(newSearchQuery);
+    }, 1000);
+
+    // clear previous interval now that there is a new search entry
+    // preventing the last interval from triggering a search
+    setdebTimeout((prevTimeout: any) => {
+      clearTimeout(prevTimeout);
+      return currInitInterval;
+    });
+
+    // update the view showing that the user's input is visibly changing input
+    setuserSearchQuery(newSearchQuery);
+  };
+
   return (
     <div className="flex flex-col items-start">
       <div className="flex flex-row w-full">
-        <Button size="small">back</Button>
+        <Button onClick={handleGoBack} size="small">
+          back
+        </Button>
 
         <TextField
+          value={userSearchQuery}
           autoFocus
           color="secondary"
           label="Search by name or email"
           variant="filled"
           fullWidth
+          onChange={handleUpdateSearchInput}
         />
       </div>
+
+      {/* search results list */}
+      <div className="flex flex-col">
+        {data?.users?.map((user) => renderUserRow(user))}
+      </div>
     </div>
   );
 }

packages/desktop/src/pages/Home/search/index.tsx

@@ -53,41 +53,6 @@ export default function Search() {
     setSelectedConvo(googleUserId);
   };
 
-  const renderUserRow = (user: User) => {
-    return (
-      <span
-        key={user.googleId}
-        onClick={() => selectContact(user.googleId)}
-        className="border-t border-t-zinc-500 py-5 flex flex-row justify-start 
-      items-center w-full hover:bg-zinc-600 cursor-pointer group"
-      >
-        <span className="relative mx-5">
-          <img
-            src={user.picture}
-            className="rounded-lg h-8 hover:bg-zinc-200 hover:cursor-pointer hover:scale-110"
-            alt=""
-          />
-          <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
-        </span>
-
-        <span className="flex flex-col items-start">
-          <span className="text-zinc-200 text-lg font-semibold">
-            {user.name}
-          </span>
-
-          <span className="text-zinc-300">{user.email}</span>
-        </span>
-
-        {/* actions */}
-        <Tooltip title="Request connect">
-          <button className="hover:bg-zinc-300 p-1 flex flex-row items-center justify-center ml-auto">
-            <FaAngleRight className="group-hover:text-zinc-300 text-lg" />
-          </button>
-        </Tooltip>
-      </span>
-    );
-  };
-
   return (
     <div className="px-5">
       <button