Challenge 1 / 1

In my pizza app, I have a section of the show-pizza component that allows the user to order some individual slices!

Here's how the component looks:

<template>
    <div
        :class="$style.component"
        v-if="pizza !== null"
    >
        <h1>{{ pizza.name }}</h1>

        <p>{{ pizza.description }}</p>

        <div class="order-buttons">
            <button
                @click="orderSlices(1)"
                :disabled="ordering"
            >
                Order 1 slice!
            </button>

            <button
                @click="orderSlices(2)"
                :disabled="ordering"
            >
                This pizza looks great! Order 2 slices!!
            </button>

            <button
                @click="orderSlices(4)"
                :disabled="ordering"
            >
                I'm starving!! Order 4 slices!!!
            </button>
        </div>
    </div>
</template>

<script>
import { getPizza } from '@/services/get-pizza';
import { orderPizza } from '@/services/order-pizza';

export default {
    name: 'ShowPizza',
    data() {
        return {
            pizza: null,
            ordering: false,
        };
    },
    async created() {
        this.pizza = (await getPizza()).data['hydra:member];
    },
    methods: {
        async orderPizza(slices) {
            this.ordering = true;
            await orderPizza(slices);
            this.ordering = false;
        },
    },
};
</script>

<style lang="scss" module>
.component :global {
    overflow: hidden;

    .order-buttons {
        padding-top: 20px;
        margin-top: 20px;
        border-top: 1px solid #FF0000;
    }
}
</style>

But hey! Pizza headquarters are now asking me to include these ordering buttons EVERYWHERE in the app. They had such a good reception!

I need to extract all the "ordering" logic into a separate component. What would this component look like?

<template>
    <div :class="$style.component">
        <button
            @click="orderSlices(1)"
            :disabled="ordering"
        >
            Order 1 slice!
        </button>

        <button
            @click="orderSlices(2)"
            :disabled="ordering"
        >
            This pizza looks great! Order 2 slices!!
        </button>

        <button
            @click="orderSlices(4)"
            :disabled="ordering"
        >
            I'm starving!! Order 4 slices!!!
        </button>
    </div>
</template>

<script>
import { getPizza } from '@/services/get-pizza';
import { orderPizza } from '@/services/order-pizza';

export default {
    name: 'OrderButtons',
    data() {
        return {
            pizza: null,
            ordering: false,
        };
    },
    async created() {
        this.pizza = (await getPizza()).data['hydra:member];
    },
    methods: {
        async orderSlices(slices) {
            this.ordering = true;
            await orderPizza(slices);
            this.ordering = false;
        },
    },
};
</script>

<style lang="scss" module>
.component {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #FF0000;
}
</style>

<template>
    <div :class="$style.component">
        <button
            @click="orderSlices(1)"
            :disabled="ordering"
        >
            Order 1 slice!
        </button>

        <button
            @click="orderSlices(2)"
            :disabled="ordering"
        >
            This pizza looks great! Order 2 slices!!
        </button>

        <button
            @click="orderSlices(4)"
            :disabled="ordering"
        >
            I'm starving!! Order 4 slices!!!
        </button>
    </div>
</template>

<script>
import { orderPizza } from '@/services/order-pizza';

export default {
    name: 'OrderButtons',
    data() {
        return {
            ordering: false,
        };
    },
    methods: {
        async orderSlices(slices) {
            this.ordering = true;
            await orderPizza(slices);
            this.ordering = false;
        },
    },
};
</script>

<style lang="scss" module>
.component {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #FF0000;
}
</style>

<template>
    <div class="order-buttons">
        <button
            @click="orderSlices(1)"
            :disabled="ordering"
        >
            Order 1 slice!
        </button>

        <button
            @click="orderSlices(2)"
            :disabled="ordering"
        >
            This pizza looks great! Order 2 slices!!
        </button>

        <button
            @click="orderSlices(4)"
            :disabled="ordering"
        >
            I'm starving!! Order 4 slices!!!
        </button>
    </div>
</template>

<script>
import { orderPizza } from '@/services/order-pizza';

export default {
    name: 'OrderButtons',
    data() {
        return {
            ordering: false,
        };
    },
    methods: {
        async orderSlices(slices) {
            this.ordering = true;
            await orderPizza(slices);
            this.ordering = false;
        },
    },
};
</script>

<template>
    <div class="order-buttons">
        <button
            @click="orderSlices(1)"
            :disabled="ordering"
        >
            Order 1 slice!
        </button>

        <button
            @click="orderSlices(2)"
            :disabled="ordering"
        >
            This pizza looks great! Order 2 slices!!
        </button>

        <button
            @click="orderSlices(4)"
            :disabled="ordering"
        >
            I'm starving!! Order 4 slices!!!
        </button>
    </div>
</template>

<script>
import { orderPizza } from '@/services/order-pizza';

export default {
    name: 'OrderButtons',
    data() {
        return {
            ordering: false,
        };
    },
};
</script>

<style lang="scss" module>
.component {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #FF0000;
}
</style>

Rewatch the video