Item details and comment tree (migration 5/8)

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "~9.0.1",
     "@angular/router": "~9.0.1",
     "@angular/service-worker": "~9.0.1",
+    "dompurify": "3.4.13",
     "node-fetch": "^2.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src-react/App.tsx

@@ -4,6 +4,7 @@ import { useSettings } from './shared/settings/SettingsContext';
 import Footer from './core/footer/Footer';
 import Header from './core/header/Header';
 import Feed from './feeds/feed/Feed';
+import ItemDetails from './item-details/ItemDetails';
 import type { FeedName } from './shared/models';
 import './App.scss';
 
@@ -26,6 +27,7 @@ function App() {
                             element={<Feed key={feedName} feedType={feedName} />}
                         />
                     ))}
+                    <Route path="item/:id" element={<ItemDetails />} />
                 </Routes>
                 <Footer />
             </div>

src-react/item-details/ItemDetails.scss

@@ -0,0 +1,151 @@
+@import "../shared/scss/media";
+@import "../shared/scss/theme_variables";
+
+.main-content {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  -webkit-transition: opacity .2s ease;
+  transition: opacity .2s ease;
+  box-sizing: border-box;
+  padding: 8px 0;
+  z-index: 0;
+}
+
+.item {
+  box-sizing: border-box;
+  padding: 10px 40px 0 40px;
+  z-index: 0;
+}
+
+@media #{$tablet-only} {
+  .item {
+    padding: 10px 20px 0 40px;
+  }
+}
+
+@media #{$mobile-only} {
+  .item {
+    box-sizing: border-box;
+    padding: 110px 15px 0 15px;
+  }
+}
+
+.head-margin {
+  margin-bottom: 15px;
+}
+
+p {
+  margin: 2px 0;
+}
+
+.subject {
+  word-wrap: break-word;
+  margin-top: 20px;
+}
+
+a {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+@media #{$mobile-only} {
+  .laptop {
+    display: none;
+  }
+}
+
+@media #{$laptop-only} {
+  .mobile {
+    display: none;
+  }
+}
+
+.title {
+  font-size: 16px;
+  font-family: Verdana, Geneva, sans-serif;
+}
+
+.title-block {
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0 75px;
+}
+
+@media #{$mobile-only} {
+  .title {
+    font-size: 15px;
+  }
+  .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);
+  }
+}
+
+.subtext {
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+}
+
+.domain {
+  letter-spacing: 0.5px;
+}
+
+.subtext a {
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.item-details {
+  padding: 10px;
+}
+
+.item-header {
+  padding-bottom: 10px;
+}
+
+@media #{$mobile-only} {
+  .item-header {
+    padding: 10px 0 10px 0;
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 62px;
+  }
+}
+
+.pollResults {
+  margin-bottom: 1em;
+}
+
+.pollContent {
+  * {
+    padding-bottom: 0;
+    margin-bottom: -1em;
+    margin-top: 1em;
+  }
+  .pollBar {
+    height: 10px;
+    margin-bottom: 1em;
+  }
+}
+
+ul {
+  list-style-type: none;
+  padding: 10px 0;
+}
+
+li {
+  display: list-item;
+}

src-react/item-details/ItemDetails.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+
+import { fetchItemContent } from '../shared/api/hackernewsApi';
+import ErrorMessage from '../shared/components/error-message/ErrorMessage';
+import Loader from '../shared/components/loader/Loader';
+import type { Story } from '../shared/models';
+import { useSettings } from '../shared/settings/SettingsContext';
+import { formatComments } from '../shared/utils/formatComments';
+import { sanitizeHtml } from '../shared/utils/sanitizeHtml';
+import Comment from './comment/Comment';
+import './ItemDetails.scss';
+
+function ItemDetails() {
+    const params = useParams<{ id?: string }>();
+    const itemID = Number(params.id);
+    const navigate = useNavigate();
+    const { settings } = useSettings();
+    const [item, setItem] = useState<Story>();
+    const [errorMessage, setErrorMessage] = useState('');
+
+    useEffect(() => {
+        let ignore = false;
+        window.scrollTo(0, 0);
+        setErrorMessage('');
+
+        fetchItemContent(itemID)
+            .then((nextItem) => {
+                if (!ignore) {
+                    setItem(nextItem);
+                }
+            })
+            .catch(() => {
+                if (!ignore) {
+                    setErrorMessage('Could not load item comments.');
+                }
+            });
+
+        return () => {
+            ignore = true;
+        };
+    }, [itemID]);
+
+    const goBack = () => {
+        navigate(-1);
+    };
+
+    const hasUrl = item?.url?.indexOf('http') === 0;
+
+    return (
+        <div className="main-content">
+            {!item && !errorMessage && <Loader />}
+            {!item && errorMessage !== '' && <ErrorMessage message={errorMessage} />}
+            {item && (
+                <div className="item">
+                    <div className="mobile item-header">
+                        <p className="title-block">
+                            <span className="back-button" onClick={goBack} />
+                            {hasUrl ? (
+                                <a
+                                    className="title"
+                                    href={item.url}
+                                    target={settings.openLinkInNewTab ? '_blank' : undefined}
+                                    rel={settings.openLinkInNewTab ? 'noopener' : undefined}
+                                >
+                                    {item.title}
+                                </a>
+                            ) : (
+                                <Link className="title" to={`/item/${item.id}`}>
+                                    {item.title}
+                                </Link>
+                            )}
+                        </p>
+                    </div>
+                    <div
+                        className={`laptop${item.comments_count > 0 || item.type === 'job' ? ' item-header' : ''}${
+                            item.text ? ' head-margin' : ''
+                        }`}
+                    >
+                        {hasUrl ? (
+                            <p>
+                                <a
+                                    className="title"
+                                    href={item.url}
+                                    target={settings.openLinkInNewTab ? '_blank' : undefined}
+                                    rel={settings.openLinkInNewTab ? 'noopener' : undefined}
+                                >
+                                    {item.title}
+                                </a>
+                                {item.domain && <span className="domain">({item.domain})</span>}
+                            </p>
+                        ) : (
+                            <p>
+                                <Link className="title" to={`/item/${item.id}`}>
+                                    {item.title}
+                                </Link>
+                            </p>
+                        )}
+                        <div className="subtext">
+                            {item.type !== 'job' && (
+                                <span>
+                                    {item.points} points by <Link to={`/user/${item.user}`}>{item.user}</Link>
+                                </span>
+                            )}
+                            <span className={item.type !== 'job' ? 'item-details' : undefined}>
+                                {item.time_ago}
+                                {item.type !== 'job' && (
+                                    <span>
+                                        {' | '}
+                                        <Link to={`/item/${item.id}`}>{formatComments(item.comments_count)}</Link>
+                                    </span>
+                                )}
+                            </span>
+                        </div>
+                    </div>
+                    {item.type === 'poll' && (
+                        <div className="pollResults">
+                            {item.poll.map((pollResult, index) => (
+                                <div className="pollContent" key={index}>
+                                    <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(pollResult.content) }} />
+                                    <div className="subtext">{pollResult.points} points</div>
+                                    <div
+                                        className="pollBar"
+                                        style={{ width: `${(pollResult.points / item.poll_votes_count) * 100}%` }}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                    <p className="subject" dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.content ?? '') }} />
+                    <ul className="comment-list">
+                        {(item.comments ?? []).map((comment) => (
+                            <li key={comment.id}>
+                                <Comment comment={comment} />
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ItemDetails;