ساخت دکمه های تایید و کنسل کردن سفارش

ساخت کامپوننت دکمه های تایید و کنسل کردن سفارش

تا اینجای کار به خوبی جلو آمده ایم و چیزهای زیادی یاد گرفته ایم. در این مرحله نوبت به اضافه کردن دکمه های تایید و کنسل کردن سفارش درون OrderSummary است بنابراین به فایل OrderSummary.js رفته و دو دکمه به آن اضافه می کنیم:

    return (
        <Aux>
            <h3>Your Order</h3>
            <p>A delecious burger with the following ingredients:</p>
            <ul>
                {ingredientSummary}
            </ul>
            <p>Continue to Checkout?</p>
            <button>CANCEL</button>
            <button>CONTINUE</button>
        </Aux>
    );

یکی از این دکمه ها CANCEL و دیگری CONTINUE است. اگر خوب دقت کنید متوجه می شوید که برای استایل دهی این دو دکمه باید کدهایمان را دوبار تکرار کنیم. به نظر من بهتر است برای این صفحه و همینطور تمام دکمه هایی که بعدا در طول این دوره ایجاد خواهیم کرد یک کامپوننت جداگانه و مخصوص دکمه ها بسازیم. برای این کار وارد پوشه ی UI شده و پوشه ی جدیدی به نام Button بسازید که دارای فایلی به نام Button.js باشد. محتویات این فایل به شکل زیر است:

import React from 'react';

const button = (props) => (
    <button onClick={props.clicked}>
        {props.children}
    </button>
);

export default button;

در واقع کار این کامپوننت برگرداندن یک دکمه ی HTML است که محتوای دورنش props.children است تا بتوانیم هر متنی را که خواستیم در آن قرار دهیم. همچنین یک onClick برای آن گذاشته ایم تا اگر روی آن کلیک شد اتفاق خاصی بیفتد (بعدا باید برای کاری که میخواهیم کدهای props.clicked را بنویسیم و آن را به چیزی وصل کنیم). کار دیگری که باقی مانده اضافه کردن استایل به دکمه ها است بنابراین در همان پوشه ی Button یک فایل به نام Button.module.css با محتویات زیر ایجاد کنید:

.Button {
    background-color: transparent;
    border: none;
    color: white;
    outline: none;
    cursor: pointer;
    font: inherit;
    padding: 10px;
    margin: 10px;
    font-weight: bold;
}

.Button:first-of-type {
    margin-left: 0;
    padding-left: 0;
}

.Success {
    color: #5C9210;
}

.Danger {
    color: #944317;
}

این کلاس ها برای تغییر رنگ دکمه در هنگام خطا و... انتخاب شده اند. حالا وارد فایل Button.js شده و از آن استفاده می کنیم:

import classes from './Button.module.css';

const button = (props) => (
    <button
        onClick={props.clicked}
        className={[classes.Button, classes[props.btnType]].join(' ')}>
        {props.children}
    </button>
);

توضیحات کد:

ابتدا استایل ها را import کرده ایم.
قرار است همیشه کلاس Button روی دکمه ها حضور داشته باشد (یک استایل عمومی برای دکمه های ما است) اما به غیر از آن و بسته به شرایط یکی از کلاس ها Danger یا Success نیز به دکمه اضافه خواهد شد.
چیزی که به className پاس داده می شود، باید رشته باشد بنابراین یک آرایه را به آن پاس داده ایم که شامل کلاس Button (یک رشته) و یک کلاس دیگر است که از طریق btnType ارسال خواهد شد (هنوز کد آن را ننوشته ایم). برای تبدیل کردن آرایه به رشته نیز از متد join استفاده می کنیم تا با یک اسپیس دو رشته را به هم متصل کند. اگر اسپیس را برای آرگومان Join ارسال نکنید هر دو رشته به هم می چسبند (مثلا ButtonDanger) و این در CSS یک کلاس جداگانه محسوب خواهد شد که مشخصا برای آن استایلی نداریم.

حالا باید از این کامپوننت دکمه برای قسمت خلاصه ی سفارش استفاده کنیم. برای این کار به فایل OrderSummary.js بروید و کامپوننت Button را import کنید:

import Button from '../../UI/Button/Button';

حالا وارد JSX شده و دکمه های عادی که قبلا نوشتیم را حذف می کنیم. منظورم این دو دکمه است:

<button>CANCEL</button>
<button>CONTINUE</button>

باید به جای آن از کامپوننت Button استفاده کنیم:

<Button>CANCEL</Button>
<Button>CONTINUE</Button>

به بزرگی حرف B در این کامپوننت دقت نمایید. البته هنوز دو prop مورد نیاز این کامپوننت را به آن پاس نداده ایم، بنابراین می گوییم:

<Button btnType="Danger" clicked={}>CANCEL</Button>
<Button btnType="Success" clicked={}>CONTINUE</Button>

همانطور که می بینید برای clicked هنوز مقداری قرار نداده ام چرا که هنوز متد آن را ننوشته ایم. بنابراین وارد فایل BurgerBuilder.js شوید و متد زیر را به آن اضافه کنید:

    purchaseContinueHandler = () => {
        alert('You continue!')
    }

ما هنوز به سرور دسترسی نداریم بنابراین فعلا فقط یک alert ساده را نمایش می دهیم. در واقع طرح ما این است که یک متد برای کنسل کردن سفارش و یک متد برای تایید نهایی سفارش داشته باشیم. از آنجایی که متد purchaseCancelHandler را برای backdrop نوشته بودیم دیگر نیازی به نوشتن دوباره ی آن نیست:

    purchaseCancelHandler = () => {
        this.setState({ purchasing: false });
    }

حالا باید این دو متد (purchaseContinueHandler و purchaseCancelHandler) را به OrderSummary پاس بدهیم. در همان فایل BurgerBuilder و در قسمت JSX این کار را انجام می دهیم:

        return (
            <Aux>
                <Modal show={this.state.purchasing} modalClosed={this.purchaseCancelHandler}>
                    <OrderSummary
                        ingredients={this.state.ingredients}
                        purchaseCancelled={this.purchaseCancelHandler}
                        purchaseContinued={this.purchaseContinueHandler}
                    />
                </Modal>
                <Burger ingredients={this.state.ingredients} />
                <BuildControls
                    ingredientAdded={this.addIngredientHandler}
                    ingredientRemoved={this.removeIngredientHandler}
                    disabled={disabledInfo}
                    purchasable={this.state.purchasable}
                    price={this.state.totalPrice}
                    ordered={this.purchaseHandler}
                />
            </Aux>
        );

نام این prop ها را هر چیزی می توانید انتخاب کنید. حالا به فایل OrderSummary.js میرویم و این متدها را به دکمه هایمان اضافه می کنیم:

    return (
        <Aux>
            <h3>Your Order</h3>
            <p>A delecious burger with the following ingredients:</p>
            <ul>
                {ingredientSummary}
            </ul>
            <p>Continue to Checkout?</p>
            <Button btnType="Danger" clicked={props.purchaseCancelled}>CANCEL</Button>
            <Button btnType="Success" clicked={props.purchaseContinued}>CONTINUE</Button>
        </Aux>
    );

حالا می توانید مرورگر را باز کنید و کدها را امتحان کنید. باید به شکل کامل و بدون نقص کار کنند. از آنجایی که فعلا با سرور سر و کار نداریم فعلا به همین پیام ساده ی alert بسنده کرده ایم و در فصل های آینده ی آموزش این پروژه را پیشرفته تر خواهیم کرد. البته هنوز این فصل تمام نشده است و ما منوی کشویی و... را نساخته ایم که در قسمت های بعد انجام خواهیم داد.