Moved to ReactJS
This commit is contained in:
parent
c8ef2b248f
commit
1d0ebeb2b7
100 changed files with 1909 additions and 6056 deletions
|
|
@ -15,9 +15,9 @@
|
|||
"build": "tsc -p tsconfig.json --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@solidjs/router": "^0.15.4",
|
||||
"@tanstack/solid-query": "^5.90.23",
|
||||
"@tanstack/solid-virtual": "^3.13.21",
|
||||
"@tanstack/react-query": "^5.0.0",
|
||||
"@tanstack/react-router": "^1.0.0",
|
||||
"@tanstack/react-virtual": "^3.0.0",
|
||||
"@tensamin/core-crypto": "workspace:*",
|
||||
"@tensamin/ttp": "workspace:*",
|
||||
"@tensamin/core-storage": "workspace:*",
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
"@tensamin/markdown": "workspace:*",
|
||||
"@tensamin/shared": "workspace:*",
|
||||
"@tensamin/ui": "workspace:*",
|
||||
"lucide-solid": "^0.564.0",
|
||||
"solid-js": "^1.9.11",
|
||||
"solid-sonner": "^0.2.8",
|
||||
"lucide-react": "^0.564.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"zod": "^4.3.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { useSocket } from "@tensamin/ttp/context";
|
||||
import type { BoundSendFn } from "@tensamin/ttp/core";
|
||||
import type { Socket } from "@tensamin/shared/data";
|
||||
import type { RawMessages } from "../values";
|
||||
|
||||
export async function getMessages(
|
||||
send: BoundSendFn<Socket>,
|
||||
amount: number,
|
||||
offset: number,
|
||||
user_id: number,
|
||||
): Promise<RawMessages> {
|
||||
const { send } = useSocket();
|
||||
|
||||
const messages = await send("messages_get", {
|
||||
amount: amount,
|
||||
offset: offset,
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
import Input from "@tensamin/markdown/input";
|
||||
import { Card, CardHeader } from "@tensamin/ui/card";
|
||||
import { useStorage } from "@tensamin/core-storage/context";
|
||||
import { createEffect, createSignal } from "solid-js";
|
||||
import * as React from "react";
|
||||
import { Button } from "@tensamin/ui/button";
|
||||
|
||||
import { Plus, Laugh, Clapperboard } from "lucide-solid";
|
||||
import { Plus, Laugh, Clapperboard } from "lucide-react";
|
||||
import { useChat } from "../context";
|
||||
import { useSocket } from "@tensamin/ttp/context";
|
||||
import { useCrypto } from "@tensamin/core-crypto/context";
|
||||
import { log, toast } from "@tensamin/shared/log";
|
||||
|
||||
export default function InputComponent() {
|
||||
const [value, setValue] = createSignal("");
|
||||
const [invertEnterBehavior, setInvertEnterBehavior] = createSignal(false);
|
||||
const [value, setValue] = React.useState("");
|
||||
const [invertEnterBehavior, setInvertEnterBehavior] = React.useState(false);
|
||||
|
||||
const { encrypt } = useCrypto();
|
||||
const { send } = useSocket();
|
||||
const { addLiveMessage, sharedSecret, userId } = useChat();
|
||||
const { load } = useStorage();
|
||||
|
||||
createEffect(() => {
|
||||
React.useEffect(() => {
|
||||
void load("chat_invert_enter_behaviour").then((shouldInvert) => {
|
||||
setInvertEnterBehavior(shouldInvert);
|
||||
});
|
||||
});
|
||||
}, [load]);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (value().trim() === "") return;
|
||||
if (value.trim() === "") return;
|
||||
|
||||
const time = Date.now();
|
||||
const currentValue = value();
|
||||
const currentValue = value;
|
||||
const currentUserId = userId();
|
||||
|
||||
addLiveMessage({
|
||||
|
|
@ -61,36 +61,36 @@ export default function InputComponent() {
|
|||
}
|
||||
|
||||
return (
|
||||
<Card class="rounded-none rounded-t-xl border border-input/50 border-b-0">
|
||||
<CardHeader class="p-0 flex flex-col">
|
||||
<Card className="rounded-none rounded-t-xl border border-input/50 border-b-0">
|
||||
<CardHeader className="p-0 flex flex-col">
|
||||
<Input
|
||||
placeholder="Send a message..."
|
||||
value={value()}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
onSubmit={handleSubmit}
|
||||
invertEnterBehavior={invertEnterBehavior()}
|
||||
invertEnterBehavior={invertEnterBehavior}
|
||||
/>
|
||||
<div class="w-full flex justify-between gap-2 p-2 pt-0">
|
||||
<div class="flex gap-2">
|
||||
<div className="w-full flex justify-between gap-2 p-2 pt-0">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
class="w-9 h-9 p-0 border border-ring/10"
|
||||
className="w-9 h-9 p-0 border border-ring/10"
|
||||
variant="secondary"
|
||||
>
|
||||
<Plus size={20} />
|
||||
</Button>
|
||||
<div class="w-auto flex">
|
||||
<div className="w-auto flex">
|
||||
<p>Files list</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
class="w-9 h-9 p-0 border border-ring/10"
|
||||
className="w-9 h-9 p-0 border border-ring/10"
|
||||
variant="secondary"
|
||||
>
|
||||
<Laugh size={20} />
|
||||
</Button>
|
||||
<Button
|
||||
class="w-9 h-9 p-0 border border-ring/10"
|
||||
className="w-9 h-9 p-0 border border-ring/10"
|
||||
variant="secondary"
|
||||
>
|
||||
<Clapperboard size={20} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useCrypto } from "@tensamin/core-crypto/context";
|
||||
import { createEffect, createSignal, onCleanup, Show } from "solid-js";
|
||||
import * as React from "react";
|
||||
import { useChat } from "../context";
|
||||
import type { RawMessage } from "../values";
|
||||
import { log } from "@tensamin/shared/log";
|
||||
|
|
@ -12,18 +12,17 @@ export default function Message(props: {
|
|||
const { sharedSecret } = useChat();
|
||||
const { decrypt } = useCrypto();
|
||||
|
||||
const message = () => props.message;
|
||||
const [decodedContent, setDecodedContent] = createSignal("");
|
||||
const [isReady, setIsReady] = createSignal(false);
|
||||
const [decodedContent, setDecodedContent] = React.useState("");
|
||||
const [isReady, setIsReady] = React.useState(false);
|
||||
|
||||
createEffect(() => {
|
||||
React.useEffect(() => {
|
||||
if (props.notEncrypted) {
|
||||
setDecodedContent(message().content);
|
||||
setDecodedContent(props.message.content);
|
||||
setIsReady(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const content = message().content;
|
||||
const content = props.message.content;
|
||||
const secret = sharedSecret();
|
||||
let active = true;
|
||||
|
||||
|
|
@ -57,23 +56,21 @@ export default function Message(props: {
|
|||
setIsReady(true);
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
return () => {
|
||||
active = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
}, [decrypt, props.message.content, props.notEncrypted, sharedSecret]);
|
||||
|
||||
return (
|
||||
<div class="w-full flex justify-start">
|
||||
<div className="w-full flex justify-start">
|
||||
<div
|
||||
class={`animate-in fade-in duration-200 max-w-[80%] rounded-xl px-2 py-1 whitespace-pre-wrap wrap-break-word ${
|
||||
message().sent_by_self
|
||||
className={`animate-in fade-in duration-200 max-w-[80%] rounded-xl px-2 py-1 whitespace-pre-wrap wrap-break-word ${
|
||||
props.message.sent_by_self
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted"
|
||||
}`}
|
||||
>
|
||||
<Show when={isReady()}>
|
||||
<Text value={decodedContent()} />
|
||||
</Show>
|
||||
{isReady ? <Text value={decodedContent} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,49 +1,47 @@
|
|||
import {
|
||||
createContext,
|
||||
createEffect,
|
||||
createSignal,
|
||||
useContext,
|
||||
} from "solid-js";
|
||||
import type { ParentProps } from "solid-js";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
|
||||
import * as React from "react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { useRouterState } from "@tanstack/react-router";
|
||||
import type { RawMessage, RawMessages } from "./values";
|
||||
import { useSearchParams } from "@solidjs/router";
|
||||
import { useCrypto } from "@tensamin/core-crypto/context";
|
||||
import { useUser } from "@tensamin/core-user/context";
|
||||
import { useStorage } from "@tensamin/core-storage/context";
|
||||
import { useSocket } from "@tensamin/ttp/context";
|
||||
|
||||
export const context = createContext<contextType>();
|
||||
export const context = React.createContext<contextType | undefined>(undefined);
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
export default function Provider(
|
||||
props: ParentProps & {
|
||||
getMessages: (
|
||||
amount: number,
|
||||
offset: number,
|
||||
user_id: number,
|
||||
) => Promise<RawMessages>;
|
||||
},
|
||||
props: { children: React.ReactNode },
|
||||
) {
|
||||
const { get_shared_secret } = useCrypto();
|
||||
const { get } = useUser();
|
||||
const { load } = useStorage();
|
||||
const { send } = useSocket();
|
||||
|
||||
const [liveMessages, setLiveMessages] = createSignal<RawMessages>([]);
|
||||
const [currentSharedSecret, setCurrentSharedSecret] = createSignal("");
|
||||
const [liveMessagesState, setLiveMessagesState] = React.useState<RawMessages>([]);
|
||||
const [currentSharedSecret, setCurrentSharedSecret] = React.useState("");
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
const userId = () => Number(searchParams.id ?? 0);
|
||||
const locationSearch = useRouterState({
|
||||
select: (state) => state.location.search,
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
const recipientId = userId();
|
||||
const userIdValue = React.useMemo(() => {
|
||||
const rawId = (locationSearch as unknown as { id?: unknown })?.id;
|
||||
return Number(rawId ?? 0);
|
||||
}, [locationSearch]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const recipientId = userIdValue;
|
||||
|
||||
if (!recipientId) {
|
||||
setCurrentSharedSecret("");
|
||||
return;
|
||||
}
|
||||
|
||||
get(recipientId).then(async (recipientData) => {
|
||||
let active = true;
|
||||
|
||||
void get(recipientId).then(async (recipientData) => {
|
||||
const ownId = await load("user_id");
|
||||
const privateKey = await load("private_key");
|
||||
const ownData = await get(ownId);
|
||||
|
|
@ -53,39 +51,58 @@ export default function Provider(
|
|||
recipientData.public_key,
|
||||
);
|
||||
|
||||
setCurrentSharedSecret(sharedSecret);
|
||||
if (active) {
|
||||
setCurrentSharedSecret(sharedSecret);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
async function customGetMessages(amount: number, offset: number) {
|
||||
const messages = await props.getMessages(amount, offset, userId());
|
||||
const sorted = [...messages].sort((a, b) => a.timestamp - b.timestamp);
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [get, get_shared_secret, load, userIdValue]);
|
||||
|
||||
return sorted;
|
||||
}
|
||||
const customGetMessages = React.useCallback(
|
||||
async (amount: number, offset: number) => {
|
||||
const messages = await send("messages_get", {
|
||||
amount,
|
||||
offset,
|
||||
user_id: userIdValue,
|
||||
});
|
||||
|
||||
function addLiveMessage(message: RawMessage) {
|
||||
setLiveMessages((prev) => [...prev, message]);
|
||||
}
|
||||
if (messages.type.startsWith("error")) {
|
||||
throw new Error(messages.type);
|
||||
}
|
||||
|
||||
function clearLiveMessages() {
|
||||
setLiveMessages([]);
|
||||
}
|
||||
const rawMessages = messages.data.messages;
|
||||
const sorted = [...rawMessages].sort((a, b) => a.timestamp - b.timestamp);
|
||||
return sorted;
|
||||
},
|
||||
[send, userIdValue],
|
||||
);
|
||||
|
||||
const addLiveMessage = React.useCallback((message: RawMessage) => {
|
||||
setLiveMessagesState((prev) => [...prev, message]);
|
||||
}, []);
|
||||
|
||||
const clearLiveMessages = React.useCallback(() => {
|
||||
setLiveMessagesState([]);
|
||||
}, []);
|
||||
|
||||
const value = React.useMemo<contextType>(
|
||||
() => ({
|
||||
getMessages: customGetMessages,
|
||||
liveMessages: () => liveMessagesState,
|
||||
addLiveMessage,
|
||||
clearLiveMessages,
|
||||
sharedSecret: () => currentSharedSecret,
|
||||
userId: () => userIdValue,
|
||||
}),
|
||||
[addLiveMessage, clearLiveMessages, currentSharedSecret, customGetMessages, liveMessagesState, userIdValue],
|
||||
);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<context.Provider
|
||||
value={{
|
||||
getMessages: customGetMessages,
|
||||
liveMessages,
|
||||
addLiveMessage,
|
||||
clearLiveMessages,
|
||||
sharedSecret: currentSharedSecret,
|
||||
userId,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</context.Provider>
|
||||
<context.Provider value={value}>{props.children}</context.Provider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -100,9 +117,9 @@ type contextType = {
|
|||
};
|
||||
|
||||
export function useChat(): contextType {
|
||||
const ctx = useContext(context);
|
||||
const ctx = React.useContext(context);
|
||||
if (!ctx) {
|
||||
throw new Error("useChat must be used within a ChatProvider");
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { createVirtualizer } from "@tanstack/solid-virtual";
|
||||
import { useInfiniteQuery } from "@tanstack/solid-query";
|
||||
import * as React from "react";
|
||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { useChat } from "./context";
|
||||
import { createEffect, createMemo, createSignal, For } from "solid-js";
|
||||
|
||||
import InputComponent from "./components/input";
|
||||
import Message from "./components/message";
|
||||
|
|
@ -11,21 +11,22 @@ const PAGE_SIZE = 50;
|
|||
export default function Screen() {
|
||||
const { getMessages, liveMessages, clearLiveMessages, userId } = useChat();
|
||||
|
||||
// eslint-disable-next-line no-unassigned-vars
|
||||
let scrollRef!: HTMLDivElement;
|
||||
const scrollRef = React.useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const [hasScrolledToBottomInitially, setHasScrolledToBottomInitially] =
|
||||
createSignal(false);
|
||||
const [lastLiveMessageCount, setLastLiveMessageCount] = createSignal(0);
|
||||
const [prependAnchor, setPrependAnchor] = createSignal<{
|
||||
React.useState(false);
|
||||
const [lastLiveMessageCount, setLastLiveMessageCount] = React.useState(0);
|
||||
const [prependAnchor, setPrependAnchor] = React.useState<{
|
||||
totalSize: number;
|
||||
scrollTop: number;
|
||||
} | null>(null);
|
||||
|
||||
const messagesQuery = useInfiniteQuery(() => ({
|
||||
queryKey: ["chat-messages", String(userId())],
|
||||
const chatUserId = userId();
|
||||
|
||||
const messagesQuery = useInfiniteQuery({
|
||||
queryKey: ["chat-messages", String(chatUserId)],
|
||||
initialPageParam: 0,
|
||||
queryFn: ({ pageParam }) => getMessages(PAGE_SIZE, pageParam),
|
||||
queryFn: ({ pageParam }) => getMessages(PAGE_SIZE, Number(pageParam)),
|
||||
getNextPageParam: (lastPage, allPages) => {
|
||||
if (lastPage.length < PAGE_SIZE) {
|
||||
return undefined;
|
||||
|
|
@ -33,54 +34,30 @@ export default function Screen() {
|
|||
|
||||
return allPages.length * PAGE_SIZE;
|
||||
},
|
||||
}));
|
||||
|
||||
const historicalMessages = createMemo(() => {
|
||||
const pages = messagesQuery.data?.pages ?? [];
|
||||
return [...pages].reverse().flat();
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
userId();
|
||||
const historicalMessages = React.useMemo(() => {
|
||||
const pages = messagesQuery.data?.pages ?? [];
|
||||
return [...pages].reverse().flat();
|
||||
}, [messagesQuery.data]);
|
||||
|
||||
React.useEffect(() => {
|
||||
clearLiveMessages();
|
||||
setHasScrolledToBottomInitially(false);
|
||||
setLastLiveMessageCount(0);
|
||||
setPrependAnchor(null);
|
||||
});
|
||||
}, [chatUserId, clearLiveMessages]);
|
||||
|
||||
const messages = createMemo(() => [
|
||||
...historicalMessages(),
|
||||
...liveMessages(),
|
||||
]);
|
||||
const messages = React.useMemo(
|
||||
() => [...historicalMessages, ...liveMessages()],
|
||||
[historicalMessages, liveMessages],
|
||||
);
|
||||
|
||||
async function onScroll() {
|
||||
if (!scrollRef) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (scrollRef.scrollTop > 96) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (messagesQuery.isFetchingNextPage || !messagesQuery.hasNextPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPrependAnchor({
|
||||
totalSize: virtualizer.getTotalSize(),
|
||||
scrollTop: scrollRef.scrollTop,
|
||||
});
|
||||
|
||||
await messagesQuery.fetchNextPage();
|
||||
}
|
||||
|
||||
const virtualizer = createVirtualizer({
|
||||
get count() {
|
||||
return messages().length;
|
||||
},
|
||||
getScrollElement: () => scrollRef,
|
||||
const virtualizer = useVirtualizer({
|
||||
count: messages.length,
|
||||
getScrollElement: () => scrollRef.current,
|
||||
estimateSize: (index) => {
|
||||
const message = messages()[index];
|
||||
const message = messages[index];
|
||||
|
||||
if (!message) {
|
||||
return 56;
|
||||
|
|
@ -102,82 +79,107 @@ export default function Screen() {
|
|||
overscan: 6,
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
const currentMessages = messages();
|
||||
const onScroll = React.useCallback(async () => {
|
||||
if (!scrollRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (scrollRef.current.scrollTop > 96) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (messagesQuery.isFetchingNextPage || !messagesQuery.hasNextPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPrependAnchor({
|
||||
totalSize: virtualizer.getTotalSize(),
|
||||
scrollTop: scrollRef.current.scrollTop,
|
||||
});
|
||||
|
||||
await messagesQuery.fetchNextPage();
|
||||
}, [messagesQuery, virtualizer]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (
|
||||
!scrollRef ||
|
||||
hasScrolledToBottomInitially() ||
|
||||
currentMessages.length === 0
|
||||
!scrollRef.current ||
|
||||
hasScrolledToBottomInitially ||
|
||||
messages.length === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
queueMicrotask(() => {
|
||||
if (!scrollRef) {
|
||||
if (!scrollRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
scrollRef.scrollTop = scrollRef.scrollHeight;
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
setHasScrolledToBottomInitially(true);
|
||||
});
|
||||
});
|
||||
}, [hasScrolledToBottomInitially, messages]);
|
||||
|
||||
createEffect(() => {
|
||||
React.useEffect(() => {
|
||||
const count = liveMessages().length;
|
||||
|
||||
if (!scrollRef) {
|
||||
if (!scrollRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (count > lastLiveMessageCount()) {
|
||||
if (count > lastLiveMessageCount) {
|
||||
queueMicrotask(() => {
|
||||
if (!scrollRef) {
|
||||
if (!scrollRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
scrollRef.scrollTop = scrollRef.scrollHeight;
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
setLastLiveMessageCount(count);
|
||||
});
|
||||
}, [lastLiveMessageCount, liveMessages]);
|
||||
|
||||
createEffect(() => {
|
||||
const anchor = prependAnchor();
|
||||
|
||||
if (!scrollRef || !anchor || messagesQuery.isFetchingNextPage) {
|
||||
React.useEffect(() => {
|
||||
if (!scrollRef.current || !prependAnchor || messagesQuery.isFetchingNextPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
queueMicrotask(() => {
|
||||
if (!scrollRef) {
|
||||
if (!scrollRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const delta = virtualizer.getTotalSize() - anchor.totalSize;
|
||||
scrollRef.scrollTop = anchor.scrollTop + delta;
|
||||
const delta = virtualizer.getTotalSize() - prependAnchor.totalSize;
|
||||
scrollRef.current.scrollTop = prependAnchor.scrollTop + delta;
|
||||
setPrependAnchor(null);
|
||||
});
|
||||
});
|
||||
}, [messagesQuery.isFetchingNextPage, prependAnchor, virtualizer]);
|
||||
|
||||
return (
|
||||
<div class="w-full h-full flex flex-col overflow-hidden px-2">
|
||||
<div className="w-full h-full flex flex-col overflow-hidden px-2">
|
||||
<div
|
||||
ref={scrollRef}
|
||||
id="chat_container"
|
||||
class={`flex-1 max-h-[calc(100vh-151px)] overflow-y-auto px-2.5`}
|
||||
onScroll={onScroll}
|
||||
className="flex-1 max-h-[calc(100vh-151px)] overflow-y-auto px-2.5"
|
||||
onScroll={() => {
|
||||
void onScroll();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="relative w-full"
|
||||
className="relative w-full"
|
||||
style={{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
}}
|
||||
>
|
||||
<For each={virtualizer.getVirtualItems()}>
|
||||
{(virtualRow) => (
|
||||
{virtualizer.getVirtualItems().map((virtualRow) => {
|
||||
const message = messages[virtualRow.index];
|
||||
if (!message) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={virtualRow.key}
|
||||
data-index={virtualRow.index}
|
||||
ref={virtualizer.measureElement}
|
||||
style={{
|
||||
|
|
@ -189,16 +191,13 @@ export default function Screen() {
|
|||
padding: "4px 0",
|
||||
}}
|
||||
>
|
||||
<Message
|
||||
message={messages()[virtualRow.index]}
|
||||
notEncrypted={messages()[virtualRow.index].not_encrypted}
|
||||
/>
|
||||
<Message message={message} notEncrypted={message.not_encrypted} />
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<InputComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,7 @@
|
|||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"noEmit": true
|
||||
|
|
|
|||
Loading…
Reference in a new issue