Add functionality to set children

kscalelabs · Jul 30, 2024 · b31e842 · b31e842
1 parent 6d8bcb9
commit b31e842
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 13 deletions.
diff --git a/frontend/src/components/ListingForm.tsx b/frontend/src/components/ListingForm.tsx
@@ -1,5 +1,5 @@
 import TCButton from "components/files/TCButton";
-import { Artifact } from "hooks/api";
+import { Artifact, Listing } from "hooks/api";
 import { Theme } from "hooks/theme";
 import { ChangeEvent, Dispatch, FormEvent, SetStateAction } from "react";
 import { Col, Form, Row } from "react-bootstrap";
@@ -8,6 +8,7 @@ import URDFUploadComponent from "./files/UploadURDF";
 
 interface ListingFormProps {
   theme: Theme;
+  listings: Listing[];
   title: string;
   message: string;
   name: string;
@@ -24,6 +25,7 @@ interface ListingFormProps {
 
 const ListingForm: React.FC<ListingFormProps> = ({
   theme,
+  listings,
   title,
   message,
   name,
@@ -76,6 +78,15 @@ const ListingForm: React.FC<ListingFormProps> = ({
     setChildIds(newChildren);
   };
 
+  const handleAddChild = () => {
+    setChildIds([...child_ids, ""]);
+  };
+
+  const handleRemoveChild = (index: number) => {
+    const newChildren = child_ids.filter((_, i) => i !== index);
+    setChildIds(newChildren);
+  };
+
   return (
     <>
       <h1>{title}</h1>
@@ -151,18 +162,47 @@ const ListingForm: React.FC<ListingFormProps> = ({
         <h2>Children</h2>
         {child_ids.map((id, index) => (
           <Row key={index} className="mb-3">
-            <label htmlFor={"child-" + index}>Part</label>
-            <Form.Control
-              id={"child-" + index}
-              className="mb-1"
-              as="select"
-              name="child_id"
-              value={id}
-              onChange={(e) => handleChildrenChange(index, e)}
-              required
-            ></Form.Control>
+            <Col>
+              <label htmlFor={"child-" + index}>Listing</label>
+              <Form.Control
+                id={"child-" + index}
+                className="mb-1"
+                as="select"
+                name="child_id"
+                value={id}
+                onChange={(e) => handleChildrenChange(index, e)}
+                required
+              >
+                <option value="" disabled>
+                  Select a Child
+                </option>
+                {listings.map((listing, index) => (
+                  <option key={index} value={listing.id}>
+                    {listing.name} ({listing.id})
+                  </option>
+                ))}
+              </Form.Control>
+            </Col>
+            <Col md={12}>
+              <TCButton
+                className="mb-2 mt-2"
+                variant="danger"
+                onClick={() => handleRemoveChild(index)}
+              >
+                Remove
+              </TCButton>
+            </Col>
           </Row>
         ))}
+        <Col>
+          <TCButton
+            className="mb-3"
+            variant={theme === "dark" ? "outline-light" : "outline-dark"}
+            onClick={handleAddChild}
+          >
+            Add Child
+          </TCButton>
+        </Col>
         <Col md={12}>
           <TCButton type="submit">Submit</TCButton>
         </Col>

diff --git a/frontend/src/hooks/api.tsx b/frontend/src/hooks/api.tsx
@@ -119,6 +119,13 @@ export class api {
     });
   }
 
+  public async dumpListings(): Promise<Listing[]> {
+    return this.callWrapper(async () => {
+      const response = await this.api.get("/listings/dump");
+      return response.data;
+    });
+  }
+
   public async getUserBatch(userIds: string[]): Promise<Map<string, string>> {
     return this.callWrapper(async () => {
       const params = new URLSearchParams();

diff --git a/frontend/src/pages/EditListingForm.tsx b/frontend/src/pages/EditListingForm.tsx
@@ -23,6 +23,7 @@ const EditListingForm: React.FC = () => {
   const [Listing_id, setListingId] = useState<string>("");
   const [child_ids, setChildIds] = useState<string[]>([]);
   const [URDFId, setURDFId] = useState<string | null>(null);
+  const [listings, setListings] = useState<Listing[]>([]);
 
   const { addAlert } = useAlertQueue();
 
@@ -76,9 +77,22 @@ const EditListingForm: React.FC = () => {
     }
   };
 
+  useEffect(() => {
+    const fetchListings = async () => {
+      try {
+        const listings = await auth_api.dumpListings();
+        setListings(listings);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+    fetchListings();
+  }, []);
+
   return (
     <ListingForm
       theme={theme}
+      listings={listings}
       title="Edit Listing"
       message={message}
       name={name}

diff --git a/frontend/src/pages/NewListing.tsx b/frontend/src/pages/NewListing.tsx
@@ -1,8 +1,8 @@
 import ListingForm from "components/ListingForm";
-import { api, Artifact } from "hooks/api";
+import { api, Artifact, Listing } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useTheme } from "hooks/theme";
-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 const NewListing: React.FC = () => {
@@ -15,6 +15,7 @@ const NewListing: React.FC = () => {
   const [artifacts, setArtifacts] = useState<Artifact[]>([]);
   const [child_ids, setChildIds] = useState<string[]>([]);
   const [URDFId, setURDFId] = useState<string | null>(null);
+  const [listings, setListings] = useState<Listing[]>([]);
 
   const navigate = useNavigate();
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
@@ -43,9 +44,22 @@ const NewListing: React.FC = () => {
     }
   };
 
+  useEffect(() => {
+    const fetchListings = async () => {
+      try {
+        const listings = await auth_api.dumpListings();
+        setListings(listings);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+    fetchListings();
+  }, []);
+
   return (
     <ListingForm
       theme={theme}
+      listings={listings}
       title="Add a New Listing"
       message={message}
       name={name}

diff --git a/store/app/crud/listings.py b/store/app/crud/listings.py
@@ -27,6 +27,9 @@ async def get_listings(self, page: int, search_query: str | None = None) -> tupl
     async def get_user_listings(self, user_id: str, page: int, search_query: str) -> tuple[list[Listing], bool]:
         return await self._list_me(Listing, user_id, page, lambda x: 0, search_query)
 
+    async def dump_listings(self) -> list[Listing]:
+        return await self._list_items(Listing)
+
     async def add_listing(self, listing: Listing) -> None:
         try:
             await asyncio.gather(

diff --git a/store/app/routers/listings.py b/store/app/routers/listings.py
@@ -35,6 +35,13 @@ async def list_listings(
     return await crud.get_listings(page, search_query=search_query)
 
 
+@listings_router.get("/dump")
+async def dump_listings(
+    crud: Annotated[Crud, Depends(Crud.get)],
+) -> list[Listing]:
+    return await crud.dump_listings()
+
+
 @listings_router.get("/me")
 async def list_my_listings(
     crud: Annotated[Crud, Depends(Crud.get)],