import React, { Component } from 'react';
import './Edit.css';
import "bootstrap/dist/css/bootstrap.min.css";
import Fab from '@material-ui/core/Fab';
import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
import { Link } from 'react-router-dom'
import TextField from '@material-ui/core/TextField';
export class Edit extends Component {
//--------<
component: Article >--------
//----<
compontent >----
baseURL = "/";
constructor(props) {
//-<
react: parameter >
super(props);
//-</
react: parameter >
//--<
react: variables >--
this.state = {
idarticle: 0,
loading: true,
IDUser: "",
title: "",
TextContent: "",
HtmlContent: "",
Folder: "",
Keywords: "",
nImages: "",
nVideos: "",
nFiles: "",
DtCreated: "",
DtEdit: ""
}
this.handleChange
= this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event)
{
this.setState({ title: event.target.value });
}
handleSubmit(event) {
alert('A name
was submitted: '
+ this.state.value);
event.preventDefault();
}
//--<
component.events >--
componentDidMount() {
this.populateData(this.props.match.params.id);
}
//--</
component.events >--
//----</
compontent >----
//====<
functions >====
//*load
data from web api
async populateData(id) {
//--------<
populateData() >--------
const response = await fetch('api/articles/' + id); //*get web_data from web api as json-string
const data = await response.json(); //*convert json to data
//console.log("this.state="
+ this.state);
//console.log(this.state);
this.setState(state => ({
idarticle: data.idArticle,
iduser: data.idUser,
title: data.title,
textcontent: data.textContent,
htmlcontent: data.htmlContent,
folder: data.folder,
keywords: data.keywords,
nimages: data.nImages,
nvideos: data.nVideos,
nfiles: data.nFiles,
dtcreated: data.dtCreated,
dtedit: data.dtEdit,
loading: false,
})); //*refresh
state of arcticles
//--------</
populateData() >--------
}
//====</
functions >====
//====<
HTML >====
//----<
render >----
render() {
//--------<
render(HTML) >--------
document.title = "✍ " + this.state.title;
return (
//----< return >----
<div className="submit-form">
{
//--< IsLoaded >--
<form className="submit-form">
<div>
<Link to={"/👁/"
+ this.state.idarticle}><Fab color="secondary" aria-label="save and show" style={{ float: 'right' }} >
<RemoveRedEye />
</Fab>
</Link>
<TextField
value={this.state.title}
onChange={this.handleChange}
//defaultValue={this.state.title}
//onChange={(e) => {
this.setState({ title: e.target.value }) }}
style={{
width: '100%' }}
/>
<div style={{marginTop:'10px'}}>
<button type="submit">Update</button>
</div>
</div>
<input type="hidden" value={this.state.idarticle} />
</form>
//--</ IsLoaded >--
}
</div>
//----</ return >----
);
//--------</
render(HTML) >--------
}
//----</
render >----
//====</
HTML >====
//--------</
component: Articles >--------
}
|