54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Outlet, useParams } from "react-router";
|
|
import ChannelListItem from "~/components/channel-list-item";
|
|
import { ScrollArea } from "~/components/ui/scroll-area";
|
|
import { usePrivateChannelsStore } from "~/store/private-channels";
|
|
import { useServerListStore } from "~/store/server-list";
|
|
|
|
export async function clientLoader() {
|
|
const {channels, setChannels} = usePrivateChannelsStore.getState()
|
|
|
|
if (!channels || channels.length === 0) {
|
|
const channels = await import("~/lib/api/client/user").then(m => m.default.channels())
|
|
setChannels(channels)
|
|
}
|
|
}
|
|
|
|
function ListComponent() {
|
|
const channels = []
|
|
|
|
const serverId = useParams<{ serverId: string }>().serverId!
|
|
const server = useServerListStore(state => state.servers.get(serverId))
|
|
|
|
return (
|
|
<div className="h-full flex flex-col">
|
|
<div className="w-full min-h-12">
|
|
<div className="border-b-2 h-full flex items-center justify-center">
|
|
{server?.name}
|
|
</div>
|
|
</div>
|
|
|
|
<ScrollArea className="overflow-auto" scrollbarSize="narrow">
|
|
<div className="p-2 flex flex-col gap-1 h-full">
|
|
{channels.sort((a, b) => (a.lastMessageId ?? a.id) < (b.lastMessageId ?? b.id) ? 1 : -1).map((channel, _) => (
|
|
<>
|
|
<ChannelListItem channel={channel} />
|
|
</>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const handle = {
|
|
listComponent: <ListComponent />
|
|
}
|
|
|
|
export default function Layout() {
|
|
return (
|
|
<>
|
|
<Outlet />
|
|
</>
|
|
);
|
|
}
|