start overhauling into generic view components

src/components/_services/lightquark/nav/Aviebox.jsx

@@ -10,14 +10,12 @@ import SettingsView from "../../../../routes/SettingsView.jsx";
 import UserSettingsSidebar from "../../../nav/UserSettingsSidebar.jsx";
 import UserSettingsArea from "../../../nav/UserSettingsArea.jsx";
 
-export default function Aviebox() {
-    const appContext = useContext(AppContext);
-
+export default function Aviebox({user, interaction = true}) {
     return (
         <div className={styles.aviebox}>
-            <ProfilePicture src={appContext.accounts.lightquark.avatarUri} px={32}/>
-            <p className={styles.name}>{appContext.accounts.lightquark.username}</p>
-            <button className={styles.settings} onClick={() => NiceModal.show(SettingsView, {Sidebar: UserSettingsSidebar, Area: UserSettingsArea,defaultArea:"profile"})}>Settings</button>
+            <ProfilePicture src={user.avatarUri} px={32}/>
+            <p className={styles.name}>{user.username}</p>
+            {interaction === false ? null : <button className={styles.settings} onClick={() => NiceModal.show(SettingsView, {Sidebar: UserSettingsSidebar, Area: UserSettingsArea,defaultArea:"profile"})}>Settings</button>}
         </div>
     );
 }

src/components/_services/lightquark/nav/LightquarkChannelList.jsx

@@ -5,11 +5,8 @@ import LightquarkChannel from "./LightquarkChannel.jsx";
 import styles from "./LightquarkChannelList.module.css";
 import {AppContext} from "../../../../contexts/AppContext.js";
 
-export default function LightquarkChannelList() {
-    const {quarkCache} = useContext(AppContext);
-    const {quarkId} = useParams();
-
+export default function LightquarkChannelList({quark}) {
     return <div className={styles.channelList}>
-        {quarkCache[quarkId.split("lq_")[1]]?.channels.map((channel) => <LightquarkChannel channel={channel} quarkId={quarkId.split("lq_")[1]} key={channel._id} />)}
+        {quark.channels.map((channel) => <LightquarkChannel channel={channel} quarkId={quark._id} key={channel._id} />)}
     </div>
 }

src/components/_services/lightquark/nav/QuarkHeader.jsx

@@ -9,13 +9,12 @@ import SettingsView from "../../../../routes/SettingsView.jsx";
 import QuarkSettingsSidebar from "../settings/QuarkSettingsSidebar.jsx";
 import QuarkSettingsArea from "../settings/QuarkSettingsArea.jsx";
 
-export default function QuarkHeader() {
-    const {quarkCache, quarkList, setQuarkList, accounts} = useContext(AppContext);
+export default function QuarkHeader({quark, interaction = true}) {
+    const {quarkList, setQuarkList, accounts} = useContext(AppContext);
     const {quarkId} = useParams();
     const {t} = useTranslation();
     const navigate = useNavigate();
 
-    const quark = quarkCache[quarkId.split("lq_")[1]];
     async function leaveQuark() {
         if(confirm(t("LEAVE_QUARK_CONFIRM", {name: quark?.name}))) {
             navigate("/lq_100000000000000000000000");
@@ -32,7 +31,7 @@ export default function QuarkHeader() {
 
     return <div className={styles.header}>
         <span>{quark?.name}</span>
-        {quarkId === "lq_100000000000000000000000" ? null :
+        {interaction === false || quarkId === "lq_100000000000000000000000" ? null :
             quark?.owners.includes(accounts.lightquark._id) ?
             <button onClick={() => NiceModal.show(SettingsView, {data:{quarkId:quark._id},Sidebar:QuarkSettingsSidebar,Area:QuarkSettingsArea,defaultArea:"overview"})}>{t("MANAGE_QUARK")}</button> :
             <button onClick={() => leaveQuark()}>{t("LEAVE_QUARK")}</button>}

src/index.jsx

@@ -29,6 +29,7 @@ import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import axios from "axios";
 import {version} from "../package.json";
 import createAuthRefreshInterceptor from "axios-auth-refresh";
+import DemoView from "./routes/DemoView.jsx";
 
 Sentry.init({
     dsn: "https://[email protected]/5",
@@ -207,6 +208,7 @@ const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRo
 export const router = sentryCreateBrowserRouter(
     createRoutesFromElements(
         <Route path="/" element={<Root />}>
+            <Route path="/demo" element={<DemoView />}/>
             <Route path="/" element={<AuthenticationNeeded />}>
                 <Route path="/" element={<ClientWrapper />}>
                     <Route path="/" element={<MainView />}>

src/routes/DemoView.jsx

@@ -0,0 +1,32 @@
+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";
+
+export default function DemoView() {
+    return <>
+        <div className={mainViewStyles.quarkList}>
+            <GenericQuark/>
+        </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!"
+                    }]
+                }}/>
+                <Aviebox interaction={false} user={{
+                    avatarUri: "https://google.com",
+                    username: "You!"
+                }}/>
+            </div>
+        </div>
+    </>
+}

src/routes/QuarkView.jsx

@@ -1,16 +1,24 @@
-import {Outlet} from "react-router-dom";
+import {Outlet, useParams} from "react-router-dom";
 import LightquarkChannelList from "../components/_services/lightquark/nav/LightquarkChannelList.jsx";
 import styles from "./QuarkView.module.css";
 import Aviebox from "../components/_services/lightquark/nav/Aviebox.jsx";
 import QuarkHeader from "../components/_services/lightquark/nav/QuarkHeader.jsx";
+import useQuark from "../util/useQuark.js";
+import {AppContext} from "../contexts/AppContext.js";
+import {useContext} from "react";
 
 export default function QuarkView() {
+    const {quarkId} = useParams();
+    const {data, isLoading} = useQuark(quarkId.split("lq_")[1]);
+    const {accounts} = useContext(AppContext);
+
     return <>
         <div className={styles.quarkView}>
             <div className={styles.channelListWrap}>
-                <QuarkHeader/>
-                <LightquarkChannelList/>
-                <Aviebox/>
+                {isLoading ? null : <><QuarkHeader quark={data}/>
+                <LightquarkChannelList quark={data}/></>}
+
+                <Aviebox user={accounts.lightquark}/>
             </div>
             <Outlet/>
         </div>

src/util/useQuark.js

@@ -1,10 +1,11 @@
 import {useQuery, useQueryClient} from "@tanstack/react-query";
 
-export default function useQuark(id) {
+export default function useQuark(id, options) {
     const queryClient = useQueryClient();
     return useQuery({
         queryKey: [`quark/${id}`],
         initialData: () => queryClient.getQueryData(["quark"])?.quarks.find(quark => quark._id === id),
-        select: (res) => { return res?.quark ? res.quark : res; }
+        select: (res) => { return res?.quark ? res.quark : res; },
+        ...options
     });
 }