add web

Backend/controllers/auth/index.js

 const User = require("../../models/user");
-const bcryptjs= require('bcryptjs');
-const JWT = require('jsonwebtoken');
-const config =require('../../config')
+const bcryptjs = require("bcryptjs");
+const JWT = require("jsonwebtoken");
+const config = require("../../config");
 
 exports.getUserById = async (req, res) => {
+  console.log("here");
   try {
+    console.log("req.param", req.param);
     const userId = req.params.id;
     const user = await User.findOne({
       where: { id: userId }
@@ -43,3 +45,31 @@ exports.register = async (req, res) => {
     res.sendStatus(401);
   }
 };
+exports.login = async (req, res) => {
+  const loginData = req.body;
+  const user = await User.findOne({
+    where: { email: loginData.email }
+  });
+  if (!User) {
+    return res.status(400).json({ message: "รหัสผ่านไม่ถูกต้อง" });
+  } else {
+    const chkPassword = await bcryptjs.compare(
+      loginData.password,
+      user.dataValues.password
+    );
+    if (chkPassword === false) {
+      return res.status(400).json({ message: "รหัสผ่านไม่ถูกต้อง" });
+    }
+    const token = await createToken(user.dataValues.id);
+    res.status(200).json({success})
+  }
+};
+exports.currentUser = async (req, res) =>{
+  const token = req.headers.token;
+  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/models/booking/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("users", {
+module.exports = db.sequelize.define("booking", {
   bookingID: {
     type: Sequelize.INTEGER,
     primaryKey: true,

Backend/models/list/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("users", {
+module.exports = db.sequelize.define("list", {
   listID: {
     type: Sequelize.INTEGER,
     primaryKey: true,

Backend/models/promotion/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("users", {
+module.exports = db.sequelize.define("promotion", {
   promotionID: {
     type: Sequelize.INTEGER,
     primaryKey: true,

Backend/models/reviews/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("users", {
+module.exports = db.sequelize.define("reviwes", {
   reviewsID: {
     type: Sequelize.INTEGER,
     primaryKey: true,

Backend/models/shop/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("users", {
+module.exports = db.sequelize.define("shop", {
     shopID: {
     type: Sequelize.INTEGER,
     primaryKey: true,

Backend/models/shopimage/index.js

+const Sequelize = require("sequelize");
+const db = require("../../db");
+
+module.exports = db.sequelize.define("shopimage", {
+    shopImageID: {
+    type: Sequelize.INTEGER,
+    primaryKey: true,
+    autoIncrement: true
+  },
+
+  shopImagePic: {
+    type: Sequelize.STRING
+  },
+  shopID: {
+    type: Sequelize.INTEGER
+  }
+  
+});

Backend/models/userShopOwner/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("users", {
+module.exports = db.sequelize.define("usersShopOwner", {
   userShopOwnerID: {
     type: Sequelize.INTEGER,
     primaryKey: true,
@@ -19,5 +19,11 @@ module.exports = db.sequelize.define("users", {
   },
   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("users", {
+module.exports = db.sequelize.define("userbeautician", {
   userbeauticianID: {
     type: Sequelize.INTEGER,
     primaryKey: true,
@@ -20,7 +20,13 @@ module.exports = db.sequelize.define("users", {
   userbeauticianAddres: {
     type: Sequelize.STRING
   },
+  userbeauticianTel: {
+    type: Sequelize.STRING
+  },
   shopID: {
     type: Sequelize.STRING
+  },
+  userbeauticianPic: {
+    type: Sequelize.STRING
   }
 });

Backend/models/userbeauticianImg/index.js

+const Sequelize = require("sequelize");
+const db = require("../../db");
+
+module.exports = db.sequelize.define("beauticianImage", {
+    beauticianImgID: {
+    type: Sequelize.INTEGER,
+    primaryKey: true,
+    autoIncrement: true
+  },
+
+  beauticianImgPic: {
+    type: Sequelize.STRING
+  },
+  userbeauticianImgID: {
+    type: Sequelize.INTEGER
+  }
+  
+});

b_beauty_project/public/index.html

@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 </head>
 
-<body>
+<body bgcolor="EEEEEE">
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
 </body>

b_beauty_project/src/views/BeauticianShopPage/Home/index.js

@@ -114,7 +114,7 @@ class ResponsiveDrawer extends Component {
             <ListItemIcon>
               <InboxIcon />
             </ListItemIcon>
-            <ListItemText primary="โปรไฟล์ร้าน" />
+            <ListItemText primary="โปรไฟล์" />
           </ListItem>
 
           <ListItem

b_beauty_project/src/views/BeauticianShopPage/Profile/index.js

-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+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 InputAdornment from "@material-ui/core/InputAdornment";
@@ -18,18 +20,18 @@ import Fab from "@material-ui/core/Fab";
 import EditIcon from "@material-ui/icons/Edit";
 import Paper from "@material-ui/core/Paper";
 import CardMedia from "@material-ui/core/CardMedia";
-
-import PhotoCameraIcon from '@material-ui/icons/PhotoCamera';
+import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
 import Avatar from "react-avatar";
 
-const useStyles = makeStyles(theme => ({
+const styles = theme => ({
   margin: {
     margin: theme.spacing(1)
   }
-}));
+});
 
-export default function InputWithIcon() {
-  const classes = useStyles();
+class Profile extends Component {
+  render() {
+    const { classes } = this.props;
 
     return (
       <div className="row center">
@@ -172,4 +174,6 @@ export default function InputWithIcon() {
         </div>
       </div>
     );
+  }
 }
+export default compose(withStyles(styles), withRouter)(Profile);

b_beauty_project/src/views/BeauticianShopPage/Work/index.js

 import React, { Component } from "react";
-import { withStyles } from "@material-ui/core/styles";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import {
+  Dialog,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Paper,
+  InputBase,
+  Divider,
+  IconButton
+} from "@material-ui/core";
+import AppBra from "../../../components/AppBra";
 import { withRouter } from "react-router-dom";
 import compose from "recompose/compose";
-import { DatePicker } from "@material-ui/pickers";
-import { injectIntl, FormattedRelativeTime } from "react-intl";
 import { th } from "date-fns/locale";
 import { format } from "date-fns";
 import { MenuIcon } from "@material-ui/icons/Menu";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+import { DatePicker } from "@material-ui/pickers";
+import { injectIntl, FormattedRelativeTime } from "react-intl";
+
+
 import {
     MuiPickersUtilsProvider,
     KeyboardTimePicker,
     KeyboardDatePicker,
   } from '@material-ui/pickers';
+import MaterialTable from "material-table";
 
 const styles = theme => ({
   root: {
@@ -23,27 +62,122 @@ const styles = theme => ({
     "@media all and (-ms-high-contrast: none)": {
       display: "none"
     }
+  },
+  modal: {
+    display: "flex",
+    padding: theme.spacing(1),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fab: {
+    position: "absolute",
+    bottom: theme.spacing(2),
+    right: theme.spacing(2)
+  }
+});
+const StyledTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white
+  },
+  body: {
+    fontSize: 14
+  }
+}))(TableCell);
+
+const StyledTableRow = withStyles(theme => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.background.default
+    }
+  }
+}))(TableRow);
+
+function createData(name, email, address, phonenumber, edit, action) {
+  return { name, email, address, phonenumber, edit, action };
+}
+
+const rows = [
+  createData(
+    "Frozen yoghurt",
+    "email@mmmj",
+    "ที่อยู่ 120/255 มหาวิทยาลัยุบลราชธานี ",
+    " 012455887",
+    <EditIcon />,
+    <DeleteIcon />
+  )
+];
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 700
   }
 });
 
 class Work extends Component {
   state = {
+    open: false,
+    columns: [
+      { title: "ชื่อคนจอง", field: "name" },
+      { title: "รายการจอง", field: "list" },
+      
+      { title: "เวลาที่จอง", field: "time" },
+
+      
+    ],
+    data: [
+      { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
+     
+    ],
     selectedDate : new Date()
   };
-
   handleChangeDate = newDate => {
     console.log("newDate: ", newDate);
     this.setState({
       date: newDate
     });
   };
+  handleClickOpen = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose = () => {
+    this.setState({
+      open: false
+    });
+  };
+  handleCloseAndSave = () => {
+    //Save to db
+
+    this.setState(prevState => {
+      const data = [...prevState.data];
+      const newData = {
+        name: "Mehmet",
+        surname: "Baran",
+        birthYear: 1987,
+        birthCity: 63
+      };
+      data.push(newData);
+      return { ...prevState, data: data, open: false };
+    });
+
+    // this.setState({
+    //   open: false
+    // });
+  };
+  componentDidMount = () => {
+    let { pathname } = this.props.location;
+    pathname = pathname.substring(1, pathname.length);
+    // console.log('pathname', pathname)
+  };
 
   render() {
     const { classes } = this.props;
-    // const tab = this.state.tab;
-    // หรือ
-    const { selectedDate  } = this.state;
+
+    const { open, columns, data, selectedDate } = this.state;
     return (
+      <div>
         <div className="row center">
           <KeyboardDatePicker
             disableToolbar
@@ -55,10 +189,58 @@ class Work extends Component {
             value={selectedDate}
             onChange={this.handleDateChange}
             KeyboardButtonProps={{
-            'aria-label': 'change date',
+              "aria-label": "change date"
             }}
           />
         </div>
+        <div className="row">
+          <MaterialTable
+            title="ตารางงาน"
+            columns={columns}
+            data={data}
+            options={{
+              selection: false
+            }}
+            editable={{
+              // onRowAdd: newData =>
+              //  new Promise(resolve => {
+              //     setTimeout(() => {
+              //      resolve();
+              //     this.setState(prevState => {
+              //      const data = [...prevState.data];
+              //      data.push(newData);
+              //      return { ...prevState, data };
+              //   });
+              // }, 600);
+              // }),
+              // onRowUpdate: (newData, oldData) =>
+              //   new Promise(resolve => {
+              //     setTimeout(() => {
+              //       resolve();
+              //       if (oldData) {
+              //         this.setState(prevState => {
+              //           const data = [...prevState.data];
+              //           data[data.indexOf(oldData)] = newData;
+              //           return { ...prevState, data };
+              //         });
+              //       }
+              //     }, 600);
+              //   }),
+              // onRowDelete: oldData =>
+              //   new Promise(resolve => {
+              //     setTimeout(() => {
+              //       resolve();
+              //       this.setState(prevState => {
+              //         const data = [...prevState.data];
+              //         data.splice(data.indexOf(oldData), 1);
+              //         return { ...prevState, data };
+              //       });
+              //     }, 600);
+              //   })
+            }}
+          />
+        </div>
+      </div>
     );
   }
 }

b_beauty_project/src/views/DataShopPage/Managequeue/index.js

@@ -26,8 +26,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
-import DeleteIcon from "@material-ui/icons/Delete";
-import EditIcon from "@material-ui/icons/Edit";
+import DoneIcon from '@material-ui/icons/Done';
 import Input from "@material-ui/core/Input";
 import InputLabel from "@material-ui/core/InputLabel";
 import InputAdornment from "@material-ui/core/InputAdornment";
@@ -41,7 +40,15 @@ import VpnKeyIcon from "@material-ui/icons/VpnKey";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
 import BusinessIcon from "@material-ui/icons/Business";
+import { DatePicker } from "@material-ui/pickers";
+import { injectIntl, FormattedRelativeTime } from "react-intl";
 
+
+import {
+    MuiPickersUtilsProvider,
+    KeyboardTimePicker,
+    KeyboardDatePicker,
+  } from '@material-ui/pickers';
 import MaterialTable from "material-table";
 
 const styles = theme => ({
@@ -67,76 +74,31 @@ const styles = theme => ({
     right: theme.spacing(2)
   }
 });
-const StyledTableCell = withStyles(theme => ({
-  head: {
-    backgroundColor: theme.palette.common.black,
-    color: theme.palette.common.white
-  },
-  body: {
-    fontSize: 14
-  }
-}))(TableCell);
-
-const StyledTableRow = withStyles(theme => ({
-  root: {
-    "&:nth-of-type(odd)": {
-      backgroundColor: theme.palette.background.default
-    }
-  }
-}))(TableRow);
 
-function createData(name, email, address, phonenumber, edit, action) {
-  return { name, email, address, phonenumber, edit, action };
-}
-
-const rows = [
-  createData(
-    "Frozen yoghurt",
-    "email@mmmj",
-    "ที่อยู่ 120/255 มหาวิทยาลัยุบลราชธานี ",
-    " 012455887",
-    <EditIcon />,
-    <DeleteIcon />
-  )
-];
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 700
-  }
-});
-
-class Databeautician extends Component {
+class Managequeue extends Component {
   state = {
-    open: false,
+    
     columns: [
       { title: "ชื่อคนจอง", field: "name" },
       { title: "รายการจอง", field: "list" },
-      { title: "วัน/เดือน/ปี ที่จอง", field: "dete" },
+      
       { title: "เวลาที่จอง", field: "time" },
 
       { title: "ช่างที่จอง", field: "booking" }
     ],
     data: [
       { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
-      {
-        name: "Zerya Betül",
-        surname: "Baran",
-        birthYear: 2017,
-        birthCity: 34
-      }
-    ]
-  };
-  handleClickOpen = () => {
-    this.setState({
-      open: true
-    });
+     
+    ],
+    selectedDate : new Date()
   };
-  handleClose = () => {
+  handleChangeDate = newDate => {
+    console.log("newDate: ", newDate);
     this.setState({
-      open: false
+      date: newDate
     });
   };
+ 
   handleCloseAndSave = () => {
     //Save to db
 
@@ -165,9 +127,25 @@ class Databeautician extends Component {
   render() {
     const { classes } = this.props;
 
-    const { open, columns, data } = this.state;
+    const { open, columns, data, selectedDate } = this.state;
     return (
       <div>
+        <div className="row center">
+          <KeyboardDatePicker
+            disableToolbar
+            variant="inline"
+            format="dd/MM/yyyy"
+            margin="normal"
+            id="date-picker-inline"
+            label="เลือกวันที่"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+            KeyboardButtonProps={{
+              "aria-label": "change date"
+            }}
+          />
+        </div>
+        <div className="row">
           <MaterialTable
             title="จัดการคิว"
             columns={columns}
@@ -200,160 +178,24 @@ class Databeautician extends Component {
                     }
                   }, 600);
                 }),
-            onRowDelete: oldData =>
-              new Promise(resolve => {
-                setTimeout(() => {
-                  resolve();
-                  this.setState(prevState => {
-                    const data = [...prevState.data];
-                    data.splice(data.indexOf(oldData), 1);
-                    return { ...prevState, data };
-                  });
-                }, 600);
-              })
-          }}
-        />
-        <div className="row">
-          <Fab
-            aria-label={"add"}
-            className={classes.fab}
-            color="primary"
-            onClick={this.handleClickOpen}
-          >
-            <AddIcon />
-          </Fab>
                 
-          <Dialog
-            open={open}
-            onClose={this.handleClose}
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-          >
-            <DialogTitle id="alert-dialog-title">{"ลงทะเบียนช่าง"}</DialogTitle>
-            <DialogContent>
-              <TextField
-                className={classes.margin}
-                id="outlined-uncontrolled"
-                label="ชื่อ-สกุล"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <AccountCircle />
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <br /> <br />
-              <TextField
-                className={classes.margin}
-                id="outlined-uncontrolled"
-                label="E_mail"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <MailOutlineIcon />
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <br /> <br />
-              <TextField
-                className={classes.margin}
-                id="outlined-password-input"
-                label="Password"
-                type="password"
-                autoComplete="current-password"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <VpnKeyIcon />
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <br /> <br />
-              <TextField
-                className={classes.margin}
-                id="outlined-password-input"
-                label="Confirm-Password"
-                type="password"
-                autoComplete="current-password"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <VpnKeyIcon />
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <br /> <br />
-              <TextField
-                className={classes.margin}
-                id="outlined-password-input"
-                label="ที่อยู่"
-                autoComplete="address"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <BusinessIcon />
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <br /> <br />
-              <TextField
-                className={classes.margin}
-                id="outlined-password-input"
-                label="เบอร์โทร"
-                autoComplete="Phone number"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <ContactPhoneIcon />
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <br /> <br />
-              <TextField
-                className={classes.margin}
-                id="outlined-file-input"
-                label="เพิ่มรูปภาพ"
-                type="file"
-                autoComplete="current-password"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <AddPhotoAlternateIcon />
-                    </InputAdornment>
-                  )
+            //   onRowDelete: oldData =>
+            //     new Promise(resolve => {
+            //       setTimeout(() => {
+            //         resolve();
+            //         this.setState(prevState => {
+            //           const data = [...prevState.data];
+            //           data.splice(data.indexOf(oldData), 1);
+            //           return { ...prevState, data };
+            //         });
+            //       }, 600);
+            //     })
               }}
           />
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={this.handleClose} color="primary">
-                ยกเลิก
-              </Button>
-              <Button
-                onClick={this.handleCloseAndSave}
-                color="primary"
-                autoFocus
-              >
-                ยืนยัน
-              </Button>
-            </DialogActions>
-          </Dialog>
         </div>
       </div>
     );
   }
 }
 
-export default compose(withStyles(styles), withRouter)(Databeautician);
+export default compose(withStyles(styles), withRouter)(Managequeue);

b_beauty_project/src/views/DataShopPage/Profile/index.js

-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+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 InputAdornment from "@material-ui/core/InputAdornment";
@@ -19,17 +21,18 @@ import EditIcon from "@material-ui/icons/Edit";
 import Paper from "@material-ui/core/Paper";
 import CardMedia from "@material-ui/core/CardMedia";
 
-import PhotoCameraIcon from '@material-ui/icons/PhotoCamera';
+import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
 import Avatar from "react-avatar";
 
-const useStyles = makeStyles(theme => ({
+const styles = theme => ({
   margin: {
     margin: theme.spacing(1)
   }
-}));
+});
 
-export default function InputWithIcon() {
-  const classes = useStyles();
+class Profile extends Component {
+  render() {
+    const { classes } = this.props;
 
     return (
       <div className="row center">
@@ -172,4 +175,6 @@ export default function InputWithIcon() {
         </div>
       </div>
     );
+  }
 }
+export default compose(withStyles(styles), withRouter)(Profile);

b_beauty_project/src/views/HomePage/index.js

@@ -19,21 +19,15 @@ import { DatePicker } from "@material-ui/pickers";
 import { injectIntl, FormattedRelativeTime } from "react-intl";
 import { th } from "date-fns/locale";
 import { format } from "date-fns";
-import { MenuIcon } from "@material-ui/icons/Menu";
+import MenuIcon from "@material-ui/icons/Menu";
 import TextField from "@material-ui/core/TextField";
 import SearchIcon from "@material-ui/icons/Search";
 import DirectionsIcon from "@material-ui/icons/Directions";
 
+import Rating from "@material-ui/lab/Rating";
+
 const styles = theme => ({
   root: {
-    height: 150,
-    flexGrow: 1,
-    transform: "translateZ(0)",
-    // The position fixed scoping doesn't work in IE 11.
-    // Disable this demo to preserve the others.
-    "@media all and (-ms-high-contrast: none)": {
-      display: "none"
-    },
     padding: "2px 4px",
     display: "flex",
     alignItems: "center",
@@ -62,7 +56,8 @@ class HomePage extends Component {
   state = {
     tab: 0,
     date: new Date(),
-    open: false
+    open: false,
+    rating: 0
   };
   handleClickOpen = () => {
     this.setState({
@@ -130,21 +125,22 @@ class HomePage extends Component {
     const { classes } = this.props;
     // const tab = this.state.tab;
     // หรือ
-    const { tab, date, open, value } = this.state;
+    const { tab, date, open, value, rating } = this.state;
     return (
       <div>
         <AppBra tab={tab} handleChangeTab={this.handleChangeTab} />
-        <div className="row center">
-          <div className="row mt-2 mb-2">
-            <div>
+        <br />
+        <div className="row ">
+          <div className="row mt-2 mb-2  ">
+            <div className="row ">
+              <center>
                 <Paper component="form" className={classes.root}>
-                <IconButton className={classes.iconButton} aria-label="menu">
+                  {/* <IconButton className={classes.iconButton} aria-label="menu">
                   <MenuIcon />
-                </IconButton>
+                </IconButton> */}
                   <InputBase
                     className={classes.input}
-                  placeholder="Search Google Maps"
-                  inputProps={{ "aria-label": "search google maps" }}
+                    inputProps={{ "aria-label": "ค้นหาร้าน" }}
                   />
                   <IconButton
                     type="submit"
@@ -153,36 +149,62 @@ class HomePage extends Component {
                   >
                     <SearchIcon />
                   </IconButton>
-                <Divider className={classes.divider} orientation="vertical" />
-                <IconButton
+                  {/* <Divider className={classes.divider} orientation="vertical" /> */}
+                  {/* <IconButton
                   color="primary"
                   className={classes.iconButton}
                   aria-label="directions"
                 >
                   <DirectionsIcon />
-                </IconButton>
+                </IconButton> */}
                 </Paper>
+              </center>
             </div>
           </div>
-          <div className="row mt-2 mb-2">
-            <div className="col s12 m6 l6">
+          <div className="row mt-2 mb-2 center">
+            <div className="col s12 m16 l16">
               <h3>ชื่อ</h3>
             </div>
           </div>
-          <div className="row mt-2 mb-2">
-            <div className="col s12 m6 l6">
+          <div className="row mt-2 mb-2 ">
+            <div className="col s12 m6 l8">
+              <div className="row center">
                 <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>
 
-            <div className="col s12 m6 l6">
+            <div className="col s12 m6 l4">
               <div className="row">
-                <h4>ที่อยู่ร้าน</h4>
+                <h4>
+                  ที่อยู่ : 85 Sathonlamak Rd, Mueang Si Khai, Warin Chamrap
+                  District, Ubon Ratchathani 34190
+                </h4>
               </div>
               
               <div className="row">
+                <h4>
+                  โปรโมชั่น : จองคิวผ่าน B Beauty ลด 5 %
+                </h4>
+              </div>
+              
+              <div className="row">
+                <Rating
+                  name="simple-controlled"
+                  value={rating}
+                  size="large"
+                  onChange={(event, newValue) => {
+                    //change rating
+                    this.setState({
+                      rating: newValue
+                    });
+                  }}
+                />
+              </div>
+
+              <div className="row center">
                 <Button
                   variant="outlined"
                   color="primary"

b_beauty_project/src/views/LoginPage/index.js

-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+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 InputAdornment from "@material-ui/core/InputAdornment";
@@ -12,17 +14,18 @@ import MailOutlineIcon from "@material-ui/icons/MailOutline";
 import VpnKeyIcon from "@material-ui/icons/VpnKey";
 import Button from "@material-ui/core/Button";
 
-const useStyles = makeStyles(theme => ({
+
+const styles = theme => ({
   root: {
     "& > *": {
       margin: theme.spacing(1),
       width: 200
     }
   }
-}));
-
-export default function BasicTextFields() {
-  const classes = useStyles();
+});
+class Login extends Component {
+  render() {
+    const {classes} = this.props;
 
     return (
       <div>
@@ -33,7 +36,6 @@ export default function BasicTextFields() {
               className={classes.margin}
               id="outlined-uncontrolled"
               label="E_mail"
-            
               variant="outlined"
               InputProps={{
                 startAdornment: (
@@ -43,7 +45,8 @@ export default function BasicTextFields() {
                 )
               }}
             />
-          </div><br></br>
+          </div>
+          <br></br>
           <div>
             <TextField
               className={classes.margin}
@@ -60,17 +63,17 @@ export default function BasicTextFields() {
                 )
               }}
             />
-        </div><br></br>
+          </div>
+          <br></br>
           <div>
             <Button variant="contained" color="primary" disableElevation>
               เข้าสู่ระบบ
             </Button>
-          <h5>หรือ</h5>
-          <Button variant="contained" color="primary" disableElevation>
-            เข้าสู่ระบบด้วย Facebook
-          </Button>
+           
           </div>
         </div>
       </div>
     );
+  }
 }
+export default compose(withStyles(styles), withRouter)(Login);

b_beauty_project/src/views/RigisterPage/index.js

-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import Input from "@material-ui/core/Input";
-import InputLabel from "@material-ui/core/InputLabel";
+import React, { Component } from "react";
+import { withStyles } from "@material-ui/core/styles";
+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";
@@ -12,15 +11,47 @@ import MailOutlineIcon from "@material-ui/icons/MailOutline";
 import VpnKeyIcon from "@material-ui/icons/VpnKey";
 import Button from "@material-ui/core/Button";
 
-const useStyles = makeStyles(theme => ({
+import axios from "axios";
+
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+
+const styles = theme => ({
   margin: {
     margin: theme.spacing(1)
   }
-}));
+});
+
+class RegisterPage extends Component {
+  state = {
+    name: "",
+    email: "",
+    password: "",
+    password2: "",
+    image: ""
+  };
+
+  handleChange = event => {
+    console.log("name : ", event.target.name);
+    console.log("value : ", event.target.value);
+
+    this.setState({
+      [event.target.name]: event.target.value
+    });
 
-export default function InputWithIcon() {
-  const classes = useStyles();
+    // 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;
     return (
       <div className="row center">
         <h2>ลงทะเบียน</h2>
@@ -28,7 +59,9 @@ export default function InputWithIcon() {
         <div>
           <TextField
             className={classes.margin}
-          id="outlined-uncontrolled"
+            id="name"
+            name="name"
+            value={name}
             label="ชื่อ-สกุล"
             variant="outlined"
             InputProps={{
@@ -38,11 +71,14 @@ export default function InputWithIcon() {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
 
           <TextField
             className={classes.margin}
-          id="outlined-uncontrolled"
+            id="email"
+            name="email"
+            value={email}
             label="E_mail"
             variant="outlined"
             InputProps={{
@@ -52,13 +88,16 @@ export default function InputWithIcon() {
                 </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"
@@ -70,11 +109,14 @@ export default function InputWithIcon() {
                 </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"
@@ -86,13 +128,16 @@ export default function InputWithIcon() {
                 </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"
@@ -104,6 +149,7 @@ export default function InputWithIcon() {
                 </InputAdornment>
               )
             }}
+            onChange={this.handleChange}
           />
         </div>
         <br></br>
@@ -112,10 +158,37 @@ export default function InputWithIcon() {
             ยกเลิก
           </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
+                  })
+                  .then(response => {
+                    console.log("สร้างผู้ใช้สำเร็จ", response);
+                    window.location.href = "/";
+                  })
+                  .catch(error => {
+                    console.log(error);
+                  });
+                // alert("ลงทะเบียนสำเร็จ");
+              } else {
+                alert("password ไม่ตรงกันโว๊ยยยย");
+              }
+            }}
+          >
             ลงทะเบียน
           </Button>
         </div>
       </div>
     );
+  }
 }
+
+export default compose(withStyles(styles), withRouter)(RegisterPage);

b_beauty_project/src/views/RigisterShopPage/index.js

-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+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 InputAdornment from "@material-ui/core/InputAdornment";
@@ -15,14 +17,15 @@ import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
 import BusinessIcon from "@material-ui/icons/Business";
 
-const useStyles = makeStyles(theme => ({
+const styles = theme => ({
   margin: {
     margin: theme.spacing(1)
   }
-}));
+});
 
-export default function InputWithIcon() {
-  const classes = useStyles();
+class Registershop extends Component {
+  render() {
+    const { classes } = this.props;
 
     return (
       <div className="row center">
@@ -152,4 +155,6 @@ export default function InputWithIcon() {
         </div>
       </div>
     );
+  }
 }
+export default compose(withStyles(styles), withRouter)(Registershop);

b_beauty_project/src/views/ShopPage/index.js

@@ -10,6 +10,9 @@ import CardContent from "@material-ui/core/CardContent";
 
 import Typography from "@material-ui/core/Typography";
 
+import axios from "axios";
+// const axios = require('axios');
+
 const styles = theme => ({
   root: {
     minWidth: 275
@@ -27,12 +30,48 @@ const styles = theme => ({
   }
 });
 class ShopPage extends Component {
+  state = {
+    name: "xxx",
+    email: "xyz.ggg.com"
+  };
+
+  componentDidMount = () => {
+    axios
+      .get("http://localhost:9000/api/auth/getUserById/7")
+      .then(function(response) {
+        // handle success
+        // console.log("response : ", response.data);
+        // const name = response.data.name;
+        // const email = response.data.email;
+        const { name, email } = response.data;
+
+        console.log("name : ", name);
+        console.log("email : ", email);
+
+        this.setState({
+          name: name,
+          email:email
+        });
+
+      })
+      .catch(function(error) {
+        // handle error
+        console.log(error);
+      });
+
+    console.log("here");
+  };
+
   render() {
     const { classes } = this.props;
     const bull = <span className={classes.bullet}>•</span>;
+    const { name, email } = this.state;
     return (
       <div>
         <AppBar />
+
+        
+
         <div className="row ">
           <div className="row mt-2 mb-2">
             <div className="col s12 m6 l6">
@@ -62,7 +101,11 @@ class ShopPage extends Component {
 
             <div className="col s12 m6 l4">
               <div className="row">
-                <h4> ที่อยู่ : 85 Sathonlamak Rd, Mueang Si Khai, Warin Chamrap District, Ubon Ratchathani 34190</h4>
+                <h4>
+                  {" "}
+                  ที่อยู่ : 85 Sathonlamak Rd, Mueang Si Khai, Warin Chamrap
+                  District, Ubon Ratchathani 34190
+                </h4>
               </div>
 
               <div className="row">