feat(web-ui): support new conversation's api (#776)

* feat(web-ui): support conversations

* feat(api): expose conversation id

* feat(web-ui): support conversations

* refactor(web-ui): rename component

Author: johanbook

services/api/src/features/chat/application/contracts/dtos/chat-conversation.dto.ts

@@ -1,4 +1,5 @@
 export class ChatConversationDetails {
+  id!: string;
   imageUrl?: string;
   lastMessage?: string;
   lastMessageSent?: Date;

services/api/src/features/chat/application/handlers/query-handlers/get-conversation-list.handler.ts

@@ -47,6 +47,7 @@ export class GetConversationListHandler
       ChatConversationDetails,
       matchingConversations,
       (conversation) => ({
+        id: conversation.id,
         imageUrl:
           conversation.photo &&
           this.photoService.getUrl(

services/web-ui/src/Router.tsx

@@ -7,7 +7,7 @@ import { NavigationTrackingProvider } from "src/core/tracking/NavigationTracking
 import { BlogPostListPage } from "src/pages/BlogPostListPage";
 import { BlogPostPage } from "src/pages/BlogPostPage";
 import { ChatPage } from "src/pages/ChatPage";
-import { ConnectionsPage } from "src/pages/ConnectionsPage";
+import { ConversationsPage } from "src/pages/ConversationsPage";
 import { CreateOrganizationPage } from "src/pages/CreateOrganizationPage";
 import { CurrentOrganizationPage } from "src/pages/CurrentOrganizationPage";
 import { CurrentProfilePage } from "src/pages/CurrentProfilePage";
@@ -44,7 +44,7 @@ const router = createBrowserRouter([
       },
       {
         path: "/chat",
-        element: <ConnectionsPage />,
+        element: <ConversationsPage />,
       },
       {
         path: "/chat/:id",

services/web-ui/src/pages/ChatPage/ChatPage.container.tsx

@@ -17,12 +17,12 @@ import { ChatMessageList } from "./components/ChatMessageList";
 import { ChatTextField } from "./components/ChatTextField";
 
 export function ChatPageContainer(): ReactElement {
-  const { id } = useParams();
+  const { id = "" } = useParams();
   const { t } = useTranslation("chat");
 
   const { error, data, isLoading, refetch } = useQuery({
     queryKey: ["chat", id],
-    queryFn: () => chatsApi.getChats({ profileId: Number.parseInt(id || "") }),
+    queryFn: () => chatsApi.getChats({ conversationId: id }),
   });
 
   useHandleNotification({

services/web-ui/src/pages/ConnectionsPage/ConnectionsPage.component.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { List } from "@mui/material";
+
+import { ChatConversationDetails } from "src/api";
+
+import { ConversationListItem } from "./components/ConversationListItem";
+
+export interface ConversationsPageComponentProps {
+  data: ChatConversationDetails[];
+}
+
+export function ConversationsPageComponent({
+  data,
+}: ConversationsPageComponentProps): React.ReactElement {
+  return (
+    <>
+      <List>
+        {data.map((conversation, index) => (
+          <ConversationListItem
+            divider={index < data.length - 1}
+            key={conversation.id}
+            data={conversation}
+          />
+        ))}
+      </List>
+    </>
+  );
+}

services/web-ui/src/pages/ConnectionsPage/ConnectionsPage.container.tsx

@@ -0,0 +1,53 @@
+import { ReactElement } from "react";
+
+import { Typography } from "@mui/material";
+
+import { chatsApi } from "src/apis";
+import { useTranslation } from "src/core/i18n";
+import { useQuery } from "src/core/query";
+import { ErrorView } from "src/views/ErrorView";
+
+import { ConversationsPageComponent } from "./ConversationsPage.component";
+import { ConversationsPageNav } from "./ConversationsPage.nav";
+import { ConversationsPageSkeleton } from "./ConversationsPage.skeleton";
+
+export function ConversationsPageContainer(): ReactElement {
+  const { t } = useTranslation("connections");
+
+  const { error, data, isPending } = useQuery({
+    queryKey: ["chat-conversations"],
+    queryFn: () => chatsApi.getConversations(),
+  });
+
+  if (error) {
+    return (
+      <ConversationsPageNav>
+        <ErrorView error={error} />
+      </ConversationsPageNav>
+    );
+  }
+
+  if (isPending) {
+    return (
+      <ConversationsPageNav>
+        <ConversationsPageSkeleton />
+      </ConversationsPageNav>
+    );
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <ConversationsPageNav>
+        <Typography sx={{ paddingTop: 1 }} gutterBottom>
+          {t("no-connections")}
+        </Typography>
+      </ConversationsPageNav>
+    );
+  }
+
+  return (
+    <ConversationsPageNav>
+      <ConversationsPageComponent data={data} />
+    </ConversationsPageNav>
+  );
+}

services/web-ui/src/pages/ConnectionsPage/components/ConnectionListItem/index.ts

@@ -4,13 +4,13 @@ import { Typography } from "@mui/material";
 
 import { useTranslation } from "src/core/i18n";
 
-export interface ConnectionsPageNavProps {
+export interface ConversationsPageNavProps {
   children: ReactNode;
 }
 
-export function ConnectionsPageNav({
+export function ConversationsPageNav({
   children,
-}: ConnectionsPageNavProps): React.ReactElement {
+}: ConversationsPageNavProps): React.ReactElement {
   const { t } = useTranslation("connections");
 
   return (

services/web-ui/src/pages/ConnectionsPage/index.ts

@@ -2,7 +2,7 @@ import React from "react";
 
 import { List, ListItem, Skeleton } from "@mui/material";
 
-export function ConnectionsPageSkeleton(): React.ReactElement {
+export function ConversationsPageSkeleton(): React.ReactElement {
   return (
     <>
       <List>

services/web-ui/src/pages/ConversationsPage/ConversationsPage.component.tsx

@@ -1,25 +1,25 @@
 import type { Meta } from "@storybook/react";
 
-import { ConnectionDetails } from "src/api";
+import { ChatConversationDetails } from "src/api";
 
-import { ConnectionsPageComponent } from "./ConnectionsPage.component";
+import { ConversationsPageComponent } from "./ConversationsPage.component";
 
-const MATCHES_DATA: ConnectionDetails[] = [
+const MATCHES_DATA: ChatConversationDetails[] = [
   {
+    id: "1",
     name: "John",
-    profileId: 1,
     lastMessage: "hi",
   },
 
   {
+    id: "2",
     name: "Eric",
-    profileId: 2,
     lastMessage: "hi",
   },
 
   {
+    id: "3",
     name: "Dalene",
-    profileId: 3,
     lastMessage: "hi",
   },
 ];
@@ -29,5 +29,5 @@ export default {
 } as Meta;
 
 export const Default = {
-  render: () => <ConnectionsPageComponent data={MATCHES_DATA} />,
+  render: () => <ConversationsPageComponent data={MATCHES_DATA} />,
 };

services/web-ui/src/pages/ConversationsPage/ConversationsPage.container.tsx

@@ -1,13 +1,13 @@
 import { ReactQueryTestProvider, TestRouter, render, screen } from "src/test";
 
-import { ConnectionsPage } from ".";
+import { ConversationsPage } from ".";
 
-describe.skip("<ConnectionsPage />", () => {
+describe.skip("<ConversationsPage />", () => {
   it("renders message when no matches", async () => {
     render(
       <TestRouter>
         <ReactQueryTestProvider>
-          <ConnectionsPage />
+          <ConversationsPage />
         </ReactQueryTestProvider>
       </TestRouter>
     );

services/web-ui/src/pages/ConnectionsPage/ConnectionsPage.nav.tsx renamed to services/web-ui/src/pages/ConversationsPage/ConversationsPage.nav.tsx

@@ -9,20 +9,20 @@ import {
   ListItemText,
 } from "@mui/material";
 
-import { ConnectionDetails } from "src/api";
+import { ChatConversationDetails } from "src/api";
 
-export interface ConnectionListItemProps {
-  data: ConnectionDetails;
+export interface ConversationListItemProps {
+  data: ChatConversationDetails;
   divider?: boolean;
 }
 
-export function ConnectionListItem({
+export function ConversationListItem({
   data,
   divider,
-}: ConnectionListItemProps): React.ReactElement {
+}: ConversationListItemProps): React.ReactElement {
   return (
     <ListItem divider={divider}>
-      <ListItemButton component={Link} to={`/chat/${data.profileId}`}>
+      <ListItemButton component={Link} to={`/chat/${data.id}`}>
         <ListItemAvatar>
           <Avatar src={data.imageUrl} />
         </ListItemAvatar>

services/web-ui/src/pages/ConnectionsPage/ConnectionsPage.skeleton.tsx renamed to services/web-ui/src/pages/ConversationsPage/ConversationsPage.skeleton.tsx

@@ -0,0 +1 @@
+export { ConversationListItem } from "./ConversationListItem";

services/web-ui/src/pages/ConnectionsPage/ConnectionsPage.stories.tsx renamed to services/web-ui/src/pages/ConversationsPage/ConversationsPage.stories.tsx

@@ -0,0 +1 @@
+export { ConversationsPageContainer as ConversationsPage } from "./ConversationsPage.container";