
import * as React from 'react';
import { useParams } from 'react-router-dom';
import { HttpRepository, HttpMethod, HttpRoute } from '../../core/repository/http_repository';


export const pathAjaxTopologyScreen = '/topology/adjax/usecase/'
export interface IAdjaxMatrix {
    allParts: string[];
    firstDetail: string;
    matrix: StringMap;
    matrixError: StringMap | null;
}
interface StringMap { [key: string]: string; }


export const MatrixTopologyAdjaxScreen: React.FunctionComponent = () => {
    const [matrix, setMatrix] = React.useState<IAdjaxMatrix | null>(null);
    const param = useParams().id
    React.useEffect(() => {
        async function fetchData() {
            setMatrix(
                await HttpRepository.jsonRequest<IAdjaxMatrix>(
                    HttpMethod.GET,
                    '/' + param + '/' + HttpRoute.ajaxMatrix
                )
            );
        }
        fetchData();
    }, []);
    return (<div>
        {matrix === null ? (<>loaded</>) : (<>
            {matrix.matrixError != null ? (<>
                {Object.keys(matrix.matrixError).map((keyName, i) => {
                    const m = matrix.matrixError as StringMap;
                    return (
                        <div key={i}>
                            <div>{m[keyName]}</div>
                        </div>
                    )
                })}
            </>) : (<>Success</>)}
        </>)}

    </div>);
};


