๐Ÿฅฆ๋ธŒ๋กœ์ปฌ๋ฆฌ๐Ÿฅฆ fetch ๋ถ€๋ถ„๋งŒ ์ •๋ฆฌ

Maria Kimยท2021๋…„ 12์›” 12์ผ
0
post-custom-banner

[์žฅ๋ฐ”๊ตฌ๋‹ˆ] ๋‚ด์—ญ ๋“ค๊ณ ์˜ค๊ธฐ

  useEffect(() => {
    if (!token) {
      setIsLoaded(true);
    }

    fetch(API.cart, {
      headers: {
        Authorization: token,
      },
    })
      .then(res => res.json())
      .then(res => {
        if (!!res.result) {
          setItems(res.result);
        }
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error(e);
      })
      .finally(setIsLoaded(true));
  }, [token]);

[์žฅ๋ฐ”๊ตฌ๋‹ˆ] ์ˆ˜๋Ÿ‰ ๋ณ€๊ฒฝ

const changeItemQuantity = (cart_id, changedQuantity) => {
    if (!changedQuantity.toString()) {
      return;
    }

    fetch(API.cart, {
      method: 'PATCH',
      headers: {
        Authorization: token,
      },
      body: JSON.stringify({
        cart_id: cart_id,
        quantity: changedQuantity,
      }),
    })
      .then(res =>
        res.json().then(res => {
          switch (res.message) {
            case 'Token not Exist':
              alert('๋กœ๊ทธ์ธ์„ ํ•ด์ฃผ์„ธ์š”');
              break;
            case 'SUCCESS':
              setItems(
                items.map(item =>
                  item.cart_id !== cart_id
                    ? item
                    : { ...item, quantity: changedQuantity }
                )
              );
              break;
            case 'KEY_ERROR':
              alert('์—๋Ÿฌ์ž…๋‹ˆ๋‹ค!');
              break;
            default:
              break;
          }
        })
      )
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error(e);
      });
  };

[์žฅ๋ฐ”๊ตฌ๋‹ˆ] ์ƒํ’ˆ ์‚ญ์ œ

 const deleteItem = cart_id => {
    fetch(API.cart, {
      method: 'DELETE',
      headers: { Authorization: token },
      body: JSON.stringify({
        cart_id: [cart_id],
      }),
    })
      .then(res => res.json())
      .then(res => {
        switch (res.message) {
          case 'Token not Exist':
            alert('๋กœ๊ทธ์ธ์„ ํ•ด์ฃผ์„ธ์š”');
            break;
          case 'SUCCESS':
            setItems(items.filter(item => item.cart_id !== cart_id));
            break;
          case 'INVALID_CART':
            alert('์‚ญ์ œํ•  ์ƒํ’ˆ์ด ์—†์Šต๋‹ˆ๋‹ค');
            break;
          case 'KEY_ERROR':
            alert('์—๋Ÿฌ ์ž…๋‹ˆ๋‹ค');
            break;
          default:
            break;
        }
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error(e);
      });
  };

[์žฅ๋ฐ”๊ตฌ๋‹ˆ] ์—ฌ๋Ÿฌ๊ฐœ ์‚ญ์ œ

 const deleteAllCheckedItem = () => {
    const deleteItemsCartIdArray = items
      .filter(item => !item.notChecked)
      .map(item => item.cart_id);

    fetch(API.cart, {
      method: 'DELETE',
      headers: { Authorization: token },
      body: JSON.stringify({
        cart_id: deleteItemsCartIdArray,
      }),
    })
      .then(res => res.json())
      .then(res => {
        switch (res.message) {
          case 'SUCCESS':
            setItems(items.filter(item => item.notChecked));
            break;
          case 'Token not Exist':
            alert('๋กœ๊ทธ์ธ์„ ํ•ด์ฃผ์„ธ์š”');
            break;
          case 'INVALID_CART':
            alert('์‚ญ์ œํ•  ์ƒํ’ˆ์ด ์—†์Šต๋‹ˆ๋‹ค');
            break;
          case 'KEY_ERROR':
            alert('์—๋Ÿฌ ์ž…๋‹ˆ๋‹ค');
            break;

          default:
            break;
        }
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error(e);
      });
  };

[์žฅ๋ฐ”๊ตฌ๋‹ˆ] ์ฃผ๋ฌธํ•˜๊ธฐ

 const orderItems = () => {
    if (checkedItemsLength < 1) {
      alert('์ฃผ๋ฌธํ•˜์‹ค ์ƒํ’ˆ์„ ์„ ํƒํ•ด์ฃผ์„ธ์š”');
      return;
    }

    const orderItemsCartId = items
      .filter(item => !item.notChecked)
      .map(item => item.cart_id);

    fetch(API.orders, {
      method: 'POST',
      headers: {
        Authorization: token,
      },
      body: JSON.stringify({ cart_ids: orderItemsCartId }),
    })
      .then(res => res.json())
      .then(res => {
        switch (res.message) {
          case 'Token not Exist':
            alert('๋กœ๊ทธ์ธ์„ ํ•ด์ฃผ์„ธ์š”');
            break;
          case 'INVALID_ORDER_STATUS':
          case 'INVALID_ORDER_ITEMS_STATUS':
          case 'DATA_ERROR':
          case 'TRANSACTION_ERROR':
          case 'KEY_ERROR':
          case 'INVALID_CART':
            alert('์—๋Ÿฌ ์ž…๋‹ˆ๋‹ค');
            break;
          case 'CREATE':
            setItems(items.filter(item => item.notChecked));
            alert('์ฃผ๋ฌธ์ด ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.');
            break;
          default:
            break;
        }
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error(e);
      });
  };

[์ฃผ๋ฌธ๋‚ด์—ญ] ๋‚ด์—ญ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

useEffect(() => {
    fetch(API.orders, {
      headers: {
        Authorization: token,
      },
    })
      .then(res => res.json())
      .then(res => {
        setOrders(res.result);
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error(e);
      })
      .finally(() => {
        setLoaded(true);
      });
  }, [token]);

[์ฃผ๋ฌธ๋‚ด์—ญ] ์ฃผ๋ฌธ ์ทจ์†Œ

const cancelOrder = order_id => {
    fetch(API.orders, {
      method: 'PATCH',
      headers: {
        Authorization: token,
      },
      body: JSON.stringify({
        order_id: order_id,
      }),
    })
      .then(res => res.json())
      .then(res => {
        switch (res.message) {
          case 'INVALID_ORDER_STATUS':
          case 'INVALID_ORDER_ITEMS_STATUS':
          case 'KEY_ERROR':
            // eslint-disable-next-line no-console
            console.error('ERROR', res.message);
            alert('์—๋Ÿฌ์ž…๋‹ˆ๋‹ค!');
            break;
          case 'SUCCESS':
            changeOrderState(order_id);
            alert('์ฃผ๋ฌธ์ด ์ทจ์†Œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.');
            break;
          default:
            break;
        }
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error('catch', e);
      });
  };

[์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ] ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

useEffect(() => {
    fetch(
      `${API.product}?menu=${menu}${
        !category.length ? '' : `&category=${category}`
      }&sort=${sort}`
    )
      .then(res => res.json())
      .then(res => {
        if (!!res.result) {
          setProducts(res.result);
        }

        switch (res.message) {
          case 'AttributeError':
          case 'KeyError':
          case 'TypeError':
          case 'DoesNotExits':
            alert('์—๋Ÿฌ์ž…๋‹ˆ๋‹ค.');
            break;
          default:
            break;
        }
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error(e);
      })
      .finally(setLoaded(true));
  }, [category, menu, searchParams, sort]);

[์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ] ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ์ƒํ’ˆ ๋‹ด๊ธฐ

const addProductToCart = () => {
    if (!!token) {
      fetch(API.cart, {
        method: 'POST',
        headers: {
          Authorization: token,
        },
        body: JSON.stringify({
          product_id: id,
          quantity: quantity,
        }),
      })
        .then(res => res.json())
        .then(res => {
          switch (res.message) {
            case 'SUCCESS':
            case 'update':
              alert('์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ์ƒํ’ˆ์ด ์ถ”๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.');
              closeModal();
              break;
            case 'DoesNotExist':
              alert('๋กœ๊ทธ์ธ ํ•ด์ฃผ์„ธ์š”');
              break;
            default:
              break;
          }
        })
        .catch(e => {
          // eslint-disable-next-line no-console
          console.error(e);
        });
    } else {
      alert('๋กœ๊ทธ์ธํ•ด์ฃผ์„ธ์š”^^');
    }
  };
profile
Frontend Developer, who has business in mind.
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€