import React, { ChangeEvent } from 'react';
import { withRouter, NextRouter, useRouter } from 'next/router';
import { Layout } from '../../shared/Layout';
import { ProductClient } from '../../../APIClient';
import Swal from 'sweetalert2';
import ProductForm from '../../../components/ProductForm';
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { ProductDataProps, ProductFormState } from '../../../interfaces/product';
function Errors({ errors }) {
return errors.map(x => (
{x}
));
}
class EditProduct extends React.Component {
constructor(props) {
super(props)
const id = props.productID;
this.state = {
form: {
name: "",
price: 0,
},
errors: [],
busy: false,
}
}
async componentDidMount() {
const client = new ProductClient();
await new Promise((resolve) => {
this.setState({
busy: true,
}, () => resolve(undefined));
})
if (this.props.productID) {
let data = await client.get(this.props.productID);
await new Promise((resolve) => {
this.setState({
busy: false,
}, () => resolve(undefined));
})
this.setState({
form: {
name: data.name,
price: data.price,
}
});
}
}
onNameChanged(newName: string) {
this.setState({
form: {
name: newName,
price: this.state.form.price,
}
});
}
onPriceChanged(newPrice: number) {
this.setState({
form: {
name: this.state.form.name,
price: newPrice,
}
});
}
async validate() {
let errors: string[] = [];
if (!this.state.form.name) {
errors.push("Name required");
}
if (!this.state.form.price) {
errors.push("Email required");
}
await new Promise((resolve) => {
this.setState({
errors
}, () => resolve(undefined));
})
return errors.length == 0;
}
async onSubmit() {
if (await this.validate()) {
await new Promise((resolve) => {
this.setState({
busy: true,
}, () => resolve(undefined));
})
try {
const form = this.state.form;
const client = new ProductClient();
await client.put(this.props.productID, {
name: form.name,
price: form.price,
})
Swal.fire({
title: "Submitted!",
text: "Product is modified in database",
})
} catch (error) {
} finally {
await new Promise((resolve) => {
this.setState({
busy: false,
}, () => resolve(undefined));
})
}
}
}
render() {
if (typeof this.props.productID != "string") {
return (
)
}
return (
)
}
}
export default function EditProductPage() {
const router = useRouter();
const id = router.query['id'];
return (
)
}