interfaces

src/interfaces/colors.ts

@@ -0,0 +1,13 @@
+/**
+ * The response for the /colors endpoint
+ */
+export interface ColorsResponse {
+    filaments: Filament[];
+}
+
+export interface Filament {
+    filament: string;
+    hexColor: string;
+    colorTag: string;
+    profile:  string;
+}

src/interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from './colors';
+export * from './productResponse';

src/interfaces/productResponse.ts

@@ -0,0 +1,6 @@
+/**The response for the /list of products */
+export interface ProductResponse {
+  size: string;
+	stl: string;
+  version: string;
+}

src/pages/Product.tsx

@@ -1,4 +1,5 @@
-import { lazy, Suspense, useState } from "react";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { lazy, Suspense, useEffect, useState } from "react";
 import {
 	Radio,
 	RadioGroup,
@@ -7,6 +8,7 @@ import {
 	ShoppingBagIcon,
 	UserIcon,
 } from "@heroicons/react/24/outline";
+import { ColorsResponse } from '../interfaces';
 const PreviewComponent = lazy(() => import("../components/PreviewComponent"));
 
 const product = {
@@ -35,7 +37,18 @@ function classNames(...classes: string[]) {
 
 export default function ProductPage() {
 	const [selectedColor, setSelectedColor] = useState(product.colors[0]);
+  const [colors, setColors] = useState<ColorsResponse[]>([]);
 
+  const getColors = async () => {
+    const response = await fetch("https://3dprinter-web-api.benhalverson.workers.dev/colors");
+    const data = await response.json() as ColorsResponse[];
+    setColors(data)
+    console.log(colors);
+  };
+
+  useEffect(() => {
+    getColors();
+  }, []);
 	return (
 		<div className="bg-white">
 			<header className="relative bg-white">

src/pages/ProductList.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from "react";
+import { ProductResponse } from '../interfaces';
 
 const BASE_URL = "https://3dprinter-web-api.benhalverson.workers.dev/list";
 
@@ -12,8 +13,6 @@ function ProductList() {
 			const data = (await response.json()) as ProductResponse[];
 
 			setProducts(data);
-			console.log("products", products);
-			console.log("typeof", typeof products);
 			return data;
 		} catch (error) {
 			console.error("error", error);
@@ -34,8 +33,3 @@ function ProductList() {
 
 export default ProductList;
 
-interface ProductResponse {
-  size: string;
-	stl: string;
-  version: string;
-}