Video-23-Create-Progress-Indicator (#23)

basir · web-flow · commit a958a388a619 · 2020-07-04T23:05:18.000+04:30
diff --git a/README.md b/README.md
@@ -216,79 +216,75 @@ JS AMAZONA
     12. button id message-overlay-close-button OK
     13. add class active to it
     14. add event listener for button to call callback
-24. Create Header Component
-    1. update index.html
-    2. add header render and after render to router function
-    3. show header menu based on user logged in or not
-25. Register Screen Action
+24. Register Screen Action
     1. after_render handle form submit
     2. create register request in frontend
     3. create register api in backend
-26. Create Checkout Wizard Header Component
+25. Create Checkout Wizard Header Component
     1. create component
     2. style component
-27. Shipping Screen
+26. Shipping Screen
     1. create ShippingScreen.js
     2. style elements
     3. handle form submit
-28. Payment Screen
+27. Payment Screen
     1. create PaymentScreen.js
     2. style elements
     3. handle form submit
-29. PlaceOrder Screen UI
+28. PlaceOrder Screen UI
     1. create PlaceOrder.js
     2. style elements
-30. PlaceOrder Screen Action
+29. PlaceOrder Screen Action
     1. handle form submit
     2. create backend api to create order
-31. Order Screen
+30. Order Screen
     1. create OrderScreen.js
     2. style elements
-32. PayPal Payment
+31. PayPal Payment
     1. add paypal checkout script
     2. show paypal button
     3. update order after payment
-33. User Profile UI
+32. User Profile UI
     1. create ProfileScreen.js
     2. style elements
-34. User Profile Data
+33. User Profile Data
     1. Create profile info backend api
     2. Create user orders api
     3. Call apis in the backend
-35. Update Profile
+34. Update Profile
     1. handle form submit
     2. send request to backend
     3. create api to update profile
-36. Admin Products UI
+35. Admin Products UI
     1. create Admin Order menu in header
     2. create ProductListScreen.js
     3. show products with edit and delete button
     4. show create product button
     5. implement create product backend
     6. redirect user to edit product screen
-37. Edit Product
+36. Edit Product
     1. create ProductListScreen.js
     2. load product data from backend
     3. handle form submit
     4. save product in backend
-38. Delete Product
+37. Delete Product
     1. update ProductListScreen.js
     2. handle delete button
     3. rerender after deletion
-39. Admin Orders
+38. Admin Orders
     1. create Admin Order menu in header
     2. create AdminOrder.js
     3. load orders from backend
     4. list them in the screen
     5. show delete and edit button
     6. redirect to order details on edit action
-40. Edit Order
+39. Edit Order
     1. if order is payed show deliver button for admin
     2. handle click on deliver button
     3. set state to delivered
-41. Delete Order
+40. Delete Order
     1. update OrderListScreen.js
     2. handle delete button
     3. rerender after deletion
-42. Publish heroku
+41. Publish heroku
     1. publish steps
diff --git a/frontend/index.html b/frontend/index.html
@@ -11,6 +11,8 @@
     <title>JS Amazona</title>
   </head>
   <body>
+    <div class="overlay" id="loading-overlay">Loading...</div>
+    <div class="overlay" id="message-overlay"></div>
     <div class="grid-container">
       <header id="header-container"></header>
       <main id="main-container"></main>
diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -1,6 +1,6 @@
 import HomeScreen from './srceens/HomeScreen';
 import ProductScreen from './srceens/ProductScreen';
-import { parseRequestUrl } from './utils';
+import { parseRequestUrl, showLoading, hideLoading } from './utils';
 import Error404Screen from './srceens/Error404Screen';
 import CartScreen from './srceens/CartScreen';
 import SigninScreen from './srceens/SigninScreen';
@@ -14,6 +14,7 @@ const routes = {
   '/signin': SigninScreen,
 };
 const router = async () => {
+  showLoading();
   const request = parseRequestUrl();
   const parseUrl =
     (request.resource ? `/${request.resource}` : '/') +
@@ -26,6 +27,7 @@ const router = async () => {
   const main = document.getElementById('main-container');
   main.innerHTML = await screen.render();
   await screen.after_render();
+  hideLoading();
 };
 window.addEventListener('load', router);
 window.addEventListener('hashchange', router);
diff --git a/frontend/src/srceens/HomeScreen.js b/frontend/src/srceens/HomeScreen.js
@@ -1,14 +1,17 @@
 import axios from 'axios';
 import Rating from '../components/Rating';
+import { hideLoading, showLoading } from '../utils';
 
 const HomeScreen = {
   render: async () => {
+    showLoading();
     const response = await axios({
       url: 'http://localhost:5000/api/products',
       headers: {
         'Content-Type': 'application/json',
       },
     });
+    hideLoading();
     if (!response || response.statusText !== 'OK') {
       return '<div>Error in getting data</div>';
     }
diff --git a/frontend/src/srceens/ProductScreen.js b/frontend/src/srceens/ProductScreen.js
@@ -1,4 +1,4 @@
-import { parseRequestUrl } from '../utils';
+import { parseRequestUrl, showLoading, hideLoading } from '../utils';
 import { getProduct } from '../api';
 import Rating from '../components/Rating';
 
@@ -11,10 +11,12 @@ const ProductScreen = {
   },
   render: async () => {
     const request = parseRequestUrl();
+    showLoading();
     const product = await getProduct(request.id);
     if (product.error) {
       return `<div>${product.error}</div>`;
     }
+    hideLoading();
     return `
     <div class="content">
       <div class="back-to-result">
diff --git a/frontend/src/srceens/SigninScreen.js b/frontend/src/srceens/SigninScreen.js
@@ -1,18 +1,21 @@
 import { signin } from '../api';
 import { getUserInfo, setUserInfo } from '../localStorage';
+import { showLoading, hideLoading, showMessage } from '../utils';
 
 const SigninScreen = {
   after_render: () => {
     document
       .getElementById('signin-form')
       .addEventListener('submit', async (e) => {
         e.preventDefault();
+        showLoading();
         const data = await signin({
           email: document.getElementById('email').value,
           password: document.getElementById('password').value,
         });
+        hideLoading();
         if (data.error) {
-          alert(data.error);
+          showMessage(data.error);
         } else {
           setUserInfo(data);
           document.location.hash = '/';
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
@@ -13,3 +13,28 @@ export const rerender = async (component) => {
   ).innerHTML = await component.render();
   await component.after_render();
 };
+
+export const showLoading = () => {
+  document.getElementById('loading-overlay').classList.add('active');
+};
+
+export const hideLoading = () => {
+  document.getElementById('loading-overlay').classList.remove('active');
+};
+export const showMessage = (message, callback) => {
+  document.getElementById('message-overlay').innerHTML = `
+  <div>
+    <div id="message-overlay-content">${message}</div>
+    <button id="message-overlay-close-button">OK</button>
+  </div>
+  `;
+  document.getElementById('message-overlay').classList.add('active');
+  document
+    .getElementById('message-overlay-close-button')
+    .addEventListener('click', () => {
+      document.getElementById('message-overlay').classList.remove('active');
+      if (callback) {
+        callback();
+      }
+    });
+};
diff --git a/frontend/style.css b/frontend/style.css
@@ -33,6 +33,34 @@ button:hover {
 button.primary {
   background-color: #f0c040;
 }
+.overlay {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(16, 16, 16, 0.5);
+}
+.overlay.active {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+}
+.overlay > div {
+  background-color: #ffffff;
+  color: #000000;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  max-width: 40rem;
+}
+.overlay > div > * {
+  margin: 2rem;
+}
 .fw {
   width: 100%;
 }
