From 364db1adf74ec54c0e6ae07656f93acd7ff4a390 Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Mon, 9 Jun 2025 19:04:18 +0500 Subject: [PATCH] sending comments fixes pxls --- src/components/ModalContainer.tsx | 8 ++++ src/components/NewInput.tsx | 48 ++++++++++---------- src/components/SessionComments.tsx | 39 ++++++++++++---- src/components/modals/CreateSessionModal.tsx | 29 ++++-------- src/components/modals/EditTableModal.tsx | 36 +++++++-------- src/components/modals/SessionModal.tsx | 8 ++-- src/utils/interval-duration.tsx | 4 +- 7 files changed, 93 insertions(+), 79 deletions(-) diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx index 0810626..3ddb80b 100644 --- a/src/components/ModalContainer.tsx +++ b/src/components/ModalContainer.tsx @@ -38,6 +38,14 @@ function ModalContainer() { }; }, []); + useEffect(() => { + if (!modal) return; + document.body.style.overflow = "hidden"; + return () => { + document.body.style.overflow = "auto"; + }; + }, [modal]); + return ( {modal && ( diff --git a/src/components/NewInput.tsx b/src/components/NewInput.tsx index 3e70bb9..5ef55ab 100644 --- a/src/components/NewInput.tsx +++ b/src/components/NewInput.tsx @@ -14,32 +14,30 @@ function NewInput({ }: NewInputProps) { return (
-
- - {placeholder && ( - - {placeholder} - + - {errorMessage} -

- )} -
+ /> + {placeholder && ( + + {placeholder} + + )} + {isError && ( +

+ {errorMessage} +

+ )}
); } diff --git a/src/components/SessionComments.tsx b/src/components/SessionComments.tsx index fff4ad3..0cde377 100644 --- a/src/components/SessionComments.tsx +++ b/src/components/SessionComments.tsx @@ -2,7 +2,8 @@ import { useRef } from "react"; import SendIcon from "./icons/SendIcon"; import NewButton from "./NewButton"; import { IComment } from "../types/IComments"; -import { useQueryClient } from "@tanstack/react-query"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; +import api from "../utils/api"; function SessionComments({ comments, @@ -13,8 +14,6 @@ function SessionComments({ }) { const textareaRef = useRef(null); const formRef = useRef(null); - const queryClient = useQueryClient(); - const handleTextareaInput = () => { const textarea = textareaRef.current; @@ -39,27 +38,49 @@ function SessionComments({ textarea.scrollHeight > (225 / 1440) * innerWidth ? "auto" : "hidden"; }; + const queryClient = useQueryClient(); + + const { mutate: createComment } = useMutation({ + mutationFn: (comment: string) => + api.post("comments", { + json: { + sessionId: sessionId, + text: comment, + }, + }), + onSuccess: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }), + }); + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - - console.log("submit"); + + const textarea = textareaRef.current; + if (!textarea?.value) return; + + createComment(textarea.value); + textarea.value = ""; + handleTextareaInput(); }; const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter" && !e.shiftKey) { + if (e.key === "Enter") { e.preventDefault(); handleSubmit(e as unknown as React.FormEvent); } }; return ( -
+
{comments.length > 0 ? (
Комменты
) : (
- ghost + ghost

Оставьте заметку

@@ -87,7 +108,7 @@ function SessionComments({ onInput={handleTextareaInput} onKeyDown={handleKeyDown} /> - + diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index e7ab117..cf9f059 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/src/components/modals/CreateSessionModal.tsx @@ -120,20 +120,6 @@ export default function CreateSessionModal({ targetServerId }: Props) { } endSession(undefined, { - // onSuccess: () => { - // createClient(undefined, { - // onSuccess: (client) => { - // createSession({ - // clientId: client.id, - // serverId: selectedServer.id, - // appId: selectedApp.id, - // }); - // }, - // onError: (error) => { - // console.log(error); - // }, - // }); - // }, onError: (error) => { console.log("Ошибка при завершении сессии:", error); }, @@ -141,14 +127,13 @@ export default function CreateSessionModal({ targetServerId }: Props) { } useEffect(() => { - console.log(servers, selectedServer, selectedApp, isSessionExists); if ( selectedServer && servers?.find((server) => server.id === selectedServer?.id)?.sessions?.[0] ?.status === "ended" && selectedApp && isSessionExists - ) { + ) createClient(undefined, { onSuccess: (client) => { createSession({ @@ -158,7 +143,6 @@ export default function CreateSessionModal({ targetServerId }: Props) { }); }, }); - } }, [ selectedApp, servers, @@ -172,7 +156,7 @@ export default function CreateSessionModal({ targetServerId }: Props) { return (

@@ -245,11 +229,15 @@ export default function CreateSessionModal({ targetServerId }: Props) { server.id === selectedServer?.id) + ?.sessions?.[0]?.status === "ending" } variant="cta" size="large" - className="sticky bottom-[1.111vw]" + className="sticky bottom-0" >
@@ -262,4 +250,3 @@ export default function CreateSessionModal({ targetServerId }: Props) { ); } - diff --git a/src/components/modals/EditTableModal.tsx b/src/components/modals/EditTableModal.tsx index 675434e..2ce02b1 100644 --- a/src/components/modals/EditTableModal.tsx +++ b/src/components/modals/EditTableModal.tsx @@ -27,52 +27,52 @@ function EditTable({ table }: { table: IServer }) { setModal(null); }, }); - + return ( -
-

Редатирование стола

-
-
-
+
+

Редактирование стола

+
+
+
setTableName(e.target.value)} isError={tableName.length > 16} - errorMessage='Не больше 16 символов' + errorMessage="Не больше 16 символов" /> -

+

Придумайте название до 16 символов, например «Тузик»

-
+
setTableDescription(e.target.value)} isError={tableDescription.length > 20} - errorMessage='Не больше 20 символов' + errorMessage="Не больше 20 символов" /> -

+

Придумайте описание до 20 символов, например «Расположен в офисе»

-
+
16 || tableDescription.length > 20 } - className='flex justify-center' + className="flex justify-center" onClick={() => updateTable()} >

Сохранить изменения

 setModal(null)} >

Отменить

diff --git a/src/components/modals/SessionModal.tsx b/src/components/modals/SessionModal.tsx index a7d712c..15d8b06 100644 --- a/src/components/modals/SessionModal.tsx +++ b/src/components/modals/SessionModal.tsx @@ -15,7 +15,7 @@ function SessionModal({ session }: { session: ISession }) { return (
-
+

{format(session.createdAt, "dd MMMM yyyy", { locale: ru })}

, {format(session.createdAt, "HH:mm")}

@@ -69,7 +69,7 @@ function SessionModal({ session }: { session: ISession }) {
-

+

Речевая  аналитика  @@ -105,8 +105,8 @@ function SessionModal({ session }: { session: ISession }) {

-

- Документы по сеансу +

+ Документы по сеансу

diff --git a/src/utils/interval-duration.tsx b/src/utils/interval-duration.tsx index 49861df..ccc8b49 100644 --- a/src/utils/interval-duration.tsx +++ b/src/utils/interval-duration.tsx @@ -5,10 +5,10 @@ function getIntervalDuration(start: Date, end: Date) { start: start, end: end, }); - const hours = (duration.hours || 0).toString().padStart(2, "0"); + const hours = (duration.hours || 0).toString(); const minutes = (duration.minutes || 0).toString().padStart(2, "0"); const seconds = (duration.seconds || 0).toString().padStart(2, "0"); - return `${hours}:${minutes}:${seconds}`; + return `${+hours ? `${hours}:` : ""}${minutes}:${seconds}`; } export default getIntervalDuration;