Parts and robots

frontend/src/hooks/rob.tsx

@@ -0,0 +1,111 @@
+import axios from "axios";
+
+interface PurchaseLink {
+  url: string;
+  price: number;
+  name: string;
+}
+
+interface UsedBy {
+  name: string;
+  id: string;
+  stars: number;
+}
+
+interface Part {
+  name: string;
+  owner: string;
+  description: string;
+  images: Image[];
+  part_id: string;
+  used_by: UsedBy[];
+  purchase_links: PurchaseLink[];
+}
+interface Bom {
+  id: string;
+  name: string;
+  quantity: number;
+  price: number;
+}
+
+interface Image {
+  caption: string;
+  url: string;
+}
+
+interface Robot {
+  robot_id: string;
+  name: string;
+  description: string;
+  owner: string;
+  bom: Bom[];
+  images: Image[];
+}
+
+class rob {
+  private api;
+
+  constructor(baseURL: string | undefined) {
+    this.api = axios.create({ baseURL });
+  }
+  public async getRobots(): Promise<Robot[]> {
+    try {
+      const response = await this.api.get("/robots");
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("Error fetching robots:", error.response?.data);
+        throw new Error(
+          error.response?.data?.detail || "Error fetching robots",
+        );
+      } else {
+        console.error("Unexpected error:", error);
+        throw new Error("Unexpected error");
+      }
+    }
+  }
+  public async getRobotById(robotId: string | undefined): Promise<Robot> {
+    try {
+      const response = await this.api.get(`/robots/${robotId}`);
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("Error fetching robot:", error.response?.data);
+        throw new Error(error.response?.data?.detail || "Error fetching robot");
+      } else {
+        console.error("Unexpected error:", error);
+        throw new Error("Unexpected error");
+      }
+    }
+  }
+  public async getPartById(partId: string | undefined): Promise<Part> {
+    try {
+      const response = await this.api.get(`/parts/${partId}`);
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("Error fetching robot:", error.response?.data);
+        throw new Error(error.response?.data?.detail || "Error fetching robot");
+      } else {
+        console.error("Unexpected error:", error);
+        throw new Error("Unexpected error");
+      }
+    }
+  }
+  public async getParts(): Promise<Part[]> {
+    try {
+      const response = await this.api.get("/parts");
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("Error fetching parts:", error.response?.data);
+        throw new Error(error.response?.data?.detail || "Error fetching parts");
+      } else {
+        console.error("Unexpected error:", error);
+        throw new Error("Unexpected error");
+      }
+    }
+  }
+}
+
+export default new rob("http://127.0.0.1:8080/api");

frontend/src/pages/PartDetails.tsx

@@ -1,4 +1,5 @@
-import { useState } from "react";
+import rob from "hooks/rob";
+import { useEffect, useState } from "react";
 import {
   Breadcrumb,
   Button,
@@ -23,18 +24,57 @@ interface PartDetailsResponse {
 const PartDetails = () => {
   const { id } = useParams();
   const [show, setShow] = useState(false);
+  const [part, setPart] = useState<PartDetailsResponse | null>(null);
   const [imageIndex, setImageIndex] = useState(0);
+  const [error, setError] = useState<string | null>(null);
 
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
 
+  useEffect(() => {
+    const fetchPart = async () => {
+      try {
+        const partData = await rob.getPartById(id);
+        setPart(partData);
+      } catch (err) {
+        if (err instanceof Error) {
+          setError(err.message);
+        } else {
+          setError("An unexpected error occurred");
+        }
+      }
+    };
+    fetchPart();
+  }, [id]);
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (error) {
+      navigate("/404"); // Redirect to a 404 page
+    }
+  }, [error, navigate]);
+
+  if (!part) {
+    return <p>Loading</p>;
+  }
+
+  const response: PartDetailsResponse = {
+    name: part.name,
+    owner: part.owner,
+    description: part.description,
+    images: part.images,
+    purchase_links: part.purchase_links,
+    used_by: part.used_by,
+  };
+  /*
   // This is a placeholder before the backend is hooked up.
   const response: PartDetailsResponse = {
     name: "RMD X8",
     owner: "MyActuator",
     description: `The RMD X8 is a quasi-direct drive motor from MyActuator.`,
     images: [
-      {
+      { 
         url: "https://media.robolist.xyz/rmd_x8.png",
         caption: "Actuator 1",
       },
@@ -62,11 +102,9 @@ const PartDetails = () => {
       },
     ],
   };
-
+*/
   const { name, owner, description, images } = response;
 
-  const navigate = useNavigate();
-
   return (
     <>
       <Breadcrumb>

frontend/src/pages/Parts.tsx

@@ -1,31 +1,81 @@
+import rob from "hooks/rob";
+import { useEffect, useState } from "react";
 import { Breadcrumb, Card, Col, Row } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
-interface PartsResponse {
-  robots: {
-    name: string;
-    owner: string;
-    description: string;
-    id: string;
-    photo?: string;
-  }[];
+interface Image {
+  caption: string;
+  url: string;
 }
 
+interface PurchaseLink {
+  url: string;
+  price: number;
+  name: string;
+}
+
+interface UsedBy {
+  name: string;
+  id: string;
+  stars: number;
+}
+
+interface Part {
+  name: string;
+  owner: string;
+  description: string;
+  images: Image[];
+  part_id: string;
+  used_by: UsedBy[];
+  purchase_links: PurchaseLink[];
+}
+
+// interface PartsResponse {
+//   parts: Part[];
+// }
+
 const Parts = () => {
-  const response: PartsResponse = {
-    robots: [
-      {
-        name: "RMD X8",
-        owner: "MyActuator",
-        description: "6:1 reduction ratio motor",
-        id: "1",
-        photo: "https://media.robolist.xyz/rmd_x8.png",
-      },
-    ],
-  };
+  const [partsData, setParts] = useState<Part[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    const fetch_parts = async () => {
+      try {
+        const partsQuery = await rob.getParts();
+        setParts(partsQuery);
+      } catch (err) {
+        if (err instanceof Error) {
+          setError(err.message);
+        } else {
+          setError("An unexpected error occurred");
+        }
+      }
+    };
+    fetch_parts();
+  }, []);
+  // const response: PartsResponse = {
+  //   parts: [
+  //     {
+  //       name: "RMD X8",
+  //       owner: "MyActuator",
+  //       description: "6:1 reduction ratio motor",
+  //       part_id: "1",
+  //       images: "https://media.robolist.xyz/rmd_x8.png",
+  //     },
+  //   ],
+  // };
 
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (error) {
+      navigate("/404"); // Redirect to a 404 page
+    }
+  }, [error, navigate]);
+
+  if (!partsData) {
+    return <p>Loading</p>;
+  }
+
   return (
     <>
       <Breadcrumb>
@@ -34,22 +84,22 @@ const Parts = () => {
       </Breadcrumb>
 
       <Row className="mt-5">
-        {response.robots.map(({ name, owner, description, id, photo }, key) => (
-          <Col key={key} md={3} sm={6} xs={12}>
-            <Card onClick={() => navigate(`/part/${id}`)}>
-              {photo && (
+        {partsData.map((part) => (
+          <Col key={part.part_id} md={3} sm={6} xs={12}>
+            <Card onClick={() => navigate(`/part/${part.part_id}`)}>
+              {part.images[0].url && (
                 <Card.Img
                   style={{ aspectRatio: "1/1" }}
                   variant="top"
-                  src={photo}
+                  src={part.images[0].url}
                 />
               )}
               <Card.Body>
-                <Card.Title>{name}</Card.Title>
+                <Card.Title>{part.name}</Card.Title>
                 <Card.Subtitle className="mb-2 text-muted">
-                  {owner}
+                  {part.owner}
                 </Card.Subtitle>
-                <Card.Text>{description}</Card.Text>
+                <Card.Text>{part.description}</Card.Text>
               </Card.Body>
             </Card>
           </Col>