cleaning things up and renders and such and showing the thing

packages/api/routes/line.ts

@@ -172,8 +172,6 @@ async function getUserLines(req: Request, res: Response) {
           currentLineMemberForLine.userId.toString() === userInfo.userId
       );
 
-      console.log(associatedLineMembersForLine);
-
       if (userLineMember) {
         // take out the current user from the "other" line members list now
 

packages/desktop/src/components/conversation/basicRow.tsx

@@ -1,37 +0,0 @@
-import MasterConversation from "@nirvana/core/models/masterLineData.model";
-import UserStatusText from "../User/userStatusText";
-export default function BasicConversationRow({
-  masterConvo,
-}: {
-  masterConvo: MasterConversation;
-}) {
-  // fetch more data for this conversation like all of the members for it
-  // if there is new content for current user
-  // lastActiveDate
-
-  const isSelected = false;
-
-  return (
-    <div
-      key={masterConvo.id.toString()}
-      className={`flex flex-row items-center hover:bg-zinc-600 group py-4 px-2 cursor-pointer ${
-        isSelected ? "bg-zinc-600" : ""
-      } rounded`}
-    >
-      {/* <UserAvatarWithStatus user={contactDetail.otherUser} /> */}
-
-      <span className="text-white font-semibold ml-2">{masterConvo.name}</span>
-      <span className="text-white font-semibold ml-2">
-        {masterConvo.id.toString()}
-      </span>
-
-      {/* <span className="ml-2">
-        <UserStatusText status={contactDetail.otherUser.status} />
-      </span> */}
-
-      {/* {speakingRooms.includes(contactDetail.relationship._id.toString()) ? (
-        <span className="ml-auto">speaking...</span>
-      ) : null} */}
-    </div>
-  );
-}

packages/desktop/src/components/lines/lineRow.tsx/index.tsx

@@ -1,47 +1,58 @@
+import { $desktopMode, $selectedLineId } from "../../../controller/recoil";
 import { useCallback, useMemo } from "react";
+import { useRecoilState, useSetRecoilState } from "recoil";
 
 import { Avatar } from "antd";
 import { FiSun } from "react-icons/fi";
 import { ILineDetails } from "../../../pages/router/index";
 import LineIcon from "../lineIcon";
+import MasterLineData from "@nirvana/core/models/masterLineData.model";
+import { useGetUserDetails } from "../../../controller/index";
+
+// todo: send a much more comprehensive master line object? or just add properties to the
+// masterLineData object so that we don't have different models to maintain between client and server
 
 export default function LineRow({
-  lineDetails,
-  onClick,
+  masterLineData,
 }: {
-  lineDetails: ILineDetails;
-  onClick: (lineId: string) => void;
+  masterLineData: MasterLineData;
 }) {
+  const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
+  const { data: userData } = useGetUserDetails();
+
+  const setDesktopMode = useSetRecoilState($desktopMode);
+
+  /** show user line details */
+  const handleSelectLine = useCallback(() => {
+    setSelectedLineId(masterLineData.lineDetails._id.toString());
+    setDesktopMode("terminalDetails");
+  }, [setSelectedLineId, setDesktopMode, masterLineData]);
+
+  /**
+   * TODO: slowly add to this and fix based on added features
+   * */
   const renderActivityIcon = useMemo(() => {
-    if (lineDetails.isUserBroadcastingHere)
+    // if there is someone or me broadcasting here
+    if (masterLineData.currentUserMember.lastVisitDate)
       return <FiSun className="text-xs text-teal-500" />;
 
-    if (
-      lineDetails.isSomeoneElseBroadcastingHere ||
-      lineDetails.profilePicsLiveBroadcasters?.length > 0
-    )
-      return <FiSun className="text-xs text-gray-800" />;
-
-    if (lineDetails.hasNewActivity)
+    // if there is new activity blocks for me
+    if (masterLineData.currentUserMember.lastVisitDate)
       return (
         <span className="h-2 w-2 rounded-full bg-slate-800 animate-pulse"></span>
       );
 
-    if (lineDetails.isUserToggleTunedIn)
-      return (
-        <span className="h-2 w-2 rounded-full bg-slate-200 animate-pulse"></span>
-      );
-
     return (
       <span className="h-2 w-2 rounded-full bg-white animate-pulse"></span>
     );
-  }, [lineDetails]);
+  }, [masterLineData]);
 
   const renderRightActivity = useMemo(() => {
-    if (lineDetails.profilePicsLiveBroadcasters?.length)
+    // TODO: this should be the list of broadcasters, not members...change once we have that
+    if (masterLineData.otherUserObjects?.length)
       return (
         <Avatar.Group
-          key={`lineRowRightActivityGroup-${lineDetails.lineId}`}
+          key={`lineRowRightActivityGroup-${masterLineData.lineDetails._id.toString()}`}
           maxCount={2}
           maxPopoverTrigger="click"
           size="small"
@@ -53,10 +64,10 @@ export default function LineRow({
           }}
           className="shadow-lg"
         >
-          {lineDetails.profilePicsLiveBroadcasters.map((avatarSrc, index) => (
+          {masterLineData.otherUserObjects?.map((otherUser, index) => (
             <Avatar
-              key={`lineListActivitySection-${avatarSrc}-${index}`}
-              src={avatarSrc}
+              key={`lineListActivitySection-${otherUser._id.toString()}-${index}`}
+              src={otherUser.picture ?? ""}
               shape="square"
               size={"small"}
             />
@@ -64,24 +75,34 @@ export default function LineRow({
         </Avatar.Group>
       );
 
-    if (lineDetails.hasNewActivity)
+    // if there is new activity/black dot, then show relative time as little bolder? or too much?
+
+    // TODO: add moment for relative time of activity
+    if (masterLineData.currentUserMember.lastVisitDate)
       return (
         <span className={`text-gray-400 ml-auto text-xs font-semibold`}>
-          {lineDetails.timeAgo}
+          {masterLineData.currentUserMember.lastVisitDate}
         </span>
       );
 
     return (
       <span className={`text-gray-300 ml-auto text-xs `}>
-        {lineDetails.timeAgo}
+        {masterLineData.currentUserMember.lastVisitDate}
       </span>
     );
-  }, [lineDetails]);
+  }, [masterLineData]);
 
-  const handleSelectLine = useCallback(
-    (e) => onClick(lineDetails.lineId),
-    [onClick, lineDetails]
-  );
+  const profilePictures = useMemo(() => {
+    const pictureSources: string[] = [];
+
+    if (userData?.user?.picture) pictureSources.push(userData.user.picture);
+
+    masterLineData.otherUserObjects?.forEach((otherUser) => {
+      if (otherUser.picture) pictureSources.push(otherUser.picture);
+    });
+
+    return pictureSources;
+  }, [masterLineData, userData]);
 
   return (
     <div
@@ -93,16 +114,16 @@ export default function LineRow({
       {renderActivityIcon}
 
       <span className="flex flex-row gap-2 items-center justify-start text-slate-800">
-        {lineDetails.profilePictures && (
-          <LineIcon sourceImages={lineDetails.profilePictures} />
-        )}
+        {profilePictures && <LineIcon sourceImages={profilePictures} />}
 
         <h2
           className={`text-inherit text-md truncate ${
-            lineDetails.hasNewActivity ? "font-semibold" : ""
+            masterLineData.currentUserMember.lastVisitDate
+              ? "font-semibold"
+              : ""
           }`}
         >
-          {lineDetails.name}
+          {masterLineData.lineDetails.name}
         </h2>
       </span>
 

packages/desktop/src/controller/nirvanaApi.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosRequestConfig, AxiosResponse, Method } from "axios";
 
 import CreateLineRequest from "@nirvana/core/requests/createLine.request";
+import GetUserLinesResponse from "@nirvana/core/responses/getUserLines.response";
 import { Line } from "@nirvana/core/models/line.model";
 import LoginResponse from "../../../core/responses/login.response";
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
@@ -82,7 +83,7 @@ async function userSearch(searchQuery: string): Promise<UserSearchResponse> {
   );
 }
 
-async function getUserLines(): Promise<NirvanaResponse<MasterLineData[]>> {
+async function getUserLines(): Promise<NirvanaResponse<GetUserLinesResponse>> {
   return await NirvanaApi.fetch(`/lines`, "GET", true);
 }
 

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

@@ -1,4 +1,5 @@
 import { $desktopMode, $selectedLineId } from "../../controller/recoil";
+import { Skeleton, Tooltip } from "antd";
 import { useCallback, useMemo, useState } from "react";
 
 import { FaPlus } from "react-icons/fa";
@@ -7,8 +8,8 @@ import { ILineDetails } from "../router";
 import IconButton from "../../components/Button/IconButton/index";
 import LineRow from "../../components/lines/lineRow.tsx/index";
 import NewLineModal from "./newLine";
-import { Tooltip } from "antd";
 import { useSetRecoilState } from "recoil";
+import { useUserLines } from "../../controller/index";
 
 export default function NirvanaTerminal({
   allLines,
@@ -20,6 +21,8 @@ export default function NirvanaTerminal({
   const setSelectedLineId = useSetRecoilState($selectedLineId);
   const setDesktopMode = useSetRecoilState($desktopMode);
 
+  const { data: userLinesRes, isLoading } = useUserLines();
+
   // todo: sort/order based on activity and activity date and currently broadcasting/live
 
   const toggleTunedLines = useMemo(
@@ -32,15 +35,6 @@ export default function NirvanaTerminal({
     []
   );
 
-  /** show user line details */
-  const handleSelectLine = useCallback(
-    (lineId: string) => {
-      setSelectedLineId(lineId);
-      setDesktopMode("terminalDetails");
-    },
-    [setSelectedLineId, setDesktopMode]
-  );
-
   return (
     <div className="flex flex-col bg-white w-[400px]">
       {/* modal for creating new line */}
@@ -73,28 +67,39 @@ export default function NirvanaTerminal({
           </Tooltip>
         </div>
 
-        {/* list of all lines */}
+        {/* list of toggle tuned lines */}
         <div className="flex flex-col mt-2">
-          {toggleTunedLines.map((line) => (
+          {/* {toggleTunedLines.map((line) => (
             <LineRow
               key={line.lineId}
               lineDetails={line}
               onClick={handleSelectLine}
             />
-          ))}
+          ))} */}
         </div>
       </div>
 
       {/* rest of the lines */}
-
       <div className={"flex flex-col"}>
-        {restLines.map((line) => (
-          <LineRow
-            key={line.lineId}
-            lineDetails={line}
-            onClick={handleSelectLine}
-          />
-        ))}
+        {/* {restLines.map((line) => (
+     <LineRow
+       key={line.lineId}
+       lineDetails={line}
+       onClick={handleSelectLine}
+     />
+   ))} */}
+        {isLoading ? (
+          <Skeleton />
+        ) : (
+          <>
+            {userLinesRes?.data?.masterLines?.map((masterLineData) => (
+              <LineRow
+                key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
+                masterLineData={masterLineData}
+              />
+            ))}
+          </>
+        )}
       </div>
     </div>
   );