Merge pull request #341 from GetStream/vishal/channellist-fixes

Fixing ChannelList UX

Author: vishalnarkhede

src/components/ChannelList/ChannelList.js

@@ -24,10 +24,14 @@ import { ChatContext } from '../../context';
  *
  * @example ../docs/ChannelList.md
  */
+const DEFAULT_FILTERS = {};
+const DEFAULT_OPTIONS = {};
+const DEFAULT_SORT = {};
+
 const ChannelList = (props) => {
   const {
     List = ChannelListMessenger,
-    filters = {},
+    filters = DEFAULT_FILTERS,
     lockChannelOrder = false,
     onAddedToChannel,
     onChannelDeleted,
@@ -37,9 +41,9 @@ const ChannelList = (props) => {
     onMessageNew,
     onRemovedFromChannel,
     onSelect,
-    options = {},
+    options = DEFAULT_OPTIONS,
     setFlatListRef,
-    sort = {},
+    sort = DEFAULT_SORT,
   } = props;
 
   const { client } = useContext(ChatContext);

src/components/ChannelList/ChannelListMessenger.js

@@ -115,10 +115,10 @@ const ChannelListMessenger = (props) => {
     );
   };
 
-  if (error && !refreshing && !(channels && channels.length)) {
-    return renderLoadingError();
-  } else if (loadingChannels) {
+  if (loadingChannels) {
     return renderLoading();
+  } else if (error && !refreshing && !(channels && channels.length)) {
+    return renderLoadingError();
   } else {
     return renderChannels();
   }

src/components/ChannelList/hooks/usePaginatedChannels.js

@@ -2,11 +2,10 @@ import { useEffect, useState } from 'react';
 
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
-const wait = (ms) => {
+const wait = (ms) =>
   new Promise((resolve) => {
     setTimeout(resolve, ms);
   });
-};
 
 export const usePaginatedChannels = ({
   client,
@@ -26,7 +25,6 @@ export const usePaginatedChannels = ({
     if (loadingChannels || loadingNextPage || refreshing) return;
 
     if (queryType === 'reload') {
-      setChannels([]);
       setLoadingChannels(true);
     } else if (queryType === 'refresh') {
       setRefreshing(true);
@@ -58,12 +56,12 @@ export const usePaginatedChannels = ({
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);
       setOffset(newChannels.length);
     } catch (e) {
-      setLoadingChannels(false);
-      setLoadingNextPage(false);
-      setRefreshing(false);
       await wait(2000);
 
       if (retryCount === 3) {
+        setLoadingChannels(false);
+        setLoadingNextPage(false);
+        setRefreshing(false);
         console.warn(e);
         return setError(true);
       }