second commit

Author: merttosun

api/db.json

@@ -0,0 +1,52 @@
+{
+  "users": [
+    {
+      "id": "unique-1",
+      "name": "Mert TOSUN",
+      "salary": "5000",
+      "department": "Bilişim"
+    },
+    {
+      "id": "unique-2",
+      "name": "Aslı Eda İNANÇ",
+      "salary": "5000",
+      "department": "Tasarım"
+    },
+    {
+      "id": "unique-3",
+      "name": "Semra TOSUN",
+      "salary": "5000",
+      "department": "Donanım"
+    },
+    {
+      "name": "kıvanç çolak",
+      "department": "makine",
+      "salary": "6000",
+      "id": "pBFzRh7"
+    },
+    {
+      "name": "çağatay uncu",
+      "salary": "11100",
+      "department": "bilgisayar mühhhhh",
+      "id": "E0ZqMAH"
+    },
+    {
+      "name": "yılmaz zeren",
+      "department": "haberleşme",
+      "salary": "5000",
+      "id": "vUKJSRi"
+    },
+    {
+      "name": "atilla uysal",
+      "salary": "5300",
+      "department": "pazarlama",
+      "id": "cw7jIWf"
+    },
+    {
+      "name": "Alparslan Türkeş",
+      "salary": "7000",
+      "department": "Turan",
+      "id": "98o2BCo"
+    }
+  ]
+}

src/App.js

@@ -1,25 +1,53 @@
 import React, {Component} from 'react';
-import Navbar from './components/Navbar';
+import Navbar from './layout/Navbar';
 // import User from './components/user';
 import './App.css';
 import Users from  "./components/Users";
 // import PropTypes from 'prop-types';
-import AddUser from "./components/AddUser";
+import AddUser from "./forms/AddUser";
+import UpdateUser from "./forms/UpdateUser";
+// import Test from "./components/Test";
+import NotFound from "./pages/NotFound";
+import {BrowserRouter as Router, Route,Switch} from "react-router-dom";
+import Contribute from "./pages/Contribute";
+// const Home = () => { 
+//   return(
+//     <h3>Home Page</h3>
+//   )
+// }
+// const About = () => { 
+//   return(
+//     <h3>About Page</h3>
+//   )
+// }
+
+
 class App extends Component {
-  
 
 
   render () {
 
     return (
-      <div className="container"> 
-        
-        <Navbar title = "User App" />
+      <Router>
+        <div className="container"> 
+           
+         <Navbar title = "User App" />
         <hr/>
-        <AddUser></AddUser>
-        <Users/>
+
+        <Switch>
+        <Route exact path = "/" component = {Users} />
+        <Route exact path = "/add" component = {AddUser} />
+        <Route exact path = "/github" component = {Contribute} />
+        <Route exact path = "/edit/:id" component = {UpdateUser} />
+        <Route component = {NotFound} />
+        </Switch>
+        
+        
+        
 
-      </div>
+        </div>
+      </Router>
+      
     );
   }
 

src/components/Navbar.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import UserConsumer from "../context";
-
+import axios from "axios";
+import {Link} from "react-router-dom";
 class User extends Component {
     state = { 
         isVisible : false
@@ -27,12 +28,15 @@ class User extends Component {
             isVisible : !this.state.isVisible
         })
     }
-    onDeleteUser = (dispatch,e) => {
+    onDeleteUser = async (dispatch,e) => {
         const {id} = this.props;
+        //Delete Request
+        await axios.delete(`http://localhost:3004/users/${id}`);
         //Consumerdan kullanıcagımız dispatch gelicek
         dispatch({type: "DELETE_USER", payload:id});
 
     }
+    
 
     // constructor (props) { 
     //     super(props)
@@ -43,7 +47,7 @@ class User extends Component {
     render() {
 
         //Destructing
-        const {name,department,salary} = this.props;
+        const {id,name,department,salary} = this.props;
         const {isVisible} = this.state;
 
         return (
@@ -54,7 +58,7 @@ class User extends Component {
 
                             return (
                                     <div className ="col-md-8 mb-4" >
-                                        <div className ="card" style= {isVisible ? {backgroundColor: "#e6e6fa",color:"white"} : null}>
+                                        <div className ="card" style= {isVisible ? {backgroundColor: "#3498DB ",color:"white"} : null}>
                                             <div className = "card-header d-flex justify-content-between">
                                                 <h4 className = "d-inline" onClick = {this.onClickEvent.bind(this,34)}>{name}</h4>
                                                 <i onClick = {this.onDeleteUser.bind(this,dispatch)} className="far fa-trash-alt" style = {{cursor: "pointer"}}></i>
@@ -63,7 +67,7 @@ class User extends Component {
                                             isVisible ?  <div className = "card-body">
                                             <p className = "card-text">Maaş: {salary}</p>
                                             <p className = "card-text">Departman: {department}</p>
-                                            
+                                            <Link to = {`edit/${id}`} className="btn btn-dark btn-block">Update User</Link>
                                         </div> : null
                                         }
 

src/components/User.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import axios from 'axios';
 
 const UserContext = React.createContext();
 
@@ -15,6 +16,14 @@ const reducer = (state,action) => {
                 ...state,
                 users: [...state.users,action.payload]
             }
+        case "UPDATE_USER":
+            return {
+                ...state,
+                users: state.users.map(user => user.id === action.payload.id ? action.payload : user)
+                //map fonksiyonu bir array dönüyor , biz burda aslında objeler birleşerek bir array olusturuyuo usersımız o oluyo.
+                //herbir userın üzerinde geziniyoruz userın id'si o anki güncellenmiş userin id'sine eşitse
+                //güncellenmiş objemizi koymamız gerekiyo bu durumda action.payloadla değiştiriyo, idsi eşit değilse değişiklik yapmıyo
+            }
         default:
             return state //uygulammızda ubulunmamız bi type gönderilirse eski state i dönüyor
     }
@@ -24,39 +33,19 @@ const reducer = (state,action) => {
 export class UserProvider extends Component {
 
     state = {
-        users : [ 
-          {
-            id:"unique-1",
-            name : "Mert TOSUN",
-            salary : "5000",
-            department : "Bilişim"
-          },
-          {
-            id:"unique-2",
-            name : "Aslı Eda İNANÇ",
-            salary : "5000",
-            department : "Tasarım"
-          },
-          {
-            id:"unique-3",
-            name : "Semra TOSUN",
-            salary : "5000",
-            department : "Donanım"
-          },
-          {
-            id:"unique-4",
-            name : "Mehmet TOSUN",
-            salary : "5000",
-            department : "Üretim"
-          }
-    
-           
-        ],
+        users: [],
         dispatch : action => { 
             this.setState(state => reducer (state,action))
         }
       }
-
+    componentDidMount = async () => {
+       const response = await axios.get("http://localhost:3004/users");
+    //    console.log(response);
+        this.setState({
+            users : response.data
+        })
+    }
+    
     render() {
         return (
             <UserContext.Provider value = {this.state}>

src/context.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react'
 import posed from 'react-pose';
 import UserConsumer from "../context";
-
-var uniqid = require('uniqid');
+import axios from "axios";
 const Animation = posed.div({
     visible: {
         opacity: 1,
@@ -22,25 +21,33 @@ class AddUser extends Component {
         visible: true,
         name : "",
         department :"",
-        salary: ""
+        salary: "",
+        error: false
     }
     changeVisibility = (e) => { 
         this.setState({
             visible:!this.state.visible
         })
     }
+    validateForm = () => {
+        const {name,salary,department} = this.state;
+            if(name === "" || salary === "" || department ==="") {
+                return false;
+            }
+            return true;
+    }
     changeInput = (e) => { 
         this.setState({
 
             [e.target.name] : e.target.value
         })
     }
-    addUser = (dispatch, e) => { 
+     addUser = async (dispatch, e) => { 
 
         e.preventDefault();
         const {name,department,salary} = this.state;
         const newUser = { 
-            id: uniqid(),
+            
             // name : name,
             // salary : salary,
             // department : department   böyle hem anahtar hem değeri aynıysa aşağıdaki gibi yazabiliyoruz
@@ -49,8 +56,21 @@ class AddUser extends Component {
             salary
 
         }
-        dispatch({type : "ADD_USER", payload: newUser});
-        console.log(newUser);
+
+        if(!this.validateForm()){ // eğer validate formdan false değeri dönmüşse
+            this.setState({
+                error:true
+            })
+            return;
+
+        }
+
+        const response = await axios.post("http://localhost:3004/users",newUser);
+
+
+        dispatch({type : "ADD_USER", payload:response.data});
+        //redirect  tüm işlemlerimiz bittince root a gitmek istediğimizi belirrtiyoruz
+        this.props.history.push("/");
     }
     // changeName = (e) => { 
     //     this.setState({
@@ -68,7 +88,7 @@ class AddUser extends Component {
     //     })
     // }
     render() {
-        const {visible,name,salary,department} = this.state;
+        const {visible,name,salary,department,error} = this.state;
         return <UserConsumer>
                 {
                     value => { 
@@ -83,7 +103,11 @@ class AddUser extends Component {
                                     <div className ="card-header">
                                         <h4 >Add User Form</h4>
                                     </div>
+
                                     <div className="card-body">
+                                        {
+                                            error ? <div className ="alert alert-danger">Lütfen Bilgilerinizi Kontrol Edin!</div> : null
+                                        }
                                         <form onSubmit = {this.addUser.bind(this,dispatch)}>
                                             <div className = "form-group">
                                                 <label htmlFor = "name">Name</label>