docs: eliminates duplication regarding how to enable offline support

vanGalilea · vanGalilea · commit 528afe57d4b4 · 2022-09-06T10:07:53.000+02:00
diff --git a/docusaurus/docs/reactnative/basics/offline_support.mdx b/docusaurus/docs/reactnative/basics/offline_support.mdx
@@ -8,46 +8,49 @@ React Native Chat SDK provides OOTB support for offline mode, which means user w
 with chat even when the network is off. This is an opt-in feature that needs to be explicitely enabled on application
 level.
 
-> Offline support is currently not supported for Expo package (stream-chat-expo).
+> Offline support is currently not implemented for Expo package (stream-chat-expo).
 
 ## Features
 
-- ✅ Access to channel list and message list without network
-- ✅ Faster loading of chat since chat gets loaded from offline storage first before loading data from network
-- ✅ Syncing the local database using websocket events and sync api (once network is recovered)
-- ❌ Caching of image attachments
-- ❌ Optimistic updates to database on user action in offline mode e.g., send message, add reaction etc
+The offline storage implementation currently offers the following features:
+
+- Access to chat when Internet connection is disabled or low.
+- Faster startup times and loading, since initial data is loaded from offline storage before performing any network requests.
+- Syncing of the offline database using WebSocket events and Sync API.
+
+The following features are currently **NOT** implemented. They will be implemented gradually as part of minor releases in v5.
+
+- Optimistically update offline database during chat interactions, such as send message, add reaction, etc.
+- Access to threads in offline mode.
+- Offline caching of attachment images and profile images.
 
 ## How To Enable Offline Support
 
-- **Upgrade stream-chat dependency (optional)**
+First and foremost make sure to follow all steps from [Migrating to v5](./upgrade_helper.mdx) guide.
+To enable offline support, please follow the given steps:
 
-  If you have installed `stream-chat` dependency explicitely on your application, then upgrade it to v7
+1. **Upgrade stream-chat dependency (optional)**
 
-  ```bash
-  yarn add stream-chat@7.0.0
-  ```
+If you have installed `stream-chat` dependency explicitly on your application, then upgrade it to v7:
+
+```bash
+yarn add stream-chat@7.0.0
+```
 
-- **Add `react-native-quick-sqlite` dependency**
+2. **Add `react-native-quick-sqlite` dependency**
 
-  ```bash
+```bash
   yarn add react-native-quick-sqlite
   npx pod-install
-  ```
-
-- **Ensure unique instance of Chat component**
-
-  Until v4, you could provide separate `Chat` component for each usage of `Channel` component or `ChannelList` component.
-  But from v5, it is necessary that you provide only one instance of `Chat` component within your application.
-  This component needs to be a parent for all the chat related components such as `ChannelList`, `Channel` or `Thread`.
+```
 
-- **Do not wait for `connectUser` call to succeed**
+3. **Do not wait for `connectUser` call to succeed**
 
-  It is important that you call `connectUser` method on chat client, before you render Chat components.
-  But you don't need to wait for `connectUser` to succeed before rendering Chat components. This is to ensure:
+It is important that you call the `connectUser` method on the chat client, before you render Chat components.
+But you don't need to wait for `connectUser` to succeed before rendering Chat components. This is to ensure:
 
-  - Chat components have access to current user information, which is important to store/access offline data.
-  - In case or slow or no network, Chat components will still load the chat data without waiting for connectUser to succeed.
+- Chat components have access to current user information, which is important to store/access offline data.
+- In case of slow or no network access, Chat components will still load the chat data without waiting for `connectUser` to succeed.
 
   ```tsx {7,8,16}
   const chatClient = StreamChat.getInstance('API_KEY');
@@ -75,26 +78,26 @@ level.
   };
   ```
 
-- **Add `enableOfflineSupport` prop on Chat component**
+4. **Add `enableOfflineSupport` prop on Chat component**
 
-  ```tsx
-  import { Chat } from 'stream-chat-react-native';
+```tsx
+import { Chat } from 'stream-chat-react-native';
 
-  <Chat client={chatClient} enableOfflineSupport>
-    ...
-  </Chat>;
-  ```
+<Chat client={chatClient} enableOfflineSupport>
+  ...
+</Chat>;
+```
 
-- **Reset the database when signing out the user**
+-5. **Reset the database when signing out the user**
 
-  Since SDK doesn't handle the app level authentication logic, its application's responsibility
-  to ensure resetting database when user gets logged out. This should be generally done before you
-  call `client.disconnectUser()`
+Since the SDK doesn't handle app-level authentication logic, it's the application's responsibility
+to ensure the database is reset when a user gets logged out. This should generally be done before you
+call `client.disconnectUser()`.
 
-  ```jsx
-  import { QuickSqliteClient } from 'stream-chat-react-native';
+```tsx
+import { QuickSqliteClient } from 'stream-chat-react-native';
 
-  // Sign out logic
-  QuickSqliteClient.resetDB();
-  chatClient.disconnectUser();
-  ```
+// Sign out logic
+QuickSqliteClient.resetDB();
+chatClient.disconnectUser();
+```
diff --git a/docusaurus/docs/reactnative/basics/upgrade_helper.mdx b/docusaurus/docs/reactnative/basics/upgrade_helper.mdx
@@ -34,100 +34,10 @@ The following values in [`ImageGalleryContext`](https://getstream.io/chat/docs/s
 
 ## Unique Chat Component Instance
 
-  Until v4, you could provide a separate `Chat` component for each usage of `Channel` component or `ChannelList` component.
-  But from v5, you must provide only one instance of the `Chat` component within your application.
-  This component needs to be a parent for all the chat-related components such as `ChannelList`, `Channel` or `Thread`.
+Until v4, you could provide a separate `Chat` component for each usage of `Channel` component or `ChannelList` component.
+But from v5, you must provide only one instance of the `Chat` component within your application.
+This component needs to be a parent for all the chat-related components such as `ChannelList`, `Channel` or `Thread`.
 
 ## Enable Offline Support
 
-Offline support is a major opt-in feature introduced in v5 of the Stream Chat React Native SDK.
-
-> Offline support is currently not implemented for Expo package (stream-chat-expo).
-
-The offline storage implementation currently offers the following features:
-
-- Access to chat when Internet connection is disabled or low.
-- Faster startup times and loading, since initial data is loaded from offline storage before performing any network requests.
-- Syncing of the offline database using WebSocket events and Sync API.
-
-The following features are currently **NOT** implemented. They will be implemented gradually as part of minor releases in v5.
-
-- Optimistically update offline database during chat interactions, such as send message, add reaction, etc.
-- Access to threads in offline mode.
-- Offline caching of attachment images and profile images.
-
-To enable offline support, please follow the given steps:
-
-1. **Upgrade stream-chat dependency (optional)**
-
-  If you have installed `stream-chat` dependency explicitly on your application, then upgrade it to v7:
-
-  ```bash
-  yarn add stream-chat@7.0.0
-  ```
-
-2. **Add `react-native-quick-sqlite` dependency**
-
-  ```bash
-  yarn add react-native-quick-sqlite
-  npx pod-install
-  ```
-
-3. **Do not wait for `connectUser` call to succeed**
-
-  It is important that you call the `connectUser` method on the chat client, before you render Chat components.
-  But you don't need to wait for `connectUser` to succeed before rendering Chat components. This is to ensure:
-
-  - Chat components have access to current user information, which is important to store/access offline data.
-  - In case of slow or no network access, Chat components will still load the chat data without waiting for `connectUser` to succeed.
-
-  ```tsx {7,8,16}
-  const chatClient = StreamChat.getInstance('API_KEY');
-  const App = () => {
-    const [isClientReady, setIsClientReady] = useState(false);
-
-    useEffect(() => {
-      const startChat = async () => {
-        const connectPromise = chatClient.connectUser(user, tokenOrTokenProvider);
-        setIsClientReady(true); // this allows components to render
-        await connectPromise();
-        // Any other post-connectUser logic you may have goes here.
-      };
-
-      startChat();
-    }, []);
-
-    if (!isClientReady) return null; // or some loading indicator;
-
-    return (
-      <Chat client={chatClient} enableOfflineSupport>
-        ...
-      </Chat>
-    );
-  };
-  ```
-
-4. **Add `enableOfflineSupport` prop on Chat component**
-
-  ```tsx
-  import { Chat } from 'stream-chat-react-native';
-
-  <Chat client={chatClient} enableOfflineSupport>
-    ...
-  </Chat>;
-  ```
-
-5. **Reset the database when signing out the user**
-
-  Since the SDK doesn't handle app-level authentication logic, it's the application's responsibility
-  to ensure the database is reset when a user gets logged out. This should generally be done before you
-  call `client.disconnectUser()`.
-
-  ```jsx
-  import { QuickSqliteClient } from 'stream-chat-react-native';
-
-  // Sign out logic
-  QuickSqliteClient.resetDB();
-  chatClient.disconnectUser();
-  ```
 To enable offline support please check the [Offline Support](./offline_support.mdx) guide.
diff --git a/docusaurus/docs/reactnative/guides/debug_mode_using_flipper_plugin.mdx b/docusaurus/docs/reactnative/guides/debug_mode_using_flipper_plugin.mdx
@@ -14,7 +14,9 @@ Flipper is a platform for debugging iOS, Android, and React Native apps. You can
 <img src={FlipperBanner} />
 
 ## Features
+
 The plugin supports the following features:
+
 - Viewing the authenticated client in the Chat.
 - Viewing the Channels, Message, and Thread list data as you navigate the app.
 - Copying and visualizing all the data.
@@ -25,47 +27,48 @@ These features are part of the 1st version of this plugin; more features will be
 
 1. First, install the Flipper plugin within your Desktop client. To do so, follow these steps:
 
-  - Download the Flipper Desktop app from [here](https://fbflipper.com/).
-  - After downloading the desktop app, move to the **Plugin Manager** section of the app and select the **Install Plugins** tab.
-  - Search for **stream-chat-react-native**, and you will find the plugin.
-  - Click on **Install** to install it.
+- Download the Flipper Desktop app from [here](https://fbflipper.com/).
+- After downloading the desktop app, move to the **Plugin Manager** section of the app and select the **Install Plugins** tab.
+- Search for **stream-chat-react-native**, and you will find the plugin.
+- Click on **Install** to install it.
 
-  <img src={FlipperDesktopGuide} />
+{' '}
+<img src={FlipperDesktopGuide} />
 
 2. Next, install `stream-chat-react-native-devtools` to your application as a dev dependency. This dependency will make communication possible between the RN Stream Chat SDK and the Flipper plugin.
 
-  ```
-  yarn add --dev stream-chat-react-native-devtools
-  ```
+```
+yarn add --dev stream-chat-react-native-devtools
+```
 
-  or
+or
 
-  ```
-  npm install --save-dev stream-chat-react-native-devtools
-  ```
+```
+npm install --save-dev stream-chat-react-native-devtools
+```
 
 3. To interact with the Flipper Plugin you need an additional dependency `react-native-flipper`. You can install it as a dev dependency, as:
 
-  ```
-  yarn add --dev react-native-flipper
-  ```
+```
+yarn add --dev react-native-flipper
+```
 
-  or
+or
 
-  ```
-  npm install --save-dev react-native-flipper
-  ```
+```
+npm install --save-dev react-native-flipper
+```
 
 4. Wrap the root of the component tree with `DebugContextProvider` and pass the `useFlipper` function.
 
-  ```tsx
-  import { DebugContextProvider } from 'stream-chat-react-native';
-  import { useFlipper } from 'stream-chat-react-native-devtools';
-  ...
+```tsx
+import { DebugContextProvider } from 'stream-chat-react-native';
+import { useFlipper } from 'stream-chat-react-native-devtools';
+...
 
-  <DebugContextProvider useFlipper={useFlipper}>
-    {/* All other elements of the App component comes here */}
-  </DebugContextProvider>
-  ```
+<DebugContextProvider useFlipper={useFlipper}>
+  {/* All other elements of the App component comes here */}
+</DebugContextProvider>
+```
 
 Kudos 🎉, everything else is handled by our SDK, the package [stream-chat-react-native-devtools](https://www.npmjs.com/package/stream-chat-react-native-devtools), and the [Flipper Plugin](https://www.npmjs.com/package/flipper-plugin-stream-chat-react-native).
