feature: PR 7/8 — React User page

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;
+}

src/react/components/User.tsx

@@ -1,12 +1,90 @@
-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) {
+            return;
+        }
+
+        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>
     );
 }