aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web/lib/hooks
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--apps/web/lib/hooks/bookmark-search.ts29
-rw-r--r--apps/web/lib/hooks/relative-time.ts7
-rw-r--r--apps/web/lib/hooks/useBookmarkImport.ts118
-rw-r--r--apps/web/lib/hooks/useImportSessions.ts175
4 files changed, 173 insertions, 156 deletions
diff --git a/apps/web/lib/hooks/bookmark-search.ts b/apps/web/lib/hooks/bookmark-search.ts
index f94e4691..32882006 100644
--- a/apps/web/lib/hooks/bookmark-search.ts
+++ b/apps/web/lib/hooks/bookmark-search.ts
@@ -1,9 +1,9 @@
import { useEffect, useMemo, useRef } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
-import { api } from "@/lib/trpc";
-import { keepPreviousData } from "@tanstack/react-query";
+import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
+import { useTRPC } from "@karakeep/shared-react/trpc";
import { parseSearchQuery } from "@karakeep/shared/searchQueryParser";
import { useInSearchPageStore } from "../store/useInSearchPageStore";
@@ -55,6 +55,7 @@ export function useDoBookmarkSearch() {
}
export function useBookmarkSearch() {
+ const api = useTRPC();
const { searchQuery } = useSearchQuery();
const sortOrder = useSortOrderStore((state) => state.sortOrder);
@@ -67,17 +68,19 @@ export function useBookmarkSearch() {
fetchNextPage,
isFetchingNextPage,
refetch,
- } = api.bookmarks.searchBookmarks.useInfiniteQuery(
- {
- text: searchQuery,
- sortOrder,
- },
- {
- placeholderData: keepPreviousData,
- gcTime: 0,
- initialCursor: null,
- getNextPageParam: (lastPage) => lastPage.nextCursor,
- },
+ } = useInfiniteQuery(
+ api.bookmarks.searchBookmarks.infiniteQueryOptions(
+ {
+ text: searchQuery,
+ sortOrder,
+ },
+ {
+ placeholderData: keepPreviousData,
+ gcTime: 0,
+ initialCursor: null,
+ getNextPageParam: (lastPage) => lastPage.nextCursor,
+ },
+ ),
);
useEffect(() => {
diff --git a/apps/web/lib/hooks/relative-time.ts b/apps/web/lib/hooks/relative-time.ts
index f7c38497..8fefa233 100644
--- a/apps/web/lib/hooks/relative-time.ts
+++ b/apps/web/lib/hooks/relative-time.ts
@@ -1,8 +1,5 @@
import { useEffect, useState } from "react";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-dayjs.extend(relativeTime);
+import { formatDistanceToNow } from "date-fns";
export default function useRelativeTime(date: Date) {
const [state, setState] = useState({
@@ -13,7 +10,7 @@ export default function useRelativeTime(date: Date) {
// This is to avoid hydration errors when server and clients are in different timezones
useEffect(() => {
setState({
- fromNow: dayjs(date).fromNow(),
+ fromNow: formatDistanceToNow(date, { addSuffix: true }),
localCreatedAt: date.toLocaleString(),
});
}, [date]);
diff --git a/apps/web/lib/hooks/useBookmarkImport.ts b/apps/web/lib/hooks/useBookmarkImport.ts
index 0d9bbaaf..35c04c1b 100644
--- a/apps/web/lib/hooks/useBookmarkImport.ts
+++ b/apps/web/lib/hooks/useBookmarkImport.ts
@@ -1,29 +1,17 @@
"use client";
import { useState } from "react";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "@/components/ui/sonner";
import { useTranslation } from "@/lib/i18n/client";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
-import {
- useCreateBookmarkWithPostHook,
- useUpdateBookmarkTags,
-} from "@karakeep/shared-react/hooks/bookmarks";
-import {
- useAddBookmarkToList,
- useCreateBookmarkList,
-} from "@karakeep/shared-react/hooks/lists";
-import { api } from "@karakeep/shared-react/trpc";
+import { useCreateBookmarkList } from "@karakeep/shared-react/hooks/lists";
+import { useTRPC } from "@karakeep/shared-react/trpc";
import {
importBookmarksFromFile,
ImportSource,
- ParsedBookmark,
parseImportFile,
} from "@karakeep/shared/import-export";
-import {
- BookmarkTypes,
- MAX_BOOKMARK_TITLE_LENGTH,
-} from "@karakeep/shared/types/bookmarks";
import { useCreateImportSession } from "./useImportSessions";
@@ -34,18 +22,22 @@ export interface ImportProgress {
export function useBookmarkImport() {
const { t } = useTranslation();
+ const api = useTRPC();
const [importProgress, setImportProgress] = useState<ImportProgress | null>(
null,
);
const [quotaError, setQuotaError] = useState<string | null>(null);
- const apiUtils = api.useUtils();
+ const queryClient = useQueryClient();
const { mutateAsync: createImportSession } = useCreateImportSession();
- const { mutateAsync: createBookmark } = useCreateBookmarkWithPostHook();
const { mutateAsync: createList } = useCreateBookmarkList();
- const { mutateAsync: addToList } = useAddBookmarkToList();
- const { mutateAsync: updateTags } = useUpdateBookmarkTags();
+ const { mutateAsync: stageImportedBookmarks } = useMutation(
+ api.importSessions.stageImportedBookmarks.mutationOptions(),
+ );
+ const { mutateAsync: finalizeImportStaging } = useMutation(
+ api.importSessions.finalizeImportStaging.mutationOptions(),
+ );
const uploadBookmarkFileMutation = useMutation({
mutationFn: async ({
@@ -65,8 +57,9 @@ export function useBookmarkImport() {
// Check quota before proceeding
if (bookmarkCount > 0) {
- const quotaUsage =
- await apiUtils.client.subscriptions.getQuotaUsage.query();
+ const quotaUsage = await queryClient.fetchQuery(
+ api.subscriptions.getQuotaUsage.queryOptions(),
+ );
if (
!quotaUsage.bookmarks.unlimited &&
@@ -84,7 +77,6 @@ export function useBookmarkImport() {
}
// Proceed with import if quota check passes
- // Use a custom parser to avoid re-parsing the file
const result = await importBookmarksFromFile(
{
file,
@@ -93,65 +85,9 @@ export function useBookmarkImport() {
deps: {
createImportSession,
createList,
- createBookmark: async (
- bookmark: ParsedBookmark,
- sessionId: string,
- ) => {
- if (bookmark.content === undefined) {
- throw new Error("Content is undefined");
- }
- const created = await createBookmark({
- crawlPriority: "low",
- title: bookmark.title.substring(0, MAX_BOOKMARK_TITLE_LENGTH),
- createdAt: bookmark.addDate
- ? new Date(bookmark.addDate * 1000)
- : undefined,
- note: bookmark.notes,
- archived: bookmark.archived,
- importSessionId: sessionId,
- source: "import",
- ...(bookmark.content.type === BookmarkTypes.LINK
- ? {
- type: BookmarkTypes.LINK,
- url: bookmark.content.url,
- }
- : {
- type: BookmarkTypes.TEXT,
- text: bookmark.content.text,
- }),
- });
- return created as { id: string; alreadyExists?: boolean };
- },
- addBookmarkToLists: async ({
- bookmarkId,
- listIds,
- }: {
- bookmarkId: string;
- listIds: string[];
- }) => {
- await Promise.all(
- listIds.map((listId) =>
- addToList({
- bookmarkId,
- listId,
- }),
- ),
- );
- },
- updateBookmarkTags: async ({
- bookmarkId,
- tags,
- }: {
- bookmarkId: string;
- tags: string[];
- }) => {
- if (tags.length > 0) {
- await updateTags({
- bookmarkId,
- attach: tags.map((t) => ({ tagName: t })),
- detach: [],
- });
- }
+ stageImportedBookmarks,
+ finalizeImportStaging: async (sessionId: string) => {
+ await finalizeImportStaging({ importSessionId: sessionId });
},
},
onProgress: (done, total) => setImportProgress({ done, total }),
@@ -172,19 +108,11 @@ export function useBookmarkImport() {
toast({ description: "No bookmarks found in the file." });
return;
}
- const { successes, failures, alreadyExisted } = result.counts;
- if (successes > 0 || alreadyExisted > 0) {
- toast({
- description: `Imported ${successes} bookmarks into import session. Background processing will start automatically.`,
- variant: "default",
- });
- }
- if (failures > 0) {
- toast({
- description: `Failed to import ${failures} bookmarks. Check console for details.`,
- variant: "destructive",
- });
- }
+
+ toast({
+ description: `Staged ${result.counts.total} bookmarks for import. Background processing will start automatically.`,
+ variant: "default",
+ });
},
onError: (error) => {
setImportProgress(null);
diff --git a/apps/web/lib/hooks/useImportSessions.ts b/apps/web/lib/hooks/useImportSessions.ts
index cee99bbc..2cc632ad 100644
--- a/apps/web/lib/hooks/useImportSessions.ts
+++ b/apps/web/lib/hooks/useImportSessions.ts
@@ -1,62 +1,151 @@
"use client";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "@/components/ui/sonner";
+import {
+ useInfiniteQuery,
+ useMutation,
+ useQuery,
+ useQueryClient,
+} from "@tanstack/react-query";
-import { api } from "@karakeep/shared-react/trpc";
+import { useTRPC } from "@karakeep/shared-react/trpc";
export function useCreateImportSession() {
- const apiUtils = api.useUtils();
+ const api = useTRPC();
+ const queryClient = useQueryClient();
- return api.importSessions.createImportSession.useMutation({
- onSuccess: () => {
- apiUtils.importSessions.listImportSessions.invalidate();
- },
- onError: (error) => {
- toast({
- description: error.message || "Failed to create import session",
- variant: "destructive",
- });
- },
- });
+ return useMutation(
+ api.importSessions.createImportSession.mutationOptions({
+ onSuccess: () => {
+ queryClient.invalidateQueries(
+ api.importSessions.listImportSessions.pathFilter(),
+ );
+ },
+ onError: (error) => {
+ toast({
+ description: error.message || "Failed to create import session",
+ variant: "destructive",
+ });
+ },
+ }),
+ );
}
export function useListImportSessions() {
- return api.importSessions.listImportSessions.useQuery(
- {},
- {
- select: (data) => data.sessions,
- },
+ const api = useTRPC();
+ return useQuery(
+ api.importSessions.listImportSessions.queryOptions(
+ {},
+ {
+ select: (data) => data.sessions,
+ },
+ ),
);
}
export function useImportSessionStats(importSessionId: string) {
- return api.importSessions.getImportSessionStats.useQuery(
- {
- importSessionId,
- },
- {
- refetchInterval: 5000, // Refetch every 5 seconds to show progress
- enabled: !!importSessionId,
- },
+ const api = useTRPC();
+ return useQuery(
+ api.importSessions.getImportSessionStats.queryOptions(
+ {
+ importSessionId,
+ },
+ {
+ refetchInterval: (q) =>
+ !q.state.data ||
+ !["completed", "failed"].includes(q.state.data.status)
+ ? 5000
+ : false, // Refetch every 5 seconds to show progress
+ enabled: !!importSessionId,
+ },
+ ),
);
}
export function useDeleteImportSession() {
- const apiUtils = api.useUtils();
+ const api = useTRPC();
+ const queryClient = useQueryClient();
+
+ return useMutation(
+ api.importSessions.deleteImportSession.mutationOptions({
+ onSuccess: () => {
+ queryClient.invalidateQueries(
+ api.importSessions.listImportSessions.pathFilter(),
+ );
+ toast({
+ description: "Import session deleted successfully",
+ variant: "default",
+ });
+ },
+ onError: (error) => {
+ toast({
+ description: error.message || "Failed to delete import session",
+ variant: "destructive",
+ });
+ },
+ }),
+ );
+}
- return api.importSessions.deleteImportSession.useMutation({
- onSuccess: () => {
- apiUtils.importSessions.listImportSessions.invalidate();
- toast({
- description: "Import session deleted successfully",
- variant: "default",
- });
- },
- onError: (error) => {
- toast({
- description: error.message || "Failed to delete import session",
- variant: "destructive",
- });
- },
- });
+export function usePauseImportSession() {
+ const api = useTRPC();
+ const queryClient = useQueryClient();
+
+ return useMutation(
+ api.importSessions.pauseImportSession.mutationOptions({
+ onSuccess: () => {
+ queryClient.invalidateQueries(
+ api.importSessions.listImportSessions.pathFilter(),
+ );
+ toast({
+ description: "Import session paused",
+ variant: "default",
+ });
+ },
+ onError: (error) => {
+ toast({
+ description: error.message || "Failed to pause import session",
+ variant: "destructive",
+ });
+ },
+ }),
+ );
+}
+
+export function useResumeImportSession() {
+ const api = useTRPC();
+ const queryClient = useQueryClient();
+
+ return useMutation(
+ api.importSessions.resumeImportSession.mutationOptions({
+ onSuccess: () => {
+ queryClient.invalidateQueries(
+ api.importSessions.listImportSessions.pathFilter(),
+ );
+ toast({
+ description: "Import session resumed",
+ variant: "default",
+ });
+ },
+ onError: (error) => {
+ toast({
+ description: error.message || "Failed to resume import session",
+ variant: "destructive",
+ });
+ },
+ }),
+ );
+}
+
+export function useImportSessionResults(
+ importSessionId: string,
+ filter: "all" | "accepted" | "rejected" | "skipped_duplicate" | "pending",
+) {
+ const api = useTRPC();
+ return useInfiniteQuery(
+ api.importSessions.getImportSessionResults.infiniteQueryOptions(
+ { importSessionId, filter, limit: 50 },
+ { getNextPageParam: (lastPage) => lastPage.nextCursor },
+ ),
+ );
}