1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
"use client";
import assert from "assert";
import { useRouter } from "next/navigation";
import FilePickerButton from "@/components/ui/file-picker-button";
import { toast } from "@/components/ui/use-toast";
import { parseNetscapeBookmarkFile } from "@/lib/netscapeBookmarkParser";
import { useMutation } from "@tanstack/react-query";
import { Upload } from "lucide-react";
import { useCreateBookmarkWithPostHook } from "@hoarder/shared-react/hooks/bookmarks";
import {
useAddBookmarkToList,
useCreateBookmarkList,
} from "@hoarder/shared-react/hooks/lists";
import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
export function Import() {
const router = useRouter();
const { mutateAsync: createBookmark } = useCreateBookmarkWithPostHook();
const { mutateAsync: createList } = useCreateBookmarkList();
const { mutateAsync: addToList } = useAddBookmarkToList();
const { mutateAsync: runUploadBookmarkFile } = useMutation({
mutationFn: async (file: File) => {
return await parseNetscapeBookmarkFile(file);
},
onSuccess: async (resp) => {
const results = await Promise.allSettled(
resp.map((url) =>
createBookmark({ type: BookmarkTypes.LINK, url: url.toString() }),
),
);
const failed = results.filter((r) => r.status == "rejected");
const successes = results.filter(
(r) => r.status == "fulfilled" && !r.value.alreadyExists,
);
const alreadyExisted = results.filter(
(r) => r.status == "fulfilled" && r.value.alreadyExists,
);
if (successes.length > 0 || alreadyExisted.length > 0) {
toast({
description: `Imported ${successes.length} bookmarks and skipped ${alreadyExisted.length} bookmarks that already existed`,
variant: "default",
});
}
if (failed.length > 0) {
toast({
description: `Failed to import ${failed.length} bookmarks`,
variant: "destructive",
});
}
const importList = await createList({
name: `Imported Bookmarks`,
icon: "⬆️",
});
if (successes.length > 0) {
await Promise.allSettled(
successes.map((r) => {
assert(r.status == "fulfilled");
addToList({ bookmarkId: r.value.id, listId: importList.id });
}),
);
}
router.push(`/dashboard/lists/${importList.id}`);
},
onError: (error) => {
toast({
description: error.message,
variant: "destructive",
});
},
});
return (
<div>
<FilePickerButton
accept=".html"
multiple={false}
className="flex items-center gap-2"
onFileSelect={runUploadBookmarkFile}
>
<Upload />
<p>Import Bookmarks from HTML file</p>
</FilePickerButton>
</div>
);
}
export default function ImportExport() {
return (
<div>
<div className="flex items-center justify-between">
<div className="mb-4 text-lg font-medium">Import Bookmarks</div>
</div>
<div className="mt-2">
<Import />
</div>
</div>
);
}
|
