diff --git a/Containers/SetupWizard/SetupWizard.tsx b/Containers/SetupWizard/SetupWizard.tsx index 39c0dd2..f6fb8e6 100644 --- a/Containers/SetupWizard/SetupWizard.tsx +++ b/Containers/SetupWizard/SetupWizard.tsx @@ -1,5 +1,5 @@ import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import Select, { SingleValue } from 'react-select'; import classes from './SetupWizard.module.css'; import { Optional, SelectedRepoWizard, Repository, WizardEnvType } from '~/types'; @@ -36,8 +36,21 @@ function SetupWizard(props: SetupWizardProps) { 'Content-type': 'application/json', }, }); - setRepoList((await response.json()).repoList); + const data = await response.json(); + const repos = data.repoList; + setRepoList(repos); setRepoListIsLoading(false); + + // Auto-select first repository if available + if (repos && repos.length > 0) { + setSelectedItem({ + label: `${repos[0].alias} - ${repos[0].repositoryName}`, + value: `${repos[0].alias} - ${repos[0].repositoryName}`, + id: repos[0].id.toString(), + repositoryName: repos[0].repositoryName, + lanCommand: repos[0].lanCommand ? repos[0].lanCommand : false, + }); + } } catch (error) { console.log('Fetching datas error'); } @@ -70,13 +83,17 @@ function SetupWizard(props: SetupWizardProps) { }, [props.step]); //Options for react-select - const options: Optional> = repoList?.map((repo) => ({ - label: `${repo.alias} - ${repo.repositoryName}`, - value: `${repo.alias} - ${repo.repositoryName}`, - id: repo.id.toString(), - repositoryName: repo.repositoryName, - lanCommand: repo.lanCommand ? repo.lanCommand : false, - })); + const options: Optional> = useMemo( + () => + repoList?.map((repo) => ({ + label: `${repo.alias} - ${repo.repositoryName}`, + value: `${repo.alias} - ${repo.repositoryName}`, + id: repo.id.toString(), + repositoryName: repo.repositoryName, + lanCommand: repo.lanCommand ? repo.lanCommand : false, + })), + [repoList] + ); //Step button (free selection of user) const changeStepHandler = (x: number) => router.push('/setup-wizard/' + x.toString()); @@ -131,6 +148,7 @@ function SetupWizard(props: SetupWizardProps) { isDisabled={repoListIsLoading} options={options} isSearchable + value={selectedItem} placeholder='Select your repository...' theme={(theme) => ({ ...theme,