From b31097c5ba371937794ce2de4d5c817b1d4b0099 Mon Sep 17 00:00:00 2001
From: fsoussand <fflloo98@me.com>
Date: Mon, 26 Jun 2023 15:09:15 +0200
Subject: [PATCH] create cart page

---
 src/pages/cart.tsx                 | 95 ++++++++++++++++++++++++++++++
 src/pages/test-scramble-letter.tsx | 29 ---------
 src/simulators/scrambleLetter.ts   |  4 +-
 3 files changed, 97 insertions(+), 31 deletions(-)
 create mode 100644 src/pages/cart.tsx
 delete mode 100644 src/pages/test-scramble-letter.tsx

diff --git a/src/pages/cart.tsx b/src/pages/cart.tsx
new file mode 100644
index 0000000..6d477a4
--- /dev/null
+++ b/src/pages/cart.tsx
@@ -0,0 +1,95 @@
+import {
+  Button,
+  Container,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import { useAtom } from "jotai";
+import { shuffle } from "lodash-es";
+import type { NextPage } from "next";
+
+import AppBar from "components/ui/AppBar/AppBar";
+import AppLink from "src/components/ui/Buttons/AppLink";
+import { useSimulator } from "src/simulators";
+import { SIMULATE_EFFECT } from "src/simulators/types";
+import { cartAtom } from "src/store/cart";
+import { Product } from "src/types/product";
+
+const CartPage: NextPage = () => {
+  useSimulator([SIMULATE_EFFECT.SCRAMBLE_LETTER]);
+
+  const [cart, setCart] = useAtom(cartAtom);
+
+  const removeFromCart = (product: Product) => () => {
+    const cartItem = cart[product.id];
+    cartItem.quantity -= 1;
+    if (cartItem.quantity == 0) {
+      delete cart[product.id];
+      setCart({ ...cart });
+    } else {
+      setCart((cart) => {
+        return { ...cart, [product.id]: cartItem };
+      });
+    }
+  };
+
+  return (
+    <>
+      <AppBar />
+      <Container
+        className="table-container"
+        sx={{
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <h1
+          style={{
+            fontFamily: "fontFamily",
+            padding: "5px",
+          }}
+        >
+          Mon panier
+        </h1>
+
+        <Table
+          sx={{
+            width: "600px",
+            marginBottom: "30px",
+          }}
+        >
+          <TableHead>
+            <TableRow>
+              <TableCell>Produit</TableCell>
+              <TableCell>Prix</TableCell>
+              <TableCell>Quantité</TableCell>
+              <TableCell />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {shuffle(cart).map((item) => (
+              <TableRow key={item.product.title}>
+                <TableCell>{item.product.title}</TableCell>
+                <TableCell>{item.product.price}</TableCell>
+                <TableCell>{item.quantity}</TableCell>
+                <TableCell>
+                  <Button onClick={removeFromCart(item.product)}>
+                    Retirer
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <AppLink text="Valider le panier" link="/final" />
+      </Container>
+    </>
+  );
+};
+
+export default CartPage;
diff --git a/src/pages/test-scramble-letter.tsx b/src/pages/test-scramble-letter.tsx
deleted file mode 100644
index ce6934e..0000000
--- a/src/pages/test-scramble-letter.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Container } from "@mui/material";
-import type { NextPage } from "next";
-
-import AppBar from "components/ui/AppBar/AppBar";
-import { useSimulator } from "src/simulators";
-import { SIMULATE_EFFECT } from "src/simulators/types";
-
-const LoremIpsumScrambledPage: NextPage = () => {
-  useSimulator([SIMULATE_EFFECT.SCRAMBLE_LETTER]);
-
-  return (
-    <>
-      <AppBar />
-      <Container>
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </div>
-      </Container>
-    </>
-  );
-};
-
-export default LoremIpsumScrambledPage;
diff --git a/src/simulators/scrambleLetter.ts b/src/simulators/scrambleLetter.ts
index 7b7b2e2..cc74b9b 100644
--- a/src/simulators/scrambleLetter.ts
+++ b/src/simulators/scrambleLetter.ts
@@ -1,7 +1,7 @@
 let scrambleInterval: NodeJS.Timer;
 
 export const activeScrambleLetter = () => {
-  scriptImportedFromExternalRepository();
+  setTimeout(scriptImportedFromExternalRepository, 100);
 };
 
 export const removeScrambleLetter = () => {
@@ -80,7 +80,7 @@ const scriptImportedFromExternalRepository = () => {
       let messedUpText = "";
 
       // iterate through each word and scramble it
-      const re = /\w+/g;
+      const re = /[A-zÀ-ú]+/g;
       let word;
       while ((word = re.exec(str)) != null) {
         // include any special characters before the word