refactor(web-ui): move chat page to chat module

services/web-ui/src/Router.tsx

@@ -6,8 +6,9 @@
 import { NavigationTrackingProvider } from "src/core/tracking/NavigationTrackingProvider";
 import { BlogPostListPage } from "src/features/blogs/pages/BlogPostListPage";
 import { BlogPostPage } from "src/features/blogs/pages/BlogPostPage";
-import { ConversationsPage } from "src/features/chat/pages/ConversationsPage";
-import { ChatPage } from "src/pages/ChatPage";
+import { ChatListPage } from "src/features/chat/pages/ChatListPage";
+import { ChatPage } from "src/features/chat/pages/ChatPage";
+import { CreateChatPage } from "src/features/chat/pages/CreateChatPage";
 import { CreateOrganizationPage } from "src/pages/CreateOrganizationPage";
 import { CurrentOrganizationPage } from "src/pages/CurrentOrganizationPage";
 import { CurrentProfilePage } from "src/pages/CurrentProfilePage";
@@ -44,7 +45,11 @@
       },
       {
         path: "/chat",
-        element: <ConversationsPage />,
+        element: <ChatListPage />,
+      },
+      {
+        path: "/chat/create",
+        element: <CreateChatPage />,
       },
       {
         path: "/chat/:id",

services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.component.tsx

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

services/web-ui/src/features/chat/pages/ConversationsPage/ConversationsPage.container.tsx → services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.container.tsx

@@ -7,47 +7,47 @@ 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";
+import { ChatListPageComponent } from "./ChatListPage.component";
+import { ChatListPageNav } from "./ChatListPage.nav";
+import { ChatListPageSkeleton } from "./ChatListPage.skeleton";
 
-export function ConversationsPageContainer(): ReactElement {
+export function ChatListPageContainer(): ReactElement {
   const { t } = useTranslation("connections");
 
   const { error, data, isPending } = useQuery({
-    queryKey: ["chat-conversations"],
+    queryKey: ["chats"],
     queryFn: () => chatsApi.getConversations(),
   });
 
   if (error) {
     return (
-      <ConversationsPageNav>
+      <ChatListPageNav>
         <ErrorView message="Unable to get chats" />
-      </ConversationsPageNav>
+      </ChatListPageNav>
     );
   }
 
   if (isPending) {
     return (
-      <ConversationsPageNav>
-        <ConversationsPageSkeleton />
-      </ConversationsPageNav>
+      <ChatListPageNav>
+        <ChatListPageSkeleton />
+      </ChatListPageNav>
     );
   }
 
   if (!data || data.length === 0) {
     return (
-      <ConversationsPageNav>
+      <ChatListPageNav>
         <Typography sx={{ paddingTop: 1 }} gutterBottom>
           {t("no-connections")}
         </Typography>
-      </ConversationsPageNav>
+      </ChatListPageNav>
     );
   }
 
   return (
-    <ConversationsPageNav>
-      <ConversationsPageComponent data={data} />
-    </ConversationsPageNav>
+    <ChatListPageNav>
+      <ChatListPageComponent data={data} />
+    </ChatListPageNav>
   );
 }

services/web-ui/src/features/chat/pages/ConversationsPage/ConversationsPage.nav.tsx → services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.nav.tsx

@@ -1,16 +1,16 @@
-import React, { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 
 import { Box, Typography } from "@mui/material";
 
 import { useTranslation } from "src/core/i18n";
 
-export interface ConversationsPageNavProps {
+export interface ChatListPageNavProps {
   children: ReactNode;
 }
 
-export function ConversationsPageNav({
+export function ChatListPageNav({
   children,
-}: ConversationsPageNavProps): React.ReactElement {
+}: ChatListPageNavProps): ReactElement {
   const { t } = useTranslation("connections");
 
   return (

services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.skeleton.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+
+import { List, ListItem, Skeleton } from "@mui/material";
+
+export function ChatListPageSkeleton(): ReactElement {
+  return (
+    <List>
+      <ListItem divider>
+        <Skeleton height={50} width="100%" />
+      </ListItem>
+
+      <ListItem divider>
+        <Skeleton height={50} width="100%" />
+      </ListItem>
+
+      <ListItem divider>
+        <Skeleton height={50} width="100%" />
+      </ListItem>
+    </List>
+  );
+}

services/web-ui/src/features/chat/pages/ConversationsPage/ConversationsPage.stories.tsx → services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta } from "@storybook/react";
 
 import { ChatConversationDetails } from "src/api";
 
-import { ConversationsPageComponent } from "./ConversationsPage.component";
+import { ChatListPageComponent } from "./ChatListPage.component";
 
 const MATCHES_DATA: ChatConversationDetails[] = [
   {
@@ -25,9 +25,9 @@ const MATCHES_DATA: ChatConversationDetails[] = [
 ];
 
 export default {
-  title: "Pages/Conversations/Views",
+  title: "Pages/Chats/Views",
 } as Meta;
 
 export const Default = {
-  render: () => <ConversationsPageComponent data={MATCHES_DATA} />,
+  render: () => <ChatListPageComponent data={MATCHES_DATA} />,
 };

services/web-ui/src/features/chat/pages/ConversationsPage/ConversationsPage.test.tsx → services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.test.tsx

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

services/web-ui/src/features/chat/pages/ChatListPage/index.ts

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

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.container.tsx

@@ -0,0 +1,69 @@
+import { ReactElement, useState } from "react";
+
+import { Autocomplete, TextField } from "@mui/material";
+
+import { chatsApi, organizationsApi } from "src/apis";
+import { Button } from "src/components/ui";
+import { useMutation, useQuery } from "src/core/query";
+import { ErrorView } from "src/views/ErrorView";
+
+import { CreateChatPageNav } from "./CreateChatPage.nav";
+import { CreateChatPageSkeleton } from "./CreateChatPage.skeleton";
+
+interface Option {
+  id: number;
+  label: string;
+}
+
+export function CreateChatPageContainer(): ReactElement {
+  const { error, data, isPending } = useQuery({
+    queryKey: ["members"],
+    queryFn: () => organizationsApi.getCurrentOrganizationMembers(),
+  });
+
+  const [members, setMembers] = useState<Option[]>([]);
+
+  const createChatMutation = useMutation({
+    mutationFn: () => chatsApi.getConversations(),
+  });
+
+  if (error) {
+    return (
+      <CreateChatPageNav>
+        <ErrorView />
+      </CreateChatPageNav>
+    );
+  }
+
+  if (isPending) {
+    return (
+      <CreateChatPageNav>
+        <CreateChatPageSkeleton />
+      </CreateChatPageNav>
+    );
+  }
+
+  const options = data.map((x) => ({ id: x.id, label: x.name }));
+
+  return (
+    <CreateChatPageNav>
+      <Autocomplete
+        multiple
+        onChange={(_, newValue) => setMembers(newValue)}
+        options={options}
+        renderInput={(params) => <TextField label="Members" {...params} />}
+        value={members}
+      />
+
+      <Button
+        disabled={members.length === 0}
+        loading={createChatMutation.isPending}
+        onClick={() => createChatMutation.mutate()}
+        sx={{ mt: 2 }}
+        variant="contained"
+      >
+        Create
+      </Button>
+    </CreateChatPageNav>
+  );
+}

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.nav.tsx

@@ -0,0 +1,13 @@
+import { ReactElement, ReactNode } from "react";
+
+import { Box } from "@mui/material";
+
+interface CreateChatPageNavProps {
+  children: ReactNode;
+}
+
+export function CreateChatPageNav({
+  children,
+}: CreateChatPageNavProps): ReactElement {
+  return <Box sx={{ p: 2 }}>{children}</Box>;
+}

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.skeleton.tsx

@@ -0,0 +1,5 @@
+import { ReactElement } from "react";
+
+export function CreateChatPageSkeleton(): ReactElement {
+  return <>Loading...</>;
+}

services/web-ui/src/features/chat/pages/CreateChatPage/index.ts

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