jiwoo 2week

2week/class/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "materialize-css": "^1.0.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "2.1.3"

2week/class/src/App.css

@@ -0,0 +1,3 @@
+.App{
+    background-color: white;
+}

2week/class/src/App.js

@@ -1,67 +1,100 @@
 import React, {Component} from "react"
+import "./App.css";
+import "materialize-css";
+import "materialize-css/dist/css/materialize.min.css";
+import Note from "./Note.js";
+import Writing from "./Writing.js";
+// import Edit from "./Edit.js";
 
 class App extends Component {
   constructor(props) {
     super(props)
-    this.state = {
-      //state의 초기값을 설정합니다.
-      savedNotes: [{content: "default1"}, {content: "default2"}]
+    this.state = {   
+      savedNotes: [
+        {id:0, title: "title1", content: "default1", view:false},
+        {id:1, title: "title2", content: "default2", view:true},
+        {id:2, title: "title3", content: "default3", view:false}
+      ]
     }
   }
+
 
-  save = (content) => {
-    //설계한 함수의 상태를 확인하기 위해 save를 표시하도록 해봅시다.
-    console.log(content + "is saved")
+  save = writingState => {
+    const { savedNotes } = this.state; //es6문법 디스트럭처링 , 객체 구조분해할당 
+    const lastNoteId = savedNotes.length != 0 ? savedNotes[savedNotes.length -1].id: 0;
+    this.setState({
+      savedNotes: [...savedNotes,
+        {
+          id: lastNoteId +1,
+          title: writingState.title,
+          content: writingState.content,
+          view:  writingState.content,
+        }
+      ] //스프레드 연산자 spread operand 전개연산자 ... savedNotes를 그대로 복사 깊은복사 얕은복사
+    });
+    console.log("save");
   }
 
-  render() {
-    return (
-      <div className='App'>
-        <Writing save={this.save} />
-        {/* 원래 노트를 여러개 보내므로, Notes라고 하는게 좋겠지만 추후에 Note 컴포넌트로 활용할 예정이기 때문에 Note로 명명해 줍시다.*/}
-        <Note content={this.state.savedNotes[0].content} />
-      </div>
-    )
-  }
-}
+
 
-class Writing extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      content: ""
-    }
-  }
+  delete = index =>{
+    // console.log(index);
+    const {savedNotes} = this.state
+    const filteredNotes = savedNotes.filter((note)=> note.id !== index)
 
-  handleChange = (e) => {
-    console.log("changed")
-  }
+    this.setState({
+      savedNotes: filteredNotes
+    });
+  };
+
+  edit = index =>{
+    // console.log(index);
+    const {savedNotes} = this.state
+    const filteredNotes = savedNotes.findIndex(note=> note.id === index);
+
+    const selected= savedNotes[filteredNotes];
+    const nextNotes = [...savedNotes]; 
+
+    nextNotes[index] = {
+      ...selected,
+      view: !selected.checked 
+    }
+    this.setState({
+       savedNotes : nextNotes
+    });
+  }; 
 
-  handleSubmit = (e) => {
-    this.props.save("content")
+  edit2 = (writingState, index) =>{ 
+    const { savedNotes } = this.state; 
+    // const filteredNotes = savedNotes.findIndex(note=> note.id === index);
+    // const lastNoteId = savedNotes.length != 0 ? savedNotes[savedNotes.length -1].id: 0;
+    const changeArray = savedNotes.map(note => note.id === index ? ({...note, title:writingState.title, content:writingState.content}) : note);
+    this.setState({
+      savedNotes : changeArray
+    });
   }
 
-  render() {
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <input
-          type='text'
-          value={this.state.content}
-          onChange={this.handleChange}
-        />
-        <input type='submit' />
-      </form>
-    )
-  }
-}
 
-class Note extends Component {
   render() {
-    const { content } = this.props
-
     return (
-      <div>
-        {content}
+      <div className='App'>
+        <Writing save={this.save} />
+        {/* 원래 노트를 여러개 보내므로, Notes라고 하는게 좋겠지만 추후에 Note 컴포넌트로 활용할 예정이기 때문에 Note로 명명해 줍시다.*/}
+        <div className="row">
+          {this.state.savedNotes.map((note, index) => (  //소괄호() 바로 return 하겠다
+          <Note 
+          edit={this.edit} 
+          delete={this.delete} 
+          edit2={this.edit2}
+          title={note.title} 
+          content={note.content} 
+          save={this.save} 
+          key={note.id} 
+          index={note.id} 
+          view={note.view} 
+          />
+        ))}
+        </div>
       </div>
     )
   }

2week/class/src/Edit.js

@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+
+class Edit extends Component{  
+    constructor(props) {
+        super(props)
+        this.state = {
+            title:this.props.title,
+            content:this.props.content,
+            view: this.props.view
+        }
+      }
+
+    handleChange = (e) => {
+        this.setState({
+            [e.target.name]: e.target.value
+        });
+    };   
+
+    handleSubmit = (e) => {
+        const {view} = this.props;
+        this.props.edit2(this.state, this.props.index);
+        console.log(this.state.title, this.state.content)
+        console.log(view);
+        // {view ? ('트루') : ('펄스')}
+        // this.setState({
+        //     view : 'false'
+        // })
+        e.preventDefault(); 
+      };
+
+    render(){ 
+        return(
+            <div>
+            <form onSubmit={this.handleSubmit}>
+                <div className='input-field'>
+                <input
+                    type='text'
+                    name='title'
+                    value={this.state.title}
+                    onChange={this.handleChange}                
+                />
+                </div>            
+                <div className='input-field'>
+                <input
+                    type='text'
+                    name='content'
+                    value={this.state.content}
+                    onChange={this.handleChange}
+                />
+                </div>            
+                <input type='submit' value='edit' />
+            </form>
+            </div>
+        )
+    }
+}
+
+export default Edit;

2week/class/src/Note.css

@@ -0,0 +1,14 @@
+.Note{
+    position: relative;
+}
+
+.DeleteBtn{
+    position: absolute;
+    left:80%;
+    top:-5%;
+}
+
+#Icon{
+    vertical-align: middle;
+    font-size: 1rem;
+}

2week/class/src/Note.js

@@ -0,0 +1,56 @@
+import React, {Component} from 'react';
+import "./Note.css";
+import Edit from './Edit.js';
+
+class Note extends Component {
+
+    handleClickDelete = () =>{
+        this.props.delete(this.props.index);
+    };
+
+    noteClickFunc = () =>{        
+        this.props.edit(this.props.index);     
+    } 
+
+    render() {
+        const { save,edit2,index,content,title,view } = this.props;
+
+      return (
+        <div className="Note col s12 m4 l3">
+            <div className="DeleteBtn">
+                <div className="DeleteBtn btn-floating btn-large">
+                <i id="Icon" className="material-icons" onClick={this.handleClickDelete}>delete</i>
+                </div>
+            </div>
+            <div className="card yellow lighten-4"> 
+                <div className="card-content black-text"> 
+                <span className="card-title" onClick={this.noteClickFunc}>                  
+                    {view ? (
+                    <>
+                    <Edit 
+                    save={save} 
+                    edit2={edit2} 
+                    index={index} 
+                    title={title} 
+                    content={content} 
+                    view={view} 
+                    />
+                    </>
+                    ) : 
+                    (
+                    <>
+                    <h3 onClick={this.noteClickFunc}>{title}</h3>
+                    <p onClick={this.noteClickFunc}>{content}</p>
+                    </>
+                    )
+                    }
+                </span>
+                </div>  
+            </div>
+        </div>
+
+      )
+    }
+  }
+
+  export default Note;

2week/class/src/Writing.js

@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+
+class Writing extends Component {
+    constructor(props) {
+      super(props)
+      this.state = {
+        title:"",
+        content: ""
+      }
+    }
+
+
+    handleChange = (e) => {
+        //console.log(e);
+        this.setState({
+            [e.target.name]: e.target.value
+        });
+    };
+
+    handleSubmit = (e) => {
+      this.props.save(this.state);
+      this.setState({
+          title:"",
+          content: ""
+      });
+      e.preventDefault();
+    };
+
+    render() {
+      return (
+        <div>
+          <form onSubmit={this.handleSubmit}>
+            <div className='input-field'>
+              <input
+                type='text'
+                name='title'
+                value={this.state.title}
+                onChange={this.handleChange}
+              />
+            </div>
+
+            <div className='input-field'>
+              <input
+                type='text'
+                name='content'
+                value={this.state.content}
+                onChange={this.handleChange}
+              />
+            </div>
+
+            <input type='submit' value='Submit' />
+          </form>
+        </div>
+      )
+    }
+  }
+
+  export default Writing;