Skip to content

refactor: drop imperative DOM logic in AddLinkTdDialog #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Rohithgvmg wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

refactor: drop imperative DOM logic in AddLinkTdDialog #205

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3ca81d
refactor: drop imperative DOM logic in AddLinkTdDialog
Rohithgvmg Feb 23, 2026
0296bba
Merge branch 'eclipse-editdor:master' into refactor/AddLinkTdDialog
Rohithgvmg Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 61 additions & 51 deletions src/components/Dialogs/AddLinkTdDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import React, {
useCallback,
useContext,
useImperativeHandle,
useState,
} from "react";
import ReactDOM from "react-dom";
import ediTDorContext from "../../context/ediTDorContext";
Expand All @@ -41,6 +42,14 @@ interface AddLinkTdDialogProps {
const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
(props, ref) => {
const context = useContext(ediTDorContext);

const [formData, setFormData] = useState<Link>(() => ({
href: "",
rel: "",
type: "",
}));
const [errorMessage, setErrorMessage] = useState<string>("");

const [display, setDisplay] = React.useState<boolean>(() => {
return false;
});
Expand Down Expand Up @@ -80,9 +89,7 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
};

const addLinksToTd = (link: Link): void => {
// clone instead of mutating original TD
const updatedTd = structuredClone(context.parsedTD);
// initialize links array if missing
if (!Array.isArray(updatedTd.links)) {
updatedTd.links = [];
}
Expand All @@ -101,8 +108,13 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
try {
const res = await fileTdService.readFromFile();

(document.getElementById("link-href") as HTMLInputElement).value =
`./${res.fileName}`;
setFormData((prev) => ({
...prev,
href: `./${res.fileName}`,
}));

setErrorMessage("");

setCurrentLinkedTd(
res.fileHandle ? res.fileHandle : JSON.parse(res.td)
);
Expand Down Expand Up @@ -155,6 +167,13 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
id="rel"
className="w-full rounded-md border-2 border-gray-600 bg-gray-600 p-2 text-white focus:border-blue-500 focus:outline-none sm:text-sm"
placeholder="relation name"
value={formData.rel}
onChange={(e) =>
setFormData({
...formData,
rel: e.target.value,
})
}
/>
<datalist id="relationType">
<RelationType></RelationType>
Expand All @@ -167,7 +186,7 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
htmlFor="link-href"
className="pl-2 pr-2 text-sm font-medium text-gray-400"
>
Target ressource:
Target resource:
</label>

<BaseButton
Expand All @@ -194,12 +213,21 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
type="text"
name="link-href"
id="link-href"
className="rounded-md border-2 border-gray-600 bg-gray-600 p-2 text-white focus:border-blue-500 focus:outline-none sm:text-sm"
placeholder="The target ressource"
onChange={() => {
clearHrefErrorMessage();
className={`rounded-md border-2 bg-gray-600 p-2 text-white focus:outline-none sm:text-sm ${
Copy link
Copy Markdown
Contributor

@TejInaco TejInaco Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The user needs to known what kind of option has chosen after click. After click the button clicked must remain the color blue-500. Remember that the default selection and when the usr clicks on "Resource url" the color changes in the button "From local machine"

errorMessage
? "border-red-400"
: "border-gray-600 focus:border-blue-500"
}`}
placeholder="The target resource"
onChange={(e) => {
setFormData({
...formData,
href: e.target.value,
});
setErrorMessage("");
}}
disabled={linkingMethod !== "url"}
readOnly={linkingMethod !== "url"}
value={formData.href}
/>
{linkingMethod === "upload" && (
<BaseButton
Expand All @@ -213,10 +241,11 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
</BaseButton>
)}
</div>
<span
id="link-href-info"
className="pl-2 text-xs text-red-400"
></span>
{errorMessage && (
<span id="link-href-info" className="pl-2 text-xs text-red-400">
{errorMessage}
</span>
)}
<div>
<label
htmlFor="type"
Expand All @@ -231,6 +260,13 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
id="type"
className="w-full rounded-md border-2 border-gray-600 bg-gray-600 p-2 text-white focus:border-blue-500 focus:outline-none sm:text-sm"
Copy link
Copy Markdown
Contributor

@TejInaco TejInaco Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactor this input and datalist in a way that it is possible to reuse the components/base/Dropdown.tsx component. Do the same for the local component RelationType.

placeholder="media type"
value={formData.type}
onChange={(e) =>
setFormData({
...formData,
type: e.target.value,
})
}
/>
<datalist id="mediaType">
<option value="application/td+json" />
Expand All @@ -245,37 +281,30 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(

const handleAddLink = () => {
if (!context.isValidJSON) {
showHrefErrorMessage("Can't add link. TD is malformed");
setErrorMessage("Can't add link. TD is malformed");
return;
}

const linkedTd: Record<string, any> = {};

const link: Link = {
href:
(
document.getElementById("link-href") as HTMLInputElement
).value.trim() || "/",
href: formData.href.trim(),
};
const rel = (
document.getElementById("rel") as HTMLInputElement
).value.trim();
const type = (
document.getElementById("type") as HTMLInputElement
).value.trim();

if (rel) link.rel = rel;
if (type) link.type = type;
if (formData.rel) link.rel = formData.rel.trim();
if (formData.type) link.type = formData.type.trim();

let isValidUrl = true;
let url: URL | null = null;
try {
var url = new URL(link.href);
url = new URL(link.href);
} catch (_) {
isValidUrl = false;
}
if (
linkingMethod === "url" &&
isValidUrl &&
url &&
(url.protocol === "http:" || url.protocol === "https:")
) {
try {
Expand All @@ -285,7 +314,7 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
if (
httpRequest
.getResponseHeader("content-type")
.includes("application/td+json")
?.includes("application/td+json")
) {
const thingDescription = httpRequest.response;
let parsedTd = JSON.parse(thingDescription);
Expand All @@ -301,9 +330,9 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
}

if (link.href === "") {
showHrefErrorMessage("The href field is mandatory ...");
setErrorMessage("The href field is mandatory ...");
} else if (checkIfLinkExists(link)) {
showHrefErrorMessage(
setErrorMessage(
"A Link with the target Thing Description already exists ..."
);
} else {
Expand All @@ -322,7 +351,7 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
rightButton={"Add"}
children={children}
title={`Add Link `}
description={`Tell us how this ${tdJSON.title} can interact with other ressources`}
description={`Tell us how this ${tdJSON.title} can interact with other resources`}
/>,
document.getElementById("modal-root") as HTMLElement
);
Expand All @@ -332,24 +361,5 @@ const AddLinkTdDialog = forwardRef<AddLinkTdDialogRef, AddLinkTdDialogProps>(
}
);

const showHrefErrorMessage = (msg) => {
(document.getElementById("link-href-info") as HTMLElement).textContent = msg;
(document.getElementById("link-href") as HTMLElement).classList.remove(
"border-gray-600"
);
(document.getElementById("link-href") as HTMLElement).classList.add(
"border-red-400"
);
};

const clearHrefErrorMessage = () => {
(document.getElementById("link-href") as HTMLElement).classList.add(
"border-gray-600"
);
(document.getElementById("link-href") as HTMLElement).classList.remove(
"border-red-400"
);
};

AddLinkTdDialog.displayName = "AddLinkTdDialog";
export default AddLinkTdDialog;