From 39a0de480015013955c915428e97498b087657e3 Mon Sep 17 00:00:00 2001 From: Eray C Date: Tue, 2 Nov 2021 09:59:03 +0100 Subject: [PATCH] ref: Delete unused files --- src/App.jsx | 135 +++++++++++++++++++++++-------- src/App.test.js | 8 -- src/Order.jsx | 131 ------------------------------ src/assets/logo.svg | 11 ++- src/components/Button.jsx | 23 +++--- src/components/CartDisplay.jsx | 51 ++++++++++++ src/components/IngredientBox.jsx | 18 +++-- src/components/Loading.jsx | 17 ++++ src/data.jsx | 13 +-- src/index.css | 53 ------------ src/setupTests.js | 5 -- src/views/ChooseBread.jsx | 34 -------- src/views/ChooseMeat.jsx | 34 -------- src/views/ChooseSauces.jsx | 35 -------- src/views/ChooseVegetables.jsx | 35 -------- src/views/OrderSummary.jsx | 21 ----- 16 files changed, 208 insertions(+), 416 deletions(-) delete mode 100644 src/App.test.js delete mode 100644 src/Order.jsx create mode 100644 src/components/CartDisplay.jsx create mode 100644 src/components/Loading.jsx delete mode 100644 src/setupTests.js delete mode 100644 src/views/ChooseBread.jsx delete mode 100644 src/views/ChooseMeat.jsx delete mode 100644 src/views/ChooseSauces.jsx delete mode 100644 src/views/ChooseVegetables.jsx delete mode 100644 src/views/OrderSummary.jsx diff --git a/src/App.jsx b/src/App.jsx index 4fc6ea5..3667ff8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,70 +1,86 @@ -import * as React from "react"; +import * as React from "react"; import "./index.css"; // Components -// import { Loading } from "./components/Loading"; +import { Loading } from "./components/Loading"; import { Navbar } from "./components/Navbar"; import { IngredientBox } from "./components/IngredientBox"; import { Button } from "./components/Button"; import { defaultOrder, defaultBreads, defaultMeats, defaultVegetables, defaultSauces } from "./data"; +import { CartDisplay } from "./components/CartDisplay"; function App() { + const [allOrders, setAllOrders] = React.useState([]); const [currentOrder, setCurrentOrder] = React.useState(defaultOrder); + const [isLoading, setIsLoading] = React.useState(true); const [timerHandle, setTimerHandle] = React.useState(null); - const [orderDisplay, setOrderDisplay] = React.useState({bread: true, meat: false, vegetables: false, sauces: false}); - const [orderLimited, setOrderLimited] = React.useState({"vegetables": { limited: false, amount: 3}, "sauces": { limited: false, amount: 2}}); + + const [orderDisplay, setOrderDisplay] = React.useState({summary: false, bread: true, meat: false, vegetables: false, sauces: false}); + const [orderLimited, setOrderLimited] = React.useState({"vegetables": { limited: false, amount: 4}, "sauces": { limited: false, amount: 2}}); React.useEffect(() => { - setTimerHandle(setTimeout(() => setIsLoading(false), 2500)); + setTimerHandle(setTimeout(() => setIsLoading(false), 3000)); return () => { clearTimeout(timerHandle); setTimerHandle(null); }; }, [setTimerHandle]); - if (isLoading) { return (
its loading
); } + if (isLoading) { return ; } + + if (allOrders.length > 0) { return ; } const handleOnSelected = (ingredient, value, display) => { const newOrder = {...currentOrder}; - newOrder[ingredient] = value; + newOrder[ingredient] = newOrder[ingredient] !== value ? value : null; setCurrentOrder(newOrder); if (display) { handleDisplay(display.hide, display.show); } } const handleOnAdded = (ingredient, value) => { - if (handleOrderLimited(ingredient)) { return false }; + if (handleOrderLimited(ingredient) && !currentOrder[ingredient].includes(value)) { return false }; const newOrder = {...currentOrder}; - newOrder[ingredient].push(value); + newOrder[ingredient].includes(value) ? newOrder[ingredient] = newOrder[ingredient].filter(e => e !== value) : newOrder[ingredient].push(value); setCurrentOrder(newOrder); + handleOrderLimited(ingredient); } const handleOrderLimited = (ingredient) => { const newLimit = {...orderLimited}; if (currentOrder[ingredient].length === orderLimited[ingredient].amount) { - console.log("limited: ", currentOrder[ingredient].length, orderLimited[ingredient].amount); newLimit[ingredient].limited = true; - setOrderLimited(newLimit); - return true; + } else { + newLimit[ingredient].limited = false; } - // console.log("not limited:", currentOrder[ingredient].length, orderLimited[ingredient].amount); - return false; + setOrderLimited(newLimit); + return newLimit[ingredient].limited; } const handleDisplay = (toHide, toShow) => { // Used to toggle the display of vegetables & sauces const canDisplay = {...orderDisplay}; - canDisplay[toHide] = false; - canDisplay[toShow] = true; + if (toHide) { + if (toHide === "ALL") { + canDisplay.map(e => e = false); } + else { canDisplay[toHide] = false }; + }; + if (toShow) { canDisplay[toShow] = true; }; setOrderDisplay(canDisplay); } + const handleOrderEnded = () => { + // Used to push an order that has been completed to the orders array + const current = {...currentOrder, price: 6.99}; + const all = [...allOrders]; + setAllOrders([...all, current]); + } + return (
{console.log(currentOrder)} - {console.log(orderLimited)} {/* Choose Bread */}
Choisissez le pain +
+ Vous avez le choix entre différents pains pour un plaisir unique. +
@@ -91,6 +110,9 @@ function App() {
Passons à la viande... ou au tofu ? +
+ Le choix peut-être difficile, mais vous ne serez pas déçu ! +
@@ -100,9 +122,7 @@ function App() {
))}
-
handleDisplay('meat', 'bread')}> -
+
handleDisplay('meat', 'bread')}>
{/* Choose Vegetables */} @@ -111,41 +131,88 @@ function App() { }>
Des crudités pour votre merveille ? +
+ Vous pouvez en choisir jusqu'à 3. Ou rien. Vous décidez ! +
{defaultVegetables.map((veg) => (
handleOnAdded('vegetables', veg.name)}> - handleOrderLimited('vegetables')} /> +
))}
-
handleDisplay('vegetables', 'meat')}> -
- -
handleDisplay('vegetables', 'sauces')}> -
+
handleDisplay('vegetables', 'sauces')}>
{/* Choose Sauces */}
+ `flex flex-col items-center justify-center my-5 ${orderDisplay.sauces && !orderDisplay.vegetables ? ' block' : ' hidden'}` + }>
Des sauces pour donner de la couleur à cette magie ? +
+ Deux sauces maximum. Pas plus. Nous sommes là pour déguster la viande ! +
- {defaultSauces.map((veg) => ( -
- + {defaultSauces.map((s) => ( +
handleOnAdded('sauces', s.name)}> +
))}
-
+
handleDisplay('sauces', 'summary')}>
+
+ + + {/* Order Summary */} +
+
+ On récapitule tout ça ! +
+ Pas de panique, vous pouvez toujours modifier votre choix en revenant en arrière. +
+
+ +
+ e.name === currentOrder.bread).image : defaultBreads[0].image} + /> + e.name === currentOrder.meat).image : defaultMeats[0].image} + /> + {currentOrder.vegetables.map((v) => ( + e.name === v).image} /> + ))} + {currentOrder.sauces.map((s) => ( + e.name === s).image} /> + ))} +
+
handleOrderEnded()}> +
diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/Order.jsx b/src/Order.jsx deleted file mode 100644 index 3356ebf..0000000 --- a/src/Order.jsx +++ /dev/null @@ -1,131 +0,0 @@ -// import { useState } from "react"; -// import * as Data from "./data"; -// // import { BrowserRouter, Route, NavLink, Switch } from "react-router-dom"; - -// export function OrderForm(props) { -// const ingredients = { -// sauces: [...Data.defaultBreads], -// meats: [...Data.defaultMeats], -// vegetables: [...Data.defaultVegetables], -// sauces: [...Data.defaultSauces], -// }; - -// const [selectedProducts, setSelectedProducts] = useState( -// ...Data.defaultOrder -// ); - -// const [bread, setBread] = useState(""); -// const [meat, setMeat] = useState(""); -// const [vegetables, setVegetables] = useState(""); -// const [sauces, setSauces] = useState(""); - -// // const [checkedState, setCheckedState] = useState( -// // new Array(ingredients.length).fill(false) -// // ); - -// const { onSubmit } = props; - -// // const handleOnChange = (position) => { -// // const updatedCheckedState = checkedState.map((item, index) => -// // index === position ? true : item -// // ); - -// const handleOnSelected = (productSelected) => { -// const updatedSelectedProducts = selectedProducts.map((initialProduct) => -// initialProduct === productSelected.name ? productSelected = productSelected.value : false -// ); - -// setSelectedProducts(updatedSelectedProducts); - -// // setCheckedState(updatedCheckedState); -// // const Finishedsauces = updatedCheckedState.reduce( -// // (sauce, currentState, index) => { -// // if (currentState === false) { -// // switch (ingredients.vegetables) { -// // case "salade": -// // setSalade(""); -// // break; -// // case "tomate": -// // setTomate(""); -// // break; -// // case "oignon": -// // setOignon(""); -// // break; -// // default: -// // console.log("aucun changement"); -// // } -// // } -// // if (currentState === true) { -// // switch (ingredients[index].categorie) { -// // case "pains": -// // setPain(ingredients[index].name); -// // break; -// // case "viandes": -// // setViande(ingredients[index].name); -// // break; -// // case "salade": -// // setSalade(ingredients[index].name); -// // break; -// // case "tomate": -// // setTomate(ingredients[index].name); -// // break; -// // case "oignon": -// // setOignon(ingredients[index].name); -// // break; -// // case "sauces": -// // if (sauce.length < 2) { -// // setSauces((sauce = [...sauce, " " + ingredients[index].name])); -// // } -// // return sauce; -// // default: -// // console.log("aucun changement"); -// // } -// // return sauce; -// // } -// // return sauce; -// // }, -// // ); - -// setSauces(Finishedsauces); -// }; - -// const handleSubmit = (event) => { -// event.preventDefault(); -// onSubmit({ pain, viande, salade, tomate, oignon, sauces }); -// }; - -// return ( -//
    -//
    -// {ingredients.map(({ name, categorie, image }, index) => { -// return ( -//
  • -//
    -//
    -// handleOnChange(index)} -// /> -// -//
    -//
    -//
    • -// ); -// })} -// -//
    -//
  • -//
    -//
    Total:
    -//
    {sauces}
    -//
    -//
    • -//
-// ); -// } -// export default OrderForm; diff --git a/src/assets/logo.svg b/src/assets/logo.svg index 9dfc1c0..f322e43 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1 +1,10 @@ - \ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/src/components/Button.jsx b/src/components/Button.jsx index 9431a37..a6dd2e5 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -2,32 +2,27 @@ import * as React from "react"; import "../index.css"; -export const buttonClassNames = [ +export const defaultButtonClassNames = [ "px-4", "py-2", - "transition", - "duration-500", "ease-in-out", - "transform", - "border-2", "rounded-md", - "border-opacity-40", - "hover:bg-opacity-80", + "transition", +]; + +export const defaultButtonAnimationClassNames = [ + "hover:bg-opacity-50", "hover:-translate-y-1", "hover:scale-110", "hover:border-opacity-100", -]; +] export class Button extends React.Component { - // constructor(props) { - // super(props); - // }; - render() { const { text } = this.props; return ( -
-
{text}
+
+
{text}
); } diff --git a/src/components/CartDisplay.jsx b/src/components/CartDisplay.jsx new file mode 100644 index 0000000..7616aac --- /dev/null +++ b/src/components/CartDisplay.jsx @@ -0,0 +1,51 @@ +import * as React from "react"; + +import { Navbar } from "./Navbar"; + +import "../index.css"; + +export class CartDisplay extends React.Component { + render() { + const { orders } = this.props; + return ( +
+ +
+
+ Contenu de votre panier +
+ Vous y êtes presque ! Vérifiez votre panier avant de passer + commande. Modifiez les quantités si nécessaire. +
+
+ +
+ {orders.map((o, index) => ( +
+
+ Commande #{index + 1} +
+
+ {o.bread}, {o.meat},{" "} + {o.vegetables.length > 0 + ? `${o.vegetables.length} crudités` + : `Sans crudités`} + ,{" "} + {o.vegetables.length > 0 + ? `${o.sauces.length} sauces` + : `Sans sauce`} +
+
+ {o.price}€ +
+
+ ))} +
+
+ Total: {orders.reduce((acc, o) => acc + o.price, 0)}€ +
+
+
+ ); + } +} diff --git a/src/components/IngredientBox.jsx b/src/components/IngredientBox.jsx index e137329..cb5cb46 100644 --- a/src/components/IngredientBox.jsx +++ b/src/components/IngredientBox.jsx @@ -1,15 +1,23 @@ import * as React from "react"; import "../index.css"; -import { buttonClassNames } from "./Button"; +import { defaultButtonClassNames, defaultButtonAnimationClassNames } from "./Button"; export class IngredientBox extends React.Component { render() { - const { name, image, onSelected, isDisabled } = this.props; + const { name, image, onSelected, isDisabled} = this.props; const className = [ - ...buttonClassNames, - onSelected ? "border-green-500" : "border-red-1000", - isDisabled ? "cursor-not-allowed" : "cursor-pointer" + ...defaultButtonClassNames, + "duration-500", + "transform", + "border-2", + "border-opacity-40", + onSelected + ? "border-green-500 bg-green-300 bg-opacity-30" + : "border-red-1000", + isDisabled + ? "cursor-not-allowed text-opacity-30" + : defaultButtonAnimationClassNames.join(" ") + " cursor-pointer" ]; return ( diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx new file mode 100644 index 0000000..e86e953 --- /dev/null +++ b/src/components/Loading.jsx @@ -0,0 +1,17 @@ +import * as React from "react"; + +import "../index.css"; +import logo from "../assets/logo.svg"; + +export class Loading extends React.Component { + render() { + return ( +
+ logo +
+ Le saviez-vous ? Un mélange de dinde et de poulet est utilisé pour la viande car la viande d'agneau a un goût très fort par la population occidentale. +
+
+ ); + } + } \ No newline at end of file diff --git a/src/data.jsx b/src/data.jsx index 7f3ae01..1c7de27 100644 --- a/src/data.jsx +++ b/src/data.jsx @@ -8,6 +8,7 @@ export const defaultOrder = { export const defaultBreads = [ { name: "Pain", image: "https://gcdn.pbrd.co/images/CHPZLamyCwSs.png" }, { name: "Galette", image: "https://gcdn.pbrd.co/images/AE1S51pHMKtD.png" }, + { name: "Baguette", image: "https://gcdn.pbrd.co/images/95MekreOBKts.png" }, ]; export const defaultMeats = [ @@ -22,10 +23,10 @@ export const defaultVegetables = [ ]; export const defaultSauces = [ - { name: "Blanche", image: "https://gcdn.pbrd.co/images/CHPZLamyCwSs.png" }, - { name: "Harissa", image: "https://gcdn.pbrd.co/images/AE1S51pHMKtD.png" }, - { name: "Andalouse", image: "https://gcdn.pbrd.co/images/CHPZLamyCwSs.png" }, - { name: "Barbecue", image: "https://gcdn.pbrd.co/images/AE1S51pHMKtD.png" }, - { name: "Ketchup", image: "https://gcdn.pbrd.co/images/CHPZLamyCwSs.png" }, - { name: "Curry", image: "https://gcdn.pbrd.co/images/AE1S51pHMKtD.png" }, + { name: "Blanche", image: "https://gcdn.pbrd.co/images/5enfiVpzAAGc.png" }, + { name: "Harissa", image: "https://gcdn.pbrd.co/images/pXqb9FjQeX2i.png" }, + { name: "Andalouse", image: "https://gcdn.pbrd.co/images/KXH7YKGOFFFN.png" }, + { name: "Barbecue", image: "https://gcdn.pbrd.co/images/vEvGmOCCSQ7L.png" }, + { name: "Ketchup", image: "https://gcdn.pbrd.co/images/BzHEEoEWux3V.png" }, + { name: "Curry", image: "https://gcdn.pbrd.co/images/94iPvmWSSqmV.png" }, ]; diff --git a/src/index.css b/src/index.css index d4b4e80..b5c61c9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,56 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -/* .App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} */ diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/src/views/ChooseBread.jsx b/src/views/ChooseBread.jsx deleted file mode 100644 index cec86a0..0000000 --- a/src/views/ChooseBread.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from "react"; - -import "../index.css"; - -import { IngredientBox } from "../components/IngredientBox"; -import { OrderSummary } from "./OrderSummary"; -import { Button } from "../components/Button"; -import { defaultBreads } from "../data"; - -// import { selectedProducts } from "../Order"; - -export function ChooseBread(props) { - - return ( - - ); - } diff --git a/src/views/ChooseMeat.jsx b/src/views/ChooseMeat.jsx deleted file mode 100644 index bedbee4..0000000 --- a/src/views/ChooseMeat.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from "react"; -// import { BrowserRouter, Route, NavLink, Switch } from "react-router-dom"; - -import "../index.css"; - -import { IngredientBox } from "../components/IngredientBox"; -import { meat, setMeat } from "../Order"; -import { Button } from "../components/Button"; - -import { defaultMeats } from "../data"; - -export function ChooseMeat(props) { - return ( -
-
- Passons à la viande... ou au tofu ? -
-
- {defaultMeats.map((meat) => ( - - ))} -
-
-
-
- ); -} diff --git a/src/views/ChooseSauces.jsx b/src/views/ChooseSauces.jsx deleted file mode 100644 index 8bea8b6..0000000 --- a/src/views/ChooseSauces.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from "react"; - -import "../index.css"; -import { Button, buttonClassNames } from "../components/Button"; -import { IngredientBox } from "../components/IngredientBox"; - -// import { selectedProducts, setSelectedProducts } from "../Order"; -// import { sauces, setSauces } from "../Order"; - -import { defaultSauces } from "../data"; - -export function ChooseSauces(props) { - - return ( -
- -
- Des sauces pour donner de la couleur à cette magie ? -
- -
- {defaultSauces.map((s) => ( -
- -
- ))} -
- -
Choisir sans sauce
-
-
-
- ); -} diff --git a/src/views/ChooseVegetables.jsx b/src/views/ChooseVegetables.jsx deleted file mode 100644 index 5c26017..0000000 --- a/src/views/ChooseVegetables.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from "react"; - -import "../index.css"; -import { buttonClassNames } from "../components/Button"; - -import { IngredientBox } from "../components/IngredientBox"; -import { Button } from "../components/Button"; - -import { defaultVegetables } from "../data"; - -export function ChooseVegetables(props) { - const classNames = [ - ...buttonClassNames, - "border-red-1000", - "my-5", - "font-semibold", - ]; - - return ( -
-
- Des crudités pour votre merveille ? -
-
- {defaultVegetables.map((veg) => ( - - ))} -
-
Je continue sans crudités
-
-
-
- ); -} diff --git a/src/views/OrderSummary.jsx b/src/views/OrderSummary.jsx deleted file mode 100644 index 02597fa..0000000 --- a/src/views/OrderSummary.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from "react"; - -import "../index.css"; - -import { Button } from "../components/Button"; - -export function OrderSummary(props) { - return ( -
-
- Récapitulons votre commande... -
-
- {this.state.currentOrder.bread} -
-
-
-
- ); -}