MSW Works

gloriag-dev · Jul 29, 2024 · 63bb655 · 63bb655
1 parent 5c4b0b9
commit 63bb655
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 18 deletions.
diff --git a/.env.prod → .env b/.env.prod → .env
diff --git a/src/Routing.tsx b/src/Routing.tsx
@@ -14,7 +14,7 @@ const Routing = () => {
             <Route path="/menu" element={<Menu />} />
             <Route path="/order" element={<Order />} />
             <Route path="/reserved-area" element={<ReservedArea />} />
-            <Route path="/checkout-wizard*" element={<Wizard />} />
+            <Route path="/checkout-wizard/*" element={<Wizard />} />
         </Routes>
     )
 }

diff --git a/src/main.tsx b/src/main.tsx
@@ -7,6 +7,7 @@ import MockWrapper from "./mocks/MockWrapper.tsx"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { Auth0Wrapper } from "./auth/Auth0Wrapper/Auth0Wrapper.tsx"
 import { ThemeProvider, createTheme } from "@mui/material/styles"
+import axios from "axios"
 
 const queryClient = new QueryClient()
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
@@ -38,6 +39,8 @@ export const theme = createTheme({
     }
 })
 
+axios.defaults.baseURL = import.meta.env.VITE_PUBLIC_PATH || "/"
+
 root.render(
     <React.StrictMode>
         <Auth0Wrapper>

diff --git a/src/mocks/MockWrapper.tsx b/src/mocks/MockWrapper.tsx
@@ -9,7 +9,12 @@ const MockWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
             return
         }*/
         const { worker } = await import("./browser")
-        await worker.start()
+        await worker.start({
+            waitUntilReady: true,
+            serviceWorker: {
+                url: import.meta.env.BASE_URL + "/mockServiceWorker.js"
+            }
+        })
         setStarted(true)
     }
 

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -1,7 +1,9 @@
 import { HttpResponse, delay, http } from "msw"
 
+const base = import.meta.env.BASE_URL
+
 export const handlers = [
-    http.get("/districts", async () => {
+    http.get(base + "/districts", async () => {
         return Response.json([
             { district: "Bologna", code: "BO" },
             { district: "Firenze", code: "FI" },
@@ -18,10 +20,10 @@ export const handlers = [
         ])
     }),
 
-    http.post("/address", async () => {
+    http.post(base + "/address", async () => {
         return Response.json({})
     }),
-    http.get("/dishes", async ({ request }) => {
+    http.get(base + "/dishes", async ({ request }) => {
         delay(7000)
         let dishes = [
             {
@@ -31,7 +33,7 @@ export const handlers = [
                 categories: ["lunches", "dinners"],
                 price: 25.99,
                 rating: 1,
-                imgUrl: "/menu-1.jpg"
+                imgUrl: base + "/menu-1.jpg"
             },
             {
                 id: 2,
@@ -40,7 +42,7 @@ export const handlers = [
                 description: "A classic breakfast staple, a fried egg cooked to golden perfection, with a runny yolk that adds a rich and satisfying touch to any meal.",
                 price: 12.99,
                 rating: 4,
-                imgUrl: "/menu-2.jpg"
+                imgUrl: base + "/menu-2.jpg"
             },
             {
                 id: 3,
@@ -49,7 +51,7 @@ export const handlers = [
                 category: ["lunches", "dinners"],
                 price: 23.99,
                 rating: 3,
-                imgUrl: "/menu-3.jpg"
+                imgUrl: base + "/menu-3.jpg"
             },
             {
                 id: 4,
@@ -59,7 +61,7 @@ export const handlers = [
                 category: ["breakfasts", "desserts"],
                 price: 6.99,
                 rating: 4,
-                imgUrl: "/menu-4.jpg"
+                imgUrl: base + "/menu-4.jpg"
             },
             {
                 id: 5,
@@ -68,7 +70,7 @@ export const handlers = [
                 category: ["breakfasts"],
                 price: 10.99,
                 rating: 5,
-                imgUrl: "/menu-5.jpg"
+                imgUrl: base + "/menu-5.jpg"
             },
             {
                 id: 6,
@@ -78,7 +80,7 @@ export const handlers = [
                 category: ["breakfasts"],
                 price: 17.99,
                 rating: 5,
-                imgUrl: "/menu-6.jpg"
+                imgUrl: base + "/menu-6.jpg"
             },
             {
                 id: 7,
@@ -87,7 +89,7 @@ export const handlers = [
                 category: ["lunches", "dinners"],
                 price: 21.6,
                 rating: 4,
-                imgUrl: "/menu-7.jpg"
+                imgUrl: base + "/menu-7.jpg"
             },
             {
                 id: 8,
@@ -96,7 +98,7 @@ export const handlers = [
                 category: ["lunches", "dinners"],
                 price: 31.5,
                 rating: 4,
-                imgUrl: "/menu-8.jpg"
+                imgUrl: base + "/menu-8.jpg"
             },
             {
                 id: 9,
@@ -105,7 +107,7 @@ export const handlers = [
                 category: ["lunches", "dinners", "fastfoods"],
                 price: 5.78,
                 rating: 5,
-                imgUrl: "/menu-9.jpg"
+                imgUrl: base + "/menu-9.jpg"
             },
             {
                 id: 10,
@@ -114,7 +116,7 @@ export const handlers = [
                 category: ["breakfasts", "lunches", "dinners"],
                 price: 13.67,
                 rating: 4,
-                imgUrl: "/menu-10.jpg"
+                imgUrl: base + "/menu-10.jpg"
             },
             {
                 id: 11,
@@ -123,7 +125,7 @@ export const handlers = [
                 category: ["lunches", "dinners"],
                 price: 9.21,
                 rating: 3,
-                imgUrl: "/menu-11.jpg"
+                imgUrl: base + "/menu-11.jpg"
             },
             {
                 id: 12,
@@ -132,7 +134,7 @@ export const handlers = [
                 category: ["breakfasts", "fastfoods"],
                 price: 11.89,
                 rating: 2,
-                imgUrl: "/menu-12.jpg"
+                imgUrl: base + "/menu-12.jpg"
             }
         ]
 

diff --git a/src/pages/Menu/Menu.tsx b/src/pages/Menu/Menu.tsx
@@ -60,7 +60,7 @@ export interface DishComplete {
 }
 
 export const Menu = () => {
-    const [categoryId, setCategoryId] = useState<string>("")
+    const [categoryId, setCategoryId] = useState<string>()
     const { favouriteIds, toggleFavouriteDish } = useDishStore()
     const { addToOrder, removeFromOrder, order } = useOrderStore()
     const fetchDishes = async (): Promise<DishComplete[]> => {