Untitled

import {createPath, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import axios from "axios";
// import CopyButton from '../../components/buttons/CopyButton';
import { Form, ButtonToolbar, Button } from 'rsuite';
import { RadioTile, RadioTileGroup } from 'rsuite';
import { Icon } from '@rsuite/icons';
import PlusIcon from '@rsuite/icons/Plus';
import TrendIcon from '@rsuite/icons/Trend';
import DragableIcon from '@rsuite/icons/Dragable';
import GoalTree from "./GoalTree";

function buildCopyUrl(goalId, endpoint){
    return `localhost:3000/${goalId}/${endpoint}`;
}

function ControlBoardPage() {

    const { ancestorId, goalId } = useParams();

    const [phaseIndex, setPhaseIndex] = useState(0);

    const [goals, setGoals] = useState([]);
    const [selectionIndex, setSelectionIndex] = useState(-1);

    const navigate = useNavigate();

    useEffect(() => {
        const { data } = axios.get('http://localhost:3001/ControlBoardPage/getPageData', { params: { "goalId": goalId } });
        setGoals(data);
    }, []);

    return (
        <>
            <h3>Control Board</h3>
            <Form layout="horizontal">
                <Form.Group>
                    <RadioTileGroup defaultValue="create" inline aria-label="Project Control Board">
                        <RadioTile icon={<Icon as={PlusIcon} />} label="Add New Subgoals" value="create" onClick={() => setPhaseIndex(0)}>
                            TEST TEST TEST
                        </RadioTile>
                        <RadioTile icon={<Icon as={DragableIcon} />} label="Go to phase 2" value="phase2" onClick={() => setPhaseIndex(1)}>
                            TEST TEST TEST
                        </RadioTile>
                        <RadioTile icon={<Icon as={DragableIcon} />} label="Go to phase 3" value="phase3" onClick={() => setPhaseIndex(2)}>
                            TEST TEST TEST
                        </RadioTile>
                        <RadioTile icon={<Icon as={TrendIcon} />} label="Go to phase 4" value="view" onClick={() => console.log("Does nothing.")}>
                            TESTERINO
                        </RadioTile>
                    </RadioTileGroup>
                </Form.Group>
                <Form.Group>
                    <GoalTree goals={goals} updateSelection={setSelectionIndex}/>                
                    {/* {selectionIndex} */}
                </Form.Group>
            </Form>
        </>
    )
}

export default ControlBoardPage;