feat(shared): link to a user's world from the profile tooltip

packages/shared/src/components/cards/entity/UserEntityCard.spec.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import UserEntityCard from './UserEntityCard';
+import AuthContext from '../../../contexts/AuthContext';
+import type { LoggedUser, UserShortProfile } from '../../../lib/user';
+import { webappUrl } from '../../../lib/constants';
+
+jest.mock(
+  '../../../hooks/contentPreference/useContentPreferenceStatusQuery',
+  () => ({
+    useContentPreferenceStatusQuery: () => ({ data: undefined }),
+  }),
+);
+
+jest.mock('../../../hooks/useShowFollowAction', () => ({
+  __esModule: true,
+  default: () => ({ isLoading: false, showActionBtn: true }),
+}));
+
+const user: UserShortProfile = {
+  id: 'u1',
+  username: 'johndoe',
+  name: 'John Doe',
+  image: 'https://daily.dev/john.jpg',
+  permalink: 'https://daily.dev/johndoe',
+  createdAt: '2024-01-01T00:00:00.000Z',
+  bio: 'hello',
+  reputation: 10,
+} as UserShortProfile;
+
+const renderComponent = (loggedUserId?: string) =>
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <AuthContext.Provider
+        value={
+          {
+            user: loggedUserId ? ({ id: loggedUserId } as LoggedUser) : null,
+            menu: null,
+            showLogin: jest.fn(),
+            logout: jest.fn(),
+            updateUser: jest.fn(),
+            tokenRefreshed: true,
+            getRedirectUri: jest.fn(),
+          } as never
+        }
+      >
+        <UserEntityCard user={user} />
+      </AuthContext.Provider>
+    </QueryClientProvider>,
+  );
+
+describe('UserEntityCard', () => {
+  it('links to the user world', () => {
+    renderComponent('other');
+
+    const link = screen.getByLabelText("Visit @johndoe's world");
+    expect(link).toHaveAttribute('href', `${webappUrl}world/johndoe`);
+  });
+
+  it('keeps the world link for the logged in user, who has no follow button', () => {
+    renderComponent('u1');
+
+    expect(screen.getByLabelText("Visit @johndoe's world")).toBeInTheDocument();
+    expect(screen.queryByText('Follow')).not.toBeInTheDocument();
+  });
+});

packages/shared/src/components/cards/entity/UserEntityCard.tsx

@@ -9,7 +9,7 @@ import {
   TypographyTag,
   TypographyType,
 } from '../../typography/Typography';
-import { DevPlusIcon } from '../../icons';
+import { DevPlusIcon, WorldIcon } from '../../icons';
 import { VerifiedCompanyUserBadge } from '../../VerifiedCompanyUserBadge';
 import { ProfileImageSize } from '../../ProfilePicture';
 import { ReputationUserBadge } from '../../ReputationUserBadge';
@@ -19,9 +19,10 @@ import { FollowButton } from '../../contentPreference/FollowButton';
 import { ContentPreferenceType } from '../../../graphql/contentPreference';
 import { useContentPreferenceStatusQuery } from '../../../hooks/contentPreference/useContentPreferenceStatusQuery';
 import AuthContext from '../../../contexts/AuthContext';
-import { ButtonVariant } from '../../buttons/Button';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import EntityDescription from './EntityDescription';
 import useShowFollowAction from '../../../hooks/useShowFollowAction';
+import { webappUrl } from '../../../lib/constants';
 
 type Props = {
   user?: UserShortProfile;
@@ -48,6 +49,7 @@ const UserEntityCard = ({ user, className }: Props) => {
   const { username, bio, name, image, isPlus, createdAt, id, permalink } = user;
   const isSameUser = loggedUser?.id === id;
   const showActionBtns = !isLoading && !isSameUser;
+  const worldHref = `${webappUrl}world/${username}`;
 
   return (
     <EntityCard
@@ -60,16 +62,26 @@ const UserEntityCard = ({ user, className }: Props) => {
       }}
       entityName={username}
       actionButtons={
-        showActionBtns && (
-          <FollowButton
-            variant={ButtonVariant.Primary}
-            entityId={id}
-            status={contentPreference?.status}
-            showSubscribe={false}
-            type={ContentPreferenceType.User}
-            entityName={username}
+        <>
+          <Button
+            tag="a"
+            href={worldHref}
+            aria-label={`Visit @${username}'s world`}
+            icon={<WorldIcon />}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Secondary}
           />
-        )
+          {showActionBtns && (
+            <FollowButton
+              variant={ButtonVariant.Primary}
+              entityId={id}
+              status={contentPreference?.status}
+              showSubscribe={false}
+              type={ContentPreferenceType.User}
+              entityName={username}
+            />
+          )}
+        </>
       }
     >
       <div className="mt-2 flex w-full flex-col gap-3">