docs: fix Threads 2.0 related links (#2491)

### 🎯 Goal This PR resolves the issues related to the Threads 2.0 documentation.
GetStream · Sep 16, 2024 · 9fa4806 · 9fa4806
1 parent 1c08508
commit 9fa4806
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 110 deletions.
diff --git a/docusaurus/docs/React/components/contexts/thread-context.mdx b/docusaurus/docs/React/components/contexts/thread-context.mdx
@@ -7,9 +7,9 @@ title: ThreadContext
 
 ## ThreadProvider
 
-Is a provider which wraps [`Channel`](../core-components/channel.mdx) component and takes [`Thread` instance]() as a value. The [`Channel`](../core-components/channel.mdx) wrapper acts as a temporary measure to make [`Thread` component](../core-components/thread.mdx) compatible with the new architecture which relies on [`Thread` instance](). The reliance on channel is temporary and will become deprecated in the future.
+Is a provider which wraps [`Channel`](../core-components/channel.mdx) component and takes [`Thread` instance](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) as a value. The [`Channel`](../core-components/channel.mdx) wrapper acts as a temporary measure to make [`Thread` component](../core-components/thread.mdx) compatible with the new architecture which relies on [`Thread` instance](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts). The reliance on channel is _temporary_ and will become deprecated in the future.
 
-Thread component newly prioritizes [`Thread` instance]() if rendered under [`ThreadProvider`](../contexts/thread-context.mdx#threadprovider) otherwise falls back to accessing thread from [`Channel` state](../contexts/channel-state-context.mdx).
+Thread component newly prioritizes [`Thread` instance](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) if rendered under `ThreadProvider` otherwise falls back to accessing thread from [`Channel` state](../contexts/channel-state-context.mdx).
 
 ### Basic Usage
 

diff --git a/docusaurus/docs/React/components/core-components/thread-list.mdx b/docusaurus/docs/React/components/core-components/thread-list.mdx
@@ -3,17 +3,42 @@ id: thread-list
 title: ThreadList
 ---
 
-`ThreadList` is a component which renders individual thread instances ([`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts)) stored within `ThreadManager`. It handles pagination triggers and virtualization through the help of the [Virtuoso](https://virtuoso.dev) virtualized list component. The rest of the business logic lives within ThreadManager and Thread classes. ThreadManager instance gets activated whenever ThreadList renders - activation is necessary as it tells the SDK that user "sees" this list and can update state accordingly whenever appropriate events arrive.
-
-If used in default form and rendered within `ThreadView` component it also allows to set active thread and handles `Thread` activation (similar to `ThreadManager` activation).
+`ThreadList` is a component that displays a list of threads where the current user is a participant (this user either started a thread, replied to a thread or was tagged in a thread). It handles pagination and virtualization through the help of the [virtualized list component](https://virtuoso.dev). The rest of the business logic (data manipulation) lives within [`ThreadManager`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) and [`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread_manager.ts) classes. Data represented through `ThreadList` are accessible from client instance (`client.threads.state`).
 
 ## Basic Usage
 
+The `ThreadList` component requires to be rendered within `Chat` component but apart from that does not require any other context to work.
+
 ```tsx
+import { Chat, ThreadList } from 'stream-chat-react';
+
 <Chat client={client}>
   {/*...*/}
   <ThreadList />
-</Chat>
+</Chat>;
+```
+
+For extended "out of the box" functionality `ThreadList` can be rendered within [`ChatView.Threads`](../utility-components/chat-view.mdx) component where individual items within the list become "selectable" through the `ThreadViewContext`. Selected/active thread can be then accessed from this context as well. See [`ChatView` documentation](../utility-components/chat-view.mdx) for extended functionality.
+
+```tsx
+import { Chat, ChatView, ThreadList, useThreadsViewContext } from 'stream-chat-react';
+
+const SelectedThread = () => {
+  const { activeThread } = useThreadsViewContext();
+
+  return null;
+};
+
+<Chat client={client}>
+  <ChatView>
+    <ChatView.Selector />
+    {/*...*/}
+    <ChatView.Threads>
+      <ThreadList />
+      <SelectedThread />
+    </ChatView.Threads>
+  </ChatView>
+</Chat>;
 ```
 
 ## Props

diff --git a/docusaurus/docs/React/components/utility-components/view-components.mdx b/docusaurus/docs/React/components/utility-components/view-components.mdx
diff --git a/docusaurus/docs/React/guides/sdk-state-management.mdx b/docusaurus/docs/React/guides/sdk-state-management.mdx
@@ -136,7 +136,7 @@ export const CustomChannelList = (props: ChannelListProps) => {
 
 ## Thread and ThreadManager
 
-With the new [threads feature]() we've decided to refresh our state management and moved to a subscribable POJO with selector based system to make developer experience better when it came to rendering information provided by our `StreamChat` client.
+With the new [threads feature](../release-guides/upgrade-to-v12.mdx#introducing-threads-20) we've decided to refresh our state management and moved to a subscribable POJO with selector based system to make developer experience better when it came to rendering information provided by our `StreamChat` client.
 
 :::note
 This change is currently only available within `StreamChat.threads` but will be reused across the whole SDK later on.
@@ -200,7 +200,7 @@ const Component3 = ({ userId }: { userId: string }) => {
 
 ### Accessing Reactive State
 
-Our SDK currently allows to access two of these state structures - in [Thread]() and [ThreadManager]() instances under `state` property.
+Our SDK currently allows to access two of these state structures - in [`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) and [`ThreadManager`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread_manager.ts) instances under `state` property.
 
 #### Vanilla
 

diff --git a/docusaurus/docs/React/release-guides/upgrade-to-v12.mdx b/docusaurus/docs/React/release-guides/upgrade-to-v12.mdx
@@ -10,11 +10,11 @@ With the release of v12 of our SDK we're also releasing new thread functionality
 
 ### Thread & ThreadManager
 
-Both [`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) and [`ThreadManager`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) are new classes within [`stream-chat` package](https://www.npmjs.com/package/stream-chat) with own logic which updates their respective state objects to which integrators can subscribe to and render their UI accordingly. These classes (or rather instances of these classes) are utilised within React SDK. Read more about accessing state of these classes in our [SDK State Management documentation](../guides/sdk-state-management.mdx#thread-and-threadmanager).
+Both [`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) and [`ThreadManager`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread_manager.ts) are new classes within [`stream-chat` package](https://www.npmjs.com/package/stream-chat) with own logic which updates their respective state objects to which integrators can subscribe to and render their UI accordingly. These classes (or rather instances of these classes) are utilised within React SDK. Read more about accessing state of these classes in our [SDK State Management documentation](../guides/sdk-state-management.mdx#thread-and-threadmanager).
 
 ### ThreadList & ThreadListItem
 
-[`ThreadList`](../components/core-components/thread-list.mdx) component represents a [`ThreadManager`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) instance while [`ThreadListItem`](../components/core-components/thread-list-item.mdx) represents individual [`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) instances. UI of both of these components reflects latest state of their appropriate "controllers" but apart from communicating with their controllers via available methods these components do not manage any extra logic.
+[`ThreadList`](../components/core-components/thread-list.mdx) component represents a [`ThreadManager`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread_manager.ts) instance while [`ThreadListItem`](../components/core-components/thread-list-item.mdx) represents individual [`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) instances. UI of both of these components reflects latest state of their appropriate "controllers" but apart from communicating with their controllers via available methods these components do not manage any extra logic.
 
 ### ThreadProvider
 

diff --git a/docusaurus/sidebars-react.json b/docusaurus/sidebars-react.json
@@ -33,12 +33,19 @@
             "guides/multiple_channel_lists"
           ]
         },
+        {
+          "Thread List": [
+            "components/core-components/thread-list",
+            "components/core-components/thread-list-item"
+          ]
+        },
         {
           "Message List": [
             "components/core-components/message_list",
             "components/core-components/virtualized_list",
             "components/contexts/message_list_context",
-            "components/core-components/thread"
+            "components/core-components/thread",
+            "components/contexts/thread-context"
           ]
         },
         {
@@ -74,6 +81,7 @@
             "components/contexts/typing_context"
           ]
         },
+        "components/utility-components/chat-view",
         "components/utility-components/indicators",
         "components/utility-components/window",
         "components/contexts/translation_context"
@@ -140,10 +148,17 @@
         "guides/channel_read_state",
         "guides/video-integration/video-integration-stream",
         "guides/sdk-state-management",
-        "guides/date-time-formatting"
+        "guides/date-time-formatting",
+        "guides/custom-threads-view"
+      ]
+    },
+    {
+      "Release Guides": [
+        "release-guides/upgrade-to-v12",
+        "release-guides/upgrade-to-v11",
+        "release-guides/upgrade-to-v10"
       ]
     },
-    { "Release Guides": ["release-guides/upgrade-to-v12", "release-guides/upgrade-to-v11", "release-guides/upgrade-to-v10"] },
     "troubleshooting/troubleshooting",
     "resources/resources"
   ]