diff --git a/app/components/FieldNotes.tsx b/app/components/FieldNotes.tsx new file mode 100644 index 00000000..16357b03 --- /dev/null +++ b/app/components/FieldNotes.tsx @@ -0,0 +1,105 @@ +import { Title } from "./Primitives/Title"; +import { Body } from "./Primitives/Body"; +import { useState, useEffect } from "react"; +import { useJsonColumnViewState } from "~/hooks/useJsonColumnView"; + +let notes: Record = {}; + +export function FieldNotes() { + + const [note, setNote] = useState(""); + + function getSelectedNodeId(): string { + const { selectedNodeId } = useJsonColumnViewState(); + if (!selectedNodeId) { + return "defaultNodeId"; + } + return selectedNodeId; + } + + const selectedNodeId: string = getSelectedNodeId(); + + useEffect(() => { + setNote(notes[selectedNodeId] || ""); + }, [selectedNodeId]); + + function handleChange(event: React.ChangeEvent) { + notes[selectedNodeId] = event.target.value; + setNote(event.target.value); + } + + function exportNotes() { + const jsonData = JSON.stringify(notes); + const blob = new Blob([jsonData], { type: "application/json" }); + const url = URL.createObjectURL(blob); + + const link = document.createElement("a"); + link.href = url; + link.download = "jsonheroSavedNotes.json"; + link.click(); + + URL.revokeObjectURL(url); + } + + function importNotes() { + const input = document.createElement("input"); + input.type = "file"; + input.accept = ".json"; + input.onchange = (event) => { + const target = event.target as HTMLInputElement; + const files = target.files; + if (!files || files.length === 0) { + return; + } + const file = files[0]; + const reader = new FileReader(); + reader.onload = (event) => { + const result = event.target?.result; + if (!result) { + return; + } + notes = JSON.parse(result as string); + console.log(notes[selectedNodeId] || ""); + setNote(notes[selectedNodeId] || ""); + }; + reader.readAsText(file); + }; + input.click(); + } + + + return ( +
+ + Notes + + +