fix(client): render report user page for signed out users (#64399)

client/src/client-only-routes/show-user.test.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Provider } from 'react-redux';
+import type * as I18next from 'i18next';
+
+import { createStore } from '../redux/create-store';
+import { ShowUser } from './show-user';
+
+const store = createStore();
+
+vi.mock('../utils/get-words');
+
+describe('<ShowUser />', () => {
+  it('renders login button when user is signed out', () => {
+    render(
+      <Provider store={store}>
+        <ShowUser {...loggedOutProps} />
+      </Provider>
+    );
+    expect(screen.getByText('report.sign-in')).toBeInTheDocument();
+  });
+
+  it('renders report form when user is signed in', () => {
+    render(
+      <Provider store={store}>
+        <ShowUser {...loggedInProps} />
+      </Provider>
+    );
+    expect(screen.getByText('report.submit')).toBeInTheDocument();
+  });
+});
+
+// Mock props for different states
+const mockT = vi.fn(key => key) as unknown as I18next.TFunction;
+
+const baseProps = {
+  reportUser: vi.fn(),
+  t: mockT,
+  username: 'testuser',
+  userFetchState: {
+    pending: false,
+    complete: true,
+    errored: false,
+    error: null
+  }
+};
+
+const loggedInProps = {
+  ...baseProps,
+  user: { email: 'test@example.com' }
+};
+
+const loggedOutProps = {
+  ...baseProps,
+  user: null
+};

client/src/client-only-routes/show-user.tsx

@@ -18,16 +18,13 @@ import {
 import Login from '../components/Header/components/login';
 import { Loader, FullWidthRow } from '../components/helpers';
 import { reportUser } from '../redux/actions';
-import {
-  userFetchStateSelector,
-  isSignedInSelector,
-  userSelector
-} from '../redux/selectors';
+import { userFetchStateSelector, userSelector } from '../redux/selectors';
 import { UserFetchState } from '../redux/prop-types';
 
+type User = { email: string } | null;
+
 interface ShowUserProps {
-  email: string;
-  isSignedIn: boolean;
+  user: User;
   reportUser: (payload: {
     username: string;
     reportDescription: string;
@@ -38,17 +35,11 @@ interface ShowUserProps {
 }
 
 const mapStateToProps = createSelector(
-  isSignedInSelector,
   userFetchStateSelector,
   userSelector,
-  (
-    isSignedIn,
-    userFetchState: UserFetchState,
-    { email }: { email: string }
-  ) => ({
-    isSignedIn,
+  (userFetchState: UserFetchState, user: User) => ({
     userFetchState,
-    email
+    user
   })
 );
 
@@ -56,9 +47,8 @@ const mapDispatchToProps = {
   reportUser
 };
 
-function ShowUser({
-  email,
-  isSignedIn,
+export function ShowUser({
+  user,
   reportUser,
   t,
   userFetchState,
@@ -80,7 +70,7 @@ function ShowUser({
     return <Loader fullScreen={true} />;
   }
 
-  if ((complete || errored) && !isSignedIn) {
+  if (errored || !user) {
     return (
       <main>
         <FullWidthRow>
@@ -117,7 +107,7 @@ function ShowUser({
         <Col sm={6} smOffset={3} xs={12}>
           <p>
             <Trans i18nKey='report.notify-1'>
-              <strong>{{ email }}</strong>
+              <strong>{{ email: user.email }}</strong>
             </Trans>
           </p>
           <p>{t('report.notify-2')}</p>