oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

feat: Fix canGoForward state for ClusterCreationModal not being set properly

Browse source
This commit is contained in:
LynithDev 2024-07-22 10:52:50 +02:00
parent 201ff3fc9d
commit ff981d1f63
3 changed files with 21 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx
View file

@ -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]}</>;

13
apps/desktop/src/ui/components/overlay/cluster/ClusterStepOne.tsx
View file

@ -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">

8
apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx
View file

@ -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">