problem with objectId with bson and such in models but fixed it and nice rendering everything now

packages/core/models/relationship.model.ts

@@ -10,7 +10,7 @@ export default class Relationship {
     public createdDate: Date = new Date(),
     public lastUpdatedDate: Date = new Date(),
 
-    public _id: ObjectId = new ObjectId()
+    public _id?: ObjectId
   ) {}
 }
 
@@ -18,4 +18,5 @@ export enum RelationshipState {
   PENDING = "PENDING",
   ACTIVE = "ACTIVE",
   BLOCKED = "BLOCKED",
+  DENIED = "DENIED",
 }

packages/core/responses/getConversationDetails.response.ts

@@ -7,7 +7,7 @@ export default class GetConversationDetailsResponse {
 
   constructor(
     public contactUser: User,
-    isLiveOrPinned: boolean,
+    public isLiveOrPinned: boolean,
     public ourRelationship?: Relationship,
     public latestContent?: Content[]
   ) {}

packages/desktop/package.json

@@ -102,6 +102,8 @@
     "axios": "^0.26.1",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.0.1",
+    "moment": "^2.29.1",
+    "mongodb": "^4.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",

packages/desktop/src/controller/index.tsx

@@ -2,6 +2,7 @@ import { $authTokens, $searchQuery } from "./recoil";
 import axios, { AxiosResponse } from "axios";
 import { useMutation, useQuery } from "react-query";
 
+import GetConversationDetailsResponse from "@nirvana/core/responses/getConversationDetails.response";
 import SearchResponse from "@nirvana/core/responses/search.response";
 import { User } from "@nirvana/core/models";
 import { nirvanaApi } from "./nirvanaApi";
@@ -11,31 +12,47 @@ import { useRecoilValue } from "recoil";
 // =========== API
 export const localHost = "http://localhost:5000/api";
 
-const getUserDetails = async (
-  accessToken: string,
-  idToken: string
-): Promise<AxiosResponse<User, any>> => {
-  return await axios.get(localHost + `/users?access_token=${accessToken}`, {
-    headers: { Authorization: idToken },
-  });
+const getUserDetails = async (accessToken: string, idToken: string) => {
+  const response = await axios.get<User>(
+    localHost + `/users?access_token=${accessToken}`,
+    {
+      headers: { Authorization: idToken },
+    }
+  );
+
+  return response.data;
 };
 
-const search = async (
-  idToken: string,
-  searchQuery: string
-): Promise<AxiosResponse<SearchResponse, any>> => {
-  return await axios.get<SearchResponse>(
+const search = async (idToken: string, searchQuery: string) => {
+  const response = await axios.get<SearchResponse>(
     localHost + `/search?query=${searchQuery}`,
     {
       headers: { Authorization: idToken },
     }
   );
+
+  return response.data;
+};
+
+const getConversationDetails = async (
+  idToken: string,
+  otherUserGoogleId: string
+) => {
+  const response = await axios.get<GetConversationDetailsResponse>(
+    localHost + `/conversations/${otherUserGoogleId}`,
+    {
+      headers: { Authorization: idToken },
+    }
+  );
+
+  return response.data;
 };
 
 // ====== QUERIES
 export enum Querytypes {
   GET_USER_DETAILS = "GET_USER_DETAILS",
   GET_SEARCH_RESULTS = "GET_SEARCH_RESULTS",
+  GET_CONVERSATION_DETAILS = "GET_CONVERSATION_DETAILS",
 }
 export function useGetUserDetails() {
   const authTokens = useRecoilValue($authTokens);
@@ -61,6 +78,16 @@ export function useSearch() {
   );
 }
 
+export function useConversationDetails(otherUserGoogleId: string) {
+  const authTokens = useRecoilValue($authTokens);
+
+  return useQuery(
+    Querytypes.GET_CONVERSATION_DETAILS + "/" + otherUserGoogleId,
+    () => getConversationDetails(authTokens.idToken, otherUserGoogleId),
+    { enabled: otherUserGoogleId ? true : false }
+  );
+}
+
 // =========== MUTATIONS
 export function useCreateUser() {
   return useMutation(nirvanaApi.user.createUser, {

packages/desktop/src/electron/constants.ts

@@ -13,11 +13,11 @@ export enum STORE_ITEMS {
 
 export const Dimensions = {
   default: {
-    height: 600,
+    height: 1000,
     width: 500,
   },
   selectedConvo: {
-    height: 600,
+    height: 1000,
     width: 900,
   },
 };

packages/desktop/src/index.css

@@ -1,6 +1,8 @@
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;
+
+  @apply text-white;
 }
 
 #root {

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

@@ -28,7 +28,7 @@ export default function Header() {
 
       <span className="relative mx-5">
         <img
-          src={user.data.picture}
+          src={user.picture}
           className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
           alt="cannot find"
         />

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

@@ -28,7 +28,7 @@ export default function Search() {
     refetch();
   }, [searchQuery]);
 
-  if (!data?.data?.users) {
+  if (!data?.users) {
     return (
       <span className="text-white">
         no results. please try someone's email or name.
@@ -95,7 +95,7 @@ export default function Search() {
         Go back
       </button>
 
-      {data?.data?.users?.map((user) => {
+      {data?.users?.map((user) => {
         return renderUserRow(user);
       })}
     </div>

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

@@ -1,5 +1,10 @@
+import { useConversationDetails, useGetUserDetails } from "../../../controller";
+
 import { $selectedConversation } from "../../../controller/recoil";
 import { Dimensions } from "../../../electron/constants";
+import { FaWindowClose } from "react-icons/fa";
+import { RelationshipState } from "@nirvana/core/models/relationship.model";
+import moment from "moment";
 import { useEffect } from "react";
 import { useRecoilState } from "recoil";
 
@@ -7,15 +12,9 @@ export default function SelectedConversation() {
   const [selectedConvo, setSelectedConvo] = useRecoilState(
     $selectedConversation
   );
-
-  // want to grab the right data based on the selected contact
-
-  /** Data we need:
-   * user details of the selected person...should be in the search results client side, but just do another fetch?
-   * websocket for the status only if there exists a relationship?
-   * ability to see my relationship with this user...whether null, pending, active, etc.
-   * all messages between me and them
-   */
+  const { data: userDetailsData } = useGetUserDetails();
+  const { data: convoDetailsResponse, isLoading } =
+    useConversationDetails(selectedConvo);
 
   useEffect(() => {
     // if selected, then change the bounds of this window as well
@@ -32,7 +31,89 @@ export default function SelectedConversation() {
     return <></>;
   }
 
+  if (isLoading) {
+    return <span className="text-slate-200">Loading conversation details</span>;
+  }
+
+  // todo: add cancel request option
+
+  const sendRequest = () => {
+    const otherUserGoogleId = convoDetailsResponse.contactUser.googleId;
+
+    // todo mutation to create a user
+  };
+
+  const renderMainContent = () => {
+    // if there's no relationship, then don't show messages, show "send request" button
+    if (!convoDetailsResponse?.ourRelationship) {
+      return <button onClick={sendRequest}>Send Request</button>;
+    }
+
+    // if the relationship is pending and I am the receiver, then I should see an accept or deny button
+    if (
+      convoDetailsResponse.ourRelationship.state ===
+        RelationshipState.PENDING &&
+      userDetailsData.googleId ===
+        convoDetailsResponse.ourRelationship.receiverUserId
+    ) {
+      return (
+        <span>
+          please accept this request by clicking here: <button>accept</button>
+        </span>
+      );
+    }
+
+    // when i sent a request to this person, just tell me that I have to wait
+    if (
+      convoDetailsResponse.ourRelationship.state ===
+        RelationshipState.PENDING &&
+      userDetailsData.googleId ===
+        convoDetailsResponse.ourRelationship.senderUserId
+    ) {
+      return <span>Waiting on request to be accepted</span>;
+    }
+
+    if (
+      convoDetailsResponse.ourRelationship.state === RelationshipState.ACTIVE
+    ) {
+      return <span>this is all of the content</span>;
+    }
+
+    if (
+      convoDetailsResponse.ourRelationship.state === RelationshipState.DENIED
+    ) {
+      return <span>this request was denied</span>;
+    }
+  };
+
   return (
-    <div className="bg-slate-800 flex-1">this is the selected conversation</div>
+    <div className="bg-slate-800 flex-1 flex flex-col relative">
+      {/* close marker */}
+      <FaWindowClose className="text-slate-400 hover:text-white hover:scale-110 absolute top-0 right-0 m-1" />
+
+      {/* top header/profile information */}
+      <span className="flex flex-row justify-start items-center p-2">
+        <img
+          className="rounded"
+          src={convoDetailsResponse.contactUser.picture}
+        />
+        <span className="flex flex-col items-start pl-2">
+          <span className="flex flex-row space-x-2">
+            <span className="text-white font-semibold text-lg">
+              {convoDetailsResponse.contactUser.name}
+            </span>
+            <span className="text-emerald-500 text-sm">
+              {convoDetailsResponse.contactUser.status}
+            </span>
+          </span>
+
+          <span className="text-slate-300 text-sm">{`joined ${moment(
+            convoDetailsResponse.contactUser.createdDate
+          )}`}</span>
+        </span>
+      </span>
+
+      {renderMainContent()}
+    </div>
   );
 }

yarn.lock

@@ -5111,6 +5111,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 mongodb-connection-string-url@^2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/mongodb-connection-string-url/-/mongodb-connection-string-url-2.5.2.tgz#f075c8d529e8d3916386018b8a396aed4f16e5ed"