From ab347bc95b1134e162c789b358e8d3937d5eda9c Mon Sep 17 00:00:00 2001 From: inmake Date: Sun, 29 Oct 2023 18:06:08 +0500 Subject: [PATCH] upd --- .env | 4 +- src/MonitoringPage.tsx | 4 +- src/ScheduledPage.tsx | 29 ++++------ src/StreamPage.tsx | 2 - src/components/Calendar.tsx | 12 ++-- src/components/Chat.tsx | 4 -- src/components/SidebarTab1.tsx | 5 +- src/components/SidebarTab2.tsx | 77 ++++++++++++++++++------- src/components/SidebarTab4.tsx | 15 +++-- src/components/TimeSelector.tsx | 7 ++- src/components/ToggleMic.tsx | 14 ++--- src/components/modals/AFKTimerModal.tsx | 2 - src/index.css | 18 +++++- src/main.tsx | 2 +- 14 files changed, 115 insertions(+), 80 deletions(-) diff --git a/.env b/.env index c178342..72a191e 100644 --- a/.env +++ b/.env @@ -1,3 +1,5 @@ # VITE_COORD_URL=http://localhost:4000 VITE_COORD_URL=https://coord.graff.tech -VITE_CRM_API_URL=https://crm.stream.graff.tech/api \ No newline at end of file +# VITE_CRM_API_URL=http://localhost:3001 +VITE_CRM_API_URL=http://192.168.1.170:3001 +# VITE_CRM_API_URL=https://crm.stream.graff.tech/api \ No newline at end of file diff --git a/src/MonitoringPage.tsx b/src/MonitoringPage.tsx index d822d9a..29919ba 100644 --- a/src/MonitoringPage.tsx +++ b/src/MonitoringPage.tsx @@ -35,15 +35,13 @@ function MonitoringPage() { } async function endSession(activeSessionId: string) { - const result = await ky + await ky .post( `${ import.meta.env.VITE_COORD_URL }/active_sessions/${activeSessionId}/end` ) .json(); - - console.log(result); } useEffect(() => { diff --git a/src/ScheduledPage.tsx b/src/ScheduledPage.tsx index f7fe876..d09cdf9 100644 --- a/src/ScheduledPage.tsx +++ b/src/ScheduledPage.tsx @@ -3,24 +3,23 @@ import ky from "ky"; import { useEffect, useState } from "react"; import Countdown from "react-countdown"; -import { useNavigate, useSearchParams } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; function ScheduledPage() { - const [searchParams] = useSearchParams(); + const params = useParams(); + // const [searchParams] = useSearchParams(); const navigate = useNavigate(); const [countdownSeconds, setCountdownSeconds] = useState(); - async function connect() { - const userInviteKey = searchParams.get("userInviteKey"); + console.log(params.sessionId); + async function connect() { try { - const result: any = await ky - .get( - `${ - import.meta.env.VITE_COORD_URL - }/active_sessions/scheduled?userInviteKey=${userInviteKey}` - ) - .json(); + const result: any = await ky.get( + `${import.meta.env.VITE_CRM_API_URL}/scheduled_sessions/${ + params.sessionId + }` + ); if (!result.id) { setCountdownSeconds(result.countdownSeconds); @@ -36,13 +35,7 @@ function ScheduledPage() { } useEffect(() => { - if (searchParams.get("userInviteKey")) { - // console.log(searchParams.get("userInviteKey")); - - connect(); - } else { - navigate("/"); - } + connect(); }, []); return ( diff --git a/src/StreamPage.tsx b/src/StreamPage.tsx index c4a6c38..11034c2 100644 --- a/src/StreamPage.tsx +++ b/src/StreamPage.tsx @@ -81,8 +81,6 @@ function StreamPage() { const diffMs = differenceInMilliseconds(new Date(), date); setStopwatch(format(diffMs, "mm:ss")); - console.log(); - setTimeout(() => { updateStartDate(date); }, 1000); diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index aab7293..954f6c7 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -2,13 +2,10 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { add, - differenceInDays, eachDayOfInterval, endOfMonth, format, getDay, - isAfter, - isBefore, isEqual, isWithinInterval, parse, @@ -25,13 +22,14 @@ import i18n from "../i18n"; interface CalendarProps { schedules: any[]; handleSelect: (day: Date) => void; + className?: string; } function classNames(...classes: (string | boolean)[]) { return classes.filter(Boolean).join(" "); } -function Calendar({ schedules, handleSelect }: CalendarProps) { +function Calendar({ schedules, handleSelect, className }: CalendarProps) { const today = startOfToday(); const [selectedDay, setSelectedDay] = useState(null); const [currentMonth, setCurrentMonth] = useState(format(today, "MMM-yyyy")); @@ -53,15 +51,13 @@ function Calendar({ schedules, handleSelect }: CalendarProps) { } useEffect(() => { - console.log(schedules); - if (!selectedDay) return; handleSelect(selectedDay); }, [selectedDay]); return ( - <> +
- +
); } diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx index dfc3a36..995a1fc 100644 --- a/src/components/Chat.tsx +++ b/src/components/Chat.tsx @@ -66,10 +66,6 @@ function Chat({ className, handleClose }: ChatProps) { useEffect(() => { if (!socket) return; - console.log(messages); - - console.log("CHAT Socket Init: ", socket.id); - socket.on("message", (socketId, message) => { setMessages([ ...useChatStore.getState().messages, diff --git a/src/components/SidebarTab1.tsx b/src/components/SidebarTab1.tsx index c8ae2b6..e5cc6ee 100644 --- a/src/components/SidebarTab1.tsx +++ b/src/components/SidebarTab1.tsx @@ -7,6 +7,7 @@ import Calendar from "./Calendar"; import CloseIcon from "./icons/CloseIcon"; import { useEffect, useState } from "react"; import ky from "ky"; +import LoaderIcon from "./icons/LoaderIcon"; function SidebarTab1() { const [currentTab, setCurrentTab, setIsOpen, setSelectedDay, buildId] = @@ -74,13 +75,13 @@ function SidebarTab1() {
- {schedules ? ( + {schedules && schedules.length > 0 ? ( handleSelectDay(day)} /> ) : ( - "Загрузка данных..." + )}
diff --git a/src/components/SidebarTab2.tsx b/src/components/SidebarTab2.tsx index ea735b2..5eb428c 100644 --- a/src/components/SidebarTab2.tsx +++ b/src/components/SidebarTab2.tsx @@ -5,11 +5,18 @@ import { Trans } from "react-i18next"; import useSidebarTabStore from "../stores/useSidebarStore"; import TimeSelector from "./TimeSelector"; import CloseIcon from "./icons/CloseIcon"; -import { eachMinuteOfInterval, format, parse, parseISO } from "date-fns"; +import { + addMinutes, + eachMinuteOfInterval, + format, + isAfter, + parse, +} from "date-fns"; import i18n from "../i18n"; import { enUS, ru } from "date-fns/locale"; import ky from "ky"; import { useEffect, useState } from "react"; +import LoaderIcon from "./icons/LoaderIcon"; function SidebarTab2() { const [ @@ -18,7 +25,6 @@ function SidebarTab2() { setIsOpen, setSelectedTime, selectedDay, - selectedTime, buildId, ] = useSidebarTabStore((state) => [ state.currentTab, @@ -26,9 +32,9 @@ function SidebarTab2() { state.setIsOpen, state.setSelectedTime, state.selectedDay, - state.selectedTime, state.buildId, ]); + const [build, setBuild] = useState<{ [key: string]: any }>(); const [scheduledSessions, setScheduledSessions] = useState(); const [schedule, setSchedule] = useState<{ [key: string]: any }>(); const [scheduleTimes, setScheduleTimes] = useState(); @@ -38,13 +44,43 @@ function SidebarTab2() { setCurrentTab(currentTab + 1); } + async function getBuild() { + const result: { [key: string]: any } = await ky + .get(`${import.meta.env.VITE_CRM_API_URL}/builds/${buildId}`) + .json(); + + setBuild(result); + } + + async function getScheduledSessions() { + if (!selectedDay) return; + + const result: any[] = await ky + .get( + `${ + import.meta.env.VITE_CRM_API_URL + }/scheduled_sessions/builds/${buildId}?date=${format( + selectedDay, + "yyyy-MM-dd" + )}` + ) + .json(); + + setScheduledSessions(result); + } + async function getSchedule() { if (!selectedDay) return; try { const result: { [key: string]: any } = await ky .get( - `${import.meta.env.VITE_CRM_API_URL}/schedules/builds/${buildId}?date=${selectedDay.toISOString()}` + `${ + import.meta.env.VITE_CRM_API_URL + }/schedules/builds/${buildId}?date=${format( + selectedDay, + "yyyy-MM-dd" + )}` ) .json(); @@ -57,13 +93,13 @@ function SidebarTab2() { } function generateScheduleTimes() { - if (!schedule || !scheduledSessions) return; + if (!selectedDay || !build || !scheduledSessions || !schedule) return; const step = schedule.sessionDuration + schedule.sessionBreak; const times = eachMinuteOfInterval( { - start: parse(schedule.startTime, "HH:mm", new Date()), - end: parse(schedule.endTime, "HH:mm", new Date()), + start: parse(schedule.startTime, "HH:mm", selectedDay), + end: parse(schedule.endTime, "HH:mm", selectedDay), }, { step } ); @@ -71,29 +107,24 @@ function SidebarTab2() { const formatTimes = times.map((time) => ({ value: format(time, "HH:mm"), active: + isAfter(time, addMinutes(new Date(), 30)) && scheduledSessions.filter( (scheduledSession) => scheduledSession.startAt === time.toISOString() - ).length < 3, + ).length < build.sessionLimit, })); setScheduleTimes(formatTimes); } - async function getScheduledSessions() { - if (!selectedDay) return; - - const result: any[] = await ky - .get( - `${import.meta.env.VITE_CRM_API_URL}/scheduled_sessions/builds/${buildId}?date=${selectedDay?.toISOString()}` - ) - .json(); - - setScheduledSessions(result); - } + useEffect(() => { + getBuild(); + }, [selectedDay]); useEffect(() => { + if (!build) return; + getScheduledSessions(); - }, [selectedDay]); + }, [build]); useEffect(() => { if (!scheduledSessions) return; @@ -102,6 +133,8 @@ function SidebarTab2() { }, [scheduledSessions]); useEffect(() => { + if (!schedule) return; + generateScheduleTimes(); }, [schedule]); @@ -144,11 +177,11 @@ function SidebarTab2() {
{scheduleTimes && scheduleTimes.length > 0 ? ( handleSelectTime(time)} /> ) : ( - "Загрузка данных..." + )}
diff --git a/src/components/SidebarTab4.tsx b/src/components/SidebarTab4.tsx index a18e450..f05fdec 100644 --- a/src/components/SidebarTab4.tsx +++ b/src/components/SidebarTab4.tsx @@ -20,6 +20,7 @@ function SidebarTab4() { name, phone, email, + buildId, ] = useSidebarTabStore((state) => [ state.currentTab, state.setCurrentTab, @@ -29,6 +30,7 @@ function SidebarTab4() { state.name, state.phone, state.email, + state.buildId, ]); const [isLoading, setIsLoading] = useState(false); @@ -44,14 +46,15 @@ function SidebarTab4() { try { await ky - .post("https://coord.graff.tech/scheduled_sessions", { + .post(`${import.meta.env.VITE_CRM_API_URL}/scheduled_sessions`, { json: { - username: "test", - name, - phone, - email, - title: "nksJukovaDev", + buildId, startAt, + client: { + name, + phone, + email, + }, }, }) .json(); diff --git a/src/components/TimeSelector.tsx b/src/components/TimeSelector.tsx index 71bc0d1..cf343f3 100644 --- a/src/components/TimeSelector.tsx +++ b/src/components/TimeSelector.tsx @@ -4,11 +4,12 @@ import { Trans } from "react-i18next"; interface TimeSelectorProps { times: any[]; handleSelect: (time: string) => void; + className?: string; } -function TimeSelector({ times, handleSelect }: TimeSelectorProps) { +function TimeSelector({ times, handleSelect, className }: TimeSelectorProps) { return ( - <> +
{times.map((time, index) => (
- +
); } diff --git a/src/components/ToggleMic.tsx b/src/components/ToggleMic.tsx index ce716c3..f7c811d 100644 --- a/src/components/ToggleMic.tsx +++ b/src/components/ToggleMic.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable react-hooks/exhaustive-deps */ import { useRoomContext } from "@livekit/components-react"; -import { RoomEvent, Track } from "livekit-client"; +import { Track } from "livekit-client"; import { useEffect, useState } from "react"; import MicroOnIcon from "./icons/MicroOnIcon"; import MicroOffIcon from "./icons/MicroOffIcon"; @@ -38,13 +38,13 @@ function ToggleMic({ socket, handleUpdate }: any) { }, [socket]); useEffect(() => { - room.on(RoomEvent.TrackMuted, (_, participant) => { - console.log(participant); - }); + // room.on(RoomEvent.TrackMuted, (_, participant) => { + // console.log(participant); + // }); - room.on(RoomEvent.TrackUnmuted, (_, participant) => { - console.log(participant); - }); + // room.on(RoomEvent.TrackUnmuted, (_, participant) => { + // console.log(participant); + // }); room.on("localTrackPublished", () => { room.localParticipant.getTrack(Track.Source.Microphone)?.mute(); diff --git a/src/components/modals/AFKTimerModal.tsx b/src/components/modals/AFKTimerModal.tsx index c744c5f..75cf7ef 100644 --- a/src/components/modals/AFKTimerModal.tsx +++ b/src/components/modals/AFKTimerModal.tsx @@ -18,8 +18,6 @@ function AFKTimerModal() { } async function checkAFK(interval: number) { - console.log(afkTimerRef.current); - if (afkTimerRef.current && afkTimerRef.current <= 1) { clearInterval(interval); await endSession(); diff --git a/src/index.css b/src/index.css index 00c850a..25b709f 100644 --- a/src/index.css +++ b/src/index.css @@ -46,4 +46,20 @@ input { .lk-button { background: #131313 !important; @apply w-10 h-10 relative outline-none rounded-full shadow-lg shadow-[#131313] text-white opacity-90 flex flex-col justify-center items-center; -} \ No newline at end of file +} + +.entering { + opacity: 1; +} + +.entered { + opacity: 1; +} + +.exiting { + opacity: 0; +} + +.exited { + opacity: 0; +} diff --git a/src/main.tsx b/src/main.tsx index af24e78..baa27a5 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -35,7 +35,7 @@ const router = createBrowserRouter([ element: , }, { - path: "/scheduled", + path: "/scheduled/:sessionId", element: , }, {