From f68cb6fb2849bf30d87807430419564e2830d328 Mon Sep 17 00:00:00 2001 From: Dennis Chen Date: Thu, 6 Jun 2024 15:19:43 -0700 Subject: [PATCH 1/3] remove price heading from table --- frontend/src/pages/RobotDetails.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/pages/RobotDetails.tsx b/frontend/src/pages/RobotDetails.tsx index 3b5a8a81..ee567ba8 100644 --- a/frontend/src/pages/RobotDetails.tsx +++ b/frontend/src/pages/RobotDetails.tsx @@ -117,7 +117,6 @@ const RobotDetails = () => { Name Quantity - Price From 4eac5ef89d6a3cd9cf21855f12f1efe180c727d8 Mon Sep 17 00:00:00 2001 From: Dennis Chen Date: Thu, 6 Jun 2024 17:46:45 -0700 Subject: [PATCH 2/3] robot links to part actually have part name too --- frontend/src/pages/RobotDetails.tsx | 21 ++++++++++++++++++--- frontend/src/pages/RobotForm.tsx | 27 ++++++++++++++++++++++----- 2 files changed, 40 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/RobotDetails.tsx b/frontend/src/pages/RobotDetails.tsx index ee567ba8..b17d110b 100644 --- a/frontend/src/pages/RobotDetails.tsx +++ b/frontend/src/pages/RobotDetails.tsx @@ -1,4 +1,4 @@ -import { api, Bom } from "hooks/api"; +import { api, Bom, Part } from "hooks/api"; import { useAuthentication } from "hooks/auth"; import { useEffect, useState } from "react"; import { @@ -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(null); + const [parts, setParts] = useState([]); const [imageIndex, setImageIndex] = useState(0); const [error, setError] = useState(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); @@ -120,10 +135,10 @@ const RobotDetails = () => { - {response.bom.map((part, key) => ( + {parts.map((part, key) => ( - {part.part_id} + {part.part_name} {part.quantity} diff --git a/frontend/src/pages/RobotForm.tsx b/frontend/src/pages/RobotForm.tsx index 616ab77a..bfb5fc83 100644 --- a/frontend/src/pages/RobotForm.tsx +++ b/frontend/src/pages/RobotForm.tsx @@ -1,7 +1,8 @@ import { api, Bom, Image, 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"; +import {Part} from "hooks/api"; const RobotForm: React.FC = () => { const auth = useAuthentication(); @@ -11,6 +12,7 @@ const RobotForm: React.FC = () => { const [robot_description, setDescription] = useState(""); const [robot_bom, setBom] = useState([]); const [robot_images, setImages] = useState([]); + const [parts, setParts] = useState([]); const handleImageChange = ( index: number, @@ -65,7 +67,7 @@ const RobotForm: React.FC = () => { robot_id: "", name: robot_name, description: robot_description, - owner: "Bob", + owner: "", bom: robot_bom, images: robot_images, }; @@ -77,6 +79,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 (

Add a New Robot

@@ -148,16 +162,19 @@ const RobotForm: React.FC = () => { {robot_bom.map((bom, index) => ( - Part Name: + Part: handleBomChange(index, e)} required - /> + > + + {parts.map((part, index) => )} + Quantity: Date: Thu, 6 Jun 2024 17:49:35 -0700 Subject: [PATCH 3/3] format --- frontend/src/pages/RobotDetails.tsx | 2 +- frontend/src/pages/RobotForm.tsx | 13 +++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/RobotDetails.tsx b/frontend/src/pages/RobotDetails.tsx index b17d110b..aebdf3c3 100644 --- a/frontend/src/pages/RobotDetails.tsx +++ b/frontend/src/pages/RobotDetails.tsx @@ -1,4 +1,4 @@ -import { api, Bom, Part } from "hooks/api"; +import { api, Bom } from "hooks/api"; import { useAuthentication } from "hooks/auth"; import { useEffect, useState } from "react"; import { diff --git a/frontend/src/pages/RobotForm.tsx b/frontend/src/pages/RobotForm.tsx index bfb5fc83..1deaf800 100644 --- a/frontend/src/pages/RobotForm.tsx +++ b/frontend/src/pages/RobotForm.tsx @@ -1,8 +1,7 @@ -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, useEffect, useState } from "react"; import { Button, Col, Form, Row } from "react-bootstrap"; -import {Part} from "hooks/api"; const RobotForm: React.FC = () => { const auth = useAuthentication(); @@ -172,8 +171,14 @@ const RobotForm: React.FC = () => { onChange={(e) => handleBomChange(index, e)} required > - - {parts.map((part, index) => )} + + {parts.map((part, index) => ( + + ))} Quantity: