Skip to content

Commit 1da7f17

Browse files
Copilotmikebarkmin
Copilot
and
mikebarkmin
committed
Remove save button and apply changes immediately
Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>
1 parent 0945167 commit 1da7f17

3 files changed

Lines changed: 82 additions & 125 deletions

File tree

‎packages/learningmap/src/EdgePanel.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { X, Trash2, Save } from "lucide-react";
2+
import { X, Trash2 } from "lucide-react";
33
import { Edge, Panel } from "@xyflow/react";
44
import { EditorDrawerEdgeContent } from "./EditorDrawerEdgeContent";
55
import { getTranslations } from "./translations";
@@ -75,9 +75,6 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
7575
<button onClick={onDelete} className="danger-button">
7676
<Trash2 size={16} /> {t.deleteEdge}
7777
</button>
78-
<button onClick={closePanel} className="primary-button">
79-
<Save size={16} /> {t.saveChanges}
80-
</button>
8178
</div>
8279
</div>
8380
</Panel>

‎packages/learningmap/src/EditorPanel.tsx‎

Lines changed: 51 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useState, useEffect } from "react";
2-
import { X, Trash2, Save } from "lucide-react";
1+
import React, { useEffect } from "react";
2+
import { X, Trash2 } from "lucide-react";
33
import { Node, Panel } from "@xyflow/react";
44
import { EditorDrawerTaskContent } from "./EditorDrawerTaskContent";
55
import { EditorDrawerTopicContent } from "./EditorDrawerTopicContent";
@@ -33,29 +33,19 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
3333

3434
const node = nodes.find(n => n.id === selectedNodeId) || null;
3535

36-
const [localNode, setLocalNode] = useState<Node<NodeData> | null>(node);
37-
38-
useEffect(() => {
39-
setLocalNode(node);
40-
}, [node]);
41-
4236
const onClose = () => {
4337
setDrawerOpen(false);
4438
setSelectedNodeId(null);
4539
};
4640

47-
const onUpdate = (updatedNode: Node<NodeData>) => {
48-
updateNode(updatedNode.id, updatedNode);
49-
};
50-
5141
const onDelete = () => {
5242
if (node) {
5343
deleteNode(node.id);
5444
onClose();
5545
}
5646
};
5747

58-
if (!isOpen || !node || !localNode) return null;
48+
if (!isOpen || !node) return null;
5949

6050
// Filter out the current node from selectable options
6151
const nodeOptions = nodes.filter(n => n.id !== node.id && (n.type === "task" || n.type === "topic"));
@@ -101,96 +91,89 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
10191

10292
// Completion Needs
10393
const handleCompletionNeedsChange = (idx: number, id: string) => {
104-
if (!localNode) return;
105-
const needs: Completion["needs"] = [...(localNode.data.completion?.needs || [])];
94+
if (!node) return;
95+
const needs: Completion["needs"] = [...(node.data.completion?.needs || [])];
10696
needs[idx] = id;
107-
handleFieldChange("completion", { ...(localNode.data.completion || {}), needs });
97+
handleFieldChange("completion", { ...(node.data.completion || {}), needs });
10898
};
10999
const addCompletionNeed = () => {
110-
if (!localNode) return;
111-
const needs: Completion["needs"] = [...(localNode.data.completion?.needs || []), ""];
112-
handleFieldChange("completion", { ...(localNode.data.completion || {}), needs });
100+
if (!node) return;
101+
const needs: Completion["needs"] = [...(node.data.completion?.needs || []), ""];
102+
handleFieldChange("completion", { ...(node.data.completion || {}), needs });
113103
};
114104
const removeCompletionNeed = (idx: number) => {
115-
if (!localNode) return;
116-
const needs: Completion["needs"] = (localNode.data.completion?.needs || []).filter((_: any, i: number) => i !== idx);
117-
handleFieldChange("completion", { ...(localNode.data.completion || {}), needs });
105+
if (!node) return;
106+
const needs: Completion["needs"] = (node.data.completion?.needs || []).filter((_: any, i: number) => i !== idx);
107+
handleFieldChange("completion", { ...(node.data.completion || {}), needs });
118108
};
119109

120110
// Completion Optional
121111
const handleCompletionOptionalChange = (idx: number, id: string) => {
122-
if (!localNode) return;
123-
const optional: Completion["optional"] = [...(localNode.data.completion?.optional || [])];
112+
if (!node) return;
113+
const optional: Completion["optional"] = [...(node.data.completion?.optional || [])];
124114
optional[idx] = id;
125-
handleFieldChange("completion", { ...(localNode.data.completion || {}), optional });
115+
handleFieldChange("completion", { ...(node.data.completion || {}), optional });
126116
};
127117
const addCompletionOptional = () => {
128-
if (!localNode) return;
129-
const optional: Completion["optional"] = [...(localNode.data.completion?.optional || []), ""];
130-
handleFieldChange("completion", { ...(localNode.data.completion || {}), optional });
118+
if (!node) return;
119+
const optional: Completion["optional"] = [...(node.data.completion?.optional || []), ""];
120+
handleFieldChange("completion", { ...(node.data.completion || {}), optional });
131121
};
132122
const removeCompletionOptional = (idx: number) => {
133-
if (!localNode) return;
134-
const optional = (localNode.data.completion?.optional || []).filter((_: any, i: number) => i !== idx);
135-
handleFieldChange("completion", { ...(localNode.data.completion || {}), optional });
123+
if (!node) return;
124+
const optional = (node.data.completion?.optional || []).filter((_: any, i: number) => i !== idx);
125+
handleFieldChange("completion", { ...(node.data.completion || {}), optional });
136126
};
137127

138128
// Unlock After
139129
const handleUnlockAfterChange = (idx: number, id: string) => {
140-
if (!localNode) return;
141-
const after = [...(localNode.data.unlock?.after || [])];
130+
if (!node) return;
131+
const after = [...(node.data.unlock?.after || [])];
142132
after[idx] = id;
143-
handleFieldChange("unlock", { ...(localNode.data.unlock || {}), after });
133+
handleFieldChange("unlock", { ...(node.data.unlock || {}), after });
144134
};
145135
const addUnlockAfter = () => {
146-
if (!localNode) return;
147-
const after = [...(localNode.data.unlock?.after || []), ""];
148-
handleFieldChange("unlock", { ...(localNode.data.unlock || {}), after });
136+
if (!node) return;
137+
const after = [...(node.data.unlock?.after || []), ""];
138+
handleFieldChange("unlock", { ...(node.data.unlock || {}), after });
149139
};
150140
const removeUnlockAfter = (idx: number) => {
151-
if (!localNode) return;
152-
const after = (localNode.data.unlock?.after || []).filter((_: any, i: number) => i !== idx);
153-
handleFieldChange("unlock", { ...(localNode.data.unlock || {}), after });
154-
};
155-
156-
const handleSave = () => {
157-
if (!localNode) return;
158-
onUpdate(localNode);
159-
onClose();
141+
if (!node) return;
142+
const after = (node.data.unlock?.after || []).filter((_: any, i: number) => i !== idx);
143+
handleFieldChange("unlock", { ...(node.data.unlock || {}), after });
160144
};
161145

162146
const handleFieldChange = (field: string, value: any) => {
163-
setLocalNode((prev: Node<NodeData> | null) => {
164-
if (!prev) return prev;
165-
return {
166-
...prev,
167-
data: { ...prev.data, [field]: value },
168-
className: field === "color" ? value : prev.className
169-
};
170-
});
147+
if (!node) return;
148+
const updatedNode = {
149+
...node,
150+
data: { ...node.data, [field]: value },
151+
className: field === "color" ? value : node.className
152+
};
153+
updateNode(node.id, updatedNode);
171154
};
172155

173156
const handleResourceChange = (index: number, field: string, value: string) => {
174-
if (!localNode) return;
175-
const resources = [...(localNode.data.resources || [])];
157+
if (!node) return;
158+
const resources = [...(node.data.resources || [])];
176159
resources[index] = { ...resources[index], [field]: value };
177160
handleFieldChange("resources", resources);
178161
};
179162

180163
const addResource = () => {
181-
if (!localNode) return;
182-
const resources = [...(localNode.data.resources || []), { label: "", type: "url", url: "" }];
164+
if (!node) return;
165+
const resources = [...(node.data.resources || []), { label: "", type: "url", url: "" }];
183166
handleFieldChange("resources", resources);
184167
};
185168

186169
const removeResource = (index: number) => {
187-
if (!localNode) return;
188-
const resources = (localNode.data.resources || []).filter((_: any, i: number) => i !== index);
170+
if (!node) return;
171+
const resources = (node.data.resources || []).filter((_: any, i: number) => i !== index);
189172
handleFieldChange("resources", resources);
190173
};
191174

192175
let content;
193-
if (localNode.type === "task") {
176+
if (node.type === "task") {
194177
content = (
195178
<>
196179
<div className="panel-header">
@@ -200,7 +183,7 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
200183
</button>
201184
</div>
202185
<EditorDrawerTaskContent
203-
localNode={localNode}
186+
localNode={node}
204187
handleFieldChange={handleFieldChange}
205188
handleResourceChange={handleResourceChange}
206189
addResource={addResource}
@@ -219,7 +202,7 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
219202
/>
220203
</>
221204
);
222-
} else if (localNode.type === "topic") {
205+
} else if (node.type === "topic") {
223206
content = (
224207
<>
225208
<div className="panel-header">
@@ -229,7 +212,7 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
229212
</button>
230213
</div>
231214
<EditorDrawerTopicContent
232-
localNode={localNode}
215+
localNode={node}
233216
handleFieldChange={handleFieldChange}
234217
handleResourceChange={handleResourceChange}
235218
addResource={addResource}
@@ -248,7 +231,7 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
248231
/>
249232
</>
250233
);
251-
} else if (localNode.type === "image") {
234+
} else if (node.type === "image") {
252235
content = (
253236
<>
254237
<div className="panel-header">
@@ -258,13 +241,13 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
258241
</button>
259242
</div>
260243
<EditorDrawerImageContent
261-
localNode={localNode}
244+
localNode={node}
262245
handleFieldChange={handleFieldChange}
263246
language={language}
264247
/>
265248
</>
266249
);
267-
} else if (localNode.type === "text") {
250+
} else if (node.type === "text") {
268251
content = (
269252
<>
270253
<div className="panel-header">
@@ -274,7 +257,7 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
274257
</button>
275258
</div>
276259
<EditorDrawerTextContent
277-
localNode={localNode}
260+
localNode={node}
278261
handleFieldChange={handleFieldChange}
279262
language={language}
280263
/>
@@ -290,9 +273,6 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
290273
<button onClick={onDelete} className="danger-button">
291274
<Trash2 size={16} /> {t.deleteNode}
292275
</button>
293-
<button onClick={handleSave} className="primary-button">
294-
<Save size={16} /> {t.saveChanges}
295-
</button>
296276
</div>
297277
</div>
298278
</Panel>

0 commit comments

Comments
 (0)