From ad13475c603afc4694a5d2524f5781dde4babc67 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 26 Aug 2026 14:02:59 +0000
Subject: [PATCH 1/2] feature: add React user page

Co-Authored-By: Paul Abboud <abboudpaul112@gmail.com>
---
 src/react/components/User.scss | 89 +++++++++++++++++++++++++++++++++
 src/react/components/User.tsx  | 91 ++++++++++++++++++++++++++++++++--
 2 files changed, 175 insertions(+), 5 deletions(-)
 create mode 100644 src/react/components/User.scss

diff --git a/src/react/components/User.scss b/src/react/components/User.scss
new file mode 100644
index 000000000..ca29f7ba7
--- /dev/null
+++ b/src/react/components/User.scss
@@ -0,0 +1,89 @@
+@import "../scss/media";
+@import "../scss/theme_variables";
+
+.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/react/components/User.tsx b/src/react/components/User.tsx
index 6f21b7624..01bedcff1 100644
--- a/src/react/components/User.tsx
+++ b/src/react/components/User.tsx
@@ -1,12 +1,93 @@
-import { useParams } from 'react-router-dom';
+import { KeyboardEvent, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import ErrorMessage from './ErrorMessage';
+import Loader from './Loader';
+import { fetchUser } from '../api/hackernews';
+import { User as UserModel } from '../models/user';
+import './User.scss';
 
 export default function User() {
     const { id } = useParams<'id'>();
+    const navigate = useNavigate();
+    const [user, setUser] = useState<UserModel | null>(null);
+    const [errorMessage, setErrorMessage] = useState('');
+
+    useEffect(() => {
+        let ignore = false;
+
+        setErrorMessage('');
+        if (!id) {
+            setErrorMessage('Could not load user .');
+            return () => {
+                ignore = true;
+            };
+        }
+
+        fetchUser(id)
+            .then(nextUser => {
+                if (ignore) {
+                    return;
+                }
+
+                setUser(nextUser);
+            })
+            .catch(() => {
+                if (ignore) {
+                    return;
+                }
+
+                setErrorMessage('Could not load user ' + id + '.');
+            });
+
+        return () => {
+            ignore = true;
+        };
+    }, [id]);
+
+    function goBack() {
+        navigate(-1);
+    }
+
+    function handleBackKeyDown(event: KeyboardEvent<HTMLSpanElement>) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            goBack();
+        }
+    }
+
+    if (!user) {
+        return (
+            <>
+                {!errorMessage && <Loader />}
+                {errorMessage && <ErrorMessage message={errorMessage} />}
+            </>
+        );
+    }
 
     return (
-        <main>
-            <h2>User</h2>
-            <p>{id}</p>
-        </main>
+        <div className="profile">
+            <div className="mobile item-header">
+                <p className="title-block">
+                    <span
+                        className="back-button"
+                        role="button"
+                        tabIndex={0}
+                        onClick={goBack}
+                        onKeyDown={handleBackKeyDown}
+                    ></span>
+                    Profile: {user.id}
+                </p>
+            </div>
+            <div className="main-details">
+                <span className="name">{user.id}</span>
+                <span className="right">{user.karma} ★</span>
+                <p className="age">Created {user.created}</p>
+            </div>
+            {user.about && (
+                <div className="other-details">
+                    <p dangerouslySetInnerHTML={{ __html: user.about }}></p>
+                </div>
+            )}
+        </div>
     );
 }

From 067e80f88f04a61d03acc643bea3e91475a2ba08 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 26 Aug 2026 14:05:34 +0000
Subject: [PATCH 2/2] feature: drop unreachable empty-id error message on user
 page

Co-Authored-By: Paul Abboud <abboudpaul112@gmail.com>
---
 src/react/components/User.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/react/components/User.tsx b/src/react/components/User.tsx
index 01bedcff1..6c2d720f2 100644
--- a/src/react/components/User.tsx
+++ b/src/react/components/User.tsx
@@ -17,10 +17,7 @@ export default function User() {
 
         setErrorMessage('');
         if (!id) {
-            setErrorMessage('Could not load user .');
-            return () => {
-                ignore = true;
-            };
+            return;
         }
 
         fetchUser(id)