@@ -65,17 +65,16 @@ export default function WorkSpace() {
65
65
};
66
66
67
67
const save = useCallback(async () => {
68
+ if (saveState !== State.SAVING) return;
69
+
68
70
const name = window.name.split(" ");
69
71
const op = name[0];
70
72
const saveAsDiagram = window.name === "" || op === "d" || op === "lt";
71
73
72
74
if (saveAsDiagram) {
73
75
searchParams.delete("shareId");
74
76
setSearchParams(searchParams);
75
- if (
76
- (id === 0 && window.name === "") ||
77
- window.name.split(" ")[0] === "lt"
78
- ) {
77
+ if ((id === 0 && window.name === "") || op === "lt") {
79
78
await db.diagrams
80
79
.add({
81
80
database: database,
@@ -162,6 +161,7 @@ export default function WorkSpace() {
162
161
enums,
163
162
gistId,
164
163
loadedFromGistId,
164
+ saveState
165
165
]);
166
166
167
167
const load = useCallback(async () => {
@@ -283,20 +283,69 @@ export default function WorkSpace() {
283
283
});
284
284
};
285
285
286
+ const loadFromGist = async (shareId) => {
287
+ try {
288
+ const res = await octokit.request(`GET /gists/${shareId}`, {
289
+ gist_id: shareId,
290
+ headers: {
291
+ "X-GitHub-Api-Version": "2022-11-28",
292
+ },
293
+ });
294
+ const diagramSrc = res.data.files["share.json"].content;
295
+ const d = JSON.parse(diagramSrc);
296
+ setUndoStack([]);
297
+ setRedoStack([]);
298
+ setLoadedFromGistId(shareId);
299
+ setDatabase(d.database);
300
+ setTitle(d.title);
301
+ setTables(d.tables);
302
+ setRelationships(d.relationships);
303
+ setNotes(d.notes);
304
+ setAreas(d.subjectAreas);
305
+ setTransform(d.transform);
306
+ if (databases[d.database].hasTypes) {
307
+ setTypes(d.types ?? []);
308
+ }
309
+ if (databases[d.database].hasEnums) {
310
+ setEnums(d.enums ?? []);
311
+ }
312
+ } catch (e) {
313
+ console.log(e);
314
+ setSaveState(State.FAILED_TO_LOAD);
315
+ }
316
+ };
317
+
318
+ const shareId = searchParams.get("shareId");
319
+ if (shareId) {
320
+ const existingDiagram = await db.diagrams.get({
321
+ loadedFromGistId: shareId,
322
+ });
323
+
324
+ if (existingDiagram) {
325
+ window.name = "d " + existingDiagram.id;
326
+ setId(existingDiagram.id);
327
+ } else {
328
+ window.name = "";
329
+ setId(0);
330
+ }
331
+ await loadFromGist(shareId);
332
+ return;
333
+ }
334
+
286
335
if (window.name === "") {
287
- loadLatestDiagram();
336
+ await loadLatestDiagram();
288
337
} else {
289
338
const name = window.name.split(" ");
290
339
const op = name[0];
291
340
const id = parseInt(name[1]);
292
341
switch (op) {
293
342
case "d": {
294
- loadDiagram(id);
343
+ await loadDiagram(id);
295
344
break;
296
345
}
297
346
case "t":
298
347
case "lt": {
299
- loadTemplate(id);
348
+ await loadTemplate(id);
300
349
break;
301
350
}
302
351
default:
@@ -317,63 +366,10 @@ export default function WorkSpace() {
317
366
database,
318
367
setEnums,
319
368
selectedDb,
369
+ setSaveState,
370
+ searchParams,
320
371
]);
321
372
322
- const loadFromGist = useCallback(
323
- async (shareId) => {
324
- const existingDiagram = await db.diagrams.get({
325
- loadedFromGistId: shareId,
326
- });
327
- if (existingDiagram) {
328
- window.name = "d " + existingDiagram.id;
329
- } else {
330
- window.name = "";
331
- }
332
- try {
333
- const res = await octokit.request(`GET /gists/${shareId}`, {
334
- gist_id: shareId,
335
- headers: {
336
- "X-GitHub-Api-Version": "2022-11-28",
337
- },
338
- });
339
- const diagramSrc = res.data.files["share.json"].content;
340
- const d = JSON.parse(diagramSrc);
341
- setUndoStack([]);
342
- setRedoStack([]);
343
- setLoadedFromGistId(shareId);
344
- setDatabase(d.database);
345
- setTitle(d.title);
346
- setTables(d.tables);
347
- setRelationships(d.relationships);
348
- setNotes(d.notes);
349
- setAreas(d.subjectAreas);
350
- setTransform(d.transform);
351
- if (databases[d.database].hasTypes) {
352
- setTypes(d.types ?? []);
353
- }
354
- if (databases[d.database].hasEnums) {
355
- setEnums(d.enums ?? []);
356
- }
357
- } catch (e) {
358
- console.log(e);
359
- setSaveState(State.FAILED_TO_LOAD);
360
- }
361
- },
362
- [
363
- setAreas,
364
- setDatabase,
365
- setEnums,
366
- setNotes,
367
- setRelationships,
368
- setTables,
369
- setTypes,
370
- setTransform,
371
- setRedoStack,
372
- setUndoStack,
373
- setSaveState,
374
- ],
375
- );
376
-
377
373
useEffect(() => {
378
374
if (
379
375
tables?.length === 0 &&
@@ -399,31 +395,19 @@ export default function WorkSpace() {
399
395
tasks?.length,
400
396
transform.zoom,
401
397
title,
398
+ gistId,
402
399
setSaveState,
403
400
]);
404
401
405
402
useEffect(() => {
406
- if (gistId && gistId !== "") {
407
- setSaveState(State.SAVING);
408
- }
409
- }, [gistId, setSaveState]);
410
-
411
- useEffect(() => {
412
- if (saveState !== State.SAVING) return;
413
-
414
403
save();
415
- }, [id, gistId, saveState, save]);
404
+ }, [saveState, save]);
416
405
417
406
useEffect(() => {
418
407
document.title = "Editor | drawDB";
419
408
420
- const shareId = searchParams.get("shareId");
421
- if (shareId) {
422
- loadFromGist(shareId);
423
- } else {
424
- load();
425
- }
426
- }, [load, searchParams, loadFromGist]);
409
+ load();
410
+ }, [load]);
427
411
428
412
return (
429
413
<div className="h-full flex flex-col overflow-hidden theme">
0 commit comments