(null);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ useEffect(() => {
+ const controller = new AbortController();
+
+ setItem(null);
+ setErrorMessage('');
+ window.scrollTo(0, 0);
+
+ fetchItemContent(Number(id), controller.signal)
+ .then(setItem)
+ .catch((error: unknown) => {
+ if (controller.signal.aborted) {
+ return;
+ }
+ console.error(error);
+ setErrorMessage('Could not load item comments.');
+ });
+
+ return () => controller.abort();
+ }, [id]);
+
+ if (!item) {
+ return {errorMessage ? : }
;
+ }
+
+ const isJob = item.type === 'job';
+ const external = hasUrl(item);
+ const linkAttributes = {
+ target: settings.openLinkInNewTab ? '_blank' : undefined,
+ rel: settings.openLinkInNewTab ? 'noopener' : undefined,
+ };
+ const laptopClasses = ['laptop'];
+
+ if (item.comments_count > 0 || isJob) {
+ laptopClasses.push('item-header');
+ }
+ if (item.text) {
+ laptopClasses.push('head-margin');
+ }
+
+ return (
+
+
+
+
+ navigate(-1)}>
+ {external ? (
+
+ {item.title}
+
+ ) : (
+
+ {item.title}
+
+ )}
+
+
+
+ {external ? (
+
+
+ {item.title}
+
+ {item.domain && ({item.domain})}
+
+ ) : (
+
+
+ {item.title}
+
+
+ )}
+
+ {!isJob && (
+
+ {item.points} points by {item.user}
+
+ )}
+
+ {item.time_ago}
+ {!isJob && (
+
+ {' '}
+ | {formatCommentCount(item.comments_count)}
+
+ )}
+
+
+
+ {item.type === 'poll' && (
+
+ {item.poll.map((pollResult, index) => (
+
+
+
{pollResult.points} points
+
+
+ ))}
+
+ )}
+
+
+ {item.comments?.map((comment) => (
+ -
+
+
+ ))}
+
+
+
` blocks inside the
+ about text injected from the API. */
+.profile pre {
+ white-space: pre-wrap;
+}
+
+.profile {
+ padding: 30px;
+}
+
+@media #{$mobile-only} {
+ .profile {
+ padding: 110px 15px 0 15px;
+ }
+ .title-block {
+ font-size: 15px;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0 75px;
+ }
+ .back-button {
+ position: absolute;
+ top: 52%;
+ width: 0.6rem;
+ height: 0.6rem;
+ background: transparent;
+ box-shadow: 0 0 0 lightgray;
+ transition: all 200ms ease;
+ left: 4%;
+ transform: translate3d(0, -50%, 0) rotate(-135deg);
+ }
+ .item-header {
+ padding-bottom: 10px;
+ background-color: #fff;
+ padding: 10px 0 10px 0;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ top: 62px;
+ height: 20px;
+ }
+}
+
+@media #{$laptop-only} {
+ .mobile {
+ display: none;
+ }
+}
+
+.main-details {
+ .name {
+ font-weight: bold;
+ font-size: 32px;
+ letter-spacing: 2px;
+ }
+ .age {
+ font-weight: bold;
+ color: #696969;
+ padding-bottom: 0;
+ }
+ .right {
+ float: right;
+ font-weight: bold;
+ font-size: 32px;
+ letter-spacing: 2px;
+ }
+}
+
+@media #{$mobile-only} {
+ .main-details {
+ margin-top: 20px;
+ .name {
+ font-size: 18px;
+ }
+ }
+}
+
+@media #{$mobile-only} {
+ .main-details .right {
+ font-size: 18px;
+ }
+}
+
+.other-details {
+ word-wrap: break-word;
+}
diff --git a/src/pages/User.test.tsx b/src/pages/User.test.tsx
new file mode 100644
index 00000000..d1a62455
--- /dev/null
+++ b/src/pages/User.test.tsx
@@ -0,0 +1,70 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import type { User as UserModel } from '../models/user';
+import User from './User';
+
+function stubFetch(user: UserModel | null) {
+ const fetchMock = vi.fn(async (_url: string, _init?: RequestInit) => {
+ if (!user) {
+ return { ok: false, status: 404 } as Response;
+ }
+ return { ok: true, status: 200, json: async () => user } as Response;
+ });
+
+ vi.stubGlobal('fetch', fetchMock);
+
+ return fetchMock;
+}
+
+function renderUser() {
+ return render(
+
+
+ } />
+
+
+ );
+}
+
+afterEach(() => {
+ cleanup();
+ vi.unstubAllGlobals();
+});
+
+describe('User', () => {
+ it('renders the profile of the routed user', async () => {
+ const fetchMock = stubFetch({
+ id: 'pg',
+ crated_time: 0,
+ created: 'January 1, 2007',
+ karma: 155000,
+ avg: 0,
+ about: 'Bio
',
+ });
+ const { container } = renderUser();
+
+ expect(fetchMock.mock.calls[0][0]).toBe('https://node-hnapi.herokuapp.com/user/pg');
+
+ await waitFor(() => expect(screen.getByText('155000 ★')).toBeTruthy());
+ expect(screen.getByText('Created January 1, 2007')).toBeTruthy();
+ expect(container.querySelector('.other-details')?.innerHTML).toContain('Bio
');
+ });
+
+ it('omits the about block when the user has no bio', async () => {
+ stubFetch({ id: 'pg', crated_time: 0, created: 'January 1, 2007', karma: 1, avg: 0, about: '' });
+ const { container } = renderUser();
+
+ await waitFor(() => expect(screen.getByText('1 ★')).toBeTruthy());
+ expect(container.querySelector('.other-details')).toBeNull();
+ });
+
+ it('names the user in the error message', async () => {
+ vi.spyOn(console, 'error').mockImplementation(() => {});
+ stubFetch(null);
+ renderUser();
+
+ await waitFor(() => expect(screen.getByText('Could not load user pg.')).toBeTruthy());
+ });
+});
diff --git a/src/pages/User.tsx b/src/pages/User.tsx
new file mode 100644
index 00000000..f64e2f15
--- /dev/null
+++ b/src/pages/User.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { fetchUser } from '../api/hackerNews';
+import ErrorMessage from '../components/ErrorMessage';
+import Loader from '../components/Loader';
+import type { User as UserModel } from '../models/user';
+
+import './User.scss';
+
+export default function User() {
+ const { id } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+
+ const [user, setUser] = useState(null);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ useEffect(() => {
+ const controller = new AbortController();
+
+ setUser(null);
+ setErrorMessage('');
+
+ fetchUser(id ?? '', controller.signal)
+ .then(setUser)
+ .catch((error: unknown) => {
+ if (controller.signal.aborted) {
+ return;
+ }
+ console.error(error);
+ setErrorMessage(`Could not load user ${id}.`);
+ });
+
+ return () => controller.abort();
+ }, [id]);
+
+ if (!user) {
+ return errorMessage ? : ;
+ }
+
+ return (
+
+
+
+ navigate(-1)}>
+ Profile: {user.id}
+
+
+
+
{user.id}
+
{user.karma} ★
+
Created {user.created}
+
+ {user.about && (
+
+ )}
+
+ 
+