feat: adds the account link components

Adds the Account Link component

re #143

src/components/molecules/AccountLink/AccountLink.stories.tsx

@@ -0,0 +1,43 @@
+import { Story } from '@storybook/react';
+import { SessionProvider } from 'next-auth/react';
+import { AccountLink, profileQuery } from './AccountLink';
+
+export default {
+  title: 'Molecules/AccountLink',
+  component: AccountLink,
+};
+
+const Template: Story = (args) => {
+  return (
+    <SessionProvider session={{ expires: '' }}>
+      <AccountLink {...args} />
+    </SessionProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = {
+  apolloClient: {
+    // do not put MockedProvider here, you can, but its preferred to do it in preview.js
+    mocks: [
+      {
+        request: {
+          query: profileQuery,
+        },
+        result: {
+          data: {
+            profile: {
+              firstName: 'John',
+              lastName: 'Doe',
+              avatar: {
+                filepath: 'https://i.pravatar.cc/300',
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+};

src/components/molecules/AccountLink/AccountLink.test.tsx

@@ -0,0 +1,57 @@
+import { NextRouter } from 'next/router';
+import { useSession } from 'next-auth/react';
+import { render, screen } from '@testing-library/react';
+import { AccountLink } from './AccountLink';
+
+jest.mock<typeof import('next/router')>('next/router', () => ({
+  ...jest.requireActual<typeof import('next/router')>('next/router'),
+  useRouter: () =>
+    ({
+      asPath: '/',
+    } as NextRouter),
+}));
+
+jest.mock<typeof import('next-auth/react')>('next-auth/react', () => ({
+  useSession: jest.fn(),
+}));
+
+jest.mock<typeof import('@apollo/client')>('@apollo/client', () => ({
+  useQuery: jest.fn().mockReturnValue({
+    data: { profile: { firstName: 'John', lastName: 'Doe', avatar: { filepath: 'test.jpg' } } },
+  }),
+  gql: jest.fn(),
+}));
+
+describe('<AccountLink />', () => {
+  const setupAccountLink = (props: object = {}, context: object = {}) => {
+    const { session } = context;
+
+    useSession.mockClear().mockReturnValue({ ...session });
+
+    return render(<AccountLink {...props} />);
+  };
+
+  it('renders the AccountLink', () => {
+    expect.assertions(1);
+
+    setupAccountLink();
+
+    expect(screen.getByRole('link', { name: 'Login' })).toHaveAttribute('href', '/api/auth/signin');
+  });
+
+  it('renders the AccountLink with logged in user', () => {
+    expect.assertions(2);
+
+    setupAccountLink(
+      {},
+      {
+        session: {
+          status: 'authenticated',
+        },
+      },
+    );
+
+    expect(screen.getByRole('link', { name: /John D\./i })).toHaveAttribute('href', '/account');
+    expect(screen.getByRole('img', { name: 'John D.' })).toHaveAttribute('src', '/test.jpg');
+  });
+});

src/components/molecules/AccountLink/AccountLink.tsx

@@ -0,0 +1,42 @@
+import { useSession } from 'next-auth/react';
+import { useQuery, gql } from '@apollo/client';
+import { Avatar } from '@mui/material';
+import NavLink, { NavLinkProps } from '@components/atoms/NavLink';
+import { getShortName } from '@utils/profile';
+import { getImageUrl } from '@utils/image';
+
+export const profileQuery = gql`
+  query AccountLinkQuery {
+    profile {
+      firstName
+      lastName
+      avatar {
+        filepath
+      }
+    }
+  }
+`;
+
+const LOGIN_LABEL = 'Login';
+
+export function AccountLink(props: NavLinkProps) {
+  const { status } = useSession();
+  const { data } = useQuery(profileQuery);
+
+  const isAuthed = status === 'authenticated';
+
+  let label = LOGIN_LABEL;
+  let href = '/api/auth/signin';
+  let icon = null;
+
+  if (isAuthed) {
+    const profile = data?.profile || {};
+    const imgSrc = getImageUrl(profile?.avatar || {});
+
+    label = getShortName(profile);
+    href = '/account';
+    icon = <Avatar alt={label} src={imgSrc} />;
+  }
+
+  return <NavLink {...props} href={href} label={label} icon={icon} />;
+}

src/components/molecules/AccountLink/index.ts

@@ -0,0 +1,4 @@
+import { AccountLink } from './AccountLink';
+
+export * from './AccountLink';
+export default AccountLink;