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 PlainLayout from '../../layouts/PlainLayout';

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

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

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

        case 4:
            return;
        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>
    );
}