add Data

Backend/controllers/auth/index.js

@@ -35,7 +35,10 @@ exports.register = async (req, res) => {
       const newUser = await User.create({
         name: registerData.name,
         email: registerData.email,
-        password: passwordHash
+        password: passwordHash,
+        address: registerData.address,
+        tel: registerData.tel,
+        role: registerData.role
       });
       const token = await createToken(newUser.id);
       res.status(200).send("success");
@@ -50,8 +53,8 @@ exports.login = async (req, res) => {
   const user = await User.findOne({
     where: { email: loginData.email }
   });
-  if (!User) {
-    return res.status(400).json({ message: "รหัสผ่านไม่ถูกต้อง" });
+  if (!user) {
+    return res.status(400).json({ message: "email หรือ รหัสผ่านไม่ถูกต้อง" });
   } else {
     const chkPassword = await bcryptjs.compare(
       loginData.password,
@@ -61,15 +64,16 @@ exports.login = async (req, res) => {
       return res.status(400).json({ message: "รหัสผ่านไม่ถูกต้อง" });
     }
     const token = await createToken(user.dataValues.id);
-    res.status(200).json({success})
+    res.status(200).send("success");
   }
 };
-exports.currentUser = async (req, res) =>{
+
+exports.currentUser = async (req, res) => {
   const token = req.headers.token;
-  const decode = await JWT.verify(token, config.JWT_SECRET)
+  const decode = await JWT.verify(token, config.JWT_SECRET);
   const user = await User.findOne({
     where: {
       id: decode.id
     }
-  })
-}
\ No newline at end of file
+  });
+};

Backend/controllers/list/index.js

+const List = require("../../models/list");
+const config = require("../../config");
+
+createToken = id => {
+  return JWT.sign({ id }, config.JWT_SECRET);
+};
+exports.list = async (req, res) => {
+  try {
+    const listData = req.body;
+    List.create(listData);
+  } catch (err) {
+    console.log(err);
+    res.sendStatus(401);
+  }
+};

Backend/controllers/shop/index.js

+const Shop = require("../../models/shop");
+const config = require("../../config");
+
+createToken = id => {
+  return JWT.sign({ id }, config.JWT_SECRET);
+};
+
+exports.Shop = async (req, res) => {
+    try{
+        const shopData =req.body;
+        Shop.create(shopData);
+    }catch(err){
+        console.log(err);
+        res.sendStatus(401);
+    }
+};

Backend/models/userbeauticianImg/index.js → Backend/models/beauticianImg/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("beauticianImage", {
-    beauticianImgID: {
+module.exports = db.sequelize.define("beauticianImages", {
+  id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
     autoIncrement: true
   },
 
-  beauticianImgPic: {
-    type: Sequelize.STRING
+  image: {
+    type: Sequelize.TEXT
   },
-  userbeauticianImgID: {
-    type: Sequelize.INTEGER
+  beautician: {
+    type: Sequelize.INTEGER,
+    references: "users",
+    referencesKey: "id"
   }
-  
 });

Backend/models/booking/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("booking", {
-  bookingID: {
+module.exports = db.sequelize.define("bookings", {
+  id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
     autoIncrement: true
   },
-  userID: {
-    type: Sequelize.INTEGER
+  user: {
+    type: Sequelize.INTEGER,
+    references: 'users',
+    referencesKey: 'id'
+  },
+  shop: {
+    type: Sequelize.INTEGER,
+    references: 'shops',
+    referencesKey: 'id'
   },
-  shopID: {
-    type: Sequelize.INTEGER
+  list: {
+    type: Sequelize.INTEGER,
+    references: 'lists',
+    referencesKey: 'id'
   },
-  listID: {
-    type: Sequelize.INTEGER
+  beautician:{
+    type:Sequelize.INTEGER,
+    references: 'users',
+    referencesKey: 'id'
   },
-  bookingDete: {
+  dete: {
     type: Sequelize.DATE
   },
-  bookingTime: {
+  time: {
     type: Sequelize.TIME
   }
 });

Backend/models/list/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("list", {
-  listID: {
+module.exports = db.sequelize.define("lists", {
+  id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
     autoIncrement: true
   },
-  slistName: {
+  name: {
     type: Sequelize.STRING
   },
-  listprice: {
+  price: {
     type: Sequelize.INTEGER
   },
-  listTime: {
+  time: {
     type: Sequelize.INTEGER
   },
-  shopID: {
-    type: Sequelize.INTEGER
+  shop: {
+    type: Sequelize.INTEGER,
+    references: 'shops',
+    referencesKey: 'id'
+
   }
 });

Backend/models/promotion/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("promotion", {
-  promotionID: {
+module.exports = db.sequelize.define("promotions", {
+  id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
     autoIncrement: true
   },
 
-  promotionDete: {
+  dete: {
     type: Sequelize.DATE
   },
-  shopID: {
-    type: Sequelize.INTEGER
-  },
-  promotionDetail: {
+
+  detail: {
     type: Sequelize.STRING
+  },
+  shop: {
+    type: Sequelize.INTEGER,
+    references: 'shops',
+    referencesKey: 'id'
   }
 });

Backend/models/reviews/index.js

@@ -2,28 +2,32 @@ const Sequelize = require("sequelize");
 const db = require("../../db");
 
 module.exports = db.sequelize.define("reviwes", {
-  reviewsID: {
+  id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
     autoIncrement: true
   },
 
-  reviewsTopic: {
+  topic: {
     type: Sequelize.INTEGER
   },
-  reviewsMessage: {
+  message: {
     type: Sequelize.STRING
   },
-  reviewsPoint: {
+  point: {
     type: Sequelize.INTEGER
   },
-  reviewsPic: {
-    type: Sequelize.STRING
+  image: {
+    type: Sequelize.TEXT
   },
-  shopID: {
-    type: Sequelize.INTEGER
+  shop: {
+    type: Sequelize.INTEGER,
+    references: 'shops',
+    referencesKey: 'id'
   },
-  userID: {
-    type: Sequelize.INTEGER
+  user: {
+    type: Sequelize.INTEGER,
+    references: 'users',
+    referencesKey: 'id'
   }
 });

Backend/models/shop/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("shop", {
-    shopID: {
+module.exports = db.sequelize.define("shops", {
+  id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
     autoIncrement: true
   },
 
-  shopName: {
+  name: {
     type: Sequelize.INTEGER
   },
-  shopTimeopen: {
+  timeopen: {
     type: Sequelize.TIME
   },
-  shopTimeClose: {
+  timeclose: {
     type: Sequelize.TIME
   },
-  shopAddress: {
+  address: {
     type: Sequelize.STRING
   },
-  shopTel: {
+  tel: {
     type: Sequelize.STRING
   },
-  shopDetial: {
+  detial: {
     type: Sequelize.STRING
   },
-  shopMap: {
+  map: {
     type: Sequelize.STRING
   },
-  shopType: {
-    type: Sequelize.ENUM('สปาและนวด', 'ผิวหน้า', 'ขนตาและคิ้ว', 'ทำเล็บ', 'ชาลอน', 'แต่งหน้าทำผม')
+  type: {
+    type: Sequelize.ENUM(
+      "สปาและนวด",
+      "ผิวหน้า",
+      "ขนตาและคิ้ว",
+      "ทำเล็บ",
+      "ชาลอน",
+      "แต่งหน้าทำผม"
+    )
   }
 });

Backend/models/shopimage/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("shopimage", {
-    shopImageID: {
+module.exports = db.sequelize.define("shopimages", {
+  id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
     autoIncrement: true
   },
 
-  shopImagePic: {
-    type: Sequelize.STRING
+  image: {
+    type: Sequelize.TEXT
   },
-  shopID: {
-    type: Sequelize.INTEGER
+  shop: {
+    type: Sequelize.INTEGER,
+    references: 'shops',
+    referencesKey: 'id'
   }
-  
 });

Backend/models/user/index.js

@@ -18,8 +18,17 @@ module.exports = db.sequelize.define(
     password: {
       type: Sequelize.STRING
     },
-    photo: {
+    address: {
+      type: Sequelize.STRING
+    },
+    tel: {
       type: Sequelize.STRING
     },
+    photo: {
+      type: Sequelize.TEXT
+    },
+    role: {
+      type: Sequelize.INTEGER
+    }
   },
 );
\ No newline at end of file

Backend/models/userShopOwner/index.js

-const Sequelize = require("sequelize");
-const db = require("../../db");
-
-module.exports = db.sequelize.define("usersShopOwner", {
-  userShopOwnerID: {
-    type: Sequelize.INTEGER,
-    primaryKey: true,
-    autoIncrement: true
-  },
-
-  userShopOwnerName: {
-    type: Sequelize.INTEGER
-  },
-  userShopOwnerEmail: {
-    type: Sequelize.STRING
-  },
-  userShopOwnerPassword: {
-    type: Sequelize.STRING
-  },
-  userShopOwnerAddress: {
-    type: Sequelize.STRING
-  },
-  userShoppownerTel: {
-    type: Sequelize.STRING
-  },
-  userShopOwnerPic: {
-    type: Sequelize.STRING
-  }
-});

Backend/models/userbeautician/index.js

-const Sequelize = require("sequelize");
-const db = require("../../db");
-
-module.exports = db.sequelize.define("userbeautician", {
-  userbeauticianID: {
-    type: Sequelize.INTEGER,
-    primaryKey: true,
-    autoIncrement: true
-  },
-
-  userbeauticianName: {
-    type: Sequelize.INTEGER
-  },
-  userbeauticianEmail: {
-    type: Sequelize.STRING
-  },
-  userbeauticianPassword: {
-    type: Sequelize.STRING
-  },
-  userbeauticianAddres: {
-    type: Sequelize.STRING
-  },
-  userbeauticianTel: {
-    type: Sequelize.STRING
-  },
-  shopID: {
-    type: Sequelize.STRING
-  },
-  userbeauticianPic: {
-    type: Sequelize.STRING
-  }
-});

Backend/routers/auth/index.js

-const express = require('express');
+const express = require("express");
 const router = express.Router();
 
-const authController = require('../../controllers/auth');
+const authController = require("../../controllers/auth");
 
-router.get('/get', (req, res) => {
-   res.json({"test": "Test get"}); 
+router.get("/get", (req, res) => {
+  res.json({ test: "Test get" });
 });
 
-router.get('/getUserById/:id', authController.getUserById);
+router.get("/getUserById/:id", authController.getUserById);
 
-router.post('/register', authController.register);
+router.post("/register", authController.register);
+router.post("/login", authController.login);
 
-module.exports = router;
\ No newline at end of file
+
+module.exports = router;

Backend/routers/index.js

 const auth = require('./auth');
+const list = require('./list');
+const shop = require('./shop')
 module.exports = {
-    auth
+    auth,
+    list,
+    shop,
 }
\ No newline at end of file

Backend/routers/list/index.js

+const express = require("express");
+const router = express.Router();
+
+const authController = require("../../controllers/list");
+
+router.post("/list", authController.list);
+
+module.exports = router;

Backend/routers/shop/index.js

+const express = require("express");
+const router = express.Router();
+
+const authController = require("../../controllers/shop");
+
+router.post("/shop", authController.shop);
+
+module.exports = router;

Backend/server.js

@@ -10,6 +10,8 @@ app.use(cors());
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }))
 app.use('/api/auth', router.auth);
+app.use('/api/list', router.list);
+app.use('/api/shop', router.shop);
 
 app.listen(port, () => {
   console.log('Express server listening on port ' + port)

b_beauty_project/src/components/AppBra/index.js

@@ -11,6 +11,10 @@ import SupervisedUserCircleOutlinedIcon from "@material-ui/icons/SupervisedUserC
 import MapIcon from "@material-ui/icons/MapOutlined";
 import compose from "recompose/compose";
 import { withRouter } from "react-router-dom";
+import SpaIcon from '@material-ui/icons/Spa';
+import FaceIcon from '@material-ui/icons/Face';
+import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye';
+import PanToolIcon from '@material-ui/icons/PanTool';
 
 const styles = theme => ({
   root: {
@@ -65,13 +69,15 @@ class Dashboard extends Component {
           >
             <Tab
               label="สปาและนวด"
+              
               icon={
                 <Badge
                   className={classes.margin}
                   //badgeContent={badgeOrder}
                   color="secondary"
                 >
-                  <ShoppingBasket />
+                  <SpaIcon/>
+                  
                 </Badge>
               }
               className={classes.flex}
@@ -84,7 +90,7 @@ class Dashboard extends Component {
                   //badgeContent={badgeUser}
                   color="secondary"
                 >
-                  <AccountCircle />
+                  <FaceIcon />
                 </Badge>
               }
               className={classes.flex}
@@ -97,24 +103,48 @@ class Dashboard extends Component {
                   //badgeContent={badgeCredit}
                   color="secondary"
                 >
-                  <CreditCard />
+                  <RemoveRedEyeIcon />
                 </Badge>
               }
               className={classes.flex}
             />
             <Tab
               label="ทำเล็บ"
-              icon={<SupervisedUserCircleOutlinedIcon />}
+              icon={
+                <Badge
+                  className={classes.margin}
+                  //badgeContent={badgeCredit}
+                  color="secondary"
+                >
+                  <PanToolIcon />
+                </Badge>
+              }
               className={classes.flex}
             />
             <Tab
               label="ชาลอน"
-              icon={<LiveHelpIcon />}
+              icon={
+                <Badge
+                  className={classes.margin}
+                  //badgeContent={badgeCredit}
+                  color="secondary"
+                >
+                  <FaceIcon />
+                </Badge>
+              }
               className={classes.flex}
             />
             <Tab
               label="แต่งหน้าทำผม"
-              icon={<HelpIcon />}
+              icon={
+                <Badge
+                  className={classes.margin}
+                  //badgeContent={badgeCredit}
+                  color="secondary"
+                >
+                  <FaceIcon />
+                </Badge>
+              }
               className={classes.flex}
             />
           </Tabs>

b_beauty_project/src/components/AppHeader/index.js

-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
+import React, { Component } from "react";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import { withStyles } from "@material-ui/core/styles";
 
-const useStyles = makeStyles(theme => ({
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+
+const styles = theme => ({
   root: {
-    flexGrow: 1,
+    flexGrow: 1
   },
   menuButton: {
-    marginRight: theme.spacing(2),
+    marginRight: theme.spacing(2)
   },
   title: {
-    flexGrow: 1,
-  },
-}));
-
-export default function ButtonAppBar() {
-  const classes = useStyles();
+    flexGrow: 1
+  }
+});
+class AppHeader extends Component {
+  render() {
+    const { classes } = this.props;
 
-  return (
-    <div className={classes.root}>
-      <AppBar position="static">
-        <Toolbar>
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" Link href="/" >
-            B Beauty
-           
-          </IconButton>
-          <Typography variant="h6" className={classes.title}>
-         
-          </Typography>
-          <Button color="inherit" Link href="/LoginPage" >Login</Button>
-          <Button color="inherit" Link href="/RigisterPage" >rigister</Button>
-          <Button color="inherit" Link href="/RigisterShopPage" >rigistershop</Button>
-         
-        </Toolbar>
-      </AppBar>
-      
-    </div>
-   
-  );
-}
\ No newline at end of file
+    return (
+      <div className={classes.root}>
+        <AppBar position="static">
+          <Toolbar>
+            <IconButton
+              edge="start"
+              className={classes.menuButton}
+              color="inherit"
+              aria-label="menu"
+              Link
+              href="/"
+            >
+              B Beauty
+            </IconButton>
+            <Typography variant="h6" className={classes.title}></Typography>
+            <Button color="inherit" Link href="/LoginPage">
+              Login
+            </Button>
+            <Button color="inherit" Link href="/RigisterPage">
+              rigister
+            </Button>
+            <Button color="inherit" Link href="/RigisterShopPage">
+              rigistershop
+            </Button>
+          </Toolbar>
+        </AppBar>
+      </div>
+    );
+  }
+}
+export default compose(withStyles(styles), withRouter)(AppHeader);

b_beauty_project/src/views/HomePage/index.js

@@ -69,6 +69,16 @@ class HomePage extends Component {
       open: false
     });
   };
+  handleClickOpen2 = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose2 = () => {
+    this.setState({
+      open: false
+    });
+  };
 
   componentDidMount = () => {
     let { pathname } = this.props.location;
@@ -172,7 +182,7 @@ class HomePage extends Component {
                 <img
                   src="https://www.smeleader.com/wp-content/uploads/2018/05/%E0%B9%81%E0%B8%9F%E0%B8%A3%E0%B8%99%E0%B9%84%E0%B8%8A%E0%B8%AA%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B9%80%E0%B8%AA%E0%B8%A3%E0%B8%B4%E0%B8%A1%E0%B8%AA%E0%B8%A7%E0%B8%A2-%E0%B8%A3%E0%B8%A7%E0%B8%A1%E0%B9%81%E0%B8%9A%E0%B8%A3%E0%B8%99%E0%B8%94%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%8B%E0%B8%B2%E0%B8%A5%E0%B8%AD%E0%B8%99-%E0%B8%AA%E0%B8%B2%E0%B8%99%E0%B8%9D%E0%B8%B1%E0%B8%99%E0%B8%98%E0%B8%B8%E0%B8%A3%E0%B8%81%E0%B8%B4%E0%B8%88%E0%B8%97%E0%B8%A3%E0%B8%87%E0%B8%9C%E0%B8%A1.jpg"
                   width="70%"
-                ></img>
+                />
               </div>
             </div>
 
@@ -183,13 +193,11 @@ class HomePage extends Component {
                   District, Ubon Ratchathani 34190
                 </h4>
               </div>
-              
+
               <div className="row">
-                <h4>
-                  โปรโมชั่น : จองคิวผ่าน B Beauty ลด 5 %
-                </h4>
+                <h4>โปรโมชั่น : จองคิวผ่าน B Beauty ลด 5 %</h4>
               </div>
-              
+
               <div className="row">
                 <Rating
                   name="simple-controlled"
@@ -237,18 +245,19 @@ class HomePage extends Component {
                     />
                   </DialogContent>
                   <DialogActions>
-                    <Button onClick={this.handleClose} color="primary">
-                      Disagree
+                    <Button variant="outlined" onClick={this.handleClose} color="primary">
+                      ยกเลิก
                     </Button>
                     <Button
-                      onClick={this.handleClose}
+                      variant="outlined"
                       color="primary"
-                      autoFocus
+                      onClick={this.handleClickOpen}
                     >
-                      Agree
+                      ถัดไป
                     </Button>
                   </DialogActions>
                 </Dialog>
+                
               </div>
             </div>
           </div>

b_beauty_project/src/views/RigisterPage/index.js

@@ -10,6 +10,8 @@ import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
 import MailOutlineIcon from "@material-ui/icons/MailOutline";
 import VpnKeyIcon from "@material-ui/icons/VpnKey";
 import Button from "@material-ui/core/Button";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
 
 import axios from "axios";
 
@@ -28,7 +30,10 @@ class RegisterPage extends Component {
     email: "",
     password: "",
     password2: "",
-    image: ""
+    address: "",
+    tel: "",
+    image: "",
+    rolr: "0"
   };
 
   handleChange = event => {
@@ -38,20 +43,21 @@ class RegisterPage extends Component {
     this.setState({
       [event.target.name]: event.target.value
     });
-
-    // this.setState({
-    //   name: name,
-    //   email: email,
-    //   password: password,
-    //   password2: password2,
-    //   image: image
-    // });
   };
 
   render() {
     const { classes } = this.props;
     // const {  } = this.state;
-    const { name, email, password, password2, image } = this.state;
+    const {
+      name,
+      email,
+      password,
+      password2,
+      address,
+      tel,
+      image,
+      role
+    } = this.state;
     return (
       <div className="row center">
         <h2>ลงทะเบียน</h2>
@@ -132,6 +138,43 @@ class RegisterPage extends Component {
           />
         </div>
         <br></br>
+        <div>
+          <TextField
+            className={classes.margin}
+            id="address"
+            name="address"
+            value={address}
+            label="ที่อยู่"
+            autoComplete="address"
+            variant="outlined"
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <BusinessIcon />
+                </InputAdornment>
+              )
+            }}
+            onChange={this.handleChange}
+          />
+          <TextField
+            className={classes.margin}
+            id="tel"
+            name="tel"
+            value={tel}
+            label="เบอร์โทร"
+            autoComplete="Phone number"
+            variant="outlined"
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <ContactPhoneIcon />
+                </InputAdornment>
+              )
+            }}
+            onChange={this.handleChange}
+          />
+        </div>
+        <br></br>
         <div>
           <TextField
             className={classes.margin}
@@ -168,7 +211,10 @@ class RegisterPage extends Component {
                     email: email,
                     password: password,
                     name: name,
-                    image: image
+                    image: image,
+                    address: address,
+                    tel: tel,
+                    role:role
                   })
                   .then(response => {
                     console.log("สร้างผู้ใช้สำเร็จ", response);
@@ -179,7 +225,7 @@ class RegisterPage extends Component {
                   });
                 // alert("ลงทะเบียนสำเร็จ");
               } else {
-                alert("password ไม่ตรงกันโว๊ยยยย");
+                alert("password ไม่ถูกต้อง");
               }
             }}
           >

b_beauty_project/src/views/RigisterShopPage/index.js

 import React, { Component } from "react";
 import { withStyles } from "@material-ui/core/styles";
-import { withRouter } from "react-router-dom";
-import compose from "recompose/compose";
-import Input from "@material-ui/core/Input";
-import InputLabel from "@material-ui/core/InputLabel";
+import { Input, InputLabel } from "@material-ui/core";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import FormControl from "@material-ui/core/FormControl";
 import TextField from "@material-ui/core/TextField";
@@ -13,20 +10,54 @@ import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
 import MailOutlineIcon from "@material-ui/icons/MailOutline";
 import VpnKeyIcon from "@material-ui/icons/VpnKey";
 import Button from "@material-ui/core/Button";
-import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
 import BusinessIcon from "@material-ui/icons/Business";
 
+import axios from "axios";
+
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+
 const styles = theme => ({
   margin: {
     margin: theme.spacing(1)
   }
 });
 
-class Registershop extends Component {
+class RegisterShopPage extends Component {
+  state = {
+    name: "",
+    email: "",
+    password: "",
+    password2: "",
+    address: "",
+    tel: "",
+    image: "",
+    rolr: "1"
+  };
+
+  handleChange = event => {
+    console.log("name : ", event.target.name);
+    console.log("value : ", event.target.value);
+
+    this.setState({
+      [event.target.name]: event.target.value
+    });
+  };
+
   render() {
     const { classes } = this.props;
-
+    // const {  } = this.state;
+    const {
+      name,
+      email,
+      password,
+      password2,
+      address,
+      tel,
+      image,
+      role
+    } = this.state;
     return (
       <div className="row center">
         <h2>ลงทะเบียนธุรกิจ</h2>
@@ -34,8 +65,10 @@ class Registershop extends Component {
         <div>
           <TextField
             className={classes.margin}
-            id="outlined-uncontrolled"
-            label="ชื่อร้าน"
+            id="name"
+            name="name"
+            value={name}
+            label="ชื่อ-สกุล"
             variant="outlined"
             InputProps={{
               startAdornment: (
@@ -44,11 +77,14 @@ class Registershop extends Component {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
 
           <TextField
             className={classes.margin}
-            id="outlined-uncontrolled"
+            id="email"
+            name="email"
+            value={email}
             label="E_mail"
             variant="outlined"
             InputProps={{
@@ -58,13 +94,16 @@ class Registershop extends Component {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
         </div>
         <br></br>
         <div>
           <TextField
             className={classes.margin}
-            id="outlined-password-input"
+            id="password"
+            name="password"
+            value={password}
             label="Password"
             type="password"
             autoComplete="current-password"
@@ -76,11 +115,14 @@ class Registershop extends Component {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
 
           <TextField
             className={classes.margin}
-            id="outlined-password-input"
+            id="password2"
+            name="password2"
+            value={password2}
             label="Confirm-Password"
             type="password"
             autoComplete="current-password"
@@ -92,13 +134,16 @@ class Registershop extends Component {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
         </div>
         <br></br>
         <div>
           <TextField
             className={classes.margin}
-            id="outlined-password-input"
+            id="address"
+            name="address"
+            value={address}
             label="ที่อยู่"
             autoComplete="address"
             variant="outlined"
@@ -109,10 +154,13 @@ class Registershop extends Component {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
           <TextField
             className={classes.margin}
-            id="outlined-password-input"
+            id="tel"
+            name="tel"
+            value={tel}
             label="เบอร์โทร"
             autoComplete="Phone number"
             variant="outlined"
@@ -123,13 +171,16 @@ class Registershop extends Component {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
         </div>
         <br></br>
         <div>
           <TextField
             className={classes.margin}
-            id="outlined-file-input"
+            id="image"
+            name="image"
+            value={image}
             label="เพิ่มรูปภาพ"
             type="file"
             autoComplete="current-password"
@@ -141,6 +192,7 @@ class Registershop extends Component {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
         </div>
         <br></br>
@@ -149,7 +201,34 @@ class Registershop extends Component {
             ยกเลิก
           </Button>{" "}
           &nbsp; &nbsp; &nbsp;
-          <Button variant="contained" color="primary">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              if (password === password2) {
+                axios
+                  .post("http://localhost:9000/api/auth/register", {
+                    email: email,
+                    password: password,
+                    name: name,
+                    image: image,
+                    address: address,
+                    tel: tel,
+                    role:role
+                  })
+                  .then(response => {
+                    console.log("สร้างผู้ใช้สำเร็จ", response);
+                    window.location.href = "/";
+                  })
+                  .catch(error => {
+                    console.log(error);
+                  });
+                // alert("ลงทะเบียนสำเร็จ");
+              } else {
+                alert("password ไม่ถูกต้อง");
+              }
+            }}
+          >
             ลงทะเบียน
           </Button>
         </div>
@@ -157,4 +236,5 @@ class Registershop extends Component {
     );
   }
 }
-export default compose(withStyles(styles), withRouter)(Registershop);
+
+export default compose(withStyles(styles), withRouter)(RegisterShopPage);