referenceseditor.tsx

import React from "react";
import { DescriptiveReference } from "../../common/graph/node";
import "./nodetypeseditor.css";
import ReferenceEntry from "./referenceentry";

type ReferencesEditorProps = {
    references: DescriptiveReference[];
    onReferencesChange: (newReferences: DescriptiveReference[]) => void;
};

function ReferencesEditor({
    references,
    onReferencesChange,
}: ReferencesEditorProps) {
    const handleReferenceDelete = (index: number) => {
        references = references.filter((ref, i: number) => i !== index);
        onReferencesChange(references);
    };

    const handleReferenceChange = (
        reference: DescriptiveReference,
        index: number
    ) => {
        references[index] = reference;
        onReferencesChange(references);
    };

    const addReference = () => {
        // Make sure no empty url exists already
        // => Button only enabled if no empty url in references

        references.push({ url: "", description: "" });
        onReferencesChange(references);
    };

    return (
        <div id="references-editor">
            {references.map(
                (reference: DescriptiveReference, index: number) => {
                    return (
                        <ReferenceEntry
                            key={index}
                            reference={reference}
                            onReferenceChange={(ref) =>
                                handleReferenceChange(ref, index)
                            }
                            onReferenceDelete={() =>
                                handleReferenceDelete(index)
                            }
                        />
                    );
                }
            )}
            <br />
            <button onClick={addReference}>Add reference</button>
        </div>
    );
}

export default ReferencesEditor;