add no image holder

annthespy · Nov 9, 2020 · 3cbf6da · 3cbf6da
1 parent 51bab7f
commit 3cbf6da
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 84 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,6 @@ ehthumbs.db
 Thumbs.db
 
 # Dist folder
-dist
+bundle.js
 lib
 static
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Overview Demo</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/src/Image.js b/src/Image.js
@@ -0,0 +1,4 @@
+module.exports = {
+  image:
+    "https://media.istockphoto.com/vectors/photo-coming-soon-image-icon-vector-illustration-isolated-on-white-vector-id1193046540?k=6&m=1193046540&s=170667a&w=0&h=f4NW7AdMrru1TBTUx1NwU6KgEfbf_mT9G4E_ceSMvwg=",
+};
diff --git a/src/components/App.js b/src/components/App.js
@@ -9,6 +9,7 @@ import Description from "./Description";
 import axios from "axios";
 //TODO remove example data
 import exampleData from "../data";
+import { image } from "../Image";
 
 class App extends React.Component {
   constructor(props) {
@@ -19,13 +20,15 @@ class App extends React.Component {
       styles: [], //exampleData.styles.results,
       currentStyle: {},
       currentPhoto: "",
+      photos: [],
     };
 
     this.handleViewChange = this.handleViewChange.bind(this);
     this.handleStyleChange = this.handleStyleChange.bind(this);
     this.handlePhotoChange = this.handlePhotoChange.bind(this);
     this.getCurrentProductInfo = this.getCurrentProductInfo.bind(this);
     this.getStyles = this.getStyles.bind(this);
+    this.transformPhotoData = this.transformPhotoData.bind(this);
   }
 
   componentDidMount() {
@@ -51,24 +54,42 @@ class App extends React.Component {
           currentStyle: data.results[0],
           currentPhoto: data.results[0].photos[0].url
             ? data.results[0].photos[0].url
-            : "../../dist/no-image.jpg",
+            : image,
+          photos: data.results[0].photos,
         });
       })
-      .catch((err) => console.error(err));
+      .then(() => this.transformPhotoData())
+      .catch((err) => console.error("cannot get styles", err));
   }
 
   handleViewChange(type) {
     this.setState({ view: type });
   }
 
   handleStyleChange(style) {
-    this.setState({ currentStyle: style });
+    this.setState({ currentStyle: style, photos: style.photos });
   }
 
   handlePhotoChange(url) {
     this.setState({ currentPhoto: url });
   }
 
+  transformPhotoData() {
+    this.state.photos.map((photo) => {
+      if (photo.url === null || photo.url === undefined) {
+        photo.url = image;
+      }
+    });
+    this.state.styles.map((style) => {
+      if (
+        style.photos[0].thumbnail_url === null ||
+        style.photos[0].thumbnail_url === undefined
+      ) {
+        style.photos[0].thumbnail_url = image;
+      }
+    });
+  }
+
   render() {
     if (!this.props.apiIP || !this.props.productId)
       return (
@@ -80,34 +101,45 @@ class App extends React.Component {
       );
     else {
       return (
-        <div className="overview-component">
-          {this.state.view === "main" ? (
-            <>
-              <CurrentPhoto
+        <div>
+          <header>
+            <p className="announcement">
+              <em>SITE-WIDE ANNOUNCEMENT MESSAGE!</em> &mdash; SALE / DISCOUNT{" "}
+              <strong>OFFER</strong>
+              &mdash; <a href="">NEW PRODUCT HIGHLIGHT</a>{" "}
+            </p>
+          </header>
+          <div className="overview-component">
+            {this.state.view === "main" ? (
+              <>
+                <CurrentPhoto
+                  handleViewChange={this.handleViewChange}
+                  handlePhotoChange={this.handlePhotoChange}
+                  currentPhoto={this.state.currentPhoto}
+                  photos={this.state.photos}
+                />
+                <ProductInformation
+                  handlePhotoChange={this.handlePhotoChange}
+                  handleStyleChange={this.handleStyleChange}
+                  productInfo={this.state.productInfo}
+                  styles={this.state.styles}
+                  currentStyle={this.state.currentStyle}
+                  stars={this.props.stars}
+                />
+              </>
+            ) : (
+              <ExpandedPhoto
                 handleViewChange={this.handleViewChange}
-                currentStyle={this.state.currentStyle}
-                currentPhoto={this.state.currentPhoto}
-              />
-              <ProductInformation
                 handlePhotoChange={this.handlePhotoChange}
-                handleStyleChange={this.handleStyleChange}
-                productInfo={this.state.productInfo}
-                styles={this.state.styles}
-                currentStyle={this.state.currentStyle}
-                stars={this.props.stars}
+                photos={this.state.photos}
+                currentPhoto={this.state.currentPhoto}
               />
-            </>
-          ) : (
-            <ExpandedPhoto
-              handleViewChange={this.handleViewChange}
-              currentStyle={this.state.currentStyle}
-              currentPhoto={this.state.currentPhoto}
+            )}
+            <Description
+              productInfo={this.state.productInfo}
+              features={this.state.productInfo.features}
             />
-          )}
-          <Description
-            productInfo={this.state.productInfo}
-            features={this.state.productInfo.features}
-          />
+          </div>
         </div>
       );
     }

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

diff --git a/src/components/ExpandedPhoto.js b/src/components/ExpandedPhoto.js
@@ -1,21 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
 import "../styles.scss";
 import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 import { GrFormClose } from "react-icons/gr";
 import PhotoCarousel from "./PhotoCarousel";
 
-const ExpandedPhoto = ({ handleViewChange, currentStyle, currentPhoto }) => {
+const ExpandedPhoto = ({
+  handleViewChange,
+  photos,
+  currentPhoto,
+  handlePhotoChange,
+}) => {
+  const [currentPhotoIndex, setIndex] = useState(0);
+
   return (
     <div className="expanded-photo-container">
       <div id="current-photo2">
         <img alt="enlarged_photo_of_the_chosen_product" src={currentPhoto} />
       </div>
-      <PhotoCarousel currentStyle={currentStyle} />
+      <PhotoCarousel photos={photos} handlePhotoChange={handlePhotoChange} />
       <span id="left-arrow">
-        <FaArrowLeft />
+        <FaArrowLeft
+          onClick={() => {
+            handlePhotoChange(photos[currentPhotoIndex - 1].url);
+            setIndex(currentPhotoIndex - 1);
+          }}
+        />
       </span>
       <span id="right-arrow">
-        <FaArrowRight />
+        <FaArrowRight
+          onClick={() => {
+            handlePhotoChange(photos[currentPhotoIndex + 1].url);
+            setIndex(currentPhotoIndex + 1);
+          }}
+        />
       </span>
       <span id="fold">
         <GrFormClose onClick={() => handleViewChange("main")} />

diff --git a/src/components/PhotoCarousel.js b/src/components/PhotoCarousel.js
@@ -1,50 +1,71 @@
-import React from "react";
+import React, { useState } from "react";
 import "../styles.scss";
-import { IoIosArrowDown } from "react-icons/io";
+//import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
+import { image } from "../Image";
 
-const PhotoCarousel = ({ currentStyle }) => {
-  return (
-    <div className="photo-carousel">
-      {/* <span
-        alt="photo_of_the_product"
-        id="photo-1"
-        style={{
-          backgroundImage: `url(${currentStyle.photos[0].url})`,
-        }}
-      />
-      <span
-        alt="photo_of_the_product"
-        id="photo-2"
-        style={{
-          backgroundImage: `url(${currentStyle.photos[1].url})`,
-        }}
-      />
-      <span
-        alt="photo_of_the_product"
-        id="photo-3"
-        style={{
-          backgroundImage: `url(${currentStyle.photos[2].url})`,
-        }}
-      />
-      <span
-        alt="photo_of_the_product"
-        id="photo-4"
-        style={{
-          backgroundImage: `url(${currentStyle.photos[3].url})`,
-        }}
-      />
-      <span
-        alt="photo_of_the_product"
-        id="photo-5"
-        style={{
-          backgroundImage: `url(${currentStyle.photos[4].url})`,
-        }}
-      />
-      <span id="arrow-down">
-        <IoIosArrowDown />
-      </span> */}
-    </div>
-  );
+const PhotoCarousel = ({ photos, handlePhotoChange }) => {
+  const [photoIndex, setIndex] = useState(0);
+
+  if (photos.length)
+    return (
+      <div className="photo-carousel">
+        {/* <span id="">
+          <IoIosArrowUp onClick={() => setIndex(photoIndex - 1)} />
+        </span> */}
+        <span
+          alt="photo_of_the_product"
+          id="photo-1"
+          style={{
+            backgroundImage: `url(${photos[photoIndex].url})`,
+          }}
+          onClick={() => handlePhotoChange(photos[photoIndex].url)}
+        />
+        <span
+          alt="photo_of_the_product"
+          id="photo-2"
+          style={{
+            backgroundImage: photos[photoIndex + 1]
+              ? `url(${photos[photoIndex + 1].url})`
+              : `url(${image})`,
+          }}
+          onClick={() => handlePhotoChange(photos[photoIndex + 1].url)}
+        />
+        <span
+          alt="photo_of_the_product"
+          id="photo-3"
+          style={{
+            backgroundImage: photos[photoIndex + 2]
+              ? `url(${photos[photoIndex + 2].url})`
+              : `url(${image})`,
+          }}
+          onClick={() => handlePhotoChange(photos[photoIndex + 2].url)}
+        />
+        <span
+          alt="photo_of_the_product"
+          id="photo-4"
+          style={{
+            backgroundImage: photos[photoIndex + 3]
+              ? `url(${photos[photoIndex + 3].url})`
+              : `url(${image})`,
+          }}
+          onClick={() => handlePhotoChange(photos[photoIndex + 3].url)}
+        />
+        <span
+          alt="photo_of_the_product"
+          id="photo-5"
+          style={{
+            backgroundImage: photos[photoIndex + 4]
+              ? `url(${photos[photoIndex + 4].url})`
+              : `url(${image})`,
+          }}
+          onClick={() => handlePhotoChange(photos[photoIndex + 4].url)}
+        />
+        {/* <span id="arrow-down">
+          <IoIosArrowDown onClick={() => setIndex(photoIndex + 1)} />
+        </span> */}
+      </div>
+    );
+  else return null;
 };
 
 export default PhotoCarousel;

diff --git a/src/index.js b/src/index.js
@@ -5,4 +5,4 @@ import "./styles.scss";
 import Stars from "./components/ExampleStars";
 
 const mountNode = document.getElementById("app");
-ReactDOM.render(<App apiIP={"http://3.21.164.220"} productId={1} />, mountNode);
+ReactDOM.render(<App apiIP={"http://3.21.164.220"} productId={2} />, mountNode);
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,4 +1,22 @@
 $primary-color: #333;
+.announcement {
+  text-align: center;
+  color: #333;
+  font-size: 14px;
+  font-family: "adobe-clean", sans-serif;
+}
+
+a:visited {
+  color: black;
+}
+html,
+body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  scroll-behavior: smooth;
+}
 
 .no-props {
   font-family: "adobe-clean", sans-serif;