From ecac8137cd8f32bfeed5b1cd9f565d2fd8ef2301 Mon Sep 17 00:00:00 2001 From: ankushKun Date: Tue, 21 May 2024 19:17:23 +0530 Subject: [PATCH] process id search --- .../components/ao/new-ao-project-dialog.tsx | 118 +++++++++++++++++- next_app/src/components/ui/combo-box.tsx | 18 +-- 2 files changed, 122 insertions(+), 14 deletions(-) diff --git a/next_app/src/components/ao/new-ao-project-dialog.tsx b/next_app/src/components/ao/new-ao-project-dialog.tsx index 2ac8364..dd924c3 100644 --- a/next_app/src/components/ao/new-ao-project-dialog.tsx +++ b/next_app/src/components/ao/new-ao-project-dialog.tsx @@ -33,6 +33,27 @@ export function NewAOProjectDialog({ manager, collapsed }: { manager: ProjectMan const [defaultFiletype, setDefaultFiletype] = useState<"NORMAL" | "NOTEBOOK">("NOTEBOOK"); const [selectedTemplate, setSelectedTemplate] = useState(""); const [loadingProcess, setLoadingProcess] = useState(false); + const [searchName, setSearchName] = useState(""); + const [searchNameProxy, setSearchNameProxy] = useState(""); + const [searchTimeout, setSearchTimeout] = useState(0) + + useEffect(() => { + if (searchTimeout) clearTimeout(searchTimeout); + setSearchTimeout(setTimeout(() => { + setSearchName(searchNameProxy); + }, 690)) + return () => { clearTimeout(searchTimeout) } + }, [searchNameProxy]) + + useEffect(() => { + if (!popupOpen) setSearchName(""); + }, [popupOpen]); + + // useEffect(() => { + // if (searchName) { + // fetchProcessesWithName(searchName); + // } + // }, [searchName]); async function createProject() { if (!newProjName) @@ -95,7 +116,10 @@ export function NewAOProjectDialog({ manager, collapsed }: { manager: ProjectMan const query = gql` query { - transactions(owners: "${address}", tags: [{ name: "Data-Protocol", values: ["ao"] }, { name: "Type", values: ["Process"] }]) { + transactions(owners: "${address}", + tags: [{ name: "Data-Protocol", values: ["ao"] }, { name: "Type", values: ["Process"] }], + first: 999 + ) { edges { node { id @@ -111,14 +135,96 @@ export function NewAOProjectDialog({ manager, collapsed }: { manager: ProjectMan const res: any = await client.request(query); - const ids = res.transactions.edges.map((edge: any) => ({ - label: `${edge.node.tags[2].value} (${edge.node.id})`, - value: edge.node.id, - })); + const ids = res.transactions.edges.map((edge: any) => { + const name = edge.node.tags.find((tag: any) => tag.name == "Name")?.value || ""; + // console.log(name) + return { + label: `${name} (${edge.node.id})`, + value: edge.node.id, + } + }); setProcesses([{ label: "+ Create New", value: "NEW_PROCESS" }, ...ids]); } + async function fetchProcessesWithName(searchName: string) { + console.log("fetching processes with name or id", searchName) + const client = new GraphQLClient("https://arweave.net/graphql"); + const address = await window.arweaveWallet.getActiveAddress(); + + const queryName = gql` + query { + transactions(owners: "${address}", + tags: [ + { name: "Data-Protocol", values: ["ao"] }, + { name: "Type", values: ["Process"] }, + {name:"Name", values: ["${searchName}"]} + ] + ) { + edges { + node { + id + tags { + name + value + } + } + } + } + } + `; + + const resName: any = await client.request(queryName); + + const idsName = resName.transactions.edges.map((edge: any) => { + const name = edge.node.tags.find((tag: any) => tag.name == "Name").value; + console.log(name) + return { + label: `${name} (${edge.node.id})`, + value: edge.node.id, + } + }); + + const queryId = gql` + query { + transactions(owners: "${address}", + tags: [ + { name: "Data-Protocol", values: ["ao"] }, + { name: "Type", values: ["Process"] }, + ], + ids: ["${searchName}"] + ) { + edges { + node { + id + tags { + name + value + } + } + } + } + } + `; + + const resId: any = await client.request(queryId); + + const idsId = resId.transactions.edges.map((edge: any) => { + const name = edge.node.tags.find((tag: any) => tag.name == "Name").value; + console.log(name) + return { + label: `${name} (${edge.node.id})`, + value: edge.node.id, + } + }); + + const ids = [{ label: "+ Create New", value: "NEW_PROCESS" }, ...idsName, ...idsId]; + console.log(ids) + + setProcesses(ids); + + } + useEffect(() => { fetchProcesses(); }, []); @@ -159,7 +265,7 @@ export function NewAOProjectDialog({ manager, collapsed }: { manager: ProjectMan setNewProjName(e.target.value)} /> - setProcessUsed(e)} onOpen={fetchProcesses} /> + setProcessUsed(e)} onOpen={fetchProcesses} onSearchChange={(e) => setSearchNameProxy(e)} /> {processUsed == "NEW_PROCESS" && setNewProcessName(e.target.value)} />} diff --git a/next_app/src/components/ui/combo-box.tsx b/next_app/src/components/ui/combo-box.tsx index 707b370..d6ea5a3 100644 --- a/next_app/src/components/ui/combo-box.tsx +++ b/next_app/src/components/ui/combo-box.tsx @@ -1,14 +1,16 @@ -import * as React from "react"; +import { useState, useEffect } from "react"; import { Check, ChevronsUpDown } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { useTimeout } from "usehooks-ts"; +import { GraphQLClient, gql } from "graphql-request"; -export function Combobox({ placeholder, options, onChange, onOpen, disabled = false }: { placeholder: string, options: { label: string; value: string }[]; onChange: (val: string) => void; onOpen: () => void; disabled?: boolean }) { - const [open, setOpen] = React.useState(false); - const [value, setValue] = React.useState(""); +export function Combobox({ className = "", placeholder, options, onChange, onOpen, disabled = false, onSearchChange }: { className?: string; placeholder: string, options: { label: string; value: string }[]; onChange: (val: string) => void; onOpen: () => void; disabled?: boolean; onSearchChange?: (e: string) => void }) { + const [open, setOpen] = useState(false); + const [value, setValue] = useState(""); return ( - - - + + + onSearchChange(e.currentTarget.value)} /> No process found. {options.map((option) => ( { setValue(option.label === value ? "" : option.label);