Commit b66168ff authored by Robert Knight's avatar Robert Knight

Convert ThreadList to TS

parent b4402316
...@@ -3,6 +3,7 @@ import classnames from 'classnames'; ...@@ -3,6 +3,7 @@ import classnames from 'classnames';
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
import { ListenerCollection } from '../../shared/listener-collection'; import { ListenerCollection } from '../../shared/listener-collection';
import type { Thread } from '../helpers/build-thread';
import { import {
calculateVisibleThreads, calculateVisibleThreads,
THREAD_DIMENSION_DEFAULTS, THREAD_DIMENSION_DEFAULTS,
...@@ -12,8 +13,6 @@ import { getElementHeightWithMargins } from '../util/dom'; ...@@ -12,8 +13,6 @@ import { getElementHeightWithMargins } from '../util/dom';
import ThreadCard from './ThreadCard'; import ThreadCard from './ThreadCard';
/** @typedef {import('../helpers/build-thread').Thread} Thread */
// The precision of the `scrollPosition` value in pixels; values will be rounded // The precision of the `scrollPosition` value in pixels; values will be rounded
// down to the nearest multiple of this scale value // down to the nearest multiple of this scale value
const SCROLL_PRECISION = 50; const SCROLL_PRECISION = 50;
...@@ -26,15 +25,13 @@ function getScrollContainer() { ...@@ -26,15 +25,13 @@ function getScrollContainer() {
return container; return container;
} }
/** @param {number} pos */ function roundScrollPosition(pos: number) {
function roundScrollPosition(pos) {
return Math.max(pos - (pos % SCROLL_PRECISION), 0); return Math.max(pos - (pos % SCROLL_PRECISION), 0);
} }
/** export type ThreadListProps = {
* @typedef ThreadListProps threads: Thread[];
* @prop {Thread[]} threads };
*/
/** /**
* Render a list of threads. * Render a list of threads.
...@@ -44,10 +41,8 @@ function roundScrollPosition(pos) { ...@@ -44,10 +41,8 @@ function roundScrollPosition(pos) {
* annotations (and replies) are complex interactive components whose * annotations (and replies) are complex interactive components whose
* user-defined content may include rich media such as images, audio clips, * user-defined content may include rich media such as images, audio clips,
* embedded YouTube videos, rendered math and more. * embedded YouTube videos, rendered math and more.
*
* @param {ThreadListProps} props
*/ */
function ThreadList({ threads }) { export default function ThreadList({ threads }: ThreadListProps) {
// Client height of the scroll container. // Client height of the scroll container.
const [scrollContainerHeight, setScrollContainerHeight] = useState(0); const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
...@@ -91,9 +86,7 @@ function ThreadList({ threads }) { ...@@ -91,9 +86,7 @@ function ThreadList({ threads }) {
// ID of thread to scroll to after the next render. If the thread is not // ID of thread to scroll to after the next render. If the thread is not
// present, the value persists until it can be "consumed". // present, the value persists until it can be "consumed".
const [scrollToId, setScrollToId] = useState( const [scrollToId, setScrollToId] = useState<string | null>(null);
/** @type {string|null} */ (null)
);
const topLevelThreads = threads; const topLevelThreads = threads;
...@@ -151,8 +144,7 @@ function ThreadList({ threads }) { ...@@ -151,8 +144,7 @@ function ThreadList({ threads }) {
// Clear `scrollToId` so we don't scroll again after the next render. // Clear `scrollToId` so we don't scroll again after the next render.
setScrollToId(null); setScrollToId(null);
/** @param {Thread} thread */ const getThreadHeight = (thread: Thread) =>
const getThreadHeight = thread =>
threadHeights.get(thread.id) || THREAD_DIMENSION_DEFAULTS.defaultHeight; threadHeights.get(thread.id) || THREAD_DIMENSION_DEFAULTS.defaultHeight;
const yOffset = topLevelThreads const yOffset = topLevelThreads
...@@ -168,10 +160,8 @@ function ThreadList({ threads }) { ...@@ -168,10 +160,8 @@ function ThreadList({ threads }) {
useEffect(() => { useEffect(() => {
setThreadHeights(prevHeights => { setThreadHeights(prevHeights => {
const changedHeights = new Map(); const changedHeights = new Map();
for (let { id } of visibleThreads) { for (const { id } of visibleThreads) {
const threadElement = /** @type {HTMLElement} */ ( const threadElement = document.getElementById(id)!;
document.getElementById(id)
);
if (!threadElement) { if (!threadElement) {
// This could happen if the `ThreadList` DOM is not connected to the document. // This could happen if the `ThreadList` DOM is not connected to the document.
...@@ -226,5 +216,3 @@ function ThreadList({ threads }) { ...@@ -226,5 +216,3 @@ function ThreadList({ threads }) {
</div> </div>
); );
} }
export default ThreadList;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment