45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import InfiniteScroll from 'react-infinite-scroll-component'
|
|
|
|
import { GuildsChannelsPath } from '../Application'
|
|
import { Loader } from 'components/design/Loader'
|
|
import { Channel } from './Channel'
|
|
import { useChannels } from 'contexts/Channels'
|
|
|
|
export interface ChannelsProps {
|
|
path: GuildsChannelsPath
|
|
}
|
|
|
|
export const Channels: React.FC<ChannelsProps> = (props) => {
|
|
const { path } = props
|
|
|
|
const { channels, hasMore, nextPage } = useChannels()
|
|
|
|
return (
|
|
<div
|
|
id='channels'
|
|
className='scrollbar-firefox-support overflow-y-auto flex-1 flex flex-col'
|
|
>
|
|
<InfiniteScroll
|
|
className='w-full channels-list'
|
|
scrollableTarget='channels'
|
|
dataLength={channels.length}
|
|
next={nextPage}
|
|
hasMore={hasMore}
|
|
loader={<Loader />}
|
|
>
|
|
{channels.map((channel) => {
|
|
const selected = channel.id === path.channelId
|
|
return (
|
|
<Channel
|
|
key={channel.id}
|
|
channel={channel}
|
|
path={path}
|
|
selected={selected}
|
|
/>
|
|
)
|
|
})}
|
|
</InfiniteScroll>
|
|
</div>
|
|
)
|
|
}
|