From 60425c1acd7d590cdc1359fbfb32df4410508d83 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Sun, 16 Jun 2024 14:48:03 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ClusterContext=20Provider=20(I=20forgot?=
 =?UTF-8?q?=20Contexts=20existed=20=F0=9F=92=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 desktop/src/ui/hooks/useCluster.ts            | 14 -----
 desktop/src/ui/hooks/useCluster.tsx           | 38 +++++++++++++
 desktop/src/ui/pages/cluster/ClusterRoot.tsx  | 55 +++++++++++--------
 .../pages/cluster/cluster/ClusterOverview.tsx | 13 +----
 4 files changed, 72 insertions(+), 48 deletions(-)
 delete mode 100644 desktop/src/ui/hooks/useCluster.ts
 create mode 100644 desktop/src/ui/hooks/useCluster.tsx

diff --git a/desktop/src/ui/hooks/useCluster.ts b/desktop/src/ui/hooks/useCluster.ts
deleted file mode 100644
index adc644f3..00000000
--- a/desktop/src/ui/hooks/useCluster.ts
+++ /dev/null
@@ -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;
diff --git a/desktop/src/ui/hooks/useCluster.tsx b/desktop/src/ui/hooks/useCluster.tsx
new file mode 100644
index 00000000..1a54bced
--- /dev/null
+++ b/desktop/src/ui/hooks/useCluster.tsx
@@ -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;
diff --git a/desktop/src/ui/pages/cluster/ClusterRoot.tsx b/desktop/src/ui/pages/cluster/ClusterRoot.tsx
index 69ed4a12..e5ecabe1 100644
--- a/desktop/src/ui/pages/cluster/ClusterRoot.tsx
+++ b/desktop/src/ui/pages/cluster/ClusterRoot.tsx
@@ -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'],
+				],
+			}}
+		/>
 	);
 }
 
diff --git a/desktop/src/ui/pages/cluster/cluster/ClusterOverview.tsx b/desktop/src/ui/pages/cluster/cluster/ClusterOverview.tsx
index a3d20eed..117fd65d 100644
--- a/desktop/src/ui/pages/cluster/cluster/ClusterOverview.tsx
+++ b/desktop/src/ui/pages/cluster/cluster/ClusterOverview.tsx
@@ -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>
 	);