diff --git a/public/images/sad_ghost.png b/public/images/sad_ghost.png new file mode 100644 index 0000000..553b7e1 Binary files /dev/null and b/public/images/sad_ghost.png differ diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 07bd448..63cdb08 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -1,6 +1,6 @@ function Badge({ count }: { count: number }) { return ( -
+
{count}
); diff --git a/src/components/DesktopCard.tsx b/src/components/DesktopCard.tsx index 30d70f5..b53d3c8 100644 --- a/src/components/DesktopCard.tsx +++ b/src/components/DesktopCard.tsx @@ -34,8 +34,8 @@ export default function DesktopCard({ server }: IDesktopCardProps) { >
) : server.status === "offline" ? ( - - {props.onEnter && ( + {/* {pr ops.onEnter && ( - )} + )} */} ); diff --git a/src/components/SessionCommentItem.tsx b/src/components/SessionCommentItem.tsx index d0a48ac..a256ab6 100644 --- a/src/components/SessionCommentItem.tsx +++ b/src/components/SessionCommentItem.tsx @@ -1,5 +1,5 @@ import { motion } from "motion/react"; -import { Comment } from "../types/Comments"; +import { Comment } from "../types/Comment"; import { format } from "date-fns"; function SessionCommentItem({ comment }: { comment: Comment }) { diff --git a/src/components/SessionComments.tsx b/src/components/SessionComments.tsx index e7b940f..c53106f 100644 --- a/src/components/SessionComments.tsx +++ b/src/components/SessionComments.tsx @@ -1,11 +1,14 @@ -import { useRef } from "react"; +import { useRef, useState } from "react"; import SendIcon from "./icons/SendIcon"; import Button from "./Button"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import api from "../utils/api"; -import { Comment } from "../types/Comments"; +import { Comment } from "../types/Comment"; import SessionCommentItem from "./SessionCommentItem"; -import { AnimatePresence } from "motion/react"; +import { AnimatePresence, motion } from "motion/react"; +import { groupByCreatedAt } from "../utils/groupByCreatedAt"; +import { format, isToday } from "date-fns"; +import { ru } from "date-fns/locale"; function SessionComments({ sessionId }: { sessionId: string }) { const textareaRef = useRef(null); @@ -49,9 +52,10 @@ function SessionComments({ sessionId }: { sessionId: string }) { const queryClient = useQueryClient(); - const { data: comments } = useQuery({ + const { data: grouppedComments } = useQuery({ queryKey: ["sessions", "comments", sessionId], queryFn: () => api.get(`comments/${sessionId}`).json(), + select: groupByCreatedAt, }); const { mutate: createComment } = useMutation({ @@ -76,6 +80,7 @@ function SessionComments({ sessionId }: { sessionId: string }) { createComment(textarea.value); textarea.value = ""; + setValue(""); handleTextareaInput(); }; @@ -86,13 +91,26 @@ function SessionComments({ sessionId }: { sessionId: string }) { } }; + const [value, setValue] = useState(""); + return (
- {comments && comments.length > 0 ? ( - comments.map((comment) => ( - + {grouppedComments && grouppedComments.length > 0 ? ( + grouppedComments.map(([timestamp, comments], index) => ( + +

+ {isToday(new Date(timestamp)) + ? "Сегодня" + : format(new Date(timestamp), "d MMMM", { locale: ru })} +

+
+ {comments.map((comment) => ( + + ))} +
+ )) ) : (
@@ -124,6 +142,9 @@ function SessionComments({ sessionId }: { sessionId: string }) { name="comment" className="w-[17.083vw] outline-none text-s resize-none self-center" placeholder="Расскажите, как все прошло" + onChange={(e) => { + setValue(e.target.value); + }} style={{ wordWrap: "break-word", overflowY: "hidden", @@ -131,8 +152,8 @@ function SessionComments({ sessionId }: { sessionId: string }) { onInput={handleTextareaInput} onKeyDown={handleKeyDown} /> - diff --git a/src/components/icons/StartSessionIcon.tsx b/src/components/icons/StartSessionIcon.tsx index 1ef415a..3c9cf7c 100644 --- a/src/components/icons/StartSessionIcon.tsx +++ b/src/components/icons/StartSessionIcon.tsx @@ -1,8 +1,9 @@ function StartSessionIcon() { return ( - + + diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index 1663e0a..d867127 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/src/components/modals/CreateSessionModal.tsx @@ -226,26 +226,26 @@ export default function CreateSessionModal({ targetServerId }: Props) {
)} -
-

Запустить сеанс

- + Запустить сеанс + + ); diff --git a/src/components/modals/EditTableModal.tsx b/src/components/modals/EditTableModal.tsx index 20d656c..7d7274d 100644 --- a/src/components/modals/EditTableModal.tsx +++ b/src/components/modals/EditTableModal.tsx @@ -18,7 +18,7 @@ function EditTable({ table }: { table: Server }) { return api.put(`servers/${table.id}`, { json: { name: tableName, - location: tableDescription, + description: tableDescription, }, }); }, diff --git a/src/pages/SessionsPage.tsx b/src/pages/SessionsPage.tsx index e340e4f..429f26a 100644 --- a/src/pages/SessionsPage.tsx +++ b/src/pages/SessionsPage.tsx @@ -12,6 +12,7 @@ import { ru } from "date-fns/locale"; import MultySelect from "../components/MultySelect"; import Button from "../components/Button"; import SearchInput from "../components/SearchInput"; +import CloseIcon from "../components/icons/CloseIcon"; function SessionsPage() { const [limit, setLimit] = useState(10); @@ -69,6 +70,12 @@ function SessionsPage() { enabled: !!me, }); + function reset() { + setSearch(""); + setAppIds([]); + setManagerIds([]); + } + return (

Сеансы

@@ -103,40 +110,62 @@ function SessionsPage() { />
- {!!count && ( +

Найдено {count} сеансов

- )} + +
- {Object.entries(grouppedSessions || {}).map(([timestamp, sessions]) => ( -
-

- {isToday(new Date(timestamp)) - ? "Сегодня" - : format(new Date(timestamp), "d MMMM", { locale: ru })} -

-
- {sessions.map((session) => ( - - ))} + {grouppedSessions?.length ? ( + grouppedSessions?.map(([timestamp, sessions]) => ( +
+

+ {isToday(new Date(timestamp)) + ? "Сегодня" + : format(new Date(timestamp), "d MMMM", { locale: ru })} +

+
+ {sessions.map((session) => ( + + ))} +
+
+ )) + ) : ( +
+ +
+

Ничего не нашли

+

+ Попробуйте изменить параметры поиска +

- ))} + )}
- + {!!count && ( + + )}
); } diff --git a/src/types/Comments.ts b/src/types/Comment.ts similarity index 100% rename from src/types/Comments.ts rename to src/types/Comment.ts diff --git a/src/types/Session.ts b/src/types/Session.ts index 9e82ea5..6c8a420 100644 --- a/src/types/Session.ts +++ b/src/types/Session.ts @@ -1,5 +1,5 @@ import { IApp as App } from "./App"; -import { Comment } from "./Comments"; +import { Comment } from "./Comment"; import { IOwner as Owner } from "./Owner"; import { Server } from "./Server"; import { Client } from "./Client"; diff --git a/src/utils/groupByCreatedAt.ts b/src/utils/groupByCreatedAt.ts index a36f652..a1e9caf 100644 --- a/src/utils/groupByCreatedAt.ts +++ b/src/utils/groupByCreatedAt.ts @@ -1,8 +1,10 @@ export function groupByCreatedAt(items: T[]) { - return items.reduce((acc, session) => { - const date = session.createdAt.toString().split("T")[0]; - acc[date] = acc[date] || []; - acc[date].push(session); - return acc; - }, {} as Record); + return Object.entries( + items.reduce((acc, session) => { + const date = session.createdAt.toString().split("T")[0]; + acc[date] = acc[date] || []; + acc[date].push(session); + return acc; + }, {} as Record) + ); }