From 7749d4a594f3501e56424d4875387b3db4219fcc Mon Sep 17 00:00:00 2001
From: Eray C <hi@eri.gg>
Date: Mon, 1 Nov 2021 15:46:21 +0100
Subject: [PATCH] ref: Convert classes to functions on views

---
 src/views/ChooseBread.jsx      |  1 +
 src/views/ChooseMeat.jsx       | 53 +++++++++++++++-------------------
 src/views/ChooseSauces.jsx     | 45 +++++++++++------------------
 src/views/ChooseVegetables.jsx | 48 ++++++++++++++----------------
 src/views/OrderSummary.jsx     | 33 +++++++++------------
 5 files changed, 76 insertions(+), 104 deletions(-)

diff --git a/src/views/ChooseBread.jsx b/src/views/ChooseBread.jsx
index 9cdf7b2..403de4b 100644
--- a/src/views/ChooseBread.jsx
+++ b/src/views/ChooseBread.jsx
@@ -16,6 +16,7 @@ export class ChooseBread extends React.Component {
 
   onBreadSelection = () => {
     const { bread } = this.state;
+    console.log(bread);
     this.setState({ ...this.state, currentOrder: {...this.state.currentOrder, bread: bread.name }});
   };
 
diff --git a/src/views/ChooseMeat.jsx b/src/views/ChooseMeat.jsx
index cba1c8b..beb6bb5 100644
--- a/src/views/ChooseMeat.jsx
+++ b/src/views/ChooseMeat.jsx
@@ -1,4 +1,6 @@
 import * as React from "react";
+import { BrowserRouter, Route, NavLink, Switch } from "react-router-dom";
+
 import "../index.css";
 
 import { IngredientBox } from "../components/IngredientBox";
@@ -6,35 +8,26 @@ import { Button } from "../components/Button";
 
 import { defaultMeats } from "../data";
 
-export class ChooseMeat extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { ...this.props.order };
-  }
-
-  render() {
-    return (
-      <div className="flex flex-col items-center justify-center my-5">
-        <div className="my-3 text-3xl font-bold text-center text-red-1000">
-          Passons à la viande... ou au tofu ?
-        </div>
-        <div className="flex flex-row items-center justify-center mt-5 space-x-4">
-          {defaultMeats.map((meat) => (
-              <IngredientBox
-                name={meat.name}
-                image={meat.image}
-                onSelected={
-                  this.state.meat && this.state.meat === meat.name
-                    ? true
-                    : false
-                }
-              />
-          ))}
-        </div>
-        <div className="my-10">
-          <Button />
-        </div>
+export function ChooseBread(props) {
+  return (
+    <div className="flex flex-col items-center justify-center my-5">
+      <div className="my-3 text-3xl font-bold text-center text-red-1000">
+        Passons à la viande... ou au tofu ?
+      </div>
+      <div className="flex flex-row items-center justify-center mt-5 space-x-4">
+        {defaultMeats.map((meat) => (
+          <IngredientBox
+            name={meat.name}
+            image={meat.image}
+            onSelected={
+              this.state.meat && this.state.meat === meat.name ? true : false
+            }
+          />
+        ))}
+      </div>
+      <div className="my-10">
+        <Button />
       </div>
-    );
-  }
+    </div>
+  );
 }
diff --git a/src/views/ChooseSauces.jsx b/src/views/ChooseSauces.jsx
index 8ed5017..d11e875 100644
--- a/src/views/ChooseSauces.jsx
+++ b/src/views/ChooseSauces.jsx
@@ -8,34 +8,23 @@ import { Button } from "../components/Button";
 
 import { defaultSauces } from "../data";
 
-export class ChooseSauces extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { ...this.props.order };
-  }
-
-  render() {
-    const classNames = [...buttonClassNames, "border-red-1000", "my-5", "font-semibold"]
-    
-    return (
-      <div className="flex flex-col items-center justify-center my-5 text-red-1000">
-        <div className="my-3 text-3xl font-bold text-center">
-          Des sauces pour donner de la couleur à cette magie ?
-        </div>
-        <div className="flex flex-wrap items-center justify-center mt-5 px-80">
-          {defaultSauces.map((veg) => (
-            <div className="m-2">
+export function ChooseSauces(props) {
+  return (
+    <div className="flex flex-col items-center justify-center my-5 text-red-1000">
+      <div className="my-3 text-3xl font-bold text-center">
+        Des sauces pour donner de la couleur à cette magie ?
+      </div>
+      <div className="flex flex-wrap items-center justify-center mt-5 px-80">
+        {defaultSauces.map((veg) => (
+          <div className="m-2">
             <IngredientBox name={veg.name} image={veg.image} />
-            </div>
-          ))}
-        </div>
-        <div className={classNames.join(" ")}>
-          Choisir sans sauce
-        </div>
-        <div className="my-10">
-          <Button />
-        </div>
+          </div>
+        ))}
+      </div>
+      <div className={classNames.join(" ")}>Choisir sans sauce</div>
+      <div className="my-10">
+        <Button />
       </div>
-    );
-  }
+    </div>
+  );
 }
diff --git a/src/views/ChooseVegetables.jsx b/src/views/ChooseVegetables.jsx
index 0c3009b..5c26017 100644
--- a/src/views/ChooseVegetables.jsx
+++ b/src/views/ChooseVegetables.jsx
@@ -8,32 +8,28 @@ import { Button } from "../components/Button";
 
 import { defaultVegetables } from "../data";
 
-export class ChooseVegetables extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { ...this.props.order };
-  }
+export function ChooseVegetables(props) {
+  const classNames = [
+    ...buttonClassNames,
+    "border-red-1000",
+    "my-5",
+    "font-semibold",
+  ];
 
-  render() {
-    const classNames = [...buttonClassNames, "border-red-1000", "my-5", "font-semibold"]
-    
-    return (
-      <div className="flex flex-col items-center justify-center my-5 text-red-1000">
-        <div className="my-3 text-3xl font-bold text-center">
-          Des crudités pour votre merveille ?
-        </div>
-        <div className="flex flex-row items-center justify-center mt-5 space-x-4">
-          {defaultVegetables.map((veg) => (
-            <IngredientBox name={veg.name} image={veg.image} />
-          ))}
-        </div>
-        <div className={classNames.join(" ")}>
-          Je continue sans crudités
-        </div>
-        <div className="my-10">
-          <Button />
-        </div>
+  return (
+    <div className="flex flex-col items-center justify-center my-5 text-red-1000">
+      <div className="my-3 text-3xl font-bold text-center">
+        Des crudités pour votre merveille ?
       </div>
-    );
-  }
+      <div className="flex flex-row items-center justify-center mt-5 space-x-4">
+        {defaultVegetables.map((veg) => (
+          <IngredientBox name={veg.name} image={veg.image} />
+        ))}
+      </div>
+      <div className={classNames.join(" ")}>Je continue sans crudités</div>
+      <div className="my-10">
+        <Button />
+      </div>
+    </div>
+  );
 }
diff --git a/src/views/OrderSummary.jsx b/src/views/OrderSummary.jsx
index 9c500da..02597fa 100644
--- a/src/views/OrderSummary.jsx
+++ b/src/views/OrderSummary.jsx
@@ -4,25 +4,18 @@ import "../index.css";
 
 import { Button } from "../components/Button";
 
-export class OrderSummary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { ...this.props.order }
-  }
-
-  render() {
-    return (
-      <div className="flex flex-col items-center justify-center my-5">
-        <div className="my-3 text-3xl font-bold text-center text-red-1000">
-          Récapitulons votre commande...
-        </div>
-        <div className="flex flex-row items-center justify-center mt-5 space-x-4">
-          {this.state.currentOrder.bread}
-        </div>
-        <div className="my-10">
-          <Button />
-        </div>
+export function OrderSummary(props) {
+  return (
+    <div className="flex flex-col items-center justify-center my-5">
+      <div className="my-3 text-3xl font-bold text-center text-red-1000">
+        Récapitulons votre commande...
+      </div>
+      <div className="flex flex-row items-center justify-center mt-5 space-x-4">
+        {this.state.currentOrder.bread}
+      </div>
+      <div className="my-10">
+        <Button />
       </div>
-    );
-  }
+    </div>
+  );
 }