69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import React from "react";
|
|
import { Outlet } from "react-router";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import PrivateChannelListItem from "~/components/custom-ui/private-channel-list-item";
|
|
import { ScrollArea } from "~/components/ui/scroll-area";
|
|
import { usePrivateChannelsStore } from "~/stores/private-channels-store";
|
|
|
|
async function fetchPrivateChannels() {
|
|
const { addChannels } = usePrivateChannelsStore.getState();
|
|
|
|
const channels = await import("~/lib/api/client/user").then((m) =>
|
|
m.default.channels(),
|
|
);
|
|
addChannels(channels);
|
|
|
|
return null;
|
|
}
|
|
|
|
function ListComponent() {
|
|
const channels = Object.values(
|
|
usePrivateChannelsStore(useShallow((state) => state.channels)),
|
|
);
|
|
const sortedChannels = React.useMemo(
|
|
() =>
|
|
channels.sort((a, b) =>
|
|
(a.lastMessageId ?? a.id) < (b.lastMessageId ?? b.id) ? 1 : -1,
|
|
),
|
|
[channels],
|
|
);
|
|
|
|
useQuery({
|
|
queryKey: ["channels", "@me"],
|
|
queryFn: fetchPrivateChannels,
|
|
});
|
|
|
|
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">
|
|
Private Messages
|
|
</div>
|
|
</div>
|
|
|
|
<ScrollArea className="overflow-auto" scrollbarSize="narrow">
|
|
<div className="p-2 flex flex-col gap-1 h-full">
|
|
{sortedChannels.map((channel) => (
|
|
<React.Fragment key={channel.id}>
|
|
<PrivateChannelListItem channel={channel} />
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const handle = {
|
|
listComponent: <ListComponent />,
|
|
};
|
|
|
|
export default function Layout() {
|
|
return (
|
|
<>
|
|
<Outlet />
|
|
</>
|
|
);
|
|
}
|