ref: Convert classes to functions on views

eri · Nov 1, 2021 · 7749d4a · 7749d4a
1 parent 23e8a8b
commit 7749d4a
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 104 deletions.
diff --git 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
@@ -1,40 +1,33 @@
 import * as React from "react";
+import { BrowserRouter, Route, NavLink, Switch } from "react-router-dom";
+
 import "../index.css";
 
 import { IngredientBox } from "../components/IngredientBox";
 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
@@ -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
@@ -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
@@ -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>
+  );
 }