deduplicate threads and enable expanding

.eslintrc.cjs

@@ -10,5 +10,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
   },
 }

package.json

@@ -14,6 +14,7 @@
     "@atproto/api": "^0.5.2",
     "classnames": "^2.3.2",
     "fast-memoize": "^2.5.2",
+    "immutable": "^4.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-embed": "^3.7.0",

src/App.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import { FormEvent, useEffect, useMemo, useReducer, useState } from 'react'
+import { Set } from 'immutable'
+import { Context, FormEvent, createContext, useEffect, useMemo, useReducer, useState } from 'react'
 import { Tooltip } from 'react-tooltip'
 import './App.css'
 import FriendlyError from './components/FriendlyError'
@@ -26,11 +27,14 @@ const cleanHandle = (handle: string, service: string) => {
   return handle.toLowerCase().trim().replace(/^@/, '')
 }
 
+export const Filter: Context<[Set<string>, (value: Set<string>) => void]> = createContext([Set(), (_) => { }])
+
 function App() {
   const [isLoading, setIsLoading] = useState(false)
   const [profileHandle, setProfileHandle] = useState('')
   const [profile, setProfile] = useState<Profile>()
   const [service, setService] = useState(DEFAULT_SERVICE)
+  const filterState = useState(Set<string>())
   const [collection, setCollection] = useState({
     name: 'posts',
     id: 'app.bsky.feed.post',
@@ -53,6 +57,7 @@ function App() {
       setError(undefined)
       if (!cursor) {
         setIsLoading(true)
+        filterState[1](Set())
       }
 
       return fetchPosts({
@@ -137,7 +142,7 @@ function App() {
   }, [cursor, load])
 
   return (
-    <>
+    <Filter.Provider value={filterState}>
       <header className="App__header">
         <p className="App__credits">
           <a href="https://github.com/bskyviewer/bskyviewer.github.io">
@@ -254,7 +259,7 @@ function App() {
         )}
       />
       <Tooltip id="profile" opacity={1} style={{ zIndex: 100 }} />
-    </>
+    </Filter.Provider>
   )
 }
 

src/components/Post.css

@@ -227,4 +227,9 @@
 
 .Post--ellipsis span {
   padding-left: 56px;
+  cursor: pointer;
+}
+
+.Post--ellipsis span:hover {
+  text-decoration: underline;
 }

src/components/Post.tsx

@@ -7,9 +7,10 @@ import {
   AtUri,
 } from '@atproto/api'
 import classNames from 'classnames'
-import { useEffect, useMemo, useState } from 'react'
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { renderToString } from 'react-dom/server'
 import { ReactEmbed } from 'react-embed'
+import { Filter } from '../App'
 import { Profile, fetchPost, fetchProfile, getBlobURL } from '../utils/api'
 import { WEB_APP } from '../utils/constants'
 import { getRelativeDateString } from '../utils/datetime'
@@ -19,6 +20,8 @@ import RichText from './RichText'
 import Spinner from './Spinner'
 import User from './User'
 
+const ReplyContext = createContext<[boolean, (value: boolean) => void]>([true, () => { }]);
+
 function ExternalEmbed({
   service,
   did,
@@ -111,21 +114,17 @@ function Post({
   depth?: number
 }) {
   const atUri = useMemo(() => new AtUri(uri), [uri])
-
   const [profile, setProfile] = useState<Profile>()
-
   const [profileError, setProfileError] = useState<string>()
-
   const [embeddedPost, setEmbeddedPost] = useState<{
     uri: string
     record: AppBskyFeedPost.Record
   }>()
-
   const [embeddedPostError, setEmbeddedPostError] = useState<string>()
-
   const [parentPost, setParentPost] = useState<AppBskyFeedPost.Record>()
-
   const [parentPostError, setParentPostError] = useState<string>()
+  const [hideReplies, setHideReplies] = useContext(ReplyContext);
+  const [filter, setFilter] = useContext(Filter);
 
   const profileImage = useMemo(() => {
     if (!profile) {
@@ -172,6 +171,10 @@ function Post({
     )
   }, [isEmbedded, post.reply, service])
 
+  useEffect(() => {
+    post.reply && parentPost && !filter.contains(post.reply.parent.uri) && setFilter(filter.add(post.reply.parent.uri))
+  }, [post.reply, parentPost, filter, setFilter])
+
   useEffect(
     () => fetchProfile(service, atUri.hostname, setProfile, setProfileError),
     [atUri.hostname, service],
@@ -202,7 +205,7 @@ function Post({
   }, [isEmbedded, post.embed, service])
 
   const postNode =
-    depth > 1 && parentPost ? null : (
+    hideReplies && depth > 1 && parentPost ? null : (
       <article
         className={classNames('Post', isEmbedded && 'Post--embed', className)}
       >
@@ -218,9 +221,8 @@ function Post({
         )}
         <a
           className="Post__author-name"
-          href={`${WEB_APP}/profile/${
-            profile ? profile.handle : atUri.hostname
-          }`}
+          href={`${WEB_APP}/profile/${profile ? profile.handle : atUri.hostname
+            }`}
           data-tooltip-id="profile"
           data-tooltip-html={profileHtml}
         >
@@ -347,16 +349,23 @@ function Post({
     return (
       <>
         {postNode}
-        <div className="Post--ellipsis">
-          <span>
+        {hideReplies && <div className="Post--ellipsis">
+          <span onClick={() => setHideReplies(false)}>
             {depth - 2} {depth > 3 ? 'replies' : 'reply'} hidden
           </span>
-        </div>
+        </div>}
       </>
     )
   } else {
     return postNode
   }
 }
 
-export default Post
+function WithContext(props: Parameters<typeof Post>[0]) {
+  const replyState = useState(true);
+  return <ReplyContext.Provider value={replyState}>
+    <Post {...props} />
+  </ReplyContext.Provider>
+}
+
+export default WithContext

src/components/Record.tsx

@@ -7,7 +7,8 @@ import {
   AppBskyActorProfile as profile,
   AppBskyFeedRepost as repost,
 } from '@atproto/api'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
+import { Filter } from '../App'
 import { Profile, fetchPost, fetchProfile } from '../utils/api'
 import FriendlyError from './FriendlyError'
 import Post from './Post'
@@ -23,6 +24,7 @@ export function Record({
 }) {
   const [value, setValue] = useState<post.Record | Profile>()
   const [error, setError] = useState('')
+  const [filter] = useContext(Filter)
   useEffect(() => {
     if (
       post.isRecord(record.value) ||
@@ -45,7 +47,7 @@ export function Record({
   }, [service, record])
 
   if (post.isRecord(record.value)) {
-    return <Post service={service} uri={record.uri} post={record.value} />
+    return filter.contains(record.uri) ? null : <Post service={service} uri={record.uri} post={record.value} />
   }
 
   if (