Merge pull request #50 from untilhamza/release/v1.9.0

Release/v1.9.0

Author: untilhamza

.gitignore

@@ -16,6 +16,7 @@
 .env
 .env.local
 .env.development.local
+.env.development.local_
 .env.test.local
 .env.production.local
 

src/components/Booking/Booking.js

@@ -1,20 +1,21 @@
-import React from "react"
-import Button from "react-bootstrap/esm/Button"
-import Badge from "react-bootstrap/Badge"
-import "./Booking.css"
-import { setStatus } from "../../util/helpers"
+import React from "react";
+import Button from "react-bootstrap/esm/Button";
+import Badge from "react-bootstrap/Badge";
+import "./Booking.css";
+import { setStatus } from "../../util/helpers";
 
 const Booking = ({ booking, onView }) => {
-  const { name, time, status, id } = booking
+  // console.log("booking", booking);
+  const { name, time, status, id, phone } = booking;
 
   function handleView() {
-    onView(id)
+    onView(id);
   }
 
   return (
     <tr>
       <td className="text-center py-2 booking-time table-body-text">{time}</td>
-      <td className="text-start py-2 customer-name table-body-text">{name}</td>
+      <td className="text-start py-2 customer-name table-body-text">{`${name}\n ${phone}`}</td>
       <td className="text-center py-2 table-body-text">
         <Badge pill bg={`${setStatus(status)}`} className="py-2 px-2 px-sm-3">
           {status}
@@ -29,7 +30,7 @@ const Booking = ({ booking, onView }) => {
       </td>
       {}
     </tr>
-  )
-}
+  );
+};
 
-export default Booking
+export default Booking;

src/components/NavBar/Navbar.js

@@ -1,17 +1,17 @@
-import { useState } from "react"
+import { useState } from "react";
 // import { useContext } from "react"
 // import AuthContext from "../../store/auth-context"
-import { Navbar as RbNavbar, Container, Nav } from "react-bootstrap"
-import { NavLink } from "react-router-dom"
+import { Navbar as RbNavbar, Container, Nav } from "react-bootstrap";
+import { NavLink } from "react-router-dom";
 // import Button from "@mui/material/Button"
-import * as FaIcons from "react-icons/fa"
-import SideBar from "../SideBar/SideBar"
+import * as FaIcons from "react-icons/fa";
+import SideBar from "../SideBar/SideBar";
 
-import "./NavBar.css"
+import "./NavBar.css";
 const Navbar = () => {
-  const [showSidebar, setShowSidebar] = useState(false)
+  const [showSidebar, setShowSidebar] = useState(false);
 
-  const handleToggleSidebar = () => setShowSidebar((isShown) => !isShown)
+  const handleToggleSidebar = () => setShowSidebar((isShown) => !isShown);
 
   // const authCtx = useContext(AuthContext)
   return (
@@ -21,11 +21,7 @@ const Navbar = () => {
           <NavLink to="/"> Elkpro Cut</NavLink>
         </RbNavbar.Brand>
         <Nav className="ms-auto">
-          <NavLink
-            className="nav-link nav-item"
-            activeClassName="active"
-            to="/"
-          >
+          <NavLink className="nav-link nav-item" activeClassName="active" to="/">
             Booking
           </NavLink>
 
@@ -49,7 +45,7 @@ const Navbar = () => {
         <SideBar show={showSidebar} onToggle={handleToggleSidebar} />
       </Container>
     </RbNavbar>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;

src/components/SideBar/SideBar.js

@@ -1,18 +1,20 @@
-import * as AiIcons from "react-icons/ai"
-import "./SideBar.css"
-import { IconContext } from "react-icons"
-import { Link } from "react-router-dom"
-import { Backdrop } from "@mui/material"
-import { SIDEITEMS } from "../../util/data"
-import { useContext } from "react"
-import AuthContext from "../../store/auth-context"
+import * as AiIcons from "react-icons/ai";
+import "./SideBar.css";
+import { IconContext } from "react-icons";
+import { Link } from "react-router-dom";
+import { Backdrop } from "@mui/material";
+import { SIDEITEMS } from "../../util/data";
+import { useContext } from "react";
+import AuthContext from "../../store/auth-context";
+import styled from "styled-components";
+import version from "../../version.json";
 
 const SideBar = ({ show, onToggle }) => {
-  const authCtx = useContext(AuthContext)
+  const authCtx = useContext(AuthContext);
 
   const handleToggleSidebar = () => {
-    onToggle()
-  }
+    onToggle();
+  };
   return (
     <>
       {show && (
@@ -23,7 +25,6 @@ const SideBar = ({ show, onToggle }) => {
               <div className="side-bar__close">
                 <AiIcons.AiOutlineClose className="side-bar__crossIcon" />
               </div>
-
               <ul className="side-list">
                 {SIDEITEMS.reduce((items, item, index) => {
                   const listItem = (
@@ -33,22 +34,31 @@ const SideBar = ({ show, onToggle }) => {
                         <span>{item.title}</span>
                       </Link>
                     </li>
-                  )
+                  );
                   if (!item.protected) {
-                    items.push(listItem)
+                    items.push(listItem);
                   }
                   if (item.protected && authCtx.isLoggedIn) {
-                    items.push(listItem)
+                    items.push(listItem);
                   }
-                  return items
+                  return items;
                 }, [])}
               </ul>
+              <Version>Version : {version.version}</Version>
             </nav>
           </IconContext.Provider>
         </>
       )}
     </>
-  )
-}
+  );
+};
+
+export default SideBar;
 
-export default SideBar
+const Version = styled.span`
+  font-size: 0.8rem;
+  color: #fff;
+  margin-top: auto;
+  display: block;
+  text-align: center;
+`;

src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.3.3"
+  "version": "1.9.0"
 }