Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: revert "feat: expose channels state on chat level (#2161)" #2184

Merged
merged 3 commits into from
Dec 1, 2023
Merged

fix: revert "feat: expose channels state on chat level (#2161)" #2184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
420f58f
Revert "feat: expose channels state on chat level (#2161)"
MartinCupela Nov 23, 2023
d71691e
docs: keep documentation for channelsQueryState & ChatContextValue
MartinCupela Nov 23, 2023
1a3ee98
Merge branch 'master' into fix/return-to-local-channelist-state
arnautov-anton Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 0 additions & 78 deletions docusaurus/docs/React/components/contexts/chat-context.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,6 @@ The currently active channel, which populates the [`Channel`](../core-components
| ------- |
| Channel |

### channels

State representing the array of loaded channels. Channels query is executed by default only within the [`ChannelList` component](../core-components/channel-list.mdx) in the SDK.

| Type |
|-------------|
| `Channel[]` |

### channelsQueryState

Exposes API that:
Expand Down Expand Up @@ -127,76 +119,6 @@ You can override the default behavior by pulling it from context and then utiliz
| -------- |
| function |

### setChannels

Sets the list of `Channel` objects to be rendered by `ChannelList` component. One have to be careful, when to call `setChannels` as the first channels query executed by the `ChannelList` overrides the whole [`channels` state](#channels). In that case it is better to subscribe to `client` event `channels.queried` and only then set the channels.
In the following example, we have a component that sets the active channel based on the id in the URL. It waits until the first channels page is loaded, and then it sets the active channel. If the channel is not present on the first page, it performs additional API request with `getChannel()`:

```tsx
import {useEffect} from 'react';
import {useNavigate, useParams} from 'react-router-dom';
import {ChannelList, getChannel, useChatContext} from 'stream-chat-react';
import {ChannelFilters, ChannelOptions, ChannelSort, Event} from 'stream-chat';

const DEFAULT_CHANNEL = 'general';
const CHANNEL_TYPE = 'messaging';

export const ChannelListWrapper = () => {
const { channelId } = useParams();
const navigate = useNavigate();
const { client, channel, setActiveChannel, setChannels } = useChatContext();

const filters: ChannelFilters = { type: CHANNEL_TYPE, members: { $in: [client.user?.id || ''] } };
const options: ChannelOptions = { state: true, presence: true, limit: 10 };
const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };

// set active channel only if URL param changed
useEffect(() => {
if (!channelId) return navigate(`/${DEFAULT_CHANNEL}`);

if (channel?.id === channelId || !client) return;

let subscription: { unsubscribe: () => void } | undefined;
if(!channel?.id || channel?.id !== channelId) {
subscription = client.on('channels.queried', (event: Event) => {
// check, whether the channel has already been loaded with the first page
const loadedChannelData = event.queriedChannels?.channels.find((response) => response.channel.id === channelId);

if (loadedChannelData) {
setActiveChannel(client.channel( CHANNEL_TYPE, channelId));
subscription?.unsubscribe();
return;
}

return getChannel({client, id: channelId, type: CHANNEL_TYPE}).then((newActiveChannel) => {
setActiveChannel(newActiveChannel);
setChannels((channels) => {
return ([newActiveChannel, ...channels.filter((ch) => ch.data?.cid !== newActiveChannel.data?.cid)]);
});
});
});
}

return () => {
subscription?.unsubscribe();
};
}, [channel?.id, channelId, setChannels, client, navigate, setActiveChannel]);

return (
<ChannelList
setActiveChannelOnMount={false}
filters={filters}
sort={sort}
options={options}
/>
);
};
```

| Type |
|---------------------------------------|
| `Dispatch<SetStateAction<Channel[]>>` |

### theme

Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../../guides/theming/css-and-theming.mdx#css-variables) of your app.
Expand Down
148 changes: 71 additions & 77 deletions src/components/ChannelList/__tests__/ChannelList.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,21 +48,6 @@ const channelsQueryStateMock = {
setQueryInProgress: jest.fn(),
};

const ChatContextOverrider = ({ chatContext, children }) => {
const existingContext = useChatContext();
return (
<ChatContext.Provider
value={{
...existingContext,
channelsQueryState: channelsQueryStateMock,
...chatContext,
}}
>
{children}
</ChatContext.Provider>
);
};

/**
* We use the following custom UI components for preview and list.
* If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
Expand Down Expand Up @@ -131,7 +116,6 @@ describe('ChannelList', () => {
client: chatClient,
closeMobileNav,
navOpen: true,
setChannels: jest.fn(),
}}
>
<ChannelList {...props} />
Expand Down Expand Up @@ -163,7 +147,6 @@ describe('ChannelList', () => {
client: chatClient,
closeMobileNav,
navOpen: false,
setChannels: jest.fn(),
}}
>
<ChannelList {...props} />
Expand Down Expand Up @@ -409,7 +392,6 @@ describe('ChannelList', () => {

describe('Default and custom active channel', () => {
let setActiveChannel;
let setChannels;
const watchersConfig = { limit: 20, offset: 0 };
const testSetActiveChannelCall = (channelInstance) =>
waitFor(() => {
Expand All @@ -420,7 +402,6 @@ describe('ChannelList', () => {

beforeEach(() => {
setActiveChannel = jest.fn();
setChannels = jest.fn();
useMockedApis(chatClient, [queryChannelsApi([testChannel1, testChannel2])]);
});

Expand All @@ -431,7 +412,6 @@ describe('ChannelList', () => {
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
setChannels,
}}
>
<ChannelList
Expand Down Expand Up @@ -463,7 +443,6 @@ describe('ChannelList', () => {
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
setChannels,
}}
>
<ChannelList
Expand All @@ -487,40 +466,41 @@ describe('ChannelList', () => {
});

it('should render channel with id `customActiveChannel` at top of the list', async () => {
useMockedApis(chatClient, [getOrCreateChannelApi(testChannel2)]);
jest
.spyOn(chatClient, 'queryChannels')
.mockImplementationOnce(() =>
chatClient.hydrateActiveChannels([testChannel1, testChannel2]),
);
await act(async () => {
await render(
<Chat client={chatClient}>
<ChannelList
customActiveChannel={testChannel2.channel.id}
filters={{}}
List={ChannelListComponent}
options={{ presence: true, state: true, watch: true }}
Preview={ChannelPreviewComponent}
watchers={watchersConfig}
/>
</Chat>,
);
});
const { container, getAllByRole, getByRole, getByTestId } = render(
<ChatContext.Provider
value={{
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
}}
>
<ChannelList
customActiveChannel={testChannel2.channel.id}
filters={{}}
List={ChannelListComponent}
options={{ presence: true, state: true, watch: true }}
Preview={ChannelPreviewComponent}
setActiveChannel={setActiveChannel}
setActiveChannelOnMount
watchers={watchersConfig}
/>
</ChatContext.Provider>,
);

// Wait for list of channels to load in DOM.
await waitFor(() => {
expect(screen.getByRole('list')).toBeInTheDocument();
const items = screen.getAllByRole('listitem');
await waitFor(async () => {
expect(getByRole('list')).toBeInTheDocument();
const items = getAllByRole('listitem');

// Get the closest listitem to the channel that received new message.
const channelPreview = screen
.getByTestId(testChannel2.channel.id)
.closest(ROLE_LIST_ITEM_SELECTOR);
const channelPreview = getByTestId(testChannel2.channel.id).closest(
ROLE_LIST_ITEM_SELECTOR,
);

expect(channelPreview.isEqualNode(items[0])).toBe(true);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
jest.restoreAllMocks();
});

describe('channel search', () => {
Expand Down Expand Up @@ -555,16 +535,20 @@ describe('ChannelList', () => {

const renderComponents = (chatContext = {}, channeListProps) =>
render(
<Chat client={chatContext.client}>
<ChatContextOverrider chatContext={{ ...chatContext, setActiveChannel }}>
<ChannelList
filters={{}}
options={{ presence: true, state: true }}
showChannelSearch
{...channeListProps}
/>
</ChatContextOverrider>
</Chat>,
<ChatContext.Provider
value={{
channelsQueryState: channelsQueryStateMock,
setActiveChannel,
...chatContext,
}}
>
<ChannelList
filters={{}}
options={{ presence: true, state: true }}
showChannelSearch
{...channeListProps}
/>
</ChatContext.Provider>,
);

it.each([['1'], ['2']])(
Expand Down Expand Up @@ -1209,20 +1193,19 @@ describe('ChannelList', () => {
it('should unset activeChannel if it was deleted', async () => {
const setActiveChannel = jest.fn();
const { container, getByRole } = render(
<Chat client={chatClient}>
<ChatContextOverrider
chatContext={{
channelsQueryState: channelsQueryStateMock,
setActiveChannel,
}}
>
<ChannelList
{...channelListProps}
channel={{ cid: testChannel1.channel.cid }}
setActiveChannel={setActiveChannel}
/>
</ChatContextOverrider>
</Chat>,
<ChatContext.Provider
value={{
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
}}
>
<ChannelList
{...channelListProps}
channel={{ cid: testChannel1.channel.cid }}
setActiveChannel={setActiveChannel}
/>
</ChatContext.Provider>,
);

// Wait for list of channels to load in DOM.
Expand Down Expand Up @@ -1274,21 +1257,32 @@ describe('ChannelList', () => {
});

it('should unset activeChannel if it was hidden', async () => {
const setActiveChannel = jest.fn();
const { container, getByRole } = render(
<Chat client={chatClient}>
<ChannelList {...channelListProps} />
</Chat>,
<ChatContext.Provider
value={{
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
}}
>
<ChannelList
{...channelListProps}
channel={{ cid: testChannel1.channel.cid }}
setActiveChannel={setActiveChannel}
/>
</ChatContext.Provider>,
);

// Wait for list of channels to load in DOM.
await waitFor(() => {
expect(screen.getByTestId(testChannel1.channel.id)).toBeInTheDocument();
expect(getByRole('list')).toBeInTheDocument();
});

act(() => dispatchChannelHiddenEvent(chatClient, testChannel1.channel));

await waitFor(() => {
expect(screen.queryByTestId(testChannel1.channel.id)).not.toBeInTheDocument();
expect(setActiveChannel).toHaveBeenCalledTimes(1);
});
const results = await axe(container);
expect(results).toHaveNoViolations();
Expand Down
7 changes: 2 additions & 5 deletions src/components/ChannelList/hooks/usePaginatedChannels.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,9 @@ export const usePaginatedChannels = <
recoveryThrottleIntervalMs: number = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS,
) => {
const {
channels,
channelsQueryState: { error, setError, setQueryInProgress },
setChannels,
} = useChatContext<StreamChatGenerics>('usePaginatedChannels');

} = useChatContext('usePaginatedChannels');
const [channels, setChannels] = useState<Array<Channel<StreamChatGenerics>>>([]);
const [hasNextPage, setHasNextPage] = useState(true);
const lastRecoveryTimestamp = useRef<number | undefined>();

Expand Down Expand Up @@ -117,7 +115,6 @@ export const usePaginatedChannels = <
queryChannels('reload');
}, [filterString, sortString]);

// FIXME: state refactor (breaking change) is needed - do not forward `channels` and `setChannel`
return {
channels,
hasNextPage,
Expand Down
4 changes: 0 additions & 4 deletions src/components/Chat/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,15 +84,13 @@ export const Chat = <

const {
channel,
channels,
closeMobileNav,
getAppSettings,
latestMessageDatesByChannels,
mutes,
navOpen,
openMobileNav,
setActiveChannel,
setChannels,
translators,
} = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });

Expand All @@ -109,7 +107,6 @@ export const Chat = <

const chatContextValue = useCreateChatContext({
channel,
channels,
channelsQueryState,
client,
closeMobileNav,
Expand All @@ -120,7 +117,6 @@ export const Chat = <
navOpen,
openMobileNav,
setActiveChannel,
setChannels,
theme,
themeVersion,
useImageFlagEmojisOnWindows,
Expand Down
Loading
Loading