36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { ChannelCreateModal } from "@app/channel/components/createModal";
|
|
import { ChannelsListItem } from "@app/channel/components/item";
|
|
import { useChannels } from "@stores/channels";
|
|
import { useEffect } from "react";
|
|
|
|
export function ChannelsList() {
|
|
const channels = useChannels((state: any) => state.channels);
|
|
const fetchChannels = useChannels((state: any) => state.fetch);
|
|
|
|
useEffect(() => {
|
|
fetchChannels();
|
|
}, [fetchChannels]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-0.5">
|
|
{!channels ? (
|
|
<>
|
|
<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
|
|
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
|
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
|
</div>
|
|
<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
|
|
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
|
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
|
</div>
|
|
</>
|
|
) : (
|
|
channels.map((item: { event_id: string }) => (
|
|
<ChannelsListItem key={item.event_id} data={item} />
|
|
))
|
|
)}
|
|
<ChannelCreateModal />
|
|
</div>
|
|
);
|
|
}
|