Some frontend fixes wrt parts

frontend/src/pages/RobotDetails.tsx

@@ -21,12 +21,19 @@ interface RobotDetailsResponse {
   bom: Bom[];
 }
 
+interface ExtendedBom {
+  part_id: string;
+  quantity: number;
+  part_name: string;
+}
+
 const RobotDetails = () => {
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
   const { id } = useParams();
   const [show, setShow] = useState(false);
   const [robot, setRobot] = useState<RobotDetailsResponse | null>(null);
+  const [parts, setParts] = useState<ExtendedBom[]>([]);
   const [imageIndex, setImageIndex] = useState(0);
   const [error, setError] = useState<string | null>(null);
 
@@ -38,6 +45,14 @@ const RobotDetails = () => {
       try {
         const robotData = await auth_api.getRobotById(id);
         setRobot(robotData);
+        const parts = robotData.bom.map(async (part) => {
+          return {
+            part_name: (await auth_api.getPartById(part.part_id)).part_name,
+            part_id: part.part_id,
+            quantity: part.quantity,
+          };
+        });
+        setParts(await Promise.all(parts));
       } catch (err) {
         if (err instanceof Error) {
           setError(err.message);
@@ -117,14 +132,13 @@ const RobotDetails = () => {
                 <tr>
                   <th>Name</th>
                   <th>Quantity</th>
-                  <th>Price</th>
                 </tr>
               </thead>
               <tbody>
-                {response.bom.map((part, key) => (
+                {parts.map((part, key) => (
                   <tr key={key}>
                     <td>
-                      <Link to={`/part/${part.part_id}`}>{part.part_id}</Link>
+                      <Link to={`/part/${part.part_id}`}>{part.part_name}</Link>
                     </td>
                     <td>{part.quantity}</td>
                   </tr>

frontend/src/pages/RobotForm.tsx

@@ -1,6 +1,6 @@
-import { api, Bom, Image, Robot } from "hooks/api";
+import { api, Bom, Image, Part, Robot } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
-import React, { ChangeEvent, FormEvent, useState } from "react";
+import React, { ChangeEvent, FormEvent, useEffect, useState } from "react";
 import { Button, Col, Form, Row } from "react-bootstrap";
 
 const RobotForm: React.FC = () => {
@@ -11,6 +11,7 @@ const RobotForm: React.FC = () => {
   const [robot_description, setDescription] = useState<string>("");
   const [robot_bom, setBom] = useState<Bom[]>([]);
   const [robot_images, setImages] = useState<Image[]>([]);
+  const [parts, setParts] = useState<Part[]>([]);
 
   const handleImageChange = (
     index: number,
@@ -65,7 +66,7 @@ const RobotForm: React.FC = () => {
       robot_id: "",
       name: robot_name,
       description: robot_description,
-      owner: "Bob",
+      owner: "",
       bom: robot_bom,
       images: robot_images,
     };
@@ -77,6 +78,18 @@ const RobotForm: React.FC = () => {
     }
   };
 
+  useEffect(() => {
+    const fetchParts = async () => {
+      try {
+        const partsQuery = await auth_api.getParts();
+        setParts(partsQuery);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+    fetchParts();
+  }, []);
+
   return (
     <Row>
       <h2>Add a New Robot</h2>
@@ -148,16 +161,25 @@ const RobotForm: React.FC = () => {
         {robot_bom.map((bom, index) => (
           <Row key={index} className="mb-3">
             <Col md={12}>
-              Part Name:
+              Part:
               <Form.Control
                 className="mb-1"
-                type="text"
+                as="select"
                 placeholder="Part Id: "
                 name="part_id"
                 value={bom.part_id}
                 onChange={(e) => handleBomChange(index, e)}
                 required
-              />
+              >
+                <option value="" disabled>
+                  Select a Part
+                </option>
+                {parts.map((part, index) => (
+                  <option key={index} value={part.part_id}>
+                    {part.part_name}
+                  </option>
+                ))}
+              </Form.Control>
               Quantity:
               <Form.Control
                 className="mb-1"