reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace eslint/prettier with rome

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-14 17:05:53 +07:00
parent 48d690d33a
commit 409a625dcc
154 changed files with 7639 additions and 8525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/app/channel/components/messageList.tsx
View File

@@ -1,71 +1,78 @@
import ChannelMessageItem from '@app/channel/components/messages/item';
import ChannelMessageItem from "@app/channel/components/messages/item";
import { sortedChannelMessagesAtom } from '@stores/channel';
import { sortedChannelMessagesAtom } from "@stores/channel";
import { getHourAgo } from '@utils/date';
import { getHourAgo } from "@utils/date";
import { useAtomValue } from 'jotai';
import { useCallback, useRef } from 'react';
import { Virtuoso } from 'react-virtuoso';
import { useAtomValue } from "jotai";
import { useCallback, useRef } from "react";
import { Virtuoso } from "react-virtuoso";
export default function ChannelMessageList() {
const now = useRef(new Date());
const virtuosoRef = useRef(null);
const data = useAtomValue(sortedChannelMessagesAtom);
const now = useRef(new Date());
const virtuosoRef = useRef(null);
const data = useAtomValue(sortedChannelMessagesAtom);
const itemContent: any = useCallback(
(index: string | number) => {
return <ChannelMessageItem data={data[index]} />;
},
[data]
);
const itemContent: any = useCallback(
(index: string | number) => {
return <ChannelMessageItem data={data[index]} />;
},
[data],
);
const computeItemKey = useCallback(
(index: string | number) => {
return data[index].id;
},
[data]
);
const computeItemKey = useCallback(
(index: string | number) => {
return data[index].id;
},
[data],
);
return (
<div className="h-full w-full">
<Virtuoso
ref={virtuosoRef}
data={data}
itemContent={itemContent}
components={{
Header: () => (
<div className="relative py-4">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-zinc-800" />
</div>
<div className="relative flex justify-center">
<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-xs font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
{getHourAgo(24, now.current).toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</div>
</div>
</div>
),
EmptyPlaceholder: () => (
<div className="flex flex-col gap-1 text-center">
<h3 className="text-sm font-semibold leading-none text-zinc-200">Nothing to see here yet</h3>
<p className="text-sm leading-none text-zinc-400">Be the first to share a message in this channel.</p>
</div>
),
}}
computeItemKey={computeItemKey}
initialTopMostItemIndex={data.length - 1}
alignToBottom={true}
followOutput={true}
overscan={50}
increaseViewportBy={{ top: 200, bottom: 200 }}
className="scrollbar-hide h-full w-full overflow-y-auto"
/>
</div>
);
return (
<div className="h-full w-full">
<Virtuoso
ref={virtuosoRef}
data={data}
itemContent={itemContent}
components={{
Header: () => (
<div className="relative py-4">
<div
className="absolute inset-0 flex items-center"
aria-hidden="true"
>
<div className="w-full border-t border-zinc-800" />
</div>
<div className="relative flex justify-center">
<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-xs font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
{getHourAgo(24, now.current).toLocaleDateString("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
})}
</div>
</div>
</div>
),
EmptyPlaceholder: () => (
<div className="flex flex-col gap-1 text-center">
<h3 className="text-sm font-semibold leading-none text-zinc-200">
Nothing to see here yet
</h3>
<p className="text-sm leading-none text-zinc-400">
Be the first to share a message in this channel.
</p>
</div>
),
}}
computeItemKey={computeItemKey}
initialTopMostItemIndex={data.length - 1}
alignToBottom={true}
followOutput={true}
overscan={50}
increaseViewportBy={{ top: 200, bottom: 200 }}
className="scrollbar-hide h-full w-full overflow-y-auto"
/>
</div>
);
}