Add user profile navigation from names and avatars

apps/ui-sharethrift/src/components/layouts/home/components/view-listing/sharer-information/sharer-information.container.tsx

@@ -1,6 +1,16 @@
-import { useQuery } from '@apollo/client/react';
+import { useMutation, useQuery } from '@apollo/client/react';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { SharerInformation } from './sharer-information.tsx';
-import { SharerInformationContainerDocument } from '../../../../../../generated.tsx';
+import {
+	CreateConversationDocument,
+	HomeConversationListContainerConversationsByUserDocument,
+	SharerInformationContainerDocument,
+} from '../../../../../../generated.tsx';
+import type {
+	CreateConversationMutation,
+	CreateConversationMutationVariables,
+} from '../../../../../../generated.tsx';
 
 interface SharerInformationContainerProps {
 	sharerId: string;
@@ -15,13 +25,74 @@ interface SharerInformationContainerProps {
 export const SharerInformationContainer: React.FC<
 	SharerInformationContainerProps
 > = ({ sharerId, listingId, isOwner, sharedTimeAgo, className, currentUserId }) => {
+	const [isMobile, setIsMobile] = useState(false);
+	const navigate = useNavigate();
+
 	const { data, loading, error } = useQuery(
 		SharerInformationContainerDocument,
 		{
 			variables: { sharerId },
 		},
 	);
 
+	const [createConversation, { loading: isCreating }] = useMutation<
+		CreateConversationMutation,
+		CreateConversationMutationVariables
+	>(CreateConversationDocument, {
+		refetchQueries: [
+			{
+				query: HomeConversationListContainerConversationsByUserDocument,
+				variables: { userId: currentUserId },
+			},
+		],
+		awaitRefetchQueries: true,
+		onCompleted: (data) => {
+			if (data.createConversation.status.success) {
+				navigate('/messages', {
+					state: {
+						selectedConversationId: data.createConversation.conversation?.id,
+					},
+					replace: false,
+				});
+			} else {
+				console.log(
+					'Failed to create conversation:',
+					data.createConversation.status.errorMessage,
+				);
+			}
+		},
+		onError: (error) => {
+			console.error('Error creating conversation:', error);
+		},
+	});
+
+	const handleMessageSharer = async (resolvedSharerId: string) => {
+		if (!currentUserId) {
+			return;
+		}
+
+		try {
+			await createConversation({
+				variables: {
+					input: {
+						listingId,
+						sharerId: resolvedSharerId,
+						reserverId: currentUserId,
+					},
+				},
+			});
+		} catch (error) {
+			console.error('Failed to create conversation:', error);
+		}
+	};
+
+	useEffect(() => {
+		const checkMobile = () => setIsMobile(window.innerWidth <= 600);
+		checkMobile();
+		window.addEventListener('resize', checkMobile);
+		return () => window.removeEventListener('resize', checkMobile);
+	}, []);
+
 	// If sharerId looks like a name (contains spaces or letters), use it directly
 	// Otherwise, try to query for user data
 	const isNameOnly =
@@ -41,6 +112,9 @@ export const SharerInformationContainer: React.FC<
 				sharedTimeAgo={sharedTimeAgo}
 				className={className}
 				currentUserId={currentUserId}
+				isCreating={isCreating}
+				isMobile={isMobile}
+				onMessageSharer={() => handleMessageSharer(sharer.id)}
 			/>
 		);
 	}
@@ -66,6 +140,9 @@ export const SharerInformationContainer: React.FC<
 			sharedTimeAgo={sharedTimeAgo}
 			className={className}
 			currentUserId={currentUserId}
+			isCreating={isCreating}
+			isMobile={isMobile}
+			onMessageSharer={() => handleMessageSharer(sharer.id)}
 		/>
 	);
 };

apps/ui-sharethrift/src/components/layouts/home/components/view-listing/sharer-information/sharer-information.stories.tsx

@@ -1,14 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, within, userEvent } from 'storybook/test';
 import { SharerInformation } from './sharer-information.tsx';
-import {
-	withMockApolloClient,
-	withMockRouter,
-} from '../../../../../../test-utils/storybook-decorators.tsx';
-import {
-	CreateConversationDocument,
-	HomeConversationListContainerConversationsByUserDocument,
-} from '../../../../../../generated.tsx';
+import { withMockRouter } from '../../../../../../test-utils/storybook-decorators.tsx';
 
 const mockSharer = {
 	id: 'user-1',
@@ -21,50 +14,17 @@ const meta: Meta<typeof SharerInformation> = {
 	component: SharerInformation,
 	parameters: {
 		layout: 'padded',
-		apolloClient: {
-			mocks: [
-				{
-					request: {
-						query: CreateConversationDocument,
-						variables: {
-							input: {
-								listingId: '1',
-								sharerId: 'user-1',
-								reserverId: 'user-2',
-							},
-						},
-					},
-					result: {
-						data: {
-							createConversation: {
-								__typename: 'ConversationMutationResult',
-								status: { success: true, errorMessage: null },
-								conversation: { __typename: 'Conversation', id: 'conv-1' },
-							},
-						},
-					},
-				},
-				{
-					request: {
-						query: HomeConversationListContainerConversationsByUserDocument,
-						variables: { userId: 'user-2' },
-					},
-					result: {
-						data: {
-							conversationsByUser: [],
-						},
-					},
-				},
-			],
-		},
 	},
-	decorators: [withMockApolloClient, withMockRouter('/listing/1')],
+	decorators: [withMockRouter('/listing/1')],
 	args: {
 		sharer: mockSharer,
 		listingId: '1',
 		isOwner: false,
 		sharedTimeAgo: '2 days ago',
 		currentUserId: 'user-2',
+		isCreating: false,
+		isMobile: false,
+		onMessageSharer: () => undefined,
 	},
 };
 
@@ -125,52 +85,10 @@ export const ClickMessageButton: Story = {
 	},
 };
 
-export const MessageButtonWithError: Story = {
-	parameters: {
-		apolloClient: {
-			mocks: [
-				{
-					request: {
-						query: CreateConversationDocument,
-						variables: () => true,
-					},
-					maxUsageCount: Number.POSITIVE_INFINITY,
-					result: {
-						data: {
-							createConversation: {
-								__typename: 'ConversationMutationResult',
-								status: { success: false, errorMessage: 'Failed to create' },
-								conversation: null,
-							},
-						},
-					},
-				},
-				{
-					request: {
-						query: HomeConversationListContainerConversationsByUserDocument,
-						variables: () => true,
-					},
-					maxUsageCount: Number.POSITIVE_INFINITY,
-					result: {
-						data: {
-							conversationsByUser: [],
-						},
-					},
-				},
-			],
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(canvasElement).toBeTruthy();
-		const messageButton = canvas.queryByRole('button', { name: /Message/i });
-		if (messageButton) {
-			await userEvent.click(messageButton);
-		}
-	},
-};
-
 export const MobileView: Story = {
+	args: {
+		isMobile: true,
+	},
 	parameters: {
 		viewport: {
 			defaultViewport: 'mobile1',