Merge pull request #1 from annthespy/version-1

Final commit, version 1
annthespy · Nov 16, 2020 · 25cbfc2 · 25cbfc2
2 parents 3cbf6da + 554d887
commit 25cbfc2
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 493 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "overview-module",
   "version": "1.0.0",
   "description": "Overview component for HackReactor's Front-end Capstone Project",
-  "main": "./src/components/App.js",
+  "main": "./src/components/Overview.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/annthespy/overview-module.git"
@@ -35,8 +35,6 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "react-icons": "^3.10.0",
     "sass": "^1.28.0"
   },
@@ -52,6 +50,8 @@
     "file-loader": "^6.2.0",
     "sass-loader": "^9.0.3",
     "style-loader": "^1.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "url-loader": "^4.1.1",
     "webpack": "^5.3.0",
     "webpack-cli": "^4.1.0"

diff --git a/src/apiHelpers/getCurrentProductInfo.js b/src/apiHelpers/getCurrentProductInfo.js
diff --git a/src/apiHelpers/getStyles.js b/src/apiHelpers/getStyles.js
diff --git a/src/components/AddToCart.js b/src/components/AddToCart.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import "../styles.scss";
-// import { IoIosArrowDown } from "react-icons/io";
 import { AiOutlineStar } from "react-icons/ai";
 
 const AddToCart = ({ currentStyle }) => {
@@ -14,7 +13,6 @@ const AddToCart = ({ currentStyle }) => {
     }
   }
   let skusArr = Object.entries(newSkusObj);
-
   const [quantity, setQuantity] = useState("");
 
   useEffect(() => {
@@ -31,12 +29,13 @@ const AddToCart = ({ currentStyle }) => {
     <div className="add-to-cart">
       <div className="select-size">
         <select
+          value={quantity}
           className="select-size-box"
           onChange={(e) => {
             setQuantity(e.target.value);
           }}
         >
-          <option>SELECT SIZE</option>
+          <option value="">SELECT SIZE</option>
           {!skusArr.length ? (
             <option>OUT OF STOCK</option>
           ) : (

diff --git a/src/components/CurrentPhoto.js b/src/components/CurrentPhoto.js
@@ -1,41 +1,58 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "../styles.scss";
 import { FaArrowLeft, FaArrowRight, FaExpand } from "react-icons/fa";
 import PhotoCarousel from "./PhotoCarousel";
+import { image } from "./Image";
 
 const CurrentPhoto = ({
   handleViewChange,
   currentPhoto,
   photos,
   handlePhotoChange,
+  currentStyle,
 }) => {
   const [currentPhotoIndex, setIndex] = useState(0);
 
+  useEffect(() => {
+    setIndex(0);
+  }, [currentStyle.style_id]);
+
   return (
     <div className="current-photo-container">
       <div id="current-photo">
         <img alt="photo_of_the_chosen_product" src={currentPhoto} />
       </div>
-      <PhotoCarousel photos={photos} handlePhotoChange={handlePhotoChange} />
-      <span id="left-arrow">
-        <FaArrowLeft
-          onClick={() => {
-            handlePhotoChange(photos[currentPhotoIndex - 1].url);
-            setIndex(currentPhotoIndex - 1);
-          }}
-        />
-      </span>
-      <span id="right-arrow">
-        <FaArrowRight
-          onClick={() => {
-            handlePhotoChange(photos[currentPhotoIndex + 1].url);
-            setIndex(currentPhotoIndex + 1);
-          }}
-        />
-      </span>
-      <span id="expand">
-        <FaExpand onClick={() => handleViewChange("expanded")} />
-      </span>
+      <PhotoCarousel
+        photos={photos}
+        handlePhotoChange={handlePhotoChange}
+        currentPhoto={currentPhoto}
+        currentPhotoIndex={currentPhotoIndex}
+      />
+      {currentPhotoIndex > 0 ? (
+        <span id="left-arrow">
+          <FaArrowLeft
+            onClick={() => {
+              handlePhotoChange(photos[currentPhotoIndex - 1].url);
+              setIndex(currentPhotoIndex - 1);
+            }}
+          />
+        </span>
+      ) : null}
+      {currentPhotoIndex === photos.length - 1 ? null : (
+        <span id="right-arrow">
+          <FaArrowRight
+            onClick={() => {
+              handlePhotoChange(photos[currentPhotoIndex + 1].url);
+              setIndex(currentPhotoIndex + 1);
+            }}
+          />
+        </span>
+      )}
+      {currentPhoto === image ? null : (
+        <span id="expand">
+          <FaExpand onClick={() => handleViewChange("expanded")} />
+        </span>
+      )}
     </div>
   );
 };

diff --git a/src/components/Description.js b/src/components/Description.js
@@ -15,17 +15,13 @@ const Description = ({ productInfo, features }) => {
       </div>
       <div className="features-box">
         <div id="features">
-          {features ? (
-            features.map((feature, i) => (
-              <div key={i}>
-                <GrCheckmark /> {feature.feature}: {feature.value}
-              </div>
-            ))
-          ) : (
-            <div>
-              <GrCheckmark /> No features
-            </div>
-          )}
+          {features
+            ? features.map((feature, i) => (
+                <div key={i}>
+                  <GrCheckmark /> {feature.feature}: {feature.value}
+                </div>
+              ))
+            : null}
         </div>
       </div>
     </div>

diff --git a/src/components/ExampleStars.js b/src/components/ExampleStars.js
diff --git a/src/components/ExpandedPhoto.js b/src/components/ExpandedPhoto.js
@@ -17,23 +17,32 @@ const ExpandedPhoto = ({
       <div id="current-photo2">
         <img alt="enlarged_photo_of_the_chosen_product" src={currentPhoto} />
       </div>
-      <PhotoCarousel photos={photos} handlePhotoChange={handlePhotoChange} />
-      <span id="left-arrow">
-        <FaArrowLeft
-          onClick={() => {
-            handlePhotoChange(photos[currentPhotoIndex - 1].url);
-            setIndex(currentPhotoIndex - 1);
-          }}
-        />
-      </span>
-      <span id="right-arrow">
-        <FaArrowRight
-          onClick={() => {
-            handlePhotoChange(photos[currentPhotoIndex + 1].url);
-            setIndex(currentPhotoIndex + 1);
-          }}
-        />
-      </span>
+      <PhotoCarousel
+        photos={photos}
+        handlePhotoChange={handlePhotoChange}
+        currentPhoto={currentPhoto}
+        currentPhotoIndex={currentPhotoIndex}
+      />
+      {currentPhotoIndex > 0 ? (
+        <span id="left-arrow">
+          <FaArrowLeft
+            onClick={() => {
+              handlePhotoChange(photos[currentPhotoIndex - 1].url);
+              setIndex(currentPhotoIndex - 1);
+            }}
+          />
+        </span>
+      ) : null}
+      {currentPhotoIndex === photos.length - 1 ? null : (
+        <span id="right-arrow">
+          <FaArrowRight
+            onClick={() => {
+              handlePhotoChange(photos[currentPhotoIndex + 1].url);
+              setIndex(currentPhotoIndex + 1);
+            }}
+          />
+        </span>
+      )}
       <span id="fold">
         <GrFormClose onClick={() => handleViewChange("main")} />
       </span>

diff --git a/src/Image.js → src/components/Image.js b/src/Image.js → src/components/Image.js
diff --git a/src/components/App.js → src/components/Overview.js b/src/components/App.js → src/components/Overview.js
@@ -4,20 +4,16 @@ import CurrentPhoto from "./CurrentPhoto";
 import ExpandedPhoto from "./ExpandedPhoto";
 import ProductInformation from "./ProductInformation";
 import Description from "./Description";
-//import getCurrentProductInfo from "../apiHelpers/getCurrentProductInfo";
-//import getStyles from "../apiHelpers/getStyles";
 import axios from "axios";
-//TODO remove example data
-import exampleData from "../data";
-import { image } from "../Image";
+import { image } from "./Image";
 
-class App extends React.Component {
+class Overview extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       view: "main",
-      productInfo: {}, //exampleData.info,
-      styles: [], //exampleData.styles.results,
+      productInfo: {},
+      styles: [],
       currentStyle: {},
       currentPhoto: "",
       photos: [],
@@ -42,7 +38,7 @@ class App extends React.Component {
       .then(({ data }) => {
         this.setState({ productInfo: data });
       })
-      .catch((err) => console.error(err));
+      .catch((err) => console.error("cannot get product info: ", err));
   }
 
   getStyles(ip, id) {
@@ -59,7 +55,7 @@ class App extends React.Component {
         });
       })
       .then(() => this.transformPhotoData())
-      .catch((err) => console.error("cannot get styles", err));
+      .catch((err) => console.error("cannot get styles: ", err));
   }
 
   handleViewChange(type) {
@@ -87,6 +83,9 @@ class App extends React.Component {
       ) {
         style.photos[0].thumbnail_url = image;
       }
+      if (style.photos[0].url === null || style.photos[0].url === undefined) {
+        style.photos[0].url = image;
+      }
     });
   }
 
@@ -113,6 +112,7 @@ class App extends React.Component {
             {this.state.view === "main" ? (
               <>
                 <CurrentPhoto
+                  currentStyle={this.state.currentStyle}
                   handleViewChange={this.handleViewChange}
                   handlePhotoChange={this.handlePhotoChange}
                   currentPhoto={this.state.currentPhoto}
@@ -129,6 +129,7 @@ class App extends React.Component {
               </>
             ) : (
               <ExpandedPhoto
+                currentStyle={this.state.currentStyle}
                 handleViewChange={this.handleViewChange}
                 handlePhotoChange={this.handlePhotoChange}
                 photos={this.state.photos}
@@ -146,4 +147,4 @@ class App extends React.Component {
   }
 }
 
-export default App;
+export default Overview;
diff --git a/src/components/PhotoCarousel.js b/src/components/PhotoCarousel.js
@@ -1,22 +1,30 @@
 import React, { useState } from "react";
 import "../styles.scss";
-//import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
-import { image } from "../Image";
+import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
+import { image } from "./Image";
 
-const PhotoCarousel = ({ photos, handlePhotoChange }) => {
+const PhotoCarousel = ({ photos, handlePhotoChange, currentPhoto }) => {
   const [photoIndex, setIndex] = useState(0);
 
+  if (currentPhoto === image) {
+    return null;
+  }
+
   if (photos.length)
     return (
       <div className="photo-carousel">
-        {/* <span id="">
-          <IoIosArrowUp onClick={() => setIndex(photoIndex - 1)} />
-        </span> */}
+        {photoIndex > 0 ? (
+          <span id="arrow-up">
+            <IoIosArrowUp onClick={() => setIndex(photoIndex - 1)} />
+          </span>
+        ) : null}
         <span
           alt="photo_of_the_product"
           id="photo-1"
           style={{
-            backgroundImage: `url(${photos[photoIndex].url})`,
+            backgroundImage: photos[photoIndex]
+              ? `url(${photos[photoIndex].url})`
+              : `url(${image})`,
           }}
           onClick={() => handlePhotoChange(photos[photoIndex].url)}
         />
@@ -60,30 +68,14 @@ const PhotoCarousel = ({ photos, handlePhotoChange }) => {
           }}
           onClick={() => handlePhotoChange(photos[photoIndex + 4].url)}
         />
-        {/* <span id="arrow-down">
-          <IoIosArrowDown onClick={() => setIndex(photoIndex + 1)} />
-        </span> */}
+        {photoIndex < photos.length - 5 ? (
+          <span id="arrow-down">
+            <IoIosArrowDown onClick={() => setIndex(photoIndex + 1)} />
+          </span>
+        ) : null}
       </div>
     );
   else return null;
 };
 
 export default PhotoCarousel;
-
-// {
-//   currentStyle.photos[0].url ? (
-//     <div
-//       id="photo-2"
-//       style={{
-//         backgroundImage: `url(${currentStyle.photos[0].url})`,
-//       }}
-//     ></div>
-//   ) : (
-//     <div
-//       id="photo-2"
-//       style={{
-//         backgroundImage: `url("https://i.imgur.com/9i4bKQ6.png")`,
-//       }}
-//     ></div>
-//   );
-// }