Create recommendations (#7)

* Create recommendations

* add recommendations

* fix modal styles

* add responsive styles

* Minor visual tweaks.

* Change inset, don't show at small resolutions.

* Disable carousel scrolling.

Co-authored-by: Jesse Warren <jessewarren@Jesses-MacBook-Pro.local>
Co-authored-by: Steve Blaurock <sblaurock@gmail.com>

Author: 3 people

package-lock.json

@@ -17,6 +17,8 @@
     "downshift": "^6.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
+    "react-multi-carousel": "^2.8.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1"
   },

package.json

@@ -14,7 +14,7 @@ function Browse() {
   const location = useLocation();
   const browseGroup = location.state;
 
-  const [loadStatus, setLoadStatus] = useState(loadStatuses.SUCCESS);
+  const [loadStatus, setLoadStatus] = useState(loadStatuses.STALE);
   const [items, setItems] = useState([]);
   const [totalResults, setTotalResults] = useState(0);
   const [error, setError] = useState();

src/components/Browse/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-function ProductCard({ product }) {
+function ProductCard({ product, onProductClick }) {
   const imageTagClassesLoading = 'w-[225px] md:w-[300px] transition-opacity opacity-0 ml-auto mr-auto';
   const imageTagClassesLoaded = 'w-[225px] md:w-[300px] transition-opacity opacity-100 ml-auto mr-auto';
 
@@ -10,6 +10,10 @@ function ProductCard({ product }) {
       data-cnstrc-item-id={ product.data.id }
       data-cnstrc-item-name={ product.value }
       data-cnstrc-item-variation-id={ product.data?.variation_id }
+      onClick={ () => onProductClick(product) }
+      onKeyDown={ (e) => e.key === 'Enter' && onProductClick(product) }
+      role="button"
+      tabIndex={ 0 }
     >
       <div className="mb-1 h-[225px]">
         <img
@@ -22,6 +26,7 @@ function ProductCard({ product }) {
       </div>
       {product.value}
     </div>
+
   );
 }
 

src/components/ProductCard.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+function RecommendationCard({ product }) {
+  const imageTagClassesLoading = 'h-[100px] md:h-[150px] transition-opacity opacity-0 ml-auto mr-auto';
+  const imageTagClassesLoaded = 'h-[100px] md:h-[150px] transition-opacity opacity-100 ml-auto mr-auto';
+
+  return (
+    <div
+      role="button"
+      tabIndex={ 0 }
+      className="recommendation text-center flex flex-col items-center"
+      data-cnstrc-item="Recommendation"
+      data-cnstrc-item-id={ product.data.id }
+      data-cnstrc-item-name={ product.value }
+      data-cnstrc-item-variation-id={ product.data?.variation_id }
+      data-cnstrc-strategy-id={ product.strategy?.id }
+    >
+      <div className="mb-3">
+        <img
+          className={ imageTagClassesLoading }
+          src={ product.data.image_url }
+          alt={ product.value }
+          onError={ (event) => { event.target.style.display = 'none'; } }
+          onLoad={ (event) => { event.target.className = imageTagClassesLoaded; } }
+        />
+      </div>
+      <div className="w-2/3 text-center">
+        {product.value}
+      </div>
+    </div>
+  );
+}
+
+export default RecommendationCard;

src/components/Recommendations/RecommendationCard.jsx

@@ -0,0 +1,67 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import Carousel from 'react-multi-carousel';
+import RecommendationCard from './RecommendationCard';
+import 'react-multi-carousel/lib/styles.css';
+
+const responsive = {
+  desktop: {
+    breakpoint: {
+      max: 3000,
+      min: 1024,
+    },
+    items: 4,
+    partialVisibilityGutter: 40,
+  },
+  tablet: {
+    breakpoint: {
+      max: 1024,
+      min: 768,
+    },
+    items: 3,
+    partialVisibilityGutter: 30,
+  },
+  mobile: {
+    breakpoint: {
+      max: 768,
+      min: 500,
+    },
+    items: 2,
+    partialVisibilityGutter: 30,
+  },
+};
+
+function RecommendationsResults(props) {
+  const {
+    items,
+    dataAttributes,
+  } = props;
+  return (
+    <div
+      id="recommendations"
+      className="recommendations-carousel"
+      data-cnstrc-recommendations
+      data-cnstrc-recommendations-pod-id={ dataAttributes.dataCnstrcPodId }
+      data-cnstrc-num-results={ dataAttributes.dataCnstrcNumResults }
+      data-cnstrc-result-id={ dataAttributes.dataCnstrcResultId }
+    >
+      <Carousel
+        responsive={ responsive }
+        additionalTransfrom={ 0 }
+        containerClass="container"
+        itemClass=""
+        sliderClass=""
+        slidesToSlide={ 0 }
+        centerMode
+        removeArrowOnDeviceType={ ['tablet', 'mobile', 'desktop'] }
+        draggable={ false }
+        { ...dataAttributes }
+      >
+        { items.map((item) => <RecommendationCard key={ item.data.id } product={ item } />) }
+      </Carousel>
+    </div>
+
+  );
+}
+
+export default RecommendationsResults;

src/components/Recommendations/RecommendationsResults.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { fetchRecommendations } from '../../utils';
+import { loadStatuses } from '../../utils/constants';
+import RecommendationsResults from './RecommendationsResults';
+
+function Recommendations() {
+  const [loaded, setLoaded] = useState(loadStatuses.STALE);
+  const [recommendations, setRecommendations] = useState([]);
+  const [podData, setPodData] = useState();
+  const [resultId, setResultId] = useState();
+  const [numResults, setNumResults] = useState();
+
+  useEffect(() => {
+    const fetchRecommendationsFromAPI = async () => {
+      setLoaded(loadStatuses.LOADING);
+      try {
+        const response = await fetchRecommendations('item_detail');
+
+        setRecommendations(response?.response?.results);
+        setNumResults(response?.response?.total_num_results);
+        setResultId(response?.result_id);
+        setPodData({
+          podName: response?.response?.pod?.display_name,
+          poId: response?.response?.pod?.id,
+        });
+        setLoaded(loadStatuses.SUCCESS);
+      } catch (e) {
+        setLoaded(loadStatuses.FAILED);
+      }
+    };
+    fetchRecommendationsFromAPI();
+  }, []);
+
+  return (
+    <div className="m-10 border-t-2 border-gray-200">
+      <div className="text-lg mb-5 text-center mt-10 italic">{podData?.podName}</div>
+      { loaded === loadStatuses.SUCCESS && (
+        <RecommendationsResults
+          items={ recommendations }
+          dataAttributes={ {
+            dataCnstrcPodId: podData?.poId,
+            dataCnstrcNumResults: numResults,
+            dataCnstrcResultId: resultId,
+          } }
+        />
+      )}
+    </div>
+  );
+}
+
+export default Recommendations;