Skip to content

Commit

Permalink
process id search
Browse files Browse the repository at this point in the history
  • Loading branch information
@ankushKun
ankushKun committed May 21, 2024
1 parent 0c56203 commit 25d1ae4
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 14 deletions.
118 changes: 112 additions & 6 deletions next_app/src/components/ao/new-ao-project-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<any>(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)
Expand Down Expand Up @@ -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
Expand All @@ -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();
}, []);
Expand Down Expand Up @@ -159,7 +265,7 @@ export function NewAOProjectDialog({ manager, collapsed }: { manager: ProjectMan

<Input type="text" placeholder="Project Name" onChange={(e) => setNewProjName(e.target.value)} />

<Combobox placeholder="Select Process" options={processes} onChange={(e) => setProcessUsed(e)} onOpen={fetchProcesses} />
<Combobox className="p-0 max-h-[50vh]" placeholder="Select Process (or search with ID)" options={processes} onChange={(e) => setProcessUsed(e)} onOpen={fetchProcesses} onSearchChange={(e) => setSearchNameProxy(e)} />

{processUsed == "NEW_PROCESS" && <Input type="text" placeholder="Process Name (optional)" onChange={(e) => setNewProcessName(e.target.value)} />}

Expand Down
18 changes: 10 additions & 8 deletions next_app/src/components/ui/combo-box.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Popover
Expand All @@ -25,14 +27,14 @@ export function Combobox({ placeholder, options, onChange, onOpen, disabled = fa
</Button>
</PopoverTrigger>

<PopoverContent className="w-full p-0">
<Command className="w-full">
<CommandInput placeholder={placeholder} />
<PopoverContent className={cn(className, "w-full overflow-scroll")}>
<Command className={cn(className, "w-full overflow-scroll")}>
<CommandInput placeholder={placeholder} onChangeCapture={(e) => onSearchChange(e.currentTarget.value)} />
<CommandEmpty>No process found.</CommandEmpty>
<CommandGroup>
{options.map((option) => (
<CommandItem
key={option.value}
key={option.label}
value={option.value}
onSelect={() => {
setValue(option.label === value ? "" : option.label);
Expand Down

0 comments on commit 25d1ae4

Please sign in to comment.