feat: ClusterContext Provider (I forgot Contexts existed 💀)

This commit is contained in:
LynithDev 2024-06-16 14:48:03 +02:00
parent e8b2328812
commit 60425c1acd
4 changed files with 72 additions and 48 deletions

View file

@ -1,14 +0,0 @@
import type { Resource } from 'solid-js';
import useCommand from './useCommand';
import type { Cluster } from '~bindings';
import { bridge } from '~index';
function useCluster(uuid: string | undefined | null): Resource<Cluster> | null {
if (typeof uuid !== 'string' || uuid.length === 0)
return null;
const [resource] = useCommand(bridge.commands.getCluster, uuid);
return resource;
}
export default useCluster;

View file

@ -0,0 +1,38 @@
import { type Context, type ParentProps, type Resource, Show, createContext, useContext } from 'solid-js';
import useCommand from './useCommand';
import type { Cluster } from '~bindings';
import { bridge } from '~index';
const ClusterContext = createContext<Cluster>() as Context<Cluster>;
export function getCluster(uuid: string | undefined | null): Resource<Cluster> | undefined {
if (typeof uuid !== 'string' || uuid.length === 0)
return undefined;
const [resource] = useCommand(bridge.commands.getCluster, uuid);
return resource;
}
export function ClusterProvider(props: ParentProps & { uuid: string | undefined }) {
// eslint-disable-next-line solid/reactivity
const cluster = getCluster(props.uuid);
return (
<Show when={cluster !== undefined && cluster() !== undefined}>
<ClusterContext.Provider value={cluster!()!}>
{props.children}
</ClusterContext.Provider>
</Show>
);
}
export function useClusterContext() {
const context = useContext(ClusterContext);
if (!context)
throw new Error('useClusterContext should be called inside its ClusterProvider');
return context;
}
export default useClusterContext;

View file

@ -1,6 +1,6 @@
import { Route, useSearchParams } from '@solidjs/router';
import { type ParentProps, Show } from 'solid-js';
import { EyeIcon, File06Icon, Globe04Icon, Image03Icon, PackagePlusIcon, Settings04Icon, Tool02Icon } from '@untitled-theme/icons-solid';
import type { ParentProps } from 'solid-js';
import { EyeIcon, File06Icon, Globe04Icon, Image03Icon, Settings04Icon, Tool02Icon } from '@untitled-theme/icons-solid';
import Sidebar from '../../components/Sidebar';
import AnimatedRoutes from '../../components/AnimatedRoutes';
import ErrorBoundary from '../../components/ErrorBoundary';
@ -8,7 +8,7 @@ import ClusterOverview from './cluster/ClusterOverview';
import ClusterLogs from './cluster/ClusterLogs';
import ClusterMods from './cluster/ClusterMods';
import ClusterScreenshots from './cluster/ClusterScreenshots';
import useCluster from '~ui/hooks/useCluster';
import useClusterContext, { ClusterProvider } from '~ui/hooks/useCluster';
function ClusterRoutes() {
return (
@ -23,30 +23,12 @@ function ClusterRoutes() {
function ClusterRoot(props: ParentProps) {
const [searchParams] = useSearchParams();
const cluster = useCluster(searchParams.id);
return (
<Show when={cluster !== null && cluster() !== undefined}>
<ClusterProvider uuid={searchParams.id}>
<div class="flex flex-row flex-1 h-full gap-x-7">
<div class="mt-8">
<Sidebar
base="/clusters"
state={{ id: cluster!()!.uuid }}
links={{
Cluster: [
[<EyeIcon />, 'Overview', '/'],
// TODO: Better way of checking mods
(cluster!()!.meta.loader === 'vanilla' ? [<PackagePlusIcon />, 'Mods', '/mods'] : undefined),
[<Image03Icon />, 'Screenshots', '/screenshots'],
[<Globe04Icon />, 'Worlds', '/worlds'],
[<File06Icon />, 'Logs', '/logs'],
],
Settings: [
[<Tool02Icon />, 'Java', '/java'],
[<Settings04Icon />, 'Miscellaneous', '/misc'],
],
}}
/>
<ClusterSidebar />
</div>
<div class="flex flex-col w-full h-full">
@ -57,7 +39,32 @@ function ClusterRoot(props: ParentProps) {
</AnimatedRoutes>
</div>
</div>
</Show>
</ClusterProvider>
);
}
function ClusterSidebar() {
const cluster = useClusterContext();
return (
<Sidebar
base="/clusters"
state={{ id: cluster.uuid }}
links={{
Cluster: [
[<EyeIcon />, 'Overview', '/'],
// TODO: Better way of checking mods
// (cluster!.meta.loader === 'vanilla' ? [<PackagePlusIcon />, 'Mods', '/mods'] : undefined),
[<Image03Icon />, 'Screenshots', '/screenshots'],
[<Globe04Icon />, 'Worlds', '/worlds'],
[<File06Icon />, 'Logs', '/logs'],
],
Settings: [
[<Tool02Icon />, 'Java', '/java'],
[<Settings04Icon />, 'Miscellaneous', '/misc'],
],
}}
/>
);
}

View file

@ -1,7 +1,4 @@
import { useSearchParams } from '@solidjs/router';
import { Show } from 'solid-js';
import { PlayIcon, Share07Icon } from '@untitled-theme/icons-solid';
import useCluster from '../../../hooks/useCluster';
import ClusterCover from '../../../components/game/ClusterCover';
import LoaderIcon from '../../../components/game/LoaderIcon';
import Button from '../../../components/base/Button';
@ -9,20 +6,16 @@ import ScrollableContainer from '~ui/components/ScrollableContainer';
import Sidebar from '~ui/components/Sidebar';
import type { Cluster } from '~bindings';
import { upperFirst } from '~utils/string';
import useClusterContext from '~ui/hooks/useCluster';
function ClusterOverview() {
const [params] = useSearchParams();
const cluster = useCluster(params.id);
if (cluster === null)
throw new Error('Cluster doesn\'t exist');
const cluster = useClusterContext();
return (
<Sidebar.Page>
<h1>Overview</h1>
<ScrollableContainer>
<Show when={!cluster.loading}>
<Banner {...cluster()!} />
</Show>
<Banner {...cluster} />
</ScrollableContainer>
</Sidebar.Page>
);