How can I increase or decrease the quantity of a specific item?-CodePudding

I have a question of understanding. I have different items, for each the user should be able to choose how much he wants. The articles are stored in Firebase with Img, Name, Category. How can the user now increase an item without an update being sent to the DB every time? Only when the user clicks a button should all quantities, in each case, be written to the database. The users are also stored in a DB with key and room.

Here is my code for the Food Articel:

{filter?.map((art, idx) => {
  return <Food key={idx} art={art}></Food>;
})}

....

export default function Food({ art }) {

const [artikel, setArtikel] = useState(art);
const [anzahl, setAnzahl] = useState(0);

const updateAnzahl = (action, artName) => {
if (action === "remove") {
  setArtikel((prevState) => ({
    ...prevState,
    [artName]: {
      anzahl: anzahl - 1,
    },
  }));
} else {
  setArtikel((prevState) => ({
    ...prevState,
    [artName]: {
      anzahl: anzahl   1,
    },
  }));
 }
};


  <IconButton
    aria-label="delete"
    onClick={() => updateAnzahl("remove", art.name)}
        >
          <RemoveIcon fontSize="large"></RemoveIcon>
      </IconButton>

        <Typography variant="h5">{anzahl}</Typography>
        <IconButton
          aria-label="delete"
          onClick={() => updateAnzahl("add", art.name)}
        >
          <AddIcon fontSize="large"></AddIcon>
        </IconButton>

CodePudding user response：

import React, { useState } from 'react';
import {
  SafeAreaView,
  View,
  Text,
  FlatList,
  StatusBar,
  Button,
} from 'react-native';

const items = [
  {
    name: 'item 1',
    qty: 0,
  },
  {
    name: 'item 2',
    qty: 0,
  },
  {
    name: 'item 3',
    qty: 0,
  },
  {
    name: 'item 4',
    qty: 0,
  },
];

export default function App() {
  const [data, setData] = useState(items);
  const [refresh, setRefresh] = useState(''); // <- Add if your view not Rerender

  const handleIncrease = (index) => {
    const temp = data;
    temp[index].qty = temp[index].qty   1;
    setData(temp);
    setRefresh(Math.random()); // <- Add if your view not Rerender
  };

  const handleDecrease = (index) => {
    const temp = data;
    temp[index].qty = temp[index].qty - 1;
    setData(temp);
    setRefresh(Math.random()); // <- Add if your view not Rerender
  };

  const renderItem = ({ item, index }) => {
    return (
      <View
        style={{
          height: 50,
          width: '90%',
          marginLeft: '5%',
          borderWidth: 1,
          borderColor: 'black',
          marginBottom: 10,
          flexDirection: 'row',
        }}>
        <Text style={{ marginRight: 20 }}>{item.name}</Text>

        <Button title="Increase" onPress={() => handleIncrease(index)} />
        <Text style={{ marginHorizontal: 10 }}>{item.qty}</Text>
        <Button title="Decrease" onPress={() => handleDecrease(index)} />
      </View>
    );
  };
  return (
    <SafeAreaView style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
      <View style={{ flex: 1 }}>
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={(item, index) => String(index)}
        />
      </View>
    </SafeAreaView>
  );
}

snack link: https://snack.expo.dev/9ZsvSkXBk

CodePudding user response：

I'd keep the user's current order in browser's session/local storage and update database on some "submit" button. Piece of cake :-)

BTW. An issue to consider - what if user has more than one tab/browser opened on your app - should any instance simply overwrite others data or you need some syncing between them?

here's link to codesandbox with boilerplate for order management: https://codesandbox.io/s/hotel-cafe-order-f5wp7d