Merge branch 'dev' into 'uniform-styling'

Dev

See merge request !21

package-lock.json

@@ -16,6 +16,7 @@
         "react": "^17.0.2",
         "react-bootstrap": "^1.5.2",
         "react-dom": "^17.0.2",
+        "react-google-login": "^5.2.2",
         "react-hook-form": "^7.4.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
@@ -14626,6 +14627,19 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "node_modules/react-google-login": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
+      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17",
+        "react-dom": "^16 || ^17"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",
@@ -31867,6 +31881,15 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "react-google-login": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
+      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
+      "requires": {
+        "@types/react": "*",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-hook-form": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-google-login": "^5.2.2",
     "react-hook-form": "^7.4.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

public/index.html

@@ -8,8 +8,7 @@
       integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
       crossorigin="anonymous"
     />
-<link async rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css" />
-<script async src="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.js"></script>
+
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

src/component/Main.jsx

@@ -5,6 +5,7 @@ import ProductIndex from "./ProductIndex";
 import SearchResults from "./SearchResults";
 import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
 import PromotionIndexComponent from "./promo_index/PromotionsIndexComponent";
+import PromotionUpdateFormComponent from "./promotionforms/UpdatePromotionForm";
 
 export default function Main() {
 
@@ -22,6 +23,7 @@ export default function Main() {
           path="/promos/new"
           component={PromotionNewFormComponent}
         ></AuthRoute>
+        <AuthRoute exact path="/promos/:promoId/update" component={PromotionUpdateFormComponent}></AuthRoute>
         <AuthRoute exact path="/products" component={ProductIndex}></AuthRoute>
         <AuthRoute path="/promos">
           <PromotionIndexComponent />

src/component/SearchResults.jsx

 import React from "react";
 import ProductRow from "./ProductRow.jsx";
-import { Table } from "react-bootstrap";
+import { Table, Container } from "react-bootstrap";
 import { deleteProduct } from "../actions/apiRequests";
 import { withRouter } from "react-router";
 import Search from "./Search.jsx";
@@ -27,11 +27,13 @@ class SearchResults extends React.Component {
   render() {
     return (
       <div className="container flex-column d-flex justify-content-center">
-        
+        <div className="container mt-3 d-flex justify-content-between align-items-center">
+
           <h1 id="title" >Search Results</h1>
-          <Search />
-        
+        <div><Search /></div>
+        </div>
         {this.state.results.length > 0 ?
+          <Container id="prod-table" className="mt-3 mx-auto">
           <Table>
             <thead>
               <tr>
@@ -53,6 +55,7 @@ class SearchResults extends React.Component {
               })}
             </tbody>
           </Table>
+          </Container>
           :
           <p>Unable to find any matching products.</p>
         }

src/component/promo_index/PromotionsIndexComponent.jsx

@@ -27,12 +27,11 @@ export default function PromotionIndexComponent () {
 
     return (
         <div>
-            <div className="promo-container">
-
-                <div className="promo-list-container">
-                    <div className="promo-header">
+            
+            <div className="container flex-column d-flex justify-content-center">
+                <div className="container mt-3 d-flex justify-content-between align-items-center">
                         <h1 className="promo-title"> Promotions</h1>
-                        <NavLink className="add-navLink" to='/promos/new'><button className="btn-success">+ New Promotion</button></NavLink>
+                        <NavLink className="add-navLink" to='/promos/new'><button className="btn btn-success">+ New Promotion</button></NavLink>
                     </div>
                     <table className="promo-index-list">
                         <thead className="promo-table-title">
@@ -49,16 +48,16 @@ export default function PromotionIndexComponent () {
                             <th>
                                 Minimum Quanitity
                             </th>
-                            <th>
+                            <th className="row-width">
 
                             </th>
-                            <th>
+                            <th className="row-width">
 
-                            </th>
+                            </th >
                             </tr>
                         </thead>
                         <tbody>
-                        {promoData.map((promo, key) => {
+                        {promoData.length > 0 ? promoData.map((promo, key) => {
                             return (
                             <tr key={key}>
                             <td>
@@ -78,20 +77,19 @@ export default function PromotionIndexComponent () {
                                     pathname: `/promos/${promo.promotionId}/update`,
                                     state: {promo}
                                     }}>
-                                    <button className="btn-primary">Update</button>
+                                    <button className="btn-color btn btn-primary btn-sm">Update</button>
                                 </NavLink>
                             </td>
                             <td>
-                                <button className="btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
+                                <button className="btn btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
                             </td>
                             </tr>
                             )
-                        }).reverse()
-                        }
+                        }).reverse() : <p>no promotions found.</p>}
+                        
                         </tbody>
                     </table>
                 </div>
             </div>
-        </div>
     )
 }

src/component/promo_index/promolistStyle.css

-.promo-container {
+/* .promo-container {
   margin: 30px auto;
   padding: 0 16px;
 }
 .promo-header {
-  background-color: #212529;
   display: flex;
   justify-content: space-between;
   padding-left: 10px;
   padding-right: 10px;
-}
-
+} */
+/* 
 .promo-title {
-  color: white;
   padding: 8px;
+} */
+.promo-index-list {
+  margin-top: 7px;
+}
+.promo-table-title {
+  border-bottom: 1px solid black;
 }
-
 .add-navLink {
   align-self: center;
 }
@@ -24,6 +27,14 @@ table {
   width: 100%;
 }
 
+.row-width {
+  width: 7%;
+}
+
+.btn-color {
+  background-color: #00567D;
+}
+
 td,
 th {
   text-align: left;
@@ -42,10 +53,11 @@ tr:nth-child(even) {
   background-color: #dddddd;
 }
 
-thead th {
+/* thead th {
   background-color: #dddddd;
   height: 35px;
-}
+  /* border-bottom: 1px black; */
+
 
 tr:hover {
   background-color: lightblue;

src/component/promotionforms/PromotionNewFormComponent.jsx

@@ -16,7 +16,6 @@ export default function PromotionNewFormComponent (props) {
 
 
     const onSubmit = (data) => {
-        console.log(data)
 
         fetch(`${Config.promotionsUrl}`, {
             method: "POST",
@@ -36,20 +35,14 @@ export default function PromotionNewFormComponent (props) {
 
     const loadProducts = async (event) => {
         const data = await getAllProducts();
-
         setproductData(data);
-
     }
 
     const onChange = (e, data) => {
-        console.log(data)
         setValue('productSku', data.value)
-        console.log(productSku)
     }
 
-
     const productSku = register('productSku', { required: true })
-
     return (
         <div>
             <div className="promo-container">
@@ -64,7 +57,7 @@ export default function PromotionNewFormComponent (props) {
                     <input
                         {...register("promotionId", {
                             required: "promotion id is required",
-                            maxLength: { value: 10, message: "You exceeded the maximum value" }
+                            maxLength: { value: 20, message: "You exceeded the maximum value" }
                         })}
                         id="promotionId"
                         className="form-control"
@@ -102,6 +95,8 @@ export default function PromotionNewFormComponent (props) {
                                 })}
                                     />
                             {errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
+
+
                     <br></br>
                 </div>
 
@@ -134,7 +129,7 @@ export default function PromotionNewFormComponent (props) {
                         {...register("minimumQuantity", {
                             valueAsNumber: true,
                             required: "minimum quantity is required",
-                            min: { value: 1, message: "discount percentage must be greater than 0" },
+                            min: { value: 1, message: "minimum quantity must be greater than 0" },
 
                         })}
                         id="minimumQuantity"

src/component/promotionforms/UpdatePromotionForm.jsx

@@ -16,8 +16,6 @@ export default function PromotionUpdateFormComponent(props) {
     const [productData, setproductData] = useState([]);
 
     const onSubmit = (data) => {
-        console.log(data)
-
         fetch(`${Config.promotionsUrl}/${data.promotionId}`, {
             method: "PUT",
             headers: {
@@ -42,7 +40,8 @@ export default function PromotionUpdateFormComponent(props) {
         setValue('productSku', data.value)
     }
 
-    const productSku = register('productSku', { required: true })
+    register('productSku', { required: true })
+    setValue('productSku', props.location.state.promo.productSku);
     return (
         <div>
             <div className="promo-container">
@@ -57,7 +56,7 @@ export default function PromotionUpdateFormComponent(props) {
                                 {...register("promotionId", {
                                     value: props.location.state.promo.promotionId,
                                     required: "promotion id is required",
-                                    maxLength: { value: 10, message: "You exceeded the maximum value" },
+                                    maxLength: { value: 20, message: "You exceeded the maximum value" },
 
                                 })}
                                 readOnly
@@ -87,6 +86,7 @@ export default function PromotionUpdateFormComponent(props) {
                                     }
                                 })} />
                             {errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
+
                             <br></br>
                         </div>
 
@@ -121,12 +121,11 @@ export default function PromotionUpdateFormComponent(props) {
                                     valueAsNumber: true,
                                     value: props.location.state.promo.minimumQuantity,
                                     required: "minimum quantity is required",
-                                    min: { value: 1, message: "discount percentage must be greater than 0" },
+                                    min: { value: 1, message: "minimum quantity must be greater than 0" },
                                 })}
                                 id="minimumQuantity"
                                 className="form-control"
                                 type="number"
-                                min="1"
                                 placeholder={props.location.state.promo.minimumQuantity}
                             />
                             {errors.minimumQuantity && <p className="form-error">{errors.minimumQuantity.message}</p>}

src/component/promotionforms/promoStyle.css

@@ -3,7 +3,7 @@
     margin: 0px auto;
     padding: 50px;
     border-radius: 3px;
-    
+    max-width: 700px;
     
 }