From ff981d1f63446371cb0779653cdc676ad462596f Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Mon, 22 Jul 2024 10:52:50 +0200
Subject: [PATCH] feat: Fix canGoForward state for ClusterCreationModal not
 being set properly

---
 .../overlay/cluster/ClusterCreationModal.tsx  | 19 ++++++++-----------
 .../overlay/cluster/ClusterStepOne.tsx        | 13 ++++++++-----
 .../overlay/cluster/ClusterStepTwo.tsx        |  8 +++++---
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx b/apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx
index 1f0d1817..156a320f 100644
--- a/apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx
+++ b/apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx
@@ -1,4 +1,4 @@
-import { type Accessor, type Context, Match, type ParentProps, type Setter, Show, Switch, createContext, createEffect, createSignal, on, useContext } from 'solid-js';
+import { type Accessor, type Context, Index, Match, type ParentProps, type Setter, Show, Switch, createContext, createEffect, createSignal, on, useContext } from 'solid-js';
 import { ArrowRightIcon, Server01Icon } from '@untitled-theme/icons-solid';
 import HeaderImage from '../../../../assets/images/header.png';
 import FullscreenOverlay, { type FullscreenOverlayProps } from '../FullscreenOverlay';
@@ -49,7 +49,6 @@ export function ClusterModalController(props: ParentProps) {
 	return (
 		<ClusterModalContext.Provider value={stepper}>
 			{props.children}
-
 			{/* Makes sure theres a new instance of the modal */}
 			<Show when={visible()}>
 				<ClusterCreationModal
@@ -69,8 +68,8 @@ export function useClusterModalController() {
 }
 
 export interface ClusterStepProps {
+	isVisible: Accessor<boolean>;
 	setCanGoForward: Setter<boolean>;
-	visible: Accessor<boolean>;
 };
 
 type ClusterCreationModalProps = FullscreenOverlayProps & {
@@ -87,17 +86,15 @@ function ClusterCreationModal(props: ClusterCreationModalProps) {
 		'Game Setup',
 	];
 
-	createEffect(on(() => props.step(), () => {
-		setCanGoForward(false);
-	}));
-
 	const stepComponents = [
 		ClusterStepOne,
 		ClusterStepTwo,
-	].map((component, index) => component({
-		setCanGoForward,
-		visible: () => props.step() === index,
-	}));
+	].map((Component, index) => (
+		Component({
+			setCanGoForward,
+			isVisible: () => props.visible() && props.step() === index,
+		})
+	));
 
 	const Step = (props: { step: number }) => <>{stepComponents[props.step]}</>;
 
diff --git a/apps/desktop/src/ui/components/overlay/cluster/ClusterStepOne.tsx b/apps/desktop/src/ui/components/overlay/cluster/ClusterStepOne.tsx
index 5c3ae49e..f5e319f2 100644
--- a/apps/desktop/src/ui/components/overlay/cluster/ClusterStepOne.tsx
+++ b/apps/desktop/src/ui/components/overlay/cluster/ClusterStepOne.tsx
@@ -1,6 +1,5 @@
 import { User03Icon } from '@untitled-theme/icons-solid';
-import { Index, type JSX, createEffect, createSignal } from 'solid-js';
-import { on } from 'solid-js';
+import { Index, type JSX, createEffect, createSignal, on, onMount } from 'solid-js';
 import type { ClusterStepProps } from './ClusterCreationModal';
 import ModrinthIcon from '~assets/logos/modrinth.svg?component-solid';
 import CurseforgeIcon from '~assets/logos/curseforge.svg?component-solid';
@@ -35,11 +34,15 @@ const providers: Omit<ProviderCardProps, 'selected' | 'setSelected'>[] = [
 export default function ClusterStepOne(props: ClusterStepProps) {
 	const [selected, setSelected] = createSignal<number>();
 
-	const check = () => props.setCanGoForward(selected() !== undefined);
+	const check = () => {
+		props.setCanGoForward(selected() !== undefined);
+	};
 
-	// TODO: refactor this so its handled by the modal, I am lazy and running out of time so thisll do
-	createEffect(on(() => props.visible(), check));
 	createEffect(check);
+	createEffect(on(() => props.isVisible(), (curr: boolean) => {
+		if (curr)
+			check();
+	}));
 
 	return (
 		<div class="grid grid-cols-3 gap-2">
diff --git a/apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx b/apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx
index 16277fd3..17afa894 100644
--- a/apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx
+++ b/apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx
@@ -1,5 +1,5 @@
 import { TextInputIcon } from '@untitled-theme/icons-solid';
-import { For, type JSX, createEffect, createSignal, on, splitProps } from 'solid-js';
+import { For, type JSX, createEffect, createSignal, on, onMount, splitProps } from 'solid-js';
 import type { ClusterStepProps } from './ClusterCreationModal';
 import Dropdown from '~ui/components/base/Dropdown';
 import TextField from '~ui/components/base/TextField';
@@ -39,9 +39,11 @@ export function ClusterStepTwo(props: ClusterStepProps) {
 		props.setCanGoForward(hasName);
 	};
 
-	// TODO: refactor this so its handled by the modal, I am lazy and running out of time so thisll do
-	createEffect(on(() => props.visible(), check));
 	createEffect(check);
+	createEffect(on(() => props.isVisible(), (curr: boolean) => {
+		if (curr)
+			check();
+	}));
 
 	return (
 		<div class="flex flex-col gap-y-4">