Moved to ReactJS
This commit is contained in:
parent
c8ef2b248f
commit
1d0ebeb2b7
100 changed files with 1909 additions and 6056 deletions
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue