search working and showing results but of course not working in terms of the friend requesting

packages/desktop/src/components/ProtectedRoute/index.tsx

@@ -8,7 +8,8 @@ export default function ProtectedRoute({
 }: {
   children?: React.ReactNode;
 }) {
-  const { isLoading, isError, refetch } = useGetUserDetails();
+  const { data, isLoading, isError, refetch } = useGetUserDetails();
+  console.log(data);
 
   if (isLoading)
     return (

packages/desktop/src/controller/index.tsx

@@ -1,9 +1,9 @@
 import { $authTokens, $searchQuery } from "./recoil";
+import axios, { AxiosResponse } from "axios";
 import { useMutation, useQuery } from "react-query";
 
 import SearchResponse from "@nirvana/core/responses/search.response";
 import { User } from "@nirvana/core/models";
-import axios from "axios";
 import { nirvanaApi } from "./nirvanaApi";
 import { queryClient } from "../nirvanaApp";
 import { useRecoilValue } from "recoil";
@@ -14,7 +14,7 @@ export const localHost = "http://localhost:5000/api";
 const getUserDetails = async (
   accessToken: string,
   idToken: string
-): Promise<User> => {
+): Promise<AxiosResponse<User, any>> => {
   return await axios.get(localHost + `/users?access_token=${accessToken}`, {
     headers: { Authorization: idToken },
   });
@@ -23,10 +23,13 @@ const getUserDetails = async (
 const search = async (
   idToken: string,
   searchQuery: string
-): Promise<SearchResponse> => {
+): Promise<AxiosResponse<SearchResponse, any>> => {
-  return await axios.get(localHost + `/search?query=${searchQuery}`, {
+  return await axios.get<SearchResponse>(
-    headers: { Authorization: idToken },
+    localHost + `/search?query=${searchQuery}`,
-  });
+    {
+      headers: { Authorization: idToken },
+    }
+  );
 };
 
 // ====== QUERIES
@@ -50,8 +53,10 @@ export function useSearch() {
   const authTokens = useRecoilValue($authTokens);
   const searchQuery = useRecoilValue($searchQuery);
 
-  return useQuery(Querytypes.GET_SEARCH_RESULTS, () =>
+  return useQuery(
-    search(authTokens.idToken, searchQuery)
+    Querytypes.GET_SEARCH_RESULTS,
+    () => search(authTokens.idToken, searchQuery),
+    { enabled: searchQuery ? true : false }
   );
 }
 

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

@@ -5,9 +5,13 @@ import { useGetUserDetails } from "../../../controller/index";
 import { useRecoilState } from "recoil";
 
 export default function Header() {
-  const { data: user } = useGetUserDetails();
+  const { data: user, isLoading } = useGetUserDetails();
   const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
 
+  if (isLoading) {
+    return <span>getting data</span>;
+  }
+
   return (
     <div className="flex flex-row items-center bg-slate-800 h-20">
       <Logo type={LogoType.small} className="scale-[0.4]" />
@@ -24,7 +28,7 @@ export default function Header() {
 
       <span className="relative mx-5">
         <img
-          src={user.picture}
+          src={user.data.picture}
           className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
           alt="cannot find"
         />

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

@@ -13,7 +13,7 @@ export default function Home() {
   const searchQuery = useRecoilValue($searchQuery);
 
   return (
-    <div className="h-screen w-screen bg-slate-700">
+    <div className="h-screen w-full bg-slate-700">
       {/* header */}
       <Header />
 

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

@@ -1,12 +1,26 @@
 import { $searchQuery } from "../../../controller/recoil";
+import { FaPaperPlane } from "react-icons/fa";
+import { Tooltip } from "@mui/material";
+import { User } from "@nirvana/core/models";
 import { useEffect } from "react";
+import { useRecoilState } from "recoil";
 import { useSearch } from "../../../controller";
 
-export default function Search() {
+// todo:
-  const { data: searchResultsResponse, isLoading, isError } = useSearch();
+// remove myself from list
-  useEffect(() => {}, []);
+// add friend capability
+// unfriend? nahhh not right now
 
-  if (!searchResultsResponse?.users) {
+export default function Search() {
+  const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
+
+  const { data, isLoading, isError, refetch } = useSearch();
+
+  useEffect(() => {
+    refetch();
+  }, [searchQuery]);
+
+  if (!data?.data?.users) {
     return (
       <span className="text-white">
         no results. please try someone's email or name.
@@ -14,10 +28,55 @@ export default function Search() {
     );
   }
 
+  const goBack = () => {
+    // implicity takes user back
+    setSearchQuery("");
+  };
+
+  const renderUserRow = (user: User) => {
+    return (
+      <span
+        className="border-t border-t-slate-400 py-5 flex flex-row justify-start 
+      items-center w-full hover:bg-slate-600 cursor-pointer"
+      >
+        <span className="relative mx-5">
+          <img
+            src={user.picture}
+            className="rounded-lg h-8 hover:bg-slate-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-slate-200 text-lg font-semibold">
+            {user.name}
+          </span>
+
+          <span className="text-slate-300">{user.email}</span>
+        </span>
+
+        {/* actions */}
+        <Tooltip title="Request connect">
+          <button className="hover:bg-slate-300 p-1 flex flex-row items-center justify-center ml-auto">
+            <FaPaperPlane className="text-emerald-500 text-lg" />
+          </button>
+        </Tooltip>
+      </span>
+    );
+  };
+
   return (
-    <div>
+    <div className="px-5">
-      {searchResultsResponse.users?.map((user) => {
+      <button
-        return <span>{user.name}</span>;
+        onClick={goBack}
+        className="rounded shadow border border-slate-300 text-slate-300 p-1 my-2"
+      >
+        Go back
+      </button>
+
+      {data?.data?.users?.map((user) => {
+        return renderUserRow(user);
       })}
     </div>
   );

packages/desktop/src/pages/Login/index.tsx

@@ -20,6 +20,10 @@ export default function Login({ onReady }: { onReady: Function }) {
     window.electronAPI.auth.initiateLogin();
   };
 
+  const logOut = () => {
+    window.electronAPI.store.set(STORE_ITEMS.AUTH_TOKENS, null);
+  };
+
   const setAccessTokensAndContinue = (tokens: {
     accessToken: string;
     idToken: string;
@@ -87,6 +91,8 @@ export default function Login({ onReady }: { onReady: Function }) {
           <span>Continue with Google</span>
         </button>
       )}
+
+      <button onClick={logOut}>Log Out</button>
     </div>
   );
 }