How can I add custom search on channel list?

[tahiralvi]

Hi All,

Recently I have implemented the custom search on the users list modal, as shown below

Now there is a requirement to do the same for the channels. How can I achieve this customization?
Also, I don’t need a server-side search via API, but a client-side search. See the image below,

Any help would be highly appreciated.

I am using the Reach UiKit with Javascript SDK.

@vcs_account @Sravan_S

[Jason]

@tahiralvi

You can use Sendbird’s built in advanced channel list query using channel name starts with. There is mention of it here. However, the query has a bug at the moment and doesn’t work. We are working to fix it.

Regarding the search box, that would need to be a fully customized render by you, along with the CSS to position it as you need and to make the channel list header taller.

I will get back as soon as the channel list query it fixed.

[vcs_account]

Thanks for quick reply @Jason
Do the mention bug in a query will fix today or tomorrow?
Do you have any sample code available for render custom channel list?
I am waiting for your next reply.

[Jason]

@vcs_account

Our top engineer for JS UIKit provided a code example for filtering channels by name.

I’m afraid adding the channel search box and initialisations of the search will be up to you.

My one recommendation is that your throttle the user’s search and only begin calling Sendbird when there are at least three characters in the search box.

[tahiralvi]

Hi @Jason
Thanks for your reply.
Actually I did the User search client end, no Sendbird API call is involved.
For channels search, I wanna do the same. No backend call just front end filtering of channels based on input.
Your code example is worked for a one-time channel filter, Is that code work for run-time search/filter? If yes then How?
For reference, I have attached the required functionality in the below image.

Thanks in advance.

[Sravan_S]

@tahiralvi You cannot filter channel list on client side

I have made an example which might be more suitable for your requirement (based on one of your previous requests) see if this works for you - https://codesandbox.io/s/custompopup-7do2j?file=/src/CustomChannelListHeader.jsx:2350-2365

[tahiralvi]

Thanks, @Sravan_S for the reply.

Let me implement your solution, will let you know if succeeded.

[tahiralvi]

Hi @Sravan_S,

I tried to implement your code sample into the React UI kit sample code, but somehow unable to achieve the channel search.

Here is my code sample

Please look into this and let me know where I missed the implementation.

THANKS IN ADVANCE.

[vcs_account]

Hi @Sravan_S,
In our case query state is changing but channel list not change in reducer hook state.You can see in this screen shot. @tahiralvi has been attached our sample code.

what do you think what is happening in my case?

[Sravan_S]

Hi, For @tahiralvi’s case just update sendbird-uikit to “1.2.3” - now you are using 1.1.3

I would appreciate if you would share code in an online IDE(JSFiddle/Codesandbox) or cloud git solutions(github/gitlab) instead of zipped files - basically because of security concerns haha

Also, I thought @vcs_account @tahiralvi were from same company… Somehow you ask very similar questions

[tahiralvi]

Hi @Sravan_S
Okay, will update the uikit version from 1.1.3 to 1.2.3.

Sure, will share you the code via some online link.

Yes, good catch.
Both accounts belong to a single person and for the same product. We have recently bought the paid version of SendBird and found that the direct ticket not much responsive than the community.

[vcs_account]

Hi @Sravan_S

Great
After upgrading the sendbird-uikit version its start working on my application and in sample project with default channel rendered.

Now I am working on to do the same in renderChannelPreview.

Thanks for your suggestion.

[tahiralvi]

Dear @Sravan_S

Thanks again for your help to achieve this critical customization.