fetch API 실습

• main.js

import ProductPage from "./component/ProductPage.js";

const $app = document.querySelector('.app');

new ProductPage({
    $target : $app,
    initialState : {
        productId : 1
    }
})

• api.js
• fetch처리 하는 로직이 반복되므로 함수로 따로 빼주자!

const API_END_POINT = "https://kdt-frontend.programmers.co.kr";

export default function request(url) {
    if (!url.startsWith('/')) {
        throw new Error('url은 /로 시작해야합니다!');
    }

    return fetch(API_END_POINT+url)
            .then(res => {
                if (res.ok) {
                    return res.json();
                }
                throw new Error(`${res.status} Error`)
            })
            .catch(e=> console.log(e.message))
 }

• ProductPage.js
• 패치 > 상태로 등록 > option 상태, cart 상태 등록시키기
• state가 바뀌면 선택한 상품 및 옵션이 바뀌는 것이다.
• (밖에서 setState할 때)setState할 때, 새로운 상태의 productId가 지금과 다르다면 다시 fetch
• render는 형식상 있는 것, 이 페이지에서 그려주는 것은 없고,
여기서 option을 생성할 때 target으로 이 페이지의 div를 넣어주는 형식
• fetch할 때 옵션과 스톡 api 호출이 따로인데, 스톡 호출할 때 옵션도 promise로 묶어서 같이 return 하면 좋다.
• ⇒ 옵션 호출 return문에서 then으로 스톡 처리를 해줄 수도 있겠지만, 그러면 depth가 또 깊어지기 때문이다.
⇒ Promise.resolve와 Promise.all 사용!

import request from "../api.js";
import ProductOptions from "./ProductOption.js";
import Cart from "./Cart.js";

export default function ProductPage({ $target, initialState }) {

    const $product = document.createElement('div')

    $target.appendChild($product)

    this.state = initialState

    this.setState = (newState) => {
        if (this.state.productId !== newState.productId) {
            fetchOptionData(this.state.productId)
            return;
        }

        this.state = newState;

        const { optionData, product, selectedOptions } = this.state;

        productOptions.setState(optionData)

        cart.setState({
            productName : product.name,
            basePrice: product.basePrice,
            selectedOptions: selectedOptions
        })
    }

    this.render = () => {}
    this.render()

    const productOptions = new ProductOptions({
        $target: $product,
        initialState: [],
        onSelect: (option) => {
            const { selectedOptions } = this.state;
            const newOptions = [...selectedOptions];

            const selectIdx = selectedOptions.findIndex(selected => option.optionId === selected.optionId);

            if (selectIdx != -1) {
                newOptions[selectIdx].ea++;
            } else {
                newOptions.push({
                    optionId : option.optionId,
                    optionName : option.optionName,
                    optionPrice : option.optionPrice,
                    ea : 1
                })
            }
        
            this.setState({
                ...this.state,
                selectedOptions : newOptions
            })
        }
    })

    const cart = new Cart( {
        $target: $product,
        initialState : {
                    productName : '',
                    basePrice : 1000,
                    selectedOptions : []
                },
        onRemove : (index) => {
            const { selectedOptions } = this.state;
            const newOptions = [...selectedOptions];

            newOptions.splice(index,1);

            this.setState({
                ...this.state,
                selectedOptions: newOptions
            })
        }
    })

    const fetchOptionData = (productId) => {
        return request(`/products/${productId}`)
            .then(product => {
                this.setState({
                    ...this.state,
                    product,
                    optionData : [],
                    selectedOptions : []
                })
                return request(`/product-options?product.id=${product.id}`)
            })
            .then(options => {
                return Promise.all([
                    Promise.resolve(options),
                    Promise.all(options.map(option => request(`/product-option-stocks?productOption.id=${option.id}`)))])
            })
            .then(([options, stocks]) => {
                const optionData = options.map((option, idx) => {
                    const optionStock = stocks[idx][0].stock;
                    return (
                        {
                            optionId: option.id,
                            optionName: option.optionName,
                            optionPrice: option.optionPrice,
                            stock: optionStock
                        }
                )})

                this.setState({
                    ...this.state,
                    optionData,
                })
            })
    }

    fetchOptionData(this.state.productId)
}

• ProductOption.js

export default function ProductOptions({ $target, initialState, onSelect }) {

    const $select = document.createElement('select');
    $target.appendChild($select);

    this.state = initialState;

    this.setState = (newState) => {
        this.state = newState;
        this.render();
    }

    const optionFullName = ({optionName, optionPrice, stock}) => {
        return `${optionName} ${optionPrice > 0 ?`(옵션가 ${optionPrice}` : ''} | ${stock > 0 ? `재고 : ${stock}` : '재고없음'})`;
    }

    $select.addEventListener('change', (event) => {
        const selectedOptionId = parseInt(event.target.value);

        const selectedOption = this.state.find(({optionId}) => optionId === selectedOptionId);

        onSelect(selectedOption);
    })

    this.render = () => {
        if (this.state && Array.isArray(this.state)) {
            $select.innerHTML = `
            <option>선택해주세요</option>
            ${this.state.map(option => `<option value=${option.optionId} ${option.stock <= 0 ? 'disabled' : ''}>${optionFullName(option)}</option>`)}
        `
        }
    }

    this.render();
}

• Cart.js

export default function Cart ({ $target, initialState, onRemove }) {
    const $cart = document.createElement('div');

    $target.appendChild($cart);

    this.state = initialState;

    this.setState = (newState) => {
        this.state = newState;
        this.render();
    }

    const cartFullName = ({optionName, optionPrice, ea}) => {
        return `${this.state.productName} - ${optionName} | ${optionPrice}, ${ea}개`
    }

    const caculateTotalPrice = () => {
        const { selectedOptions, basePrice } = this.state;

        return selectedOptions.reduce((acc, current) => acc + (basePrice + current.optionPrice)*current.ea, 0)
    }

    this.render = () => {
        const selectedOptions = this.state.selectedOptions;
        if (Array.isArray(selectedOptions)) {
            $cart.innerHTML = `${Array.isArray(selectedOptions) && `<ul>
                    ${selectedOptions.map((option) => 
                        `<li>${cartFullName(option)} <button class="remove">X</button> </li>`).join('')}
                    </ul>`}
                <div>
                    ${caculateTotalPrice()}원
                </div>    
            `
        }

        $cart.querySelectorAll('.remove').forEach(($button,idx) => {
            $button.onclick = () => {
                onRemove(idx);
        }})
    }

    this.render();
}