diff --git a/src/editor/components/referenceentry.tsx b/src/editor/components/referenceentry.tsx index b1fedca4259a18f9f418a3b3c928fe8470e41f60..c0914d88bf3fac8f8e017660e5da9626520c745c 100644 --- a/src/editor/components/referenceentry.tsx +++ b/src/editor/components/referenceentry.tsx @@ -1,14 +1,11 @@ -import React, { useState } from "react"; +import React from "react"; import { DescriptiveReference } from "../../common/graph/node"; import "./nodetypeentry.css"; type ReferenceEntryProps = { reference: DescriptiveReference; - onReferenceDelete: (url: string) => void; - onReferenceChange: ( - originalUrl: string, - reference: DescriptiveReference - ) => void; + onReferenceDelete: () => void; + onReferenceChange: (reference: DescriptiveReference) => void; }; function ReferenceEntry({ @@ -16,23 +13,15 @@ function ReferenceEntry({ onReferenceDelete, onReferenceChange, }: ReferenceEntryProps) { - const [editedReference, setEditedReference] = - useState<DescriptiveReference>(reference); - const originalUrl = reference.url; - const onPropChange = ( prop: keyof DescriptiveReference, newValue: string ) => { reference[prop] = newValue; - setEditedReference(reference); }; return ( - <div - className="reference" - onBlur={() => onReferenceChange(originalUrl, editedReference)} - > + <div className="reference" onBlur={() => onReferenceChange(reference)}> <label htmlFor="reference-url">Url</label> <br /> <input @@ -52,9 +41,7 @@ function ReferenceEntry({ } /> <br /> - <button onClick={() => onReferenceDelete(originalUrl)}> - Delete - </button> + <button onClick={onReferenceDelete}>Delete</button> </div> ); } diff --git a/src/editor/components/referenceseditor.tsx b/src/editor/components/referenceseditor.tsx index 6f615e858a621c824a6349a124fbf4a9769fc1f1..00dfedf844be253f3c7bc1fbc9ce6772d5f534e8 100644 --- a/src/editor/components/referenceseditor.tsx +++ b/src/editor/components/referenceseditor.tsx @@ -12,31 +12,15 @@ function ReferencesEditor({ references, onReferencesChange, }: ReferencesEditorProps) { - const isUrlUnique = (url: string): boolean => - !references.some((ref: DescriptiveReference) => ref.url == url); - - const handleReferenceDelete = (url: string) => { - references = references.filter( - (ref: DescriptiveReference) => ref.url != url - ); + const handleReferenceDelete = (index: number) => { + references = references.filter((ref, i: number) => i !== index); onReferencesChange(references); }; const handleReferenceChange = ( - url: string, - reference: DescriptiveReference + reference: DescriptiveReference, + index: number ) => { - // Make sure url stays unique - if (isUrlUnique(reference.url)) { - console.log( - "URL of changed reference is not unique anymore for current node. Cannot save changes on reference." - ); - return; - } - - const index: number = references.findIndex( - (ref: DescriptiveReference) => ref.url == url - ); references[index] = reference; onReferencesChange(references); }; @@ -58,16 +42,18 @@ function ReferencesEditor({ <ReferenceEntry key={index} reference={reference} - onReferenceChange={handleReferenceChange} - onReferenceDelete={handleReferenceDelete} + onReferenceChange={(ref) => + handleReferenceChange(ref, index) + } + onReferenceDelete={() => + handleReferenceDelete(index) + } /> ); } )} <br /> - <button onClick={addReference} disabled={!isUrlUnique("")}> - Add reference - </button> + <button onClick={addReference}>Add reference</button> </div> ); }