refact: migrate all add connector page to jotai+tnstack

This commit is contained in:
CREDO23 2025-12-19 00:32:59 +02:00
parent cd5b6becce
commit e38b925c2a
2 changed files with 19 additions and 23 deletions

View file

@ -1,6 +1,7 @@
"use client"; "use client";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useAtomValue } from "jotai";
import { ArrowLeft, Check, Info, Loader2 } from "lucide-react"; import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
import { motion } from "motion/react"; import { motion } from "motion/react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
@ -8,6 +9,8 @@ import { useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import * as z from "zod"; import * as z from "zod";
import { updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@ -21,10 +24,8 @@ import {
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { import type { EnumConnectorName } from "@/contracts/enums/connector";
type SearchSourceConnector, import type { SearchSourceConnector } from "@/hooks/use-search-source-connectors";
useSearchSourceConnectors,
} from "@/hooks/use-search-source-connectors";
// Define the form schema with Zod // Define the form schema with Zod
const apiConnectorFormSchema = z.object({ const apiConnectorFormSchema = z.object({
@ -87,7 +88,8 @@ export default function EditConnectorPage() {
const searchSpaceId = params.search_space_id as string; const searchSpaceId = params.search_space_id as string;
const connectorId = parseInt(params.connector_id as string, 10); const connectorId = parseInt(params.connector_id as string, 10);
const { connectors, updateConnector } = useSearchSourceConnectors(false, parseInt(searchSpaceId)); const { data: connectors = [] } = useAtomValue(connectorsAtom);
const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
const [connector, setConnector] = useState<SearchSourceConnector | null>(null); const [connector, setConnector] = useState<SearchSourceConnector | null>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
@ -101,14 +103,12 @@ export default function EditConnectorPage() {
}, },
}); });
// Find connector in the list
useEffect(() => { useEffect(() => {
const currentConnector = connectors.find((c) => c.id === connectorId); const currentConnector = connectors.find((c) => c.id === connectorId);
if (currentConnector) { if (currentConnector) {
setConnector(currentConnector); setConnector(currentConnector);
// Check if connector type is supported
const apiKeyField = getApiKeyFieldName(currentConnector.connector_type); const apiKeyField = getApiKeyFieldName(currentConnector.connector_type);
if (apiKeyField) { if (apiKeyField) {
form.reset({ form.reset({
@ -116,14 +116,12 @@ export default function EditConnectorPage() {
api_key: currentConnector.config[apiKeyField] || "", api_key: currentConnector.config[apiKeyField] || "",
}); });
} else { } else {
// Redirect if not a supported connector type
toast.error("This connector type is not supported for editing"); toast.error("This connector type is not supported for editing");
router.push(`/dashboard/${searchSpaceId}/connectors`); router.push(`/dashboard/${searchSpaceId}/connectors`);
} }
setIsLoading(false); setIsLoading(false);
} else if (!isLoading && connectors.length > 0) { } else if (!isLoading && connectors.length > 0) {
// If connectors are loaded but this one isn't found
toast.error("Connector not found"); toast.error("Connector not found");
router.push(`/dashboard/${searchSpaceId}/connectors`); router.push(`/dashboard/${searchSpaceId}/connectors`);
} }
@ -137,18 +135,20 @@ export default function EditConnectorPage() {
try { try {
const apiKeyField = getApiKeyFieldName(connector.connector_type); const apiKeyField = getApiKeyFieldName(connector.connector_type);
// Only update the API key if a new one was provided
const updatedConfig = { ...connector.config }; const updatedConfig = { ...connector.config };
if (values.api_key) { if (values.api_key) {
updatedConfig[apiKeyField] = values.api_key; updatedConfig[apiKeyField] = values.api_key;
} }
await updateConnector(connectorId, { await updateConnector({
name: values.name, id: connectorId,
connector_type: connector.connector_type, data: {
config: updatedConfig, name: values.name,
is_indexable: connector.is_indexable, connector_type: connector.connector_type as EnumConnectorName,
last_indexed_at: connector.last_indexed_at, config: updatedConfig,
is_indexable: connector.is_indexable,
last_indexed_at: connector.last_indexed_at,
},
}); });
toast.success("Connector updated successfully!"); toast.success("Connector updated successfully!");

View file

@ -7,11 +7,11 @@ import { useEffect, useMemo, useRef } from "react";
import { createChatMutationAtom, updateChatMutationAtom } from "@/atoms/chats/chat-mutation.atoms"; import { createChatMutationAtom, updateChatMutationAtom } from "@/atoms/chats/chat-mutation.atoms";
import { activeChatAtom } from "@/atoms/chats/chat-query.atoms"; import { activeChatAtom } from "@/atoms/chats/chat-query.atoms";
import { activeChatIdAtom } from "@/atoms/chats/ui.atoms"; import { activeChatIdAtom } from "@/atoms/chats/ui.atoms";
import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms"; import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
import ChatInterface from "@/components/chat/ChatInterface"; import ChatInterface from "@/components/chat/ChatInterface";
import type { Document } from "@/contracts/types/document.types"; import type { Document } from "@/contracts/types/document.types";
import { useChatState } from "@/hooks/use-chat"; import { useChatState } from "@/hooks/use-chat";
import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
export default function ResearcherPage() { export default function ResearcherPage() {
const { search_space_id } = useParams(); const { search_space_id } = useParams();
@ -57,14 +57,10 @@ export default function ResearcherPage() {
})); }));
}, [documentTypeCountsData]); }, [documentTypeCountsData]);
const { connectors: searchConnectors } = useSearchSourceConnectors( const { data: searchConnectors } = useAtomValue(connectorsAtom);
false,
Number(search_space_id)
);
// Filter for non-indexable connectors (live search)
const liveSearchConnectors = useMemo( const liveSearchConnectors = useMemo(
() => searchConnectors.filter((connector) => !connector.is_indexable), () => searchConnectors?.filter((connector) => !connector.is_indexable) ?? [],
[searchConnectors] [searchConnectors]
); );