Image view

client/dist/style.css

@@ -96,11 +96,11 @@ button:active {
   border-color: grey;
   border-width: 1px;
   color: black;
-  width: 70%;
+  width: 51%;
   height: 60px;
   margin-right: 10px;
-
 }
+
 .button-quantity {
   background-color: white;
   border: black;
@@ -115,6 +115,10 @@ button:active {
   margin-left: 10px;
 }
 
+.addToCart {
+  width: 75%
+}
+
 .soldOut {
   width: 95%;
   text-align: center;
@@ -307,7 +311,7 @@ button:active {
 
 #modalGallery-header {
   font-size: 14px;
-  height: 12vh;
+  height: 5rem;
   width: 100vw;
   display: flex;
   justify-content: space-between;
@@ -323,23 +327,41 @@ button:active {
   fill: lightgrey;
 }
 
+#modal-thumbnailGallery {
+  scrollbar-width: none;
+  align-items: center;
+}
+
 .modal-gallery {
   height: 2.5rem;
   width: 2.5rem;
   object-fit: cover;
   border-radius: 100%;
+  -webkit-transition: all 250ms ease;
+  -moz-transition: all 250ms ease;
+  -ms-transition: all 250ms ease;
+  -o-transition: all 250ms ease;
+  transition: all 250ms ease;
+  z-index: 2000;
+  vertical-align: middle;
+}
+
+.modal-gallery:hover {
+  height: 4rem;
+  width: 4rem;
   -webkit-transition: all 500ms ease;
   -moz-transition: all 500ms ease;
   -ms-transition: all 500ms ease;
   -o-transition: all 500ms ease;
   transition: all 500ms ease;
   z-index: 2000;
-  vertical-align: middle;
 }
 
-.modal-gallery:hover {
+.modal-gallery-selected {
   height: 4rem;
   width: 4rem;
+  border-radius: 100%;
+  object-fit: cover;
   -webkit-transition: all 500ms ease;
   -moz-transition: all 500ms ease;
   -ms-transition: all 500ms ease;
@@ -351,7 +373,6 @@ button:active {
 #modal-thumbnail {
   display: flex;
   justify-content: center;
-  margin: 3vh;
 }
 
 /* Overview end */

client/src/Reducers/sizeReducer.js

@@ -0,0 +1,24 @@
+const initialState = { size: null, sku: null};
+
+const sizeReducer = (state = initialState, action) => {
+  switch (action.type) {
+  case 'SET_SIZE':
+    return { size: action.size, sku: action.sku, sizeQuantity: getQuantity(action.style, action.sku)};
+  default:
+    return state;
+  }
+};
+
+const getQuantity = (style, sizeSku) => {
+  if (sizeSku) {
+    let quantity = style.skus[sizeSku].quantity;
+    let quantArr = [];
+    for (var i = 1; i <= 15; i++) {
+      quantArr.push(i);
+    }
+    return quantArr;
+  }
+  return null;
+};
+
+export default sizeReducer;

client/src/Reducers/styleReducer.js

@@ -1,3 +1,4 @@
+const initialState = { style: {}, hasInventory: false };
 
 
 const styleReducer = (state = [], action) => {
@@ -7,14 +8,6 @@ const styleReducer = (state = [], action) => {
       style: action.style,
       hasInventory: checkInventory(action.style),
     };
-  case 'SET_SIZE':
-    return {
-      style: action.style,
-      sizeSelected: action.sizeSelected,
-      hasInventory: checkInventory(action.style),
-      sku: action.sku,
-      quantity: getQuantity(action.style, action.sku),
-    };
   default:
     return state;
   }
@@ -30,17 +23,6 @@ const checkInventory = (style) => {
   return inventoryCheck;
 };
 
-const getQuantity = (style, sizeSku) => {
-  if (sizeSku) {
-    let quantity = style.skus[sizeSku].quantity;
-    let quantArr = [];
-    for (var i = 1; i <= quantity; i++) {
-      quantArr.push(i);
-    }
-    return quantArr;
-  }
-  return null;
-};
 
 
 export default styleReducer;

client/src/Reducers/stylesReducer.js

@@ -6,8 +6,6 @@ const stylesReducer = (state = [], action) => {
       stylesObj: styleParser(action.styles),
       styles: action.styles
     };
-
-    // return { styles: action.styles };
   default:
     return state;
   }

client/src/Store/store.js

@@ -7,7 +7,7 @@ import productReducer from '../Reducers/productReducer.js';
 import stylesReducer from '../Reducers/stylesReducer.js';
 import styleReducer from '../Reducers/styleReducer.js';
 import ratingsReducer from '../Reducers/ratingsReducer.js';
-import sizeReducer from '../Reducers/styleReducer.js';
+import sizeReducer from '../Reducers/sizeReducer.js';
 import quantityReducer from '../Reducers/quantityReducer.js';
 import photoReducer from '../Reducers/photoReducer.js';
 import modalReducer from '../Reducers/modalReducer.js';
@@ -28,7 +28,8 @@ const store = createStore(
     photoReducer,
     modalReducer,
     zoomifyReducer,
-    addToCartReducer
+    addToCartReducer,
+    sizeReducer
   }),
   composeEnhancers(applyMiddleware(thunk))
 );

client/src/components/Overview/AddToCart.jsx

@@ -1,63 +1,54 @@
 import React, { useState, useEffect } from 'react';
-import { Row, Col, Button, Select } from 'react-bootstrap';
+import { Row, Col, Button, Select, Alert, Dropdown } from 'react-bootstrap';
 import { useSelector, useDispatch } from 'react-redux';
 import apiHandlers from '../apiHandlers.js';
 
 const AddToCart = (props) => {
+
+  // States //
   const dispatch = useDispatch();
   let product = useSelector((store) => store.productReducer.product);
   let selectedStyle = useSelector((state) => state.styleReducer.style);
   let hasInventory = useSelector((state) => state.styleReducer.hasInventory);
-  let sizeSelected = useSelector((state) => state.styleReducer.sizeSelected);
-  let skuSelected = useSelector((state) => state.styleReducer.sku);
-  let styleQuantity = useSelector((state) => state.styleReducer.quantity);
+  let sizeSku = useSelector((state) => state.sizeReducer.sku);
+  let styleQuantity = useSelector((state) => state.sizeReducer.sizeQuantity);
   let quantity = useSelector((state) => state.quantityReducer.quantity);
 
 
+  // Event Handlers //
   const setSize = (e) => {
-    if (e.currentTarget.value === 'select size') {
-      dispatch({
-        type: 'SET_SIZE',
-        style: selectedStyle,
-        sizeSelected: false
-      });
-    } else {
-      dispatch({
-        type: 'SET_SIZE',
-        style: selectedStyle,
-        sizeSelected: true,
-        sku: e.currentTarget.value
-      });
-    }
+    dispatch({
+      type: 'SET_SIZE',
+      sku: e.currentTarget.value,
+      style: selectedStyle,
+    });
   };
 
   const setQuantity = (e) => {
     dispatch({ type: 'SET_QUANTITY', quantity: e.target.value });
   };
 
   const addToBag = (e) => {
+    e.preventDefault();
     for (var i = 0; i < quantity; i++) {
-      apiHandlers.addToCart(dispatch, skuSelected);
+      apiHandlers.addToCart(dispatch, sizeSku);
     }
-    // dispatch({ type: 'CHANGE_PRODUCT', product: product });
-    // dispatch({ type: 'SET_STYLE', style: selectedStyle });
-    // dispatch({ type: 'SET_PHOTO', photoIndex: 0 });
-    // dispatch({
-    //   type: 'SET_SIZE',
-    //   style: selectedStyle,
-    //   sizeSelected: false
-    // });
+    dispatch({ type: 'SET_QUANTITY', quantity: 0 });
+    dispatch({ type: 'SET_SIZE', sku: undefined, style: undefined });
   };
 
+
+  // Render //
   if (selectedStyle) {
     return (
       <div>
         {hasInventory ?
-          <div>
+          <form>
             <Row className='mb-3'>
               <Col>
                 <div>
-                  <select className="button-wide" style={{padding: '20px'}} onChange={setSize}>
+                  {/* {!sizeSku && <Alert variant='dark' style={{width: '75%'}}>Please select size</Alert>} */}
+                  <select className="button-wide" style={{padding: '20px'}} onChange={setSize} required>
                     <option value='select size'>SELECT SIZE</option>
                     {selectedStyle && Object.entries(selectedStyle.skus).map((size, id) => {
                       if (size[1].quantity > 0) {
@@ -68,9 +59,25 @@ const AddToCart = (props) => {
                       }
                     })}
                   </select>
-                  <select className="button-quantity" onChange={setQuantity}>
+
+                  {/* <Dropdown className="button-wide">
+                    <Dropdown.Toggle style={{padding: '20px'}}>SELECT SIZE </Dropdown.Toggle>
+                    <Dropdown.Menu>
+                      <Dropdown.Item bsPrefix="button-wide" value='select size'>SELECT SIZE</Dropdown.Item>
+                      {selectedStyle && Object.entries(selectedStyle.skus).map((size, id) => {
+                        if (size[1].quantity > 0) {
+                          return (
+                            <Dropdown.Item bsPrefix="button-wide" key={id} value={size[0]} onClick={setSize}
+                            > Size {size[1].size} - {size[1].quantity}</Dropdown.Item>
+                          );
+                        }
+                      })}
+                    </Dropdown.Menu>
+                  </Dropdown> */}
+
+                  <select className="button-quantity" onChange={setQuantity} required>
                     <option> - </option>
-                    {sizeSelected && styleQuantity.map((count, id) => (
+                    {sizeSku && styleQuantity.map((count, id) => (
                       <option key={id} value={count}> {count} </option>
                     ))}
                   </select>
@@ -80,11 +87,10 @@ const AddToCart = (props) => {
 
             <Row>
               <Col>
-                <input type="button" className="button-wide" value="ADD TO BAG" onClick={addToBag}></input>
-                <input type="button" className="button-quantity" value="★"></input>
+                <button className="button-wide addToCart" value="ADD TO BAG" onClick={addToBag}>ADD TO BAG</button>
               </Col>
             </Row>
-          </div>
+          </form>
           : <div className="button-wide soldOut">OUT OF STOCK</div>}
       </div>
     );

client/src/components/Overview/Header.jsx

@@ -35,7 +35,7 @@ const Header = () => {
       <div >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-columns-gap" viewBox="0 0 16 16">
           <path d="M6 1v3H1V1h5zM1 0a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm14 12v3h-5v-3h5zm-5-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5zM6 8v7H1V8h5zM1 7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H1zm14-6v7h-5V1h5zm-5-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1h-5z"/>
-        </svg> &nbsp; CATWALK
+        </svg> &nbsp; ATELIER
       </div>
       <div >{cartTotalCounter()} &nbsp; &nbsp;
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-cart4" viewBox="0 0 16 16">