la-flowerita 0.1.0

package/src/css/shoppingCart.css

@@ -0,0 +1,10 @@
+Table td img {
+    width: auto;
+    height: 6rem;
+}
+tbody, td, tfoot, th, thead, tr {
+    vertical-align: middle;
+}
+.cartSum h5 {
+    border-bottom: 1px solid #f4ecec;
+}

package/src/css/sideNav.css

@@ -0,0 +1,68 @@
+#header {
+    position: absolute;
+    width: 220px;
+  }
+  #header .pro-sidebar {
+    height: 100vh;
+  }
+  #header .closemenu {
+    color: #000;
+    position: absolute;
+    right: 0;
+    z-index: 9999;
+    line-height: 20px;
+    border-radius: 50%;
+    font-weight: bold;
+    font-size: 22px;
+    top: 55px;
+    cursor: pointer;
+  }
+  #header .pro-sidebar {
+    width: 100%;
+    min-width: 100%;
+  }
+  #header .pro-sidebar.collapsed {
+    width: 80px;
+    min-width: 80px;
+  }
+  #header .pro-sidebar-inner {
+    background-color: white;
+    box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
+  }
+  #header .pro-sidebar-inner .pro-sidebar-layout {
+    overflow-y: hidden;
+  }
+  #header .pro-sidebar-inner .pro-sidebar-layout .logotext p {
+    font-size: 20px;
+    padding: 0 20px;
+    color: #000;
+    font-weight: bold;
+  }
+  #header .pro-sidebar-inner .pro-sidebar-layout ul {
+    padding: 0 5px;
+  }
+  #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
+    color: #000;
+    margin: 10px 0px;
+    font-weight: bold;
+  }
+  #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
+    background-color: #c2e6ef;
+    color: #000;
+    border-radius: 3px;
+  }
+  #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {
+    color: #000;
+  }
+  #header .pro-sidebar-inner .pro-sidebar-layout .active {
+    background-image: linear-gradient(0deg, #44c5d9 0%, #c2e6ef 100%);
+  }
+  #header .logo {
+    padding: 20px;
+  }
+  
+  @media only screen and (max-width: 720px) {
+    html {
+      overflow: hidden;
+    }
+  }

package/src/css/spinner.css

@@ -0,0 +1,23 @@
+@keyframes spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  .loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 10px solid #f3f3f3; /* Light grey */
+    border-top: 10px solid #383636; /* Blue */
+    border-radius: 50%;
+    animation: spinner 1.5s linear infinite;
+  }
+  
+  .spinner-container {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    height: 350px;
+  }

package/src/index.js

@@ -0,0 +1,371 @@
+
+
+import React, {Component} from 'react';
+import {
+    Route,
+    NavLink,
+    HashRouter,
+    Routes
+  } from "react-router-dom";
+import {render} from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import $ from 'jquery'; 
+import reportWebVitals from './reportWebVitals';
+import './css/index.css';
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap/dist/js/bootstrap.min.js';
+import Contact from './components/Contact.js';
+import Catalog from './components/Catalog.js';
+import About from './components/About.js';
+import LoginModal from './components/LoginModal.js';
+import SignupModal from './components/SignupModal.js';
+import ResetPassword from './components/ResetPassword.js';
+import ProductList from './components/Catalog.js';
+import ShoppingCart from './components/ShoppingCart.js';
+import Wishlist from './components/Wishlist.js';
+import NoPermission from './components/NoPermission.js';
+import PreChat from './components/PreChat.js';
+//import react pro sidebar components
+import {
+  ProSidebar,
+  Menu,
+  MenuItem,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarContent
+} from "react-pro-sidebar";
+
+//import icons from react icons
+import { FaList, FaMailBulk, FaHeart, FaQuestion, FaUsers } from "react-icons/fa";
+// import {BiLogOut} from "react-icons/bi";
+import {
+  FiHome,
+  FiLogOut,
+  FiArrowUpCircle,
+  FiArrowDownCircle
+} from "react-icons/fi";
+import { RiPencilLine } from "react-icons/ri";
+import { BiCog } from "react-icons/bi";
+
+//import sidebar css from react-pro-sidebar module and our custom css
+import "react-pro-sidebar/dist/css/styles.css";
+class App extends Component {
+    constructor() {
+        super();
+        this.state = {
+            loggedIn: false,
+            ERROR: "", 
+            profileImage: false,
+            numOfProductsInCart: false,
+            numOfProductsInWishlist: false,
+            menuCollapse: false
+
+        };
+    }
+
+    componentDidMount = async() => {
+        var options = {
+            method: "GET",
+            headers: { "Content-Type": "application/json" },
+            };
+        await fetch("/getSession", options).then( res => res.json()).then(
+            (result) => {
+              console.log(result)
+                this.setState({
+                loggedIn: result.isLogged,
+                profileImage: result.profileImage || "",
+                numOfProductsInCart: result.cart.products.length,
+                numOfProductsInWishlist: result.wishlist.products.length
+              });
+              // localStorage.setItem("user", JSON.stringify(result.user));
+              // const saved = localStorage.getItem("user");
+              // const initialValue = JSON.parse(saved);
+              // console.log(initialValue);
+            
+            },
+            // Note: it's important to handle errors here
+            // instead of a catch() block so that we don't swallow
+            // exceptions from actual bugs in components.
+            (error) => {
+              this.setState({
+                ERROR: error
+              });
+            }
+          )
+
+        // let currenturl = window.location.href;
+   }
+    
+   async onUpdateCart(num){
+    this.setState({
+      numOfProductsInCart: num
+    });
+  }
+    async onUpdateWishlist(num){
+      this.setState({
+        numOfProductsInWishlist: num
+      });
+   }
+    logout = async () =>{
+        var options = {
+            method: "GET",
+            headers: { "Content-Type": "application/json" },
+            };
+        await fetch("/logout", options).then(
+            (result) => {
+              this.setState({
+                loggedIn: false,
+                user: false}
+                //because setState is async function
+                , () => {
+                  this.refresh();
+                })   
+            },
+            // Note: it's important to handle errors here
+            // instead of a catch() block so that we don't swallow
+            // exceptions from actual bugs in components.
+            (error) => {
+              this.setState({
+                ERROR: error
+              }, () => {
+                console.log(error);
+            })
+            }
+          )
+        }
+      arrayBufferToBase64(buffer) {
+          var binary = '';
+          var bytes = [].slice.call(new Uint8Array(buffer.data));
+          bytes.forEach((b) => binary += String.fromCharCode(b));
+          return window.btoa(binary);
+      };
+      refresh = () => {
+        window.location.reload(false);
+      }
+      async setMenuCollapse(){
+        this.setState({menuCollapse: !this.state.menuCollapse})
+      }
+    render() {
+      var path = "";
+      console.log(this.state.profileImage)
+      try{
+        path = "data:/" + this.state.profileImage.contentType + ";base64," + this.arrayBufferToBase64(this.state.profileImage.data)
+      } 
+      catch(e){
+      console.log("couldn't find path of profile image");
+      }
+      return (
+        <div>
+          <HashRouter>
+            <nav 
+              className="navbar navbar-expand-lg"
+              style={{
+                backgroundColor: "#e3f2fd",
+                marginBottom: "auto",
+                marginInline: "auto",
+                marginTop: "auto",
+              }}
+            >
+              {this.state.menuCollapse ? <FiArrowDownCircle style={{cursor:"pointer"}} onClick={() => this.setMenuCollapse()}/> : <FiArrowUpCircle style={{cursor:"pointer"}} onClick={() => this.setMenuCollapse()}/>}
+              <div className="container-fluid">
+                <a className="navbar-brand" exact="true" to="/">
+                  <img className="avatar" src="images/flower_shop.png" height="60" />
+                </a>
+                <button
+                  className="navbar-toggler"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#navbarNav"
+                  aria-controls="navbarNav"
+                  aria-expanded="false"
+                  aria-label="Toggle navigation"
+                >
+                  <span className="navbar-toggler-icon"></span>
+                </button>
+                <div
+                  className="collapse navbar-collapse"
+                  id="navbarSupportedContent"
+                >
+                  <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li className="nav-item">
+                      <NavLink
+                        className="nav-link active"
+                        style={{ fontSize: "initial" }}
+                        aria-current="page"
+                        to="/about"
+                        id="about"
+                      >
+                        {this.state.menuCollapse ? "" :"About "}<FaQuestion />
+                      </NavLink>
+                    </li>
+                    <li className="nav-item">
+                      <NavLink
+                        className="nav-link active"
+                        style={{ fontSize: "initial" }}
+                        to="/catalog"
+                        id="catalog"
+                        title="Catalog"
+                      >
+                        {this.state.menuCollapse ? "": "Flower Catalog "}<FaList /> 
+                      </NavLink>
+                    </li>
+                    <li className="nav-item">
+                      <NavLink
+                        className="nav-link active"
+                        style={{ fontSize: "initial" }}
+                        to="/contact"
+                        id="contact"
+                        title="Contact"
+                      >
+                        {this.state.menuCollapse ? "" :"Contact "}<FaMailBulk />
+                      </NavLink>
+                    </li>
+                    <li className="nav-item">
+                      <NavLink
+                        className="nav-link active"
+                        style={{ fontSize: "initial", display: "none" }}
+                        to="/users"
+                        id="users"
+                        title="Users"
+                      >
+                        {this.state.menuCollapse ? "" : "Manage Users "}<FaUsers />
+                      </NavLink>
+                    </li>
+                    <li className="nav-item">
+                      <NavLink
+                        className="nav-link active"
+                        style={{ fontSize: "initial" }}
+                        to="/cart"
+                        id="cart"
+                      >
+                        {this.state.menuCollapse ? "" : "Cart"}<i class="fa" style={{ "font-size": "24px" }}>
+                          &#xf07a;
+                        </i>  
+                        <span className="badge badge-warning" id="lblCartCount">
+                          {""}
+                          {this.state.numOfProductsInCart}{" "}
+                        </span>
+                      </NavLink>
+                    </li>
+                    <li className="nav-item">
+                      <NavLink
+                        className="nav-link active"
+                        style={{ fontSize: "initial" }}
+                        to="/wishlist"
+                        id="users"
+                      >
+                        {this.state.menuCollapse ?""
+                        : "Wish List"}<i class="fa" style={{ "font-size": "24px" }}>
+                        <FaHeart
+                          style={{ cursor: "pointer" }}
+                        /></i> 
+                        <span className="badge badge-warning" id="lblCartCount">
+                          {" "}
+                          {this.state.numOfProductsInWishlist}{" "}
+                        </span>
+                      </NavLink>
+                    </li>
+                    <li className="nav-item">
+                          <NavLink
+                              className="nav-link"
+                              style={{fontSize: "initial"}}
+                              to="/Chat"
+                              id="users"
+                          >
+                              {this.state.menuCollapse ? ""
+                                  : "chat"}
+                              <i class="fa fa-comments" style={{"font-size": "24px"}}/>
+
+                          </NavLink>
+                      </li>
+                  </ul>
+                  <button
+                    type="button"
+                    className="button-17"
+                    id="logoutbtn"
+                    style={{ display: this.state.loggedIn ? "block" : "none" }}
+                    onClick={() => this.logout()}
+                    title="Log Out"
+                  >
+                    {this.state.menuCollapse ? "" :"Logout"}<FiLogOut />
+                  </button>
+                  {this.state.loggedIn ? (
+                    <img
+                      src={path}
+                      className="avatar"
+                      onError={(e) => {
+                        e.target.src =
+                          "https://www.freeiconspng.com/uploads/no-image-icon-11.PNG";
+                        e.target.onerror = null; // prevents looping
+                      }}
+                      alt={this.props.name}
+                      height="150"
+                    />
+                  ) : (
+                    ""
+                  )}
+                  <LoginModal
+                    reloadNavbar={this.refresh}
+                    showButton={this.state.loggedIn ? "none" : "block"}
+                    menuCollapse={this.state.menuCollapse}
+                  />
+                  <SignupModal
+                    showButton={this.state.loggedIn ? "none" : "block"}
+                    menuCollapse={this.state.menuCollapse}
+                  />
+                </div>
+              </div>
+            </nav>
+
+            <div id="content">
+              <Routes>
+                <Route exact="true" path="/" element={<About />} />
+                <Route path="/about" element={<About />} />
+                <Route path="/catalog" element={<ProductList onUpdateWishlist={(num) => this.onUpdateWishlist(num)} onUpdateCart={(num) => this.onUpdateCart(num)}/>} />
+                <Route path="/cart" element={<ShoppingCart onUpdateCart={(num) => this.onUpdateCart(num)}/>} />
+                <Route path="/wishlist" element={<Wishlist onUpdateCart={(num) => this.onUpdateCart(num)} onUpdateWishlist={(num) => this.onUpdateWishlist(num)}/>} />
+                <Route path="/contact" element={<Contact />} />
+                <Route path="/resetPassword" element={<ResetPassword />} />
+                <Route path="/NoPermission" element={<NoPermission />} />
+                <Route path="/Chat" element={<PreChat />} />
+              </Routes>
+            </div>
+
+            <footer
+              className="container-fluid text-center"
+              style={{ backgroundColor: "#e3f2fd", float: "bottom" }}
+            >
+              <p>© Simha Franko & Adi Malachi Yosef 2022</p>
+            </footer>
+          </HashRouter>
+        </div>
+      );
+    }
+}
+
+// createRoot(<App/>, document.getElementById('root'));
+
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(<App/>);
+// serviceWorkerRegistration.register();
+
+
+
+
+
+
+
+
+
+// const root = ReactDOM.createRoot(document.getElementById('root'));
+// root.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>
+// );
+
+// // If you want to start measuring performance in your app, pass a function
+// // to log results (for example: reportWebVitals(console.log))
+// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// reportWebVitals();

package/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

package/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';