I am using expo go and react native to create an app to handle storage for products. I am trying to set a products stock in an API by name, id and stock by the method PUT. I can set the order but whatever I am stuck at the product update.
I get this error message in the terminal and a console.log() of the data for the API body where I want to change the data:
Object {
"api_key": "65054948e5528b34cfc9ec09db084840",
"id": 27441,
"name": "Mutter M10",
"stock": 6,
}
[Unhandled promise rejection: TypeError: (0, _context2.t0) is not a function. (In '(0, _context2.t0
)(_context2.t1)', '(0, _context2.t0)' is undefined)]
at components\PickList.tsx:26:4 in pick
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argum
ent_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:177:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:437:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:388:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:131:4 in flushedQueue
the model file product.ts looks like this:
import config from "../config/config.json";
const orders = {
getProducts: async function getProducts() {
const response = await fetch(`${config.base_url}/products?api_key=${config.api_key}`);
const result = await response.json();
return result.data;
},
updateProduct: async function updateProduct(products) {
console.log(products);
try {
products.api_key = config.api_key;
await fetch(`${config.base_url}/products?api_key=${config.api_key}`, {
body: JSON.stringify(products),
headers: {
'content-type': 'application/json'
},
method: 'PUT'
});
} catch (error) {
console.log("Could not update product!")
}
}
};
export default orders;
The file orders.ts in the same map as products.ts:
import config from "../config/config.json";
import product from "./products";
import Order from "../interfaces/order";
import OrderItem from "../interfaces/order_item";
const orders = {
getOrders: async function getOrders(): Promise<Order[]> {
const response = await fetch(`${config.base_url}/orders?api_key=${config.api_key}`);
const result = await response.json();
return result.data;
},
pickOrder: async function pickOrder(order: Partial<Order>) {
await Promise.all(order.order_items.map(async(order_item:
Partial<OrderItem>) => {
let changeProduct = {
id: order_item.product_id,
name: order_item.name,
stock: order_item.stock - order_item.amount,
api_key: config.api_key,
};
await product.updateProduct(changeProduct);
}));
let changedOrder = {
id: order.id,
name: order.name,
status_id: 200,
api_key: config.api_key,
};
await orders.updateOrder(changedOrder);
},
updateOrder: async function updateOrder(order: Partial<Order>) {
try {
await fetch(`${config.base_url}/orders?api_key=${config.api_key}`, {
body: JSON.stringify(order),
headers: {
'content-type': 'application/json'
},
method: 'PUT'
});
} catch (error) {
console.log("Could not update order!")
}
}
};
export default orders;
And the file PickList that the pickOrder function is called from:
import { View, Text, Button } from "react-native";
import { Base, Typography } from "../styles";
import { useState, useEffect } from "react";
import {useRoute} from '@react-navigation/native';
import orderModel from "../models/orders";
import productModel from "../models/products";
export default function PickList({ route, navigation, setProducts }) {
const { reload } = route.params || false;
const { order } = route.params;
const [productsList, setProductsLists] = useState([]);
if (reload) {
reloadProducts();
}
async function reloadProducts() {
setProductsLists(await productModel.getProducts());
}
useEffect(() => {
reloadProducts();
}, []);
async function pick() {
await orderModel.pickOrder(order);
setProducts(await productModel.getProducts());
navigation.navigate("List", {reload: true});
}
const productsHash = productsList.reduce((hash, current) => ({...hash, [current.id]: current.stock}), {});
let allInStock = true;
const orderItemsList = order.order_items.map((item, index) => {
if (productsHash[item.product_id] < item.account) {
allInStock = false;
}
return <Text
key={index}
>
{item.name} - antal: {item.amount} st - lagerplats: {item.location}
</Text>;
});
return (
<View>
<Text>{order.name}</Text>
<Text>{order.address}</Text>
<Text>{order.zip} {order.city}</Text>
<Text>Produkter:</Text>
{orderItemsList}
{allInStock
?<Button color="#f85d16" title="Plocka order" onPress={pick} />
:<Text>Ordern går inte att packa, då varor saknas</Text>
}
</View>
)
};
Where is the error that I can't find?