feat: ClusterContext Provider (I forgot Contexts existed 💀)
This commit is contained in:
parent
e8b2328812
commit
60425c1acd
4 changed files with 72 additions and 48 deletions
|
|
@ -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;
|
||||
38
desktop/src/ui/hooks/useCluster.tsx
Normal file
38
desktop/src/ui/hooks/useCluster.tsx
Normal 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;
|
||||
|
|
@ -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'],
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue