Merge pull request #87 from tylerslaton/explore-page

fix: don't allow empty tool add and allow delete on explore

Author: tylerslaton

app/explore/page.tsx

@@ -83,6 +83,7 @@ export default function Explore() {
         setCurrent('/explore')
         refresh() 
     }, []);
+
     useEffect(() => { refresh() }, [authenticated]);;
 
     return (
@@ -169,7 +170,7 @@ export default function Explore() {
             {loading ?
                 <Loading /> :
                 <div className={'pb-10'}>
-                    <ScriptModal script={selectedScript} open={open} setOpen={setOpen} />
+                    <ScriptModal script={selectedScript} open={open} setOpen={setOpen} refresh={refresh} />
                     <div className="grid gap-12 grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 4xl:grid-cols-4">
                         {filteredScripts.map((script) => (
                             <div
@@ -217,7 +218,14 @@ export default function Explore() {
                                 className="col-span-1 lg:col-span-2 2xl:col-span-3 4xl:col-span-4"
                                 onPress={() => {
                                     setNextLoading(true)
-                                    getScripts({limit: 10, continue: next})
+                                    getScripts({
+                                        limit: 10,
+                                        filter: (query || owner || visibility) && filter === "featured" ? '' : filter,
+                                        search: query,
+                                        visibility: visibility,
+                                        owner: owner,
+                                        continue: next
+                                    })
                                         .then((resp) => {
                                             if (resp.continue) setNext(resp.continue)
                                             else setNext(undefined)

components/edit/configure/imports/toolCatalog.tsx

@@ -487,6 +487,7 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({tools, addTool, removeTool}) =
                                                         startContent={<GoPlus />}
                                                         color="primary"
                                                         onPress={() => {
+                                                            if (!url) return;
                                                             if (!priorityTools["From URL"].map((t) => t.url).includes(url)) {
                                                                 addTool(url)
                                                                 priorityTools["From URL"].push({

components/explore/scriptModal.tsx

@@ -1,23 +1,31 @@
 "use client"
 
 import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter, Button, Link, Avatar, Divider, Accordion, AccordionItem, Chip, Tooltip, Table, TableHeader, TableColumn, TableRow, TableCell, TableBody } from "@nextui-org/react";
-import {ParsedScript} from "@/actions/me/scripts";
+import {deleteScript, ParsedScript} from "@/actions/me/scripts";
 import { GoCode, GoPaperAirplane, GoPencil, GoTrash } from "react-icons/go";
 import { AuthContext } from "@/contexts/auth";
-import { useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import {TbListDetails} from "react-icons/tb";
 import { LiaExpandArrowsAltSolid } from "react-icons/lia";
 
 interface ScriptModalProps {
     className?: string;
     script: ParsedScript;
     open: boolean; setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    refresh: () => void;
 }
 
-const ScriptModal = ({ className, script, open, setOpen }: ScriptModalProps) => {
+const ScriptModal = ({ className, script, open, setOpen, refresh }: ScriptModalProps) => {
     const {authenticated, me} = useContext(AuthContext);
     const [expanded, setExpanded] = useState(false);
 
+    const handleDelete = useCallback((script: ParsedScript) => {
+        deleteScript(script)
+            .then(() => refresh() )
+            .catch((error) => console.error(error))
+            .finally(() => setOpen(false));
+    }, []);
+
     return (
         <Modal
             id="script-modal"
@@ -97,7 +105,7 @@ const ScriptModal = ({ className, script, open, setOpen }: ScriptModalProps) =>
                         {authenticated && me?.username === script.owner && 
                             <>
                                 <Button as={Link} href={`/edit?file=${script.publicURL}&id=${script.id}`} color="primary" className="w-full" startContent={<GoPencil />}>Edit</Button> 
-                                <Button className="w-full" color="danger" variant="bordered" startContent={<GoTrash />}>Delete</Button>
+                                <Button className="w-full" color="danger" variant="bordered" startContent={<GoTrash />} onPress={() => handleDelete(script)}>Delete</Button>
                             </>
                         }
                 </ModalFooter>