simplonco · MehdiDr · Jun 6, 2017 · Jun 11, 2017 · Jun 11, 2017 · Jun 12, 2017
diff --git a/kickass/.gitignore b/kickass/.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/kickass/README.md b/kickass/README.md
diff --git a/kickass/added.html b/kickass/added.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Added</title>
+  </head>
+  <body>
+    <h1>
+      Added !
+    </h1>
+  </body>
+</html>
diff --git a/kickass/app/models/project.js b/kickass/app/models/project.js
@@ -0,0 +1,9 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const projectSchema = new Schema({
+  title: {type: String, required: true},
+  description: {type: String, required: true}
+})
+
+module.exports = mongoose.model('Project', projectSchema);
diff --git a/kickass/app/models/user.js b/kickass/app/models/user.js
@@ -0,0 +1,10 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const userSchema = new Schema({
+  name : {type: String, required: true},
+  age : {type: Number, required: true},
+  type : {type: String, required: true}
+})
+
+module.exports = mongoose.model('user', userSchema);
diff --git a/kickass/edit.html b/kickass/edit.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Edited</title>
+  </head>
+  <body>
+    <h1>Profil Edited !</h1>
+  </body>
+</html>
diff --git a/kickass/package.json b/kickass/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "kickass",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  },
+  "devDependencies": {
+    "babel-loader": "^6.2.10",
+    "eslint-plugin-react": "^6.10.3",
+    "http": "0.0.0",
+    "http-server": "^0.9.0",
+    "mongoose": "^4.10.7",
+    "path": "^0.12.7",
+    "react-scripts": "0.9.5",
+    "webpack": "^1.13.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "dev": "npm run build && node server.js"
+  }
+}
diff --git a/kickass/public/favicon.ico b/kickass/public/favicon.ico
diff --git a/kickass/public/index.html b/kickass/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/kickass/public/manifest.json b/kickass/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/kickass/server.js b/kickass/server.js
@@ -0,0 +1,97 @@
+const express = require('express');
+const app = express();
+const router = express.Router();
+const bodyParser = require('body-parser');
+const path = require('path');
+const mongoose = require('mongoose')
+const userHolder = require('./app/models/user')
+const db = "mongodb://admin:admin@ds123312.mlab.com:23312/promo7"
+const port = process.env.port || 3000;
+
+// DB Connection
+
+mongoose.connect(db)
+app.use(bodyParser.urlencoded({extended: true}));
+app.use(bodyParser.json())
+
+// API's route
+
+app.use('/api', router)
+router.use((req, res, next) => {
+  console.log('something is happening');
+  next();
+})
+app.use(express.static('build'));
+
+// Routes
+
+router.route('/users')
+  .get((req, res) => {
+    userHolder.find((err, user) => {
+      if(err)
+      res.send(err);
+
+      res.json(user);
+    })
+  })
+router.route('/user')
+  .get((req,res) => {
+    userHolder.findById(req.params.user, (err, user) => {
+      if(err)
+        res.send(err)
+      res.json(user)
+    })
+  })
+  .post((req, res) => {
+    const user = new userHolder()
+    user.name = req.body.name;
+    user.age = req.body.age;
+    user.type = req.body.type;
+
+    user.save(() => {
+      res.sendFile(path.join(__dirname + '/added.html'))
+    })
+  })
+router.route('/user/:user_id')
+  .get((req, res) => {
+    userHolder.findById(req.params.user_id, (err, user) => {
+      if(err)
+        res.send(err);
+
+      res.json(user);
+    })
+  })
+  .put((req, res) => {
+    userHolder.findById(req.params.user_id, (err, user) => {
+      if(err)
+        res.send(err);
+
+      user.name = req.body.name;
+      user.age = req.body.age;
+      user.type = req.body.type;
+
+      user.save((err) => {
+        if(err)
+          res.send(err);
+
+        res.sendFile(path.join(__dirname + '/edit.html'))
+      })
+    })
+  })
+  .delete((req, res) => {
+    userHolder.remove({
+      _id: req.params.user_id
+    }, (err, user) => {
+      if(err)
+        res.send(err);
+
+      res.sendFiles(path.join(__dirname + 'src/App.js'))
+    })
+  })
+
+app.get('*', (req, res) =>{
+  res.status(404).send("Je sais pas où vous allez, mais c'est pas par là...")
+})
+
+app.listen(port);
+console.log('port 3000');
diff --git a/kickass/src/App.css b/kickass/src/App.css
@@ -0,0 +1,21 @@
+body{
+  font-family: sans-serif;
+}
+nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+}
+.navbar {
+  text-decoration: none;
+  padding-top: 3vh;
+  color: black;
+}
+.navbar:hover {
+  text-decoration: underline;
+}
+.welcome {
+  margin: 18%;
+  font-size: 5em;
+}
diff --git a/kickass/src/App.js b/kickass/src/App.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
+import {Users, UserProfile} from './components/Users/Users';
+import {Projects, ProjectInfo} from './components/Projects/Project';
+import AddUser from './components/Users/NewUser';
+import AddProject from './components/Projects/NewProject';
+
+import './App.css';
+
+
+const Links = () => (
+  <nav>
+    <NavLink className="navbar" to="/">Home </NavLink>
+    <NavLink className="navbar" to="/users">Users </NavLink>
+    <NavLink className="navbar" to='/projects'>Projects</NavLink>
+    <NavLink className="navbar" to='/adduser'>New User ?</NavLink>
+    <NavLink className="navbar" to="/addproject">New Project ?</NavLink>
+  </nav>
+)
+export default class App extends Component {
+
+  render() {
+    return (
+      <div>
+        <Router>
+          <div>
+            <Links />
+            <Route exact path='/' render={() => (<h1 className="welcome">Welcome in hell</h1>)}/>
+            <Route exact path='/users' component={Users} />
+            <Route path='/users/:id' component={UserProfile} />
+            <Route exact path='/projects' component={Projects} />
+            <Route path='/projects/:id' component={ProjectInfo} />
+            <Route path='/adduser' component={AddUser} />
+            <Route path='/addproject' component={AddProject} />
+          </div>
+        </Router>
+      </div>
+    )
+  };
+}
diff --git a/kickass/src/App.test.js b/kickass/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/kickass/src/components/Projects/NewProject.js b/kickass/src/components/Projects/NewProject.js
@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+
+export default class AddProject extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      title: "",
+      description: ""
+    }
+  }
+
+  handleSubmit = () => {
+    fetch('https://kickass-sdw-3a.herokuapp.com/api/project', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        title: this.state.title,
+        description: this.state.description
+      })
+    })
+    .then((res) => res.json())
+    .catch(err => console.log('err', err))
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      [e.target.name] : e.target.value
+    })
+  }
+
+  render(){
+    return(
+      <div>
+        <form>
+          <p>Title : </p>
+          <input type='text' name='title' value={this.state.title} onChange={this.handleChange}></input>
+          <p>Description : </p>
+          <input type='text' name='description' value={this.state.description} onChange={this.handleChange}></input>
+          <p>Type :</p>
+          <button type='submit' onClick={() => this.handleSubmit()}>Submit</button>
+        </form>
+      </div>
+    )
+  }
+}