miracle-fox-2017 · setiadijoe · Dec 12, 2017 · Dec 12, 2017 · Dec 12, 2017
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}
diff --git a/bug-tracker-react-setiadijoe/.gitignore b/bug-tracker-react-setiadijoe/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/bug-tracker-react-setiadijoe/bugtracker/README.md b/bug-tracker-react-setiadijoe/bugtracker/README.md
diff --git a/bug-tracker-react-setiadijoe/bugtracker/package.json b/bug-tracker-react-setiadijoe/bugtracker/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "bugtracker",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "chance": "^1.0.12",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-mdl-selectfield": "^0.2.0",
+    "react-scripts": "1.0.17"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/bug-tracker-react-setiadijoe/bugtracker/public/favicon.ico b/bug-tracker-react-setiadijoe/bugtracker/public/favicon.ico
diff --git a/bug-tracker-react-setiadijoe/bugtracker/public/index.html b/bug-tracker-react-setiadijoe/bugtracker/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/bug-tracker-react-setiadijoe/bugtracker/public/manifest.json b/bug-tracker-react-setiadijoe/bugtracker/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/bug-tracker-react-setiadijoe/bugtracker/src/App.css b/bug-tracker-react-setiadijoe/bugtracker/src/App.css
@@ -0,0 +1,28 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/bug-tracker-react-setiadijoe/bugtracker/src/App.js b/bug-tracker-react-setiadijoe/bugtracker/src/App.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import FormInput from './FormBug.js'
+import CardBug from './CardBug.js'
+var Chance = require('chance')
+var chance = new Chance()
+
+class App extends Component {
+  constructor () {
+    super()
+    this.state = {
+      bugs: []
+    }
+  }
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h1 className="App-title">Bug Tracker <small>by HACKTIV8</small></h1>
+        </header>
+        <FormInput bugs={this.sendDataParent.bind(this)}>
+        </FormInput>
+        <hr />
+        {this.cardBugId.call(this)}
+      </div>
+    );
+  }
+
+  componentWillMount () {
+    if (localStorage.allBugs) {
+      const newBugs = JSON.parse(localStorage.allBugs)
+      console.log('newBugs ', newBugs)
+      this.setState({
+        bugs: newBugs.allBugs
+      })
+    }
+  }
+
+  sendDataParent(val) {
+    alert(JSON.stringify(val)+ ' dari depan')
+    console.log('Isi val ', val)
+    console.log('Isi this.state.bugs ', this.state.bugs);
+    val.BugId = chance.guid()
+    val.status = 'Open'
+    this.setState({
+      bugs: [{sever: val.sever, desc:val.desc, pic:val.pic}]
+    }, ()=> {
+      localStorage.setItem('allBugs', JSON.stringify(this.state))
+    })
+  }
+
+  cardBugId () {
+    if (this.state.bugs) {
+      return <div className="md1-grid">
+        {this.state.bugs.map((item, index) => {
+          return <div className="md1-cell--4-col">
+          <CardBug
+            style={{align: 'center'}}
+            onDelete={this.spliceState.bind(this)}
+            onUpdate={this.updateBug.bind(this)}
+            key={item.BugId}
+            CardBugsProps={item}
+            indexnya={index}>
+          </CardBug>
+        </div>
+        })}
+      </div>
+    }
+  }
+
+  spliceState (index) {
+    const allBugs = this.state.bugs
+    this.setState({
+      bugs: [...allBugs.slice(0, index), ...allBugs.slice(index + 1)]
+    }, () => {
+      localStorage.setItem('allBugs', JSON.stringify(this.state))
+    })
+  }
+
+  updateBug (objval, index) {
+    const allBugs = this.state.bugs
+    allBugs[index].status = 'Close'
+    this.setState({
+      bugs: allBugs
+    }, () => {
+      localStorage.setItem('allBugs', JSON.stringify(this.state))
+    })
+  }
+}
+
+export default App;
diff --git a/bug-tracker-react-setiadijoe/bugtracker/src/App.test.js b/bug-tracker-react-setiadijoe/bugtracker/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/bug-tracker-react-setiadijoe/bugtracker/src/CardBug.js b/bug-tracker-react-setiadijoe/bugtracker/src/CardBug.js
@@ -0,0 +1,48 @@
+import React, {Component} from 'react'
+
+class CardBug extends Component {
+  // constructor (props) {
+  //   super(props)
+  // }
+
+  render () {
+    return (
+      <div className="mdl-cell--12-col">
+        <div className="demo-card-square mdl-card mdl-shadow--2dp">
+          <div>
+            <h3>BugId: </h3>
+            <p>{this.props.CardBugsProps.BugId}</p> 
+          </div>
+          <div>
+            <h3>Severity: </h3>
+            <p>{this.props.CardBugsProps.sev}</p>
+          </div>
+          <div>
+            <h3>PIC: </h3>
+            <p>{this.props.CardBugsProps.pic}</p>
+          </div>
+          <div className="mdl-card__actions mdl-card--border">
+            <button onClick={this.updateParent.bind(this, this.props.CardBugsProps, this.props.indexnya)}
+              className="mdl-button mdl-button--colored mdl-js-button">
+                status: {this.props.CardBugsProps.status}
+            </button><br />
+            <button onClick={this.deleteState.bind(this, this.props.indexnya)}
+              className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+              Delete
+            </button>
+          </div>
+        </div><br /><br />
+      </div>
+    )
+  }
+
+  deleteState (val) {
+    this.props.onDelete(val)
+  }
+
+  updateParent (objval, index) {
+    this.props.onUpdate(objval, index)
+  }
+}
+
+export default CardBug
diff --git a/bug-tracker-react-setiadijoe/bugtracker/src/FormBug.js b/bug-tracker-react-setiadijoe/bugtracker/src/FormBug.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+// import {SelectField, Option} from 'react-mdl-selectfield'
+import './App.css';
+
+class FormInput extends Component {
+  constructor (props) {
+    super(props);
+    this.state = { 
+      sever: '',
+      pic: '', 
+      desc: ''
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <form>
+          <h3> Add Bug Report </h3>
+          <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label htmlFor="input_text" className="mdl-textfield__label">Describe a bug</label>
+            <input 
+              name="desc"
+              onChange={this.onChange.bind(this)}
+              type="text"
+              className="mdl-textField__input"
+              id="input_text"
+              required />
+          </div>
+          <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label htmlFor="input_text" className="mdl-textfield__label">Severity</label>
+            <select
+              name="sever"
+              value={this.state.sever}
+              onChange={this.onChange.bind(this)}
+              className="mdl-textField__select"
+              id="severity"
+              required>
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="hard">Hard</option>
+            </select>
+          </div>
+          <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label htmlFor="input_text" className="mdl-textfield__label">Describe a bug</label>
+            <input
+              name="pic"
+              onChange={this.onChange.bind(this)}
+              type="text"
+              className="mdl-textField__input"
+              id="PIC"
+              required />
+          </div>
+          <button onClick={this.dataForm.bind(this)}
+            className="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+            Button
+          </button>
+        </form>
+      </div>
+    );
+  }
+
+  onChange (e) {
+    const name = e.target.name
+    this.setState({
+      [name]: e.target.value
+    }, () => {
+      console.log(JSON.stringify(this.state))
+    })
+  }
+
+  dataForm (e) {
+    e.preventDefault()
+    console.log(this.state)
+    this.props.bugs(this.state)
+    this.setState({
+      desc: '',
+      sever: '',
+      pic: ''
+    })
+  }
+}
+
+export default FormInput
diff --git a/bug-tracker-react-setiadijoe/bugtracker/src/index.css b/bug-tracker-react-setiadijoe/bugtracker/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/bug-tracker-react-setiadijoe/bugtracker/src/index.js b/bug-tracker-react-setiadijoe/bugtracker/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+registerServiceWorker();
diff --git a/bug-tracker-react-setiadijoe/bugtracker/src/logo.svg b/bug-tracker-react-setiadijoe/bugtracker/src/logo.svg