working displaying contacts, but of course not nice

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 GetContactsResponse from "../../../core/responses/getContacts.response";
 import GetConversationDetailsResponse from "@nirvana/core/responses/getConversationDetails.response";
 import { ObjectId } from "mongodb";
 import { RelationshipState } from "@nirvana/core/models/relationship.model";
@@ -77,11 +78,23 @@ const updateContactRequestState = async (
   return response.data;
 };
 
+const getContactsBasicDetails = async (idToken: string) => {
+  const response = await axios.get<GetContactsResponse>(
+    localHost + `/contacts`,
+    {
+      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",
+  GET_CONTACTS_RELATIONSHIPS = "GET_CONTACTS_RELATIONSHIPS",
 }
 export function useGetUserDetails() {
   const authTokens = useRecoilValue($authTokens);
@@ -117,6 +130,18 @@ export function useConversationDetails(otherUserGoogleId: string) {
   );
 }
 
+export function useGetAllContactBasicDetails() {
+  const authTokens = useRecoilValue($authTokens);
+
+  return useQuery(
+    Querytypes.GET_CONTACTS_RELATIONSHIPS,
+    () => getContactsBasicDetails(authTokens.idToken),
+    {
+      refetchOnWindowFocus: false,
+    }
+  );
+}
+
 // =========== MUTATIONS
 
 export function useSendContactRequest() {

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

@@ -1,8 +1,14 @@
 import { Add, LinkRounded } from "@mui/icons-material";
 
+import { Avatar } from "antd";
 import { FaVolumeUp } from "react-icons/fa";
+import SkeletonLoader from "../../../components/loading/skeleton";
+import { useGetAllContactBasicDetails } from "../../../controller";
 
 export default function Conversations() {
+  const { data: contactDetailsListResponse, isLoading } =
+    useGetAllContactBasicDetails();
+
   /** Data we need: have this huge data store client side to be able to access
    * for now, need a simple list of contacts
    * - first list is the live/pinned
@@ -12,6 +18,7 @@ export default function Conversations() {
    * web sockets for all of my active contacts
    * - actually play messages if pinned contact for me
    */
+
   return (
     <>
       {/* actions navbar */}
@@ -38,6 +45,24 @@ export default function Conversations() {
           Mark Conversations as Pinned to Hear Them Live
         </span>
       </div>
+
+      {isLoading ? <SkeletonLoader /> : null}
+      <div className="flex flex-col m-5 p-4">
+        {contactDetailsListResponse?.contactsDetails.map((contactDetail) => {
+          return (
+            <div>
+              <Avatar src={contactDetail.otherUser.picture} />
+
+              <span className="text-white font-semibold">
+                {contactDetail.otherUser.name}
+              </span>
+              <span>{contactDetail.otherUser.status}</span>
+
+              <span className="ml-auto">speaking...</span>
+            </div>
+          );
+        })}
+      </div>
     </>
   );
 }