Jake

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015"],
+  "presets": ["react"]
+}

.eslintignore

@@ -0,0 +1,5 @@
+**/node_modules/*
+**/vendor/*
+**/*.min.js
+**/coverage/*
+**/build/*

.eslintrc

@@ -0,0 +1,21 @@
+{
+  "rules": {
+    "no-console": "off",
+    "indent": [ "error", 2 ],
+    "quotes": [ "error", "single" ],
+    "semi": ["error", "always"],
+    "linebreak-style": [ "error", "unix" ]
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "experimentalObjectRestSpread": true,
+    "impliedStrict": true
+  },
+  "extends": "eslint:recommended"
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "24-component-composition",
+  "version": "1.0.0",
+  "description": "![cf](https://i.imgur.com/7v5ASc8.png) 24: Component Composition ======",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Loaye/24-component-composition.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Loaye/24-component-composition/issues"
+  },
+  "homepage": "https://github.com/Loaye/24-component-composition#readme",
+  "dependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.5",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "node-sass": "^4.5.3",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.2.2",
+    "sass-loader": "^6.0.6",
+    "url-loader": "^0.5.9",
+    "uuid": "^3.1.0",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
+  }
+}

src/component/dashboard-container/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import uuid from 'uuid/v1';
+
+import NoteCreateForm from '../note-create-form';
+
+class DashboardContainer extends React.Component{
+  constructor(props){
+    super(props)
+
+    this.noteCreate = this.noteCreate.bind(this)
+  }
+
+  noteCreate(note){
+    note.id = uuid()
+    this.props.getNote.setState(state => ({
+      notesArr: [...state.notesArr, note]
+    }));
+  }
+
+  render(){
+    return(
+      <div>
+        <NoteCreateForm
+          handleSubmit={this.noteCreate}
+          submitTitle="Submit Note"/>
+      </div>
+    )
+  }
+}
+
+export default DashboardContainer

src/component/navbar/index.js

@@ -0,0 +1,25 @@
+import './style/style.scss';
+
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+
+class Navbar extends React.Component {
+  render() {
+    return (
+      <header>
+        <section className="title">
+          <img className="pokeballimg" src="src/component/navbar/assets/pokeball.png"></img>
+          <h1 className="titleName">Pokeball</h1>
+        </section>
+          <nav>
+            <ul>
+
+            </ul>
+          </nav>
+      </header>
+    )
+  }
+}
+
+export default Navbar

src/component/navbar/style/style.scss

@@ -0,0 +1,6 @@
+@import "src/style/theme/vars.scss"
+
+.title{
+  background-color: $primary;
+  border-bottom: 1em dashed $secondary;
+}

src/component/note-create-form/index.js

@@ -0,0 +1,67 @@
+import './style/style.scss'
+import React from 'react'
+
+class NoteCreateForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    let title = props.noteUpdate ? props.noteUpdate.title : ''
+    let content = props.noteUpdate ? props.noteUpdate.content : ''
+
+    this.state ={
+      title,
+      editing: false,
+      completed: false,
+      content
+    }
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleChange(e) {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if(this.props.submitTitle == 'Update Note'){
+      this.props.handleSubmit(this.state, this.props.noteUpdate.id)
+    }else{
+      this.props.handleSubmit(this.state)
+    }
+  }
+
+  render(){
+    return(
+      <form onSubmit = {this.handleSubmit}>
+        <div className='inputContainer'>
+          <input
+            name='title'
+            type='text'
+            value={this.state.title}
+            placeholder='Note Title'
+            onChange={this.handleChange}
+            />
+          <span className="underline"></span>
+        </div>
+        <div className='inputContainer'>
+          <input
+            name='content'
+            type='text'
+            value={this.state.content}
+            placeholder='Enter Note'
+            onChange={this.handleChange}
+            />
+          <span className="underline"></span>
+        </div>
+        <div className='buttonContainer'>
+          <button className='button' type='submit'>{this.props.submitTitle}</button>
+        </div>
+      </form>
+    )
+  }
+}
+
+export default NoteCreateForm

src/component/note-item/index.js

@@ -0,0 +1,70 @@
+import './style/style.scss'
+import React from 'react'
+import NoteCreateForm from '../note-create-form'
+
+class NoteItem extends React.Component{
+  constructor(props){
+    super(props)
+    this.state = {
+      editing: null,
+    }
+
+    this.updateNote = this.updateNote.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+    this.setTrue = this.setTrue.bind(this)
+  }
+
+  handleDelete(){
+    this.props.deleteNote(this.props.note.id);
+  }
+
+  setTrue(){
+    this.setState({ editing: true });
+  }
+
+  updateNote(note, id){
+    note.id = id;
+    let notes = this.props.notesArr;
+    notes = notes.map(prevNote => {
+      return id === prevNote.id ? note : prevNote
+    });
+    this.props.app.setState({ notesArr: notes});
+    this.setState({ editing: false });
+  }
+
+  render(){
+    return(
+      <li onDoubleClick={this.setTrue}>
+        {
+          this.state.editing == true ?
+          <section className="update">
+            <NoteCreateForm
+              noteUpdate={this.props.note}
+              submitTitle='Update Note'
+              handleSubmit={this.updateNote}
+              />
+          </section>
+          :
+          <section className="noteStyle">
+            <section className='noteText'>
+              <section className='textAlign'>
+                <h2>*{this.props.note.title}*</h2>
+              </section>
+              <span>
+                <section className='setP'>
+                  <p>{this.props.note.content}</p>
+                </section>
+              </span>
+              <section className='textAlign'>
+                <p>Double Click To Edit</p>
+              </section>
+              <button className='deleteButton' onClick={this.handleDelete}>X</button>
+            </section>
+          </section>
+        }
+      </li>
+    );
+  }
+}
+
+export default NoteItem

src/component/note-list/index.js

@@ -0,0 +1,28 @@
+import './style/style.scss';
+import React from 'react';
+import NoteItem from '../note-item';
+
+class NoteList extends React.Component{
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return(
+      <div>
+        <ul className="orderList">
+          {this.props.notesArr.map((item, i) => {
+            return (
+              <NoteItem key={i} note = {item}
+                deleteNote = {this.props.deleteNote}
+                app ={this.props.app}
+                notesArr={this.props.notesArr}
+                />
+            );
+          }
+        )}
+      </ul>
+    </div>
+    )
+  }
+}

src/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Note App</title>
+  </head>
+  <body> 
+    <section id="root"></section>
+  </body>
+</html>

src/main.js

@@ -0,0 +1,68 @@
+import './style/main.scss';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {BrowserRouter, Route} from 'react-router-dom';
+
+import DashboardContainer from './component/dashboard-container';
+import NoteList from './component/note-list';
+import Navbar from './component/navbar';
+
+class App extends React.Component{
+  constructor(props){
+    super(props)
+    this.state={
+      notesArr: []
+    }
+    this.getNote = this.getNote.bind(this)
+    this.deleteNote = this.deleteNote.bind(this)
+  }
+
+  getNote(){
+    return{
+      state: this.state,
+      setState: this.setState.bind(this)
+    }
+  }
+
+  deleteNote(id){
+    let notes=this.state.notesArr;
+    notes=notes.filter(note => note.id !== id);
+    this.setState({ notesArr: notes });
+  }
+
+  getApp(){
+    return{
+      state:this.state,
+      setState:this.setState.bind(this)
+    }
+  }
+
+
+
+  componentDidUpdate(){
+    console.log('___STATE___', this.state);
+  }
+
+  render(){
+    return(
+      <section className="wrapper">
+        <Navbar />
+        <main className="main">
+          <BrowserRouter>
+            <section>
+              <Route exact path='/' component={() => <DashboardContainer getNote={this.getNote()} />} />
+              <NoteList
+                notesArr={this.state.notesArr}
+                deleteNote={this.deleteNote}
+                app={this.getApp()}
+                />
+            </section>
+          </BrowserRouter>
+        </main>
+      </section>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));