From 120750360e3d347cc4ac9905c83afefa08e639b8 Mon Sep 17 00:00:00 2001 From: Hakase Date: Sat, 7 Sep 2024 15:11:51 +0200 Subject: [PATCH] demo route --- .../lightquark/nav/LightquarkChannel.jsx | 4 +- .../lightquark/nav/LightquarkChannelList.jsx | 4 +- .../_services/lightquark/nav/Quark.jsx | 4 +- .../_services/lightquark/nav/QuarkList.jsx | 13 +--- src/components/nav/DialogMessages.jsx | 22 +------ src/index.jsx | 3 +- src/routes/ChannelView.jsx | 29 ++++++++- src/routes/DemoView.jsx | 59 ++++++++++++++----- src/routes/MainView.jsx | 8 ++- 9 files changed, 91 insertions(+), 55 deletions(-) diff --git a/src/components/_services/lightquark/nav/LightquarkChannel.jsx b/src/components/_services/lightquark/nav/LightquarkChannel.jsx index afbcf59..335ac13 100644 --- a/src/components/_services/lightquark/nav/LightquarkChannel.jsx +++ b/src/components/_services/lightquark/nav/LightquarkChannel.jsx @@ -4,11 +4,11 @@ import styles from "./LightquarkChannel.module.css"; import {AppContext} from "../../../../contexts/AppContext.js"; import {useContext} from "react"; -export default function LightquarkChannel({channel, quarkId}) { +export default function LightquarkChannel({demo, channel, quarkId}) { const appContext = useContext(AppContext); const {dialogId} = useParams(); - return new Audio(appContext.nyafile.getCachedData("sfx/default-hover")).play()} onClick={() => new Audio(appContext.nyafile.getCachedData("sfx/default-select")).play()}> diff --git a/src/components/_services/lightquark/nav/LightquarkChannelList.jsx b/src/components/_services/lightquark/nav/LightquarkChannelList.jsx index ec1de58..e60147d 100644 --- a/src/components/_services/lightquark/nav/LightquarkChannelList.jsx +++ b/src/components/_services/lightquark/nav/LightquarkChannelList.jsx @@ -5,8 +5,8 @@ import LightquarkChannel from "./LightquarkChannel.jsx"; import styles from "./LightquarkChannelList.module.css"; import {AppContext} from "../../../../contexts/AppContext.js"; -export default function LightquarkChannelList({quark}) { +export default function LightquarkChannelList({quark, demo}) { return
- {quark.channels.map((channel) => )} + {quark.channels.map((channel) => )}
} \ No newline at end of file diff --git a/src/components/_services/lightquark/nav/Quark.jsx b/src/components/_services/lightquark/nav/Quark.jsx index 6ad8381..b959e24 100644 --- a/src/components/_services/lightquark/nav/Quark.jsx +++ b/src/components/_services/lightquark/nav/Quark.jsx @@ -1,6 +1,6 @@ import GenericQuark from "../../../nav/GenericQuark.jsx"; import {Link} from "react-router-dom"; -export default function Quark({quark}) { - return +export default function Quark({quark, demo}) { + return } \ No newline at end of file diff --git a/src/components/_services/lightquark/nav/QuarkList.jsx b/src/components/_services/lightquark/nav/QuarkList.jsx index 48f29f4..84ae1b8 100644 --- a/src/components/_services/lightquark/nav/QuarkList.jsx +++ b/src/components/_services/lightquark/nav/QuarkList.jsx @@ -1,14 +1,5 @@ import Quark from "./Quark.jsx"; -import {useContext, useEffect, useState} from "react"; -import {AppContext} from "../../../../contexts/AppContext.js"; -import {useQuery} from "@tanstack/react-query"; -import GenericQuark from "../../../nav/GenericQuark.jsx"; -import {useTranslation} from "react-i18next"; -export default function QuarkList() { - const { status, data, error, isLoading } = useQuery({queryKey: ['quark']}); - const {t} = useTranslation(); - - if(isLoading) return ; - return data.quarks.map((quark) => ) +export default function QuarkList({list, demo}) { + return list.map((quark) => ) } \ No newline at end of file diff --git a/src/components/nav/DialogMessages.jsx b/src/components/nav/DialogMessages.jsx index 4a83ced..765494f 100644 --- a/src/components/nav/DialogMessages.jsx +++ b/src/components/nav/DialogMessages.jsx @@ -4,29 +4,9 @@ import {useParams} from "react-router-dom"; import LightquarkMessage from "../_services/lightquark/dialogs/LightquarkMessage.jsx"; import LQ from "../../util/LQ.js"; -export default function DialogMessages() { - const appContext = useContext(AppContext); +export default function DialogMessages({messages}) { let { quarkId, dialogId } = useParams(); - const [messages, setMessages] = useState([]) - useEffect(() => { - (async () => { - if(!appContext.messageCache[dialogId]) { - const _messages = (await LQ(`channel/${dialogId}/messages`)).response.messages - - appContext.setMessageCache(previousValue => { - previousValue = { ...previousValue } - previousValue[dialogId] = _messages; - return previousValue; - }); - } - })() - }, [dialogId]) - - useEffect(() => { - if(!appContext.messageCache[dialogId]) return setMessages([]); - setMessages(appContext.messageCache[dialogId].sort((a, b) => a.timestamp - b.timestamp)) - }, [dialogId, appContext.messageCache]) useLayoutEffect(() => { document.querySelector("div[class^='_messages_']").lastChild?.scrollIntoView({"behavior": "smooth"}); }, [messages]); diff --git a/src/index.jsx b/src/index.jsx index 1105d0f..c132a0f 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -208,7 +208,8 @@ const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRo export const router = sentryCreateBrowserRouter( createRoutesFromElements( }> - }/> + } /> + }> }> }> diff --git a/src/routes/ChannelView.jsx b/src/routes/ChannelView.jsx index ed6f10c..c4ad022 100644 --- a/src/routes/ChannelView.jsx +++ b/src/routes/ChannelView.jsx @@ -2,11 +2,38 @@ import MessageInput from "../components/nav/MessageInput.jsx"; import DialogMessages from "../components/nav/DialogMessages.jsx"; import styles from "./ChannelView.module.css"; import LightquarkMemberList from "../components/_services/lightquark/nav/LightquarkMemberList.jsx"; +import {useContext, useEffect, useState} from "react"; +import LQ from "../util/LQ.js"; +import {AppContext} from "../contexts/AppContext.js"; +import {useParams} from "react-router-dom"; export default function ChannelView() { + const [messages, setMessages] = useState([]); + const appContext = useContext(AppContext); + const {dialogId} = useParams(); + + useEffect(() => { + (async () => { + if(!appContext.messageCache[dialogId]) { + const _messages = (await LQ(`channel/${dialogId}/messages`)).response.messages + + appContext.setMessageCache(previousValue => { + previousValue = { ...previousValue } + previousValue[dialogId] = _messages; + return previousValue; + }); + } + })() + }, [dialogId]) + + useEffect(() => { + if(!appContext.messageCache[dialogId]) return setMessages([]); + setMessages(appContext.messageCache[dialogId].sort((a, b) => a.timestamp - b.timestamp)) + }, [dialogId, appContext.messageCache]) + return (<>
-
+
diff --git a/src/routes/DemoView.jsx b/src/routes/DemoView.jsx index ab1a9aa..96aa17a 100644 --- a/src/routes/DemoView.jsx +++ b/src/routes/DemoView.jsx @@ -1,32 +1,63 @@ import mainViewStyles from "./MainView.module.css"; import quarkViewStyles from "./QuarkView.module.css"; -import GenericQuark from "../components/nav/GenericQuark.jsx"; import QuarkHeader from "../components/_services/lightquark/nav/QuarkHeader.jsx"; import LightquarkChannelList from "../components/_services/lightquark/nav/LightquarkChannelList.jsx"; import Aviebox from "../components/_services/lightquark/nav/Aviebox.jsx"; +import channelViewStyles from "./ChannelView.module.css"; +import MessageInput from "../components/nav/MessageInput.jsx"; +import clientStyles from "./ClientWrapper.module.css"; +import {useMatch, useNavigate, useParams} from "react-router-dom"; +import {useEffect} from "react"; +import QuarkList from "../components/_services/lightquark/nav/QuarkList.jsx"; +import Message from "../components/dialogs/Message.jsx"; + +const fakeQuarks = [{ + _id: "9phq", + iconUri: "https://pbs.twimg.com/profile_images/1773097531074891776/KjHzRCV4_400x400.png", + name: "ninePLUS HQ", + channels: [{ + _id: "9phq_lobby", + name: "lobby" + }] +}] + +const fakeMessages = { + "9phq_lobby": [{ + "username": "Hakase", + "content": "Meow! :)" + }] +} export default function DemoView() { - return <> + const navigate = useNavigate(); + const { quarkId, channelId } = useParams(); + + useEffect(() => { + if(!quarkId) navigate("/demo/9phq/9phq_lobby") + }, []); + + const currentFakeQuark = fakeQuarks.find(quark => quark._id === quarkId); + if(!currentFakeQuark) return null; + + return
- +
- - + +
+
+
+ {fakeMessages[channelId]?.map((message, index) => )} +
+ +
- +
} \ No newline at end of file diff --git a/src/routes/MainView.jsx b/src/routes/MainView.jsx index f40ff3c..2187685 100644 --- a/src/routes/MainView.jsx +++ b/src/routes/MainView.jsx @@ -2,11 +2,17 @@ import styles from "./MainView.module.css"; import QuarkList from "../components/_services/lightquark/nav/QuarkList.jsx"; import JoinQuark from "../components/_services/lightquark/nav/JoinQuark.jsx"; import {Outlet} from "react-router-dom"; +import {useQuery} from "@tanstack/react-query"; +import {useTranslation} from "react-i18next"; +import GenericQuark from "../components/nav/GenericQuark.jsx"; export default function MainView() { + const { data, isLoading } = useQuery({queryKey: ['quark']}); + const {t} = useTranslation(); + return <>
- + {isLoading ? : }