64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
import React, { Component } from "react";
|
|
import logo from "./cscLogo.png";
|
|
import "./App.css";
|
|
|
|
import MyForm from "./components/MyForm";
|
|
import FormatText from "./components/FormatText";
|
|
|
|
class App extends Component {
|
|
state = {
|
|
name: "",
|
|
abstract: "",
|
|
description: "",
|
|
date: "",
|
|
time: "",
|
|
show: false,
|
|
};
|
|
|
|
handleChange = (event) => {
|
|
// console.log(event.target.value);
|
|
this.setState({ [event.target.name]: event.target.value });
|
|
};
|
|
|
|
handleSubmit = () => {
|
|
console.log(this.state);
|
|
this.setState({ show: true });
|
|
};
|
|
|
|
// todo:
|
|
// - setup datetime picker (material ui)
|
|
// - format look nice, styling
|
|
// - how to do newline in formatted text
|
|
render() {
|
|
return (
|
|
<div className="App">
|
|
<img src={logo} class="logo" alt="Logo" />
|
|
<MyForm
|
|
name={this.state.name}
|
|
date={this.state.date}
|
|
time={this.state.time}
|
|
abstract={this.state.abstract}
|
|
description={this.state.description}
|
|
handleChange={this.handleChange}
|
|
handleSubmit={this.handleSubmit}
|
|
/>
|
|
|
|
{this.state.show ? (
|
|
<FormatText
|
|
name={this.state.name}
|
|
date={this.state.date}
|
|
time={this.state.time}
|
|
abstract={this.state.abstract}
|
|
description={this.state.description}
|
|
show={this.state.show}
|
|
/>
|
|
) : (
|
|
<div></div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|