Task-3: add APIendpoint for Products

README.md

@@ -72,6 +72,6 @@ Remove an entire stack configured in `serverless.yml` via CloudFormation.
 
 # Links to site:
 
-link to S3-website - [arn:aws:s3:::awslessons-bucket-first](http://awslessons-bucket.s3-website-eu-west-1.amazonaws.com)
+link to S3-website - http://awslessons-bucket.s3-website-eu-west-1.amazonaws.com
 
-CloudFront URL - https://d1ek9hnz184qjk.cloudfront.net/
+CloudFront URL - https://d3guymdkijhydk.cloudfront.net/

src/components/pages/PageProducts/components/Products.tsx

@@ -6,10 +6,10 @@ import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { formatAsPrice } from "~/utils/utils";
 import AddProductToCart from "~/components/AddProductToCart/AddProductToCart";
-import { useAvailableProducts } from "~/queries/products";
+import { useAllProducts } from "~/queries/products";
 
 export default function Products() {
-  const { data = [], isLoading } = useAvailableProducts();
+  const { data = [], isLoading } = useAllProducts();
 
   if (isLoading) {
     return <Typography>Loading...</Typography>;
@@ -26,10 +26,10 @@ export default function Products() {
             <CardMedia
               sx={{ pt: "56.25%" }}
               image={`https://source.unsplash.com/random?sig=${index}`}
-              title="Image title"
+              title='Image title'
             />
             <CardContent sx={{ flexGrow: 1 }}>
-              <Typography gutterBottom variant="h5" component="h2">
+              <Typography gutterBottom variant='h5' component='h2'>
                 {product.title}
               </Typography>
               <Typography>{formatAsPrice(product.price)}</Typography>

src/constants/apiPaths.ts

@@ -4,6 +4,7 @@ const API_PATHS = {
   import: "https://.execute-api.eu-west-1.amazonaws.com/dev",
   bff: "https://.execute-api.eu-west-1.amazonaws.com/dev",
   cart: "https://.execute-api.eu-west-1.amazonaws.com/dev",
+  products: "https://t37zz0xgq4.execute-api.eu-west-1.amazonaws.com",
 };
 
 export default API_PATHS;

src/queries/products.ts

@@ -16,6 +16,15 @@ export function useAvailableProducts() {
   );
 }
 
+export function useAllProducts() {
+  return useQuery<AvailableProduct[], AxiosError>("products", async () => {
+    const res = await axios.get<AvailableProduct[]>(
+      `${API_PATHS.products}/products`
+    );
+    return res.data;
+  });
+}
+
 export function useInvalidateAvailableProducts() {
   const queryClient = useQueryClient();
   return React.useCallback(