bbgo_origin/frontend/pages/setup/index.js

import React from 'react';

import {makeStyles} from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';

import ConfigureDatabaseForm from "../../components/ConfigureDatabaseForm";
import AddExchangeSessionForm from "../../components/AddExchangeSessionForm";
import ReviewSessions from "../../components/ReviewSessions";
import ConfigureGridStrategyForm from "../../components/ConfigureGridStrategyForm";
import ReviewStrategies from "../../components/ReviewStrategies";
import SaveConfigAndRestart from "../../components/SaveConfigAndRestart";

import PlainLayout from '../../layouts/PlainLayout';

const useStyles = makeStyles((theme) => ({
    paper: {
        padding: theme.spacing(2),
    },
}));

const steps = ['Configure Database', 'Add Exchange Session', 'Review Sessions', 'Configure Strategy', 'Review Strategies', 'Save Config and Restart'];

function getStepContent(step, setActiveStep) {
    switch (step) {
        case 0:
            return <ConfigureDatabaseForm onConfigured={() => {
                setActiveStep(1)
            }}/>;
        case 1:
            return (
                <AddExchangeSessionForm
                    onBack={() => { setActiveStep(0) }}
                    onAdded={() => { setActiveStep(2) }}
                />
            );
        case 2:
            return (
                <ReviewSessions
                    onBack={() => { setActiveStep(1) }}
                    onNext={() => { setActiveStep(3) }}
                />
            );
        case 3:
            return (
                <ConfigureGridStrategyForm
                    onBack={() => { setActiveStep(2) }}
                    onAdded={() => { setActiveStep(4) }}
                />
            );
        case 4:
            return (
                <ReviewStrategies
                    onBack={() => { setActiveStep(3) }}
                    onNext={() => { setActiveStep(5) }}
                />
            );

        case 5:
            return (
                <SaveConfigAndRestart
                    onBack={() => {  setActiveStep(4) }}
                    onRestarted={() => {

                    }}
                />
            )

        default:
            throw new Error('Unknown step');
    }
}

export default function Setup() {
    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);

    return (
        <PlainLayout>
            <Box m={4}>
                <Paper className={classes.paper}>
                    <Typography variant="h4" component="h2" gutterBottom>
                        Setup Session
                    </Typography>

                    <Stepper activeStep={activeStep} className={classes.stepper}>
                        {steps.map((label) => (
                            <Step key={label}>
                                <StepLabel>{label}</StepLabel>
                            </Step>
                        ))}
                    </Stepper>

                    <React.Fragment>
                        {getStepContent(activeStep, setActiveStep)}
                    </React.Fragment>
                </Paper>
            </Box>
        </PlainLayout>
    );
}