Solution.js

import { h, Component } from "preact";
import SolutionStep from "./SolutionStep";
import { REGEX_NO_NEW_LINE_CHARS } from "../utils/utils";
import {
    RGX_SPLIT_STEPS,
} from './../utils/regex';
import SolutionSubpart from "./SolutionSubpart";
import {
    separateConfigStringIntoFactStrings,
    extractPredicateNameAndArgumentsFromFactString,
    extraString,
} from "../utils/utils";
import { getTablesFromFactStrings, getListOfTableComponents } from "./Config";
import { getTableInfoFromFactString  } from "../utils/tableParser";
import { extractEvaluationExpression } from "../utils/evaluation-expression";
import LHS_RHS from "./LHS_RHS/LHS_RHS";
import Table from "./Table";
import {formatGraphData} from './../utils/graph';
import Graph from './../components/Geometry/Graph';
import NumberLine from './../components/Geometry/Numberline';
class Solution extends Component {
    splitSolutionStringIntoSteps(rawString) {
        const lines = [];
        const arrayOfLines = rawString.match(REGEX_NO_NEW_LINE_CHARS);
        if (!arrayOfLines || !arrayOfLines.length) {
            return [];
        }
        lines.push(arrayOfLines[0] + "\n");
        let index = 0;
        for (let i = 1; i < arrayOfLines.length; i++) {
            const lineElement = arrayOfLines[i].replace(/^\s+|\s+$/g, "");
            if (lineElement.startsWith("=")) {
                lines[index] = lines[index] + lineElement + "\n";
            } else {
                lines[index] = lines[index].replace(/^\s+|\s+$/g, "");
                index++;
                lines[index] = lineElement;
            }
        }
        lines[index] = lines[index].replace(/^\s+|\s+$/g, "");
        return lines;
    }
    getSolutionStepComponents(rawStringSteps) {
        const { subpartIndexString } = this.props;
        return rawStringSteps.map((stepString, index) => {
            return (
                <SolutionStep
                    stringWithLines={stepString}
                    subpartIndexString={subpartIndexString}
                    stepNumber={index + 1}
                />
            );
        });
    }
    getSolutionSubparts() {
        const { subparts } = this.props;
        if (!subparts) {
            return [];
        }
        return subparts.map((subpart, index) => (
            <SolutionSubpart index={index} text={subpart.solutionString} />
        ));
    }
    getSolutionStepFromFactString(factString) {
        const {
            predicate,
            argumentsString
        } = extractPredicateNameAndArgumentsFromFactString(factString);
        switch(predicate){
            case "matrix_solution":
                const rawStringSteps = this.splitSolutionStringIntoSteps(
                    argumentsString
                );
                const solutionSteps = this.getSolutionStepComponents(
                    rawStringSteps
                );
                return solutionSteps;
            case "table":
                const tableInfo = getTableInfoFromFactString(factString);
                return <Table table={tableInfo} />;
            case "evaluation_expression":
                const lhs_rhs = extractEvaluationExpression(factString);
                return <LHS_RHS lhs_rhs={lhs_rhs} />;
            case "string":
                const str = extraString(`string(${argumentsString})`)
                return <span>{str}</span>
            case "graph":
                const graphSteps = argumentsString.split(RGX_SPLIT_STEPS);
                const formattedData = formatGraphData(graphSteps);
                return <Graph data={formattedData.data}/>
            case "numberline":
                return <NumberLine argumentsString={argumentsString}/>
            case "sequence_difference_underneath":
                return <SequenceWithDifferenceUnderneath argumentsString = {argumentsString} />
            default :
                return <div />;
        }
    }
    splitSolutionStringIntoParts() {
        const { rawString } = this.props;
        if (!rawString) {
            return "";
        }
        const factStrings = separateConfigStringIntoFactStrings(rawString);
        return factStrings.map(this.getSolutionStepFromFactString.bind(this));
    }
    render() {
        const solutionParts = this.splitSolutionStringIntoParts();
        return (
            <div>
                <div className="solution">{solutionParts}</div>
                <div>{this.getSolutionSubparts()}</div>
            </div>
        );
    }
}

export default Solution;