React App

72 |

73 |

74 | Product Name: 75 | 83 |

84 |

85 | Price: 86 | 94 |

95 |

96 | Available in Stock: 97 | 104 |

105 |

106 | Short Description: 107 | 114 |

115 |

116 | Description: 117 |

126 |               </div>
127 |               {this.state.flash && (
128 |                 <div className={`notification ${this.state.flash.status}`}>
129 |                   {this.state.flash.msg}
130 |                 </div>
131 |               )}
132 |               <div className="field is-clearfix">
133 |                 <button
134 |                   className="button is-primary is-outlined is-pulled-right"
135 |                   type="submit"
136 |                   onClick={this.save}
137 |                 >
138 |                   Submit
139 |                 </button>
140 |               </div>
141 |             </div>
142 |           </div>
143 |         </form>
144 |       </>
145 |     );
146 |   }
147 | }
148 | 
149 | export default withContext(AddProduct);
150 |

--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 |

--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import { Switch, Route, Link, BrowserRouter as Router } from "react-router-dom";
  3 | import axios from 'axios';
  4 | import jwt_decode from 'jwt-decode';
  5 | 
  6 | import AddProduct from './components/AddProduct';
  7 | import Cart from './components/Cart';
  8 | import Login from './components/Login';
  9 | import ProductList from './components/ProductList';
 10 | 
 11 | import Context from "./Context";
 12 | 
 13 | export default class App extends Component {
 14 |   constructor(props) {
 15 |     super(props);
 16 |     this.state = {
 17 |       user: null,
 18 |       cart: {},
 19 |       products: []
 20 |     };
 21 |     this.routerRef = React.createRef();
 22 |   }
 23 | 
 24 |   async componentDidMount() {
 25 |     let user = localStorage.getItem("user");
 26 |     let cart = localStorage.getItem("cart");
 27 | 
 28 |     const products = await axios.get('http://localhost:3001/products');
 29 |     user = user ? JSON.parse(user) : null;
 30 |     cart = cart? JSON.parse(cart) : {};
 31 | 
 32 |     this.setState({ user,  products: products.data, cart });
 33 |   }
 34 | 
 35 |   login = async (email, password) => {
 36 |     const res = await axios.post(
 37 |       'http://localhost:3001/login',
 38 |       { email, password },
 39 |     ).catch((res) => {
 40 |       return { status: 401, message: 'Unauthorized' }
 41 |     })
 42 | 
 43 |     if(res.status === 200) {
 44 |       const { email } = jwt_decode(res.data.accessToken)
 45 |       const user = {
 46 |         email,
 47 |         token: res.data.accessToken,
 48 |         accessLevel: email === 'admin@example.com' ? 0 : 1
 49 |       }
 50 | 
 51 |       this.setState({ user });
 52 |       localStorage.setItem("user", JSON.stringify(user));
 53 |       return true;
 54 |     } else {
 55 |       return false;
 56 |     }
 57 |   }
 58 | 
 59 |   logout = e => {
 60 |     e.preventDefault();
 61 |     this.setState({ user: null });
 62 |     localStorage.removeItem("user");
 63 |   };
 64 | 
 65 |   addProduct = (product, callback) => {
 66 |     let products = this.state.products.slice();
 67 |     products.push(product);
 68 |     this.setState({ products }, () => callback && callback());
 69 |   };
 70 | 
 71 |   addToCart = cartItem => {
 72 |     let cart = this.state.cart;
 73 |     if (cart[cartItem.id]) {
 74 |       cart[cartItem.id].amount += cartItem.amount;
 75 |     } else {
 76 |       cart[cartItem.id] = cartItem;
 77 |     }
 78 |     if (cart[cartItem.id].amount > cart[cartItem.id].product.stock) {
 79 |       cart[cartItem.id].amount = cart[cartItem.id].product.stock;
 80 |     }
 81 |     localStorage.setItem("cart", JSON.stringify(cart));
 82 |     this.setState({ cart });
 83 |   };
 84 | 
 85 |   removeFromCart = cartItemId => {
 86 |     let cart = this.state.cart;
 87 |     delete cart[cartItemId];
 88 |     localStorage.setItem("cart", JSON.stringify(cart));
 89 |     this.setState({ cart });
 90 |   };
 91 | 
 92 |   clearCart = () => {
 93 |     let cart = {};
 94 |     localStorage.removeItem("cart");
 95 |     this.setState({ cart });
 96 |   };
 97 | 
 98 |   checkout = () => {
 99 |     if (!this.state.user) {
100 |       this.routerRef.current.history.push("/login");
101 |       return;
102 |     }
103 | 
104 |     const cart = this.state.cart;
105 | 
106 |     const products = this.state.products.map(p => {
107 |       if (cart[p.name]) {
108 |         p.stock = p.stock - cart[p.name].amount;
109 | 
110 |         axios.put(
111 |           `http://localhost:3001/products/${p.id}`,
112 |           { ...p },
113 |         )
114 |       }
115 |       return p;
116 |     });
117 | 
118 |     this.setState({ products });
119 |     this.clearCart();
120 |   };
121 | 
122 |   render() {
123 |     return (
124 |       <Context.Provider
125 |         value={{
126 |           ...this.state,
127 |           removeFromCart: this.removeFromCart,
128 |           addToCart: this.addToCart,
129 |           login: this.login,
130 |           addProduct: this.addProduct,
131 |           clearCart: this.clearCart,
132 |           checkout: this.checkout
133 |         }}
134 |       >
135 |         <Router ref={this.routerRef}>
136 |         <div className="App">
137 |           <nav
138 |             className="navbar container"
139 |             role="navigation"
140 |             aria-label="main navigation"
141 |           >
142 |             <div className="navbar-brand">
143 |               <b className="navbar-item is-size-4 ">ecommerce</b>
144 |               <label
145 |                 role="button"
146 |                 class="navbar-burger burger"
147 |                 aria-label="menu"
148 |                 aria-expanded="false"
149 |                 data-target="navbarBasicExample"
150 |                 onClick={e => {
151 |                   e.preventDefault();
152 |                   this.setState({ showMenu: !this.state.showMenu });
153 |                 }}
154 |               >
155 |                 <span aria-hidden="true"></span>
156 |                 <span aria-hidden="true"></span>
157 |                 <span aria-hidden="true"></span>
158 |               </label>
159 |             </div>
160 |               <div className={`navbar-menu ${
161 |                   this.state.showMenu ? "is-active" : ""
162 |                 }`}>
163 |                 <Link to="/products" className="navbar-item">
164 |                   Products
165 |                 </Link>
166 |                 {this.state.user && this.state.user.accessLevel < 1 && (
167 |                   <Link to="/add-product" className="navbar-item">
168 |                     Add Product
169 |                   </Link>
170 |                 )}
171 |                 <Link to="/cart" className="navbar-item">
172 |                   Cart
173 |                   <span
174 |                     className="tag is-primary"
175 |                     style={{ marginLeft: "5px" }}
176 |                   >
177 |                     { Object.keys(this.state.cart).length }
178 |                   </span>
179 |                 </Link>
180 |                 {!this.state.user ? (
181 |                   <Link to="/login" className="navbar-item">
182 |                     Login
183 |                   </Link>
184 |                 ) : (
185 |                   <Link to="/" onClick={this.logout} className="navbar-item">
186 |                     Logout
187 |                   </Link>
188 |                 )}
189 |               </div>
190 |             </nav>
191 |             <Switch>
192 |               <Route exact path="/" component={ProductList} />
193 |               <Route exact path="/login" component={Login} />
194 |               <Route exact path="/cart" component={Cart} />
195 |               <Route exact path="/add-product" component={AddProduct} />
196 |               <Route exact path="/products" component={ProductList} />
197 |             </Switch>
198 |           </div>
199 |         </Router>
200 |       </Context.Provider>
201 |     );
202 |   }
203 | }
204 |

--------------------------------------------------------------------------------

Our Products

My Cart

Login

Add Product