import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css"; //일케해놓으면 App 컴포넌트가 로드될때 같이 import돼서 쓸수있게된다. 즉 <App/> 얘가 쓰일때
//css가 따라오게끔. 동적로드하는 효과.
import Subject from "./components/Subject";
import Content from "./components/Content";
import Article from "./components/Article";
import Controls from "./components/Controls";
import CreateForm from "./components/CreateForm"
import UpdateForm from "./components/UpdateForm"
class App extends Component {
constructor(props) {
super(props);
this.state = {
subject: { title: "WEB", desc: "world wide web!" },
mode: "welcome",
selected: 0,
contents: [
{ id: 0, title: "HTML", desc: "HyperText Management Language" },
{ id: 1, title: "CSS", desc: "씨에스에스" },
{ id: 2, title: "javascript", desc: "자바스크립트" }
]
};
}
getContent() {
var _mode=this.state.mode;
if (_mode === "read") {
var article = this.state.contents[this.state.selected];
return <Article article={article}></Article>;
} else if (_mode === "welcome") {
return <Article article={this.state.subject}></Article>;
} else if(_mode==="create"){
return <CreateForm addContent={this.addContent.bind(this)}></CreateForm>;
} else if(_mode==="update"){
return <UpdateForm data={this.state.contents[this.state.selected]} updateContent={this.updateContent.bind(this)}></UpdateForm>;
}
}
addContent(title,desc){
var len=this.state.contents.length;
var newContents=Array.from(this.state.contents);
newContents.push({id:len,title:title,desc:desc});
this.setState({
contents:newContents,
mode:'read',
selected:len
})
}
updateContent(id,title,desc){
var newContents=this.state.contents;
newContents[id].title=title;
newContents[id].desc=desc;
this.setState({
contents:newContents,
mode:'read',
selected:id
});
}
changeMode(mode){
this.setState({
mode:mode
});
}
changeArticle(i) {
this.setState({
mode:'read',
selected: i
});
}
render() {
return (
<div>
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}
onClicked={this.changeMode.bind(this)}
></Subject>
<Content
contents={this.state.contents}
onClicked={this.changeArticle.bind(this)}
></Content>
<Controls
controls={this.state.controls} onClicked={this.changeMode.bind(this)}
></Controls>
{this.getContent()}
</div>
);
}
}
export default App;
