ASP.NET Core API and React JS - reactjs

Question

I have created ASP.NET Core API and React CURD practice example. I am following this example
but I've used react semantic ui for view. I am new to react and ASP.NET any suggestion so that I can improve my code.
I am able to fetch,POST,PUT and DELETE customer record but there are some small issues or point that I don't know how to implement. Those are as following
1 - I have used Modal so I can open form as popup (AddCustomer is form to add and edit record) in that I have two functions to OPEN and CLOSE the Modal but I don't how to call them from Customer.js and also on successful POST,PUT, DELETE request.
2 - When I open FORM to ADD or EDIT record I am not able to store that in state. When I try to type in input field it does not store in name and address.
3 - Also you can see in Customer.js I am hiding the form and delete modal but I want to close them on POST, PUT and DELETE task completion.
This is Customer.js
import React from 'react';
import AddCustomer from './AddCustomer';
import CustomerView from './CustomerView';
import DeleteRecord from './DeleteRecord';
export default class Customer extends React.Component {
constructor(props) {
super(props);
this.state = {
isAddCustomer:false,
isEditCustomer:false,
isDeleteCustomer:false,
closeForm:false,
singleCustomer:{},
deleteId:{}
}
}
onCreate = () => {
console.log("is add customer true ")
this.setState({isAddCustomer:true})
}
onFormControl = () =>{
this.setState({
isAddCustomer:false,
isEditCustomer:false
})
}
onDeleteClick = customerId => {
const headerTitle = "Customer";
console.log("onDeleteClick")
this.setState({
isDeleteCustomer:true,
deleteId:{
ID:customerId,
title:headerTitle,
open:true
}
});
}
//New Customer record
onAddFormSubmit = data => {
console.log("In add form submit")
console.log(data)
let customerApi = 'https://localhost:44387/api/Customers';
let method = '';
if(this.state.isEditCustomer){
console.log("In Edit api")
console.log(this.state.editCustomerId)
customerApi = 'https://localhost:44387/api/Customers/' + this.state.editCustomerId;
method = 'PUT'
}else{
console.log("In Add api")
customerApi = 'https://localhost:44387/api/Customers';
method = 'POST'
}
const myHeader = new Headers({
'Accept':'application/json',
'Content-type':'application/json'
});
fetch(customerApi,{
method:method,
headers:myHeader,
body:JSON.stringify(data)
})
.then(res => res.json())
.then(
(result) => {
this.setState({
users:result,
isAddCustomer:false,
isEditCustomer:false
})
},(error) => {
this.setState({ error });
}
)
}
//Edit customer record
onEditCustomer = customerId => {
//Get ID, name and address
this.setState({
editCustomerId:customerId
});
const customerApi = 'https://localhost:44387/api/Customers/'+customerId;
const myHeader = new Headers({
'Accept':'application/json',
'Content-type':'application/json; charset=utf-8'
});
fetch(customerApi,{
method:'GET',
headers:myHeader
})
.then(res => res.json())
.then(
(result) => {
this.setState({
isEditCustomer:true,
isAddCustomer:false,
singleCustomer:{
customer:result,
isEditCustomer:true
}
})
},(error) => {
this.setState({ error });
}
)
}
//Delete Customer
onDeleteCustomer = customerId => {
const customerApi = 'https://localhost:44387/api/Customers/'+customerId;
const myHeader = new Headers({
'Accept':'application/json',
'Content-type':'application/json; charset=utf-8'
});
fetch(customerApi,{
method:'DELETE',
headers:myHeader
})
.then(res => res.json())
.then(
(result) => {
this.setState({
isDeleteCustomer:false
})
},(error) => {
this.setState({ error });
}
)
}
render() {
let form;
if(this.state.isAddCustomer && !this.state.isEditCustomer){
console.log("Add")
form = <AddCustomer onAddFormSubmit={this.onAddFormSubmit}
isAddCustomer = {this.state.isAddCustomer}
onFormControl = {this.onFormControl}/>
}else if(this.state.isEditCustomer && !this.state.isAddCustomer){
console.log("Edit")
form = <AddCustomer onAddFormSubmit={this.onAddFormSubmit}
singleCustomer = {this.state.singleCustomer}
onFormControl = {this.onFormControl}/>
}else if(this.state.isDeleteCustomer){
console.log("Delete")
console.log(this.state.deleteId)
form = <DeleteRecord onDeleteCustomer={this.onDeleteCustomer}
deleteId = {this.state.deleteId}
/>
}
return (
<div>
{form}
<br/>
<CustomerView
onEditCustomer = {this.onEditCustomer}
onCreate = {this.onCreate}
onDeleteClick = {this.onDeleteClick}/>
</div>
)
}
}
Here is CustomerView.js
import React from 'react';
import { Table, Button } from 'semantic-ui-react';
export default class CustomerView extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
deleteTitle: "customer",
isLoaded: false,
formClose: false,
singleCustomer: [],
users: []
}
}
//fetch data
componentDidMount() {
const customerApi = 'https://localhost:44387/api/Customers';
const myHeader = new Headers();
myHeader.append('Content-type', 'application/json');
myHeader.append('Accept', 'application/json');
myHeader.append('Origin', 'https://localhost:44387');
const options = {
method: 'GET',
myHeader
};
fetch(customerApi, options)
.then(res => res.json())
.then(
(result) => {
this.setState({
users: result,
isLoaded: true
});
},
(error) => {
this.setState({
isLoaded: false,
error
});
}
)
}
//Delete Customer
onDeleteCustomer = customerId => {
const { users } = this.state;
this.setState({
users: users.filter(customer => customer.customerId !== customerId)
});
const customerApi = 'https://localhost:44387/api/Customers/' + customerId;
const myHeader = new Headers({
'Accept': 'application/json',
'Content-type': 'application/json; charset=utf-8'
});
fetch(customerApi, {
method: 'DELETE',
headers: myHeader
})
.then(res => res.json())
.then(
(result) => {
this.setState({
})
}, (error) => {
this.setState({ error });
}
)
}
render() {
const { users } = this.state;
return (
<div>
<Button color='blue' onClick={() => this.props.onCreate()}>New Customer</Button>
<br/>
<br/>
<Table celled textAlign='center'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>ID</Table.HeaderCell>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Address</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body >
{
users.map(user => (
<Table.Row key={user.customerId}>
<Table.Cell>{user.customerId}</Table.Cell>
<Table.Cell>{user.name}</Table.Cell>
<Table.Cell>{user.address}</Table.Cell>
<Table.Cell>
<Button color='blue' onClick={() =>
this.props.onEditCustomer(user.customerId)}>Edit</Button>
</Table.Cell>
<Table.Cell>
<Button color='red' onClick={() =>
this.props.onDeleteClick(user.customerId)}>Delete</Button>
</Table.Cell>
</Table.Row>
))
}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan='5'>
No of Pages
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
</div>
)
}
}
Here is AddCustomer.js
import React from 'react';
import { Button, Form, Modal } from 'semantic-ui-react';
export default class AddCustomer extends React.Component {
constructor(props) {
super(props);
this.state = {
showCreateForm: false,
addOrdit:false,
id: "",
name: "",
address: "",
formData: {},
record: {}
}
if (props.isAddCustomer){
this.state.showCreateForm = props.isAddCustomer;
}
else if (props.singleCustomer) {
console.log("Single customer")
console.log(props.singleCustomer)
this.state.id = props.singleCustomer.customer.customerId;
this.state.name = props.singleCustomer.customer.name;
this.state.address = props.singleCustomer.customer.address;
this.state.record = props.singleCustomer.customer;
this.state.showCreateForm = props.singleCustomer.isEditCustomer;
this.state.addOrdit = props.singleCustomer.isEditCustomer;
console.log(this.state.name)
}else if(props.closeForm){
this.state.showCreateForm = props.closeForm;
}
}
handleChangeName = event => {
const value = event.target.value;
this.setState({ name:value });
}
handleChangeAddress = event => {
const value = event.target.value;
this.setState({ address:value });
}
handleSubmit = event => {
event.preventDefault();
if(this.state.addOrdit){
this.setState({
record: {
customerId: this.state.id,
name: this.state.name,
address: this.state.address
}
});
this.props.onAddFormSubmit(this.state.record);
}else{
this.setState({
formData: {
name: this.state.name,
address: this.state.address
}
});
this.props.onAddFormSubmit(this.state.formData);
}
}
//On cancel button click close Create user form
closeCreateForm = () => {
this.setState({ showCreateForm: false })
this.props.onFormControl();
}
//Open Create new Customer form
openCreateCustomer = () => {
this.setState({ showCreateForm: true })
}
render() {
let formTitle;
if (this.state.id !== 0) {
formTitle = "Edit Customer";
} else {
formTitle = "New Customer";
}
return (
<div>
<Modal size='small'
closeOnTriggerMouseLeave={false}
open={this.state.showCreateForm}>
<Modal.Header>
{formTitle}
</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>Name</label>
<input type="text" placeholder='Name' name="name"
value={this.state.name}
onChange={this.handleChangeName} />
</Form.Field>
<Form.Field>
<label>Address</label>
<input type="text" placeholder='Address' name="address"
value={this.state.address}
onChange={this.handleChangeAddress} />
</Form.Field>
<br />
<Button type='submit' floated='right' color='green'>Create</Button>
<Button floated='right' onClick={this.closeCreateForm}
color='black'>Cancel</Button>
<br />
</Form>
</Modal.Content>
</Modal>
</div>
)
}
}
And last one DeleteRecord.js
import React from 'react';
import { Button, Modal, Icon } from 'semantic-ui-react';
export default class DeleteRecord extends React.Component {
constructor(props) {
super(props);
this.state = {
ID:'',
title: "",
open: false
}
if(props.deleteId){
console.log(props.deleteId)
this.state.ID = props.deleteId.ID;
this.state.title = props.deleteId.title;
this.state.open = props.deleteId.open;
}
}
//On cancel button click close Create user form
closeCreateForm = () => {
console.log("Clicked")
this.setState({ open: false })
}
//Open Create new Customer form
openCreateCustomer = () => {
this.setState({ open: true })
}
render() {
const title = "Delete " + this.state.title;
return (
<div>
<Modal size='small'
closeOnTriggerMouseLeave={false}
open={this.state.open}>
<Modal.Header>
{title}
</Modal.Header>
<Modal.Content>
<br />
Are you sure?
<br />
<br />
<Button floated='right' icon labelPosition='right' color='red'
value='true'
onClick={() => this.props.onDeleteCustomer(this.state.ID)}
>
<Icon name='close' />
Delete
</Button>
<Button floated='right' color='black'
value='false'
onClick={this.closeCreateForm}
>Cancel</Button>
<br />
<br />
</Modal.Content>
</Modal>
</div>
)
}
}

Answer 1

Try using mobx for managing state variables and axios for making calls to API this will resolve your problem.
sample example code for using mobx
import { observable, computed } from "mobx"
class OrderLine {
#observable price = 0
#observable amount = 1
#computed get total() {
return this.price * this.amount;
}
}
now you can import OrderLine class in your Js and you can use and manage the state of price, amount dynamically for rendering the UI
Go through below link
https://mobx.js.org/README.html