adding in stuff to make search work but still testing and stuff

packages/api/index.ts

@@ -3,6 +3,7 @@ import express, { Application, Request, Response } from "express";
 import { NextFunction } from "express";
 import { connectToDatabase } from "./services/database.service";
 import cors from "cors";
+import getSearchRoutes from "./routes/search";
 import getUserRoutes from "./routes/user";
 
 const app = express();
@@ -19,6 +20,7 @@ app.get("/", (req: Request, res: Response) => {
 });
 
 app.use("/api/users", getUserRoutes());
+app.use("/api/search", getSearchRoutes());
 
 app.listen(5000, () => console.log("Example app is listening on port 5000."));
 

packages/api/middleware/auth.ts

@@ -29,6 +29,7 @@ export const authCheck = async (
 
     next();
   } catch (error) {
+    console.log(error);
     res.status(401).send("unauthorized");
   }
 };

packages/api/routes/search.ts

@@ -0,0 +1,40 @@
+import express, { Application, Request, Response } from "express";
+
+import SearchResponse from "@nirvana/core/responses/search.response";
+import { User } from "@nirvana/core/models";
+import { UserService } from "../services/user.service";
+import { authCheck } from "../middleware/auth";
+
+export default function getSearchRoutes() {
+  const router = express.Router();
+
+  router.use(express.json());
+
+  // get user details based on id token
+  router.get("/", authCheck, handleSearch);
+
+  return router;
+}
+
+async function handleSearch(req: Request, res: Response) {
+  try {
+    const { query } = req.query;
+
+    if (!query) {
+      res.status(400).send("No search query provided!");
+      return;
+    }
+
+    // text search on users
+    const users: User[] | null = await UserService.getUsersLikeEmailAndName(
+      query as string
+    );
+
+    const resObj = new SearchResponse(users ?? []);
+
+    res.send(resObj);
+  } catch (error) {
+    console.log(error);
+    res.status(500).send(`something went wrong`);
+  }
+}

packages/api/services/user.service.ts

@@ -31,6 +31,32 @@ export class UserService {
     return null;
   }
 
+  static async getUsersLikeEmailAndName(searchQuery: string) {
+    // based on index defined in Mongo atlas
+    const query = {
+      $search: {
+        index: "default",
+        text: {
+          query: searchQuery,
+          path: {
+            wildcard: "*",
+          },
+        },
+      },
+    };
+
+    // const res = await collections.users?.find(query).toArray();
+
+    const res = await collections.users?.aggregate([query]).toArray();
+
+    // exists
+    if (res?.length) {
+      return res as User[];
+    }
+
+    return null;
+  }
+
   static async createUserIfNotExists(newUser: User) {
     const exists = (await collections.users?.findOne({ email: newUser.email }))
       ?._id;

packages/core/responses/search.response.ts

@@ -0,0 +1,12 @@
+import { User } from "@nirvana/core/models";
+
+/**
+ * Full results from the global search
+ */
+export default class SearchResponse {
+  // all friends/contacts matching search
+  contacts?: User[];
+
+  // all public users
+  constructor(public users: User[]) {}
+}

packages/desktop/src/controller/index.tsx

@@ -1,16 +1,14 @@
+import { $authTokens, $searchQuery } from "./recoil";
 import { useMutation, useQuery } from "react-query";
 
-import { $authTokens } from "./recoil";
+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";
 
-export enum Querytypes {
+// =========== API
-  GET_USER_DETAILS = "GET_USER_DETAILS",
-}
-
 export const localHost = "http://localhost:5000/api";
 
 const getUserDetails = async (
@@ -22,6 +20,20 @@ const getUserDetails = async (
   });
 };
 
+const search = async (
+  idToken: string,
+  searchQuery: string
+): Promise<SearchResponse> => {
+  return await axios.get(localHost + `/search?query=${searchQuery}`, {
+    headers: { Authorization: idToken },
+  });
+};
+
+// ====== QUERIES
+export enum Querytypes {
+  GET_USER_DETAILS = "GET_USER_DETAILS",
+  GET_SEARCH_RESULTS = "GET_SEARCH_RESULTS",
+}
 export function useGetUserDetails() {
   const authTokens = useRecoilValue($authTokens);
 
@@ -34,6 +46,16 @@ export function useGetUserDetails() {
   );
 }
 
+export function useSearch() {
+  const authTokens = useRecoilValue($authTokens);
+  const searchQuery = useRecoilValue($searchQuery);
+
+  return useQuery(Querytypes.GET_SEARCH_RESULTS, () =>
+    search(authTokens.idToken, searchQuery)
+  );
+}
+
+// =========== MUTATIONS
 export function useCreateUser() {
   return useMutation(nirvanaApi.user.createUser, {
     onSettled: (data, error) => {

packages/desktop/src/controller/recoil.tsx

@@ -8,3 +8,8 @@ export const $authTokens = atom<{
   key: "AUTH_TOKENS", // unique ID (with respect to other atoms/selectors)
   default: null, // default value (aka initial value)
 });
+
+export const $searchQuery = atom<string>({
+  key: "SEARCH_QUERY",
+  default: "",
+});

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

@@ -0,0 +1,41 @@
+import {
+  Add,
+  CardGiftcardRounded,
+  ContactsRounded,
+  LinkRounded,
+  PushPinRounded,
+} from "@mui/icons-material";
+
+export default function Conversations() {
+  return (
+    <>
+      {/* actions navbar */}
+      <div className="flex justify-end mx-10 mt-5 space-x-3">
+        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
+          <ContactsRounded className="text-slate-100" fontSize="small" />
+        </span>
+
+        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
+          <LinkRounded className="text-slate-100" fontSize="small" />
+        </span>
+
+        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
+          <CardGiftcardRounded className="text-pink-100" fontSize="small" />
+        </span>
+        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
+          <Add className="text-slate-100" fontSize="small" />
+        </span>
+      </div>
+
+      {/* pinned conversations */}
+      <div className="m-5 bg-slate-500 shadow-lg rounded">
+        <span className="flex flex-row justify-start p-4 items-center">
+          <PushPinRounded className="text-slate-100" />
+          <span className="tracking-wider text-slate-100 uppercase text-sm font-semibold">
+            Pinned
+          </span>
+        </span>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,35 @@
+import Logo, { LogoType } from "../../../components/Logo";
+
+import { $searchQuery } from "../../../controller/recoil";
+import { useGetUserDetails } from "../../../controller/index";
+import { useRecoilState } from "recoil";
+
+export default function Header() {
+  const { data: user } = useGetUserDetails();
+  const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
+
+  return (
+    <div className="flex flex-row items-center bg-slate-800 h-20">
+      <Logo type={LogoType.small} className="scale-[0.4]" />
+      <input
+        placeholder="type / to search"
+        className="placeholder:text-slate-400 bg-transparent outline-none text-slate-100"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+
+      <button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
+        flow state
+      </button>
+
+      <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="cannot find"
+        />
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+      </span>
+    </div>
+  );
+}

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

@@ -1,69 +1,23 @@
-import {
-  Add,
-  CardGiftcardRounded,
-  ContactsRounded,
-  LinkRounded,
-  PushPinRounded,
-} from "@mui/icons-material";
 import Logo, { LogoType } from "../../components/Logo";
 
+import { $searchQuery } from "../../controller/recoil";
+import Conversations from "./conversations";
+import Header from "./header";
+import Search from "./search";
 import { useEffect } from "react";
-import { useGetUserDetails } from "../../controller/index";
+import { useGetUserDetails } from "../../controller/";
+import { useRecoilValue } from "recoil";
 
 export default function Home() {
   const { data: user } = useGetUserDetails();
+  const searchQuery = useRecoilValue($searchQuery);
 
   return (
     <div className="h-screen w-screen bg-slate-700">
       {/* header */}
-      <div className="flex flex-row items-center bg-slate-800 h-20">
+      <Header />
-        <Logo type={LogoType.small} className="scale-[0.4]" />
-        <input
-          placeholder="type / to search"
-          className="placeholder:text-slate-400 bg-transparent outline-none text-slate-100"
-        />
 
-        <button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
+      {searchQuery ? <Search /> : <Conversations />}
-          flow state
-        </button>
-
-        <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="cannot find"
-          />
-          <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
-        </span>
-      </div>
-
-      {/* actions navbar */}
-      <div className="flex justify-end mx-10 mt-5 space-x-3">
-        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
-          <ContactsRounded className="text-slate-100" fontSize="small" />
-        </span>
-
-        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
-          <LinkRounded className="text-slate-100" fontSize="small" />
-        </span>
-
-        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
-          <CardGiftcardRounded className="text-pink-100" fontSize="small" />
-        </span>
-        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
-          <Add className="text-slate-100" fontSize="small" />
-        </span>
-      </div>
-
-      {/* pinned conversations */}
-      <div className="m-5 bg-slate-500 shadow-lg rounded">
-        <span className="flex flex-row justify-start p-4 items-center">
-          <PushPinRounded className="text-slate-100" />
-          <span className="tracking-wider text-slate-100 uppercase text-sm font-semibold">
-            Pinned
-          </span>
-        </span>
-      </div>
     </div>
   );
 }

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

@@ -0,0 +1,24 @@
+import { $searchQuery } from "../../../controller/recoil";
+import { useEffect } from "react";
+import { useSearch } from "../../../controller";
+
+export default function Search() {
+  const { data: searchResultsResponse, isLoading, isError } = useSearch();
+  useEffect(() => {}, []);
+
+  if (!searchResultsResponse?.users) {
+    return (
+      <span className="text-white">
+        no results. please try someone's email or name.
+      </span>
+    );
+  }
+
+  return (
+    <div>
+      {searchResultsResponse.users?.map((user) => {
+        return <span>{user.name}</span>;
+      })}
+    </div>
+  );
+}

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

@@ -11,6 +11,7 @@ import { useSetRecoilState } from "recoil";
 
 export default function Login({ onReady }: { onReady: Function }) {
   const setAuthTokens = useSetRecoilState($authTokens);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const continueAuth = () => {
     setIsLoading(true);
@@ -26,6 +27,8 @@ export default function Login({ onReady }: { onReady: Function }) {
   }) => {
     setAuthTokens(tokens);
 
+    console.log(tokens.idToken);
+
     onReady();
   };
 
@@ -34,8 +37,6 @@ export default function Login({ onReady }: { onReady: Function }) {
     window.electronAPI.store
       .get(STORE_ITEMS.AUTH_TOKENS)
       .then((tokensFromStore: any) => {
-        console.log(tokensFromStore);
-
         if (tokensFromStore) {
           setIsLoading(true);
 
@@ -68,8 +69,6 @@ export default function Login({ onReady }: { onReady: Function }) {
     // };
   }, []);
 
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
   return (
     <div className="container flex flex-col space-y-5 justify-center items-center h-screen bg-slate-900">
       <Logo className="scale-50" />