demo route

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 <Link to={`/lq_${quarkId}/${channel._id}`}
+    return <Link to={demo ? `/demo/${quarkId}/${channel._id}` : `/lq_${quarkId}/${channel._id}`}
                  className={classnames(styles.channel, {[styles.active]: channel._id === dialogId})}
                  onMouseEnter={() => new Audio(appContext.nyafile.getCachedData("sfx/default-hover")).play()}
                  onClick={() => new Audio(appContext.nyafile.getCachedData("sfx/default-select")).play()}>

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 <div className={styles.channelList}>
-        {quark.channels.map((channel) => <LightquarkChannel channel={channel} quarkId={quark._id} key={channel._id} />)}
+        {quark.channels.map((channel) => <LightquarkChannel demo={demo} channel={channel} quarkId={quark._id} key={channel._id} />)}
     </div>
 }

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 <Link to={`/lq_${quark._id}`}><GenericQuark icon={quark.iconUri} name={quark.name} /></Link>
+export default function Quark({quark, demo}) {
+    return <Link to={demo ? `/demo/${quark._id}` : `/lq_${quark._id}`}><GenericQuark icon={quark.iconUri} name={quark.name} /></Link>
 }

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 <GenericQuark name={t("LOADING_QUARKS")}/>;
-    return data.quarks.map((quark) => <Quark quark={quark} key={quark._id}/>)
+export default function QuarkList({list, demo}) {
+    return list.map((quark) => <Quark demo={demo} quark={quark} key={quark._id}/>)
 }

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]);

src/index.jsx

@@ -208,7 +208,8 @@ const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRo
 export const router = sentryCreateBrowserRouter(
     createRoutesFromElements(
         <Route path="/" element={<Root />}>
-            <Route path="/demo" element={<DemoView />}/>
+            <Route path="/demo/:quarkId?/:channelId?" element={<DemoView />} />
+
             <Route path="/" element={<AuthenticationNeeded />}>
                 <Route path="/" element={<ClientWrapper />}>
                     <Route path="/" element={<MainView />}>

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 (<>
         <div className={styles.messageArea}>
-            <div className={styles.messages}><DialogMessages/></div>
+            <div className={styles.messages}><DialogMessages messages={messages}/></div>
             <MessageInput/>
         </div>
         <div className={styles.memberList}>

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 <div className={clientStyles.client}>
         <div className={mainViewStyles.quarkList}>
-            <GenericQuark/>
+            <QuarkList demo={true} list={fakeQuarks}/>
         </div>
         <div className={quarkViewStyles.quarkView}>
             <div className={quarkViewStyles.channelListWrap}>
-                <QuarkHeader interaction={false} quark={{
-                    name: "World's realest quark :)"
-                }}/>
-                <LightquarkChannelList quark={{
-                    _id: "1",
-                    channels: [{
-                        _id: "2",
-                        name: "Rub my tummy!"
-                    }]
-                }}/>
+                <QuarkHeader interaction={false} quark={currentFakeQuark}/>
+                <LightquarkChannelList demo={true} quark={currentFakeQuark}/>
                 <Aviebox interaction={false} user={{
                     avatarUri: "https://google.com",
                     username: "You!"
                 }}/>
             </div>
+            <div className={channelViewStyles.messageArea}>
+                <div className={channelViewStyles.messages}>
+                    {fakeMessages[channelId]?.map((message, index) => <Message key={index} {...message}/>)}
+                </div>
+                <MessageInput interaction={false}/>
+            </div>
         </div>
-    </>
+    </div>
 }

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 <>
         <div className={styles.quarkList}>
-            <QuarkList/>
+            {isLoading ? <GenericQuark name={t("LOADING_QUARKS")}/> : <QuarkList list={data.quarks}/>}
             <JoinQuark/>
         </div>
         <Outlet/>