add see-all-products from database

frontend/src/Category.ts

@@ -0,0 +1 @@
+export type Category =  "Fruit" | "Sweet" | "Vegetables" | "Meat" | "Fish" | "Drink"

frontend/src/Product.ts

@@ -0,0 +1,8 @@
+import {Category} from "./Category.ts";
+
+export type Product = {
+    id: number,
+    name: string,
+    category: Category,
+    price:number
+}

frontend/src/Status.ts

@@ -0,0 +1 @@
+export type Status = "available" | "not_available"

frontend/src/components/ProductCard.tsx

@@ -1,9 +1,25 @@
 import "./ProductCard.css"
+import {Product} from "../Product.ts";
 
-export default function ProductCard() {
+type Props = {
+    product: Product;
+/*    id: number,
+    name: string,
+    category: Category,
+    status: Status,
+    price: number*/
+}
+
+export default function ProductCard(props : Props) {
     return (
-        <>
-        <p>product</p>
-        </>
-    );
+        <div>
+            <p>product</p>
+
+            <p>"Id: "{props.product.id}</p>
+            <p>"Name: "{props.product.name}</p>
+            <p>"Category: "{props.product.category}</p>
+            <p>"Price: "{props.product.price}</p>
+
+        </div>
+    )
 }

frontend/src/components/ProductView.tsx

@@ -1,11 +1,32 @@
 import "./ProductView.css"
 import ProductCard from "./ProductCard.tsx";
+import axios from "axios";
+import {useEffect, useState} from "react";
+import {Product} from "../Product.ts";
 
 export default function ProductView() {
+
+    const [products,setProducts] = useState<Product[]>([])
+
+    function fetchAllProducts(){
+        axios({
+            method:"GET",
+            url:"api/store",
+
+        })
+            .then((response)=>{setProducts(response.data)})
+    }
+
+    useEffect(() => {
+        fetchAllProducts();
+    }, []);
+
     return (
-        <>
-            <p>products:</p>
-            <ProductCard/>
-        </>
+        <div>
+            <p>Products : </p>
+            {
+            products.map((product)=>{return <ProductCard product={product} key={product.id}/>})
+            }
+        </div>
     );
 };

frontend/vite.config.ts

@@ -4,4 +4,10 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server:{
+    proxy:{
+      '/api': {
+        target: 'http://localhost:8080'
+      }
+    }}
 })