expo_930040301/components/BadgerBakery.js

import { useEffect,useState } from "react";
import { Text,View,Alert,StyleSheet,Image } from "react-native";
import BadgerBakedGood from "./BadgerBakedGood";
import Button from './Button'

const baseAPIPath = 'https://www.cs571.org/s23/hw8/api/bakery'
const baseHeaders = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
  'X-CS571-ID': 'bid_2359f9728468cc49987c'
}

const getItems = () => {
  return fetch(`${ baseAPIPath }/items`,{
    headers: baseHeaders
  })
    .then(response => response.json())
    .then(json => {
      return json;
    })
    .catch(error => {
      console.error(error);
    });
};

const orderPush = ( params ) => {
  return fetch(`${ baseAPIPath }/order`,{
    headers: baseHeaders,
    method: 'POST',
    body: JSON.stringify(params),
  })
    .then(response => response.json())
    .then(json => {
      return json;
    })
    .catch(error => {
      console.error(error);
    });
};


export default function BadgerBakery() {
  const [preBtnDisabled,setPreBtnDisabled] = useState(true)
  const [items,setItems] = useState({})
  const [itemKeys,setItemKeys] = useState([])
  const [item,setItem] = useState()
  const [index,setIndex] = useState(0)
  const [total,setTotal] = useState(0)
  const styles = StyleSheet.create({
    btnBase: {
      backgroundColor: '#4898E7',
      color: '#ffffff',
      width: '40%',
      borderRadius: 4,
    },
    image: {
      width: 250,
      height: 250,
    },
    title: {
      fontSize: 35,
      fontWeight: 'bold'
    },
    btnMethod: {
      width: 50,
      height: 50,
      marginRight: 30,
      marginLeft: 30,
      borderRadius: 4,
    }
  });
  useEffect(() => {
    pageInit()
  },[])

  function onPrevious() {
    if ( index ) {
      setPreBtnDisabled(index - 1 < 1)
      setIndex(index - 1)
      items[itemKeys[index]] = item
      setItems(items)
      setItem(items[itemKeys[index - 1]])
    }
  }

  function onNext() {
    if ( index < itemKeys.length - 1 ) {
      setPreBtnDisabled(false)
      setIndex(index + 1)
      items[itemKeys[index]] = item
      setItems(items)
      setItem(items[itemKeys[index + 1]])
    }
  }

  async function pageInit() {
    const res = await getItems()
    const arr = []
    if ( res ) {
      Object.keys(res).forEach(key => {
        arr.push(key)
      })
    }
    setItemKeys(arr)
    setItems(res)
    setItem(res[arr[index]])
  }

  function onMinus() {
    if ( item?.number ) {
      const newItem = {
        ...item,
        number: ( item?.number || 0 ) - 1,
        upperBound: item.upperBound + 1
      }
      const newOrders = {
        ...items,
        [itemKeys[index]]: newItem
      }
      setItem(newItem)
      setItems(newOrders)
      setTotal(total - item.price)
    }
  }

  function onPlus() {
    if ( item.upperBound ) {
      const newItem = {
        ...item,
        number: ( item?.number || 0 ) + 1,
        upperBound: item.upperBound - 1
      }
      const newOrders = {
        ...items,
        [itemKeys[index]]: newItem
      }
      setItem(newItem)
      setItems(newOrders)
      setTotal(total + item.price)
    }
  }

  async function placeOrder() {
    if ( !total ) {
      Alert.alert("Empty Basket","You must order something!");
      return
    }
    const params = {}
    Object.keys(items).forEach(key => {
      const {number} = items[key]
      params[key] = number
    })
    const res = await orderPush(params)
    if ( res?.id ) {
      // Alert.alert("Success!","Successfully placed order!");
      // 以下这段可选择性删除
      setTotal(0)
      setTimeout(() => {
        pageInit()
      }, 300)
      // 以上这段可选择性删除
      Alert.alert("Success!",res.msg);
    } else {
      Alert.alert("Empty Basket",res.msg);
    }
  }

  return <View>
    <Text>Welcome to Badger Bakery!</Text>
    <View style={ {flexDirection: 'row',justifyContent: 'space-around'} }>
      <Button
        mode="contained"
        style={ {
          ...styles.btnBase,
          backgroundColor: '#4994EC',
          // marginRight: 10
        } }
        disabled={ preBtnDisabled }
        onPress={ () => onPrevious() }
      >
        PREVIOUS
      </Button>
      <Button
        mode="contained"
        style={ {

          ...styles.btnBase,

          backgroundColor: '#4994EC',
          // marginLeft: 10
        } }
        onPress={ () => onNext() }
      >
        NEXT
      </Button>
    </View>
    <View style={ {
      display: 'flex',
      alignItems: 'center'
    } }>
      <Image
        style={ styles.image }
        resizeMode={ "contain" }
        source={ {
          uri: item?.img
        } }></Image>
      <Text style={ styles.title }>{ itemKeys[index - 1] }</Text>
      <Text>${ item?.price }</Text>
      <Text>You can order up to { item?.upperBound } unites!</Text>
    </View>
    <View style={ {
      // flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      height: 100,
      overflow: 'hidden'
    } }>
      <Button
        mode="contained"
        style={ {
          ...styles.btnMethod,
          marginLeft: 0,
          backgroundColor: '#4994EC',
          // marginLeft: 10
        } }
        onPress={ () => onMinus() }
      >
        -
      </Button>
      <Text style={ {
        textAlign: 'center',
        lineHeight: 60,
        width: 40,
      } }>{ item?.number || 0 }</Text>
      <Button
        mode="contained"
        style={ {
          ...styles.btnMethod,
          marginLeft: 20,
          backgroundColor: '#4994EC',
        } }
        onPress={ () => onPlus() }
      >
        +
      </Button>

    </View>
    <View style={ {alignItems: 'center'} }><Text>Order Total: ${ total }</Text></View>
    <View>
      <Button
        mode="contained"
        style={ {
          ...styles.btnBase,
          width: '100%',
          backgroundColor: '#4994EC',
        } }
        onPress={ () => placeOrder() }
      >
        PLACE ORDER
      </Button>
    </View>


  </View>
}