//Lib
import React from 'react';
import classes from './SetupWizard.module.css';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Select from 'react-select';
//Components
import WizardStepBar from '../../Components/WizardSteps/WizardStepBar/WizardStepBar';
import WizardStep1 from '../../Components/WizardSteps/WizardStep1/WizardStep1';
import WizardStep2 from '../../Components/WizardSteps/WizardStep2/WizardStep2';
import WizardStep3 from '../../Components/WizardSteps/WizardStep3/WizardStep3';
import WizardStep4 from '../../Components/WizardSteps/WizardStep4/WizardStep4';
function SetupWizard(props) {
////Var
const router = useRouter();
////States
const [list, setList] = useState([]);
const [listIsLoading, setListIsLoading] = useState(true);
const [step, setStep] = useState();
const [selectedOption, setSelectedOption] = useState({
id: '#id',
repository: 'repo',
unixUser: 'user',
});
////LifeCycle
//ComponentDidMount
useEffect(() => {
//retrieve the repository list
const repoList = async () => {
try {
const response = await fetch('/api/repo', {
method: 'GET',
headers: {
'Content-type': 'application/json',
},
});
setList((await response.json()).repoList);
setListIsLoading(false);
} catch (error) {
console.log('Fetching datas error');
}
};
repoList();
}, []);
//Component did update
useEffect(() => {
//Go to the step in the URL param when URL change
setStep(props.step);
}, [props.step]);
////Functions
//Options for react-select
const options = list.map((repo) => ({
label: `${repo.alias} - #${repo.id}`,
value: `${repo.alias} - #${repo.id}`,
id: repo.id,
repository: repo.repository,
unixUser: repo.unixUser,
}));
//Step button (free selection of user)
const changeStepHandler = (x) => router.push('/setup-wizard/' + x);
//Next Step button
const nextStepHandler = () => {
if (step < 4) {
router.push('/setup-wizard/' + `${Number(step) + 1}`);
}
};
//Previous Step button
const previousStepHandler = () => {
if (step > 1) {
router.push('/setup-wizard/' + `${Number(step) - 1}`);
}
};
//Change Step with State
const wizardStep = (step) => {
if (step == 1) {
return