From 832f9e65efcc2bed58d137f71c565a5c698a2691 Mon Sep 17 00:00:00 2001 From: Hakase Date: Sat, 7 Sep 2024 13:54:48 +0200 Subject: [PATCH] start overhauling into generic view components --- .../_services/lightquark/nav/Aviebox.jsx | 10 +++--- .../lightquark/nav/LightquarkChannelList.jsx | 7 ++-- .../_services/lightquark/nav/QuarkHeader.jsx | 7 ++-- src/index.jsx | 2 ++ src/routes/DemoView.jsx | 32 +++++++++++++++++++ src/routes/QuarkView.jsx | 16 +++++++--- src/util/useQuark.js | 5 +-- 7 files changed, 58 insertions(+), 21 deletions(-) create mode 100644 src/routes/DemoView.jsx diff --git a/src/components/_services/lightquark/nav/Aviebox.jsx b/src/components/_services/lightquark/nav/Aviebox.jsx index 3f80d9f..c07387e 100644 --- a/src/components/_services/lightquark/nav/Aviebox.jsx +++ b/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 (
- -

{appContext.accounts.lightquark.username}

- + +

{user.username}

+ {interaction === false ? null : }
); } \ No newline at end of file diff --git a/src/components/_services/lightquark/nav/LightquarkChannelList.jsx b/src/components/_services/lightquark/nav/LightquarkChannelList.jsx index e8ad184..ec1de58 100644 --- a/src/components/_services/lightquark/nav/LightquarkChannelList.jsx +++ b/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
- {quarkCache[quarkId.split("lq_")[1]]?.channels.map((channel) => )} + {quark.channels.map((channel) => )}
} \ No newline at end of file diff --git a/src/components/_services/lightquark/nav/QuarkHeader.jsx b/src/components/_services/lightquark/nav/QuarkHeader.jsx index 40ac975..6000ade 100644 --- a/src/components/_services/lightquark/nav/QuarkHeader.jsx +++ b/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
{quark?.name} - {quarkId === "lq_100000000000000000000000" ? null : + {interaction === false || quarkId === "lq_100000000000000000000000" ? null : quark?.owners.includes(accounts.lightquark._id) ? : } diff --git a/src/index.jsx b/src/index.jsx index bc93762..1105d0f 100644 --- a/src/index.jsx +++ b/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://901c666ed03942d560e61928448bcf68@sentry.yggdrasil.cat/5", @@ -207,6 +208,7 @@ const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRo export const router = sentryCreateBrowserRouter( createRoutesFromElements( }> + }/> }> }> }> diff --git a/src/routes/DemoView.jsx b/src/routes/DemoView.jsx new file mode 100644 index 0000000..ab1a9aa --- /dev/null +++ b/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 <> +
+ +
+
+
+ + + +
+
+ +} \ No newline at end of file diff --git a/src/routes/QuarkView.jsx b/src/routes/QuarkView.jsx index 53551d8..ee4a10c 100644 --- a/src/routes/QuarkView.jsx +++ b/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 <>
- - - + {isLoading ? null : <> + } + +
diff --git a/src/util/useQuark.js b/src/util/useQuark.js index 0cd743b..12b8b00 100644 --- a/src/util/useQuark.js +++ b/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 }); } \ No newline at end of file