refactor(marketplace): cleanup item page render

src/components/helpers/carousel/Carousel.jsx

@@ -3,6 +3,8 @@ import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md'
 import useEmblaCarousel from 'embla-carousel-react';
 import Autoplay from 'embla-carousel-autoplay';
 
+import variables from 'modules/variables';
+
 import './carousel.scss';
 
 function EmblaCarousel({ data }) {
@@ -53,26 +55,33 @@ function EmblaCarousel({ data }) {
           {data.map((photo, index) => (
             <div className="carousel_slide" key={index}>
               <div className="carousel_slide_inner">
-                <img src={photo.url.default} alt="Marketplace example screenshot" />
+                <img
+                  src={variables.constants.DDG_IMAGE_PROXY + photo.url.default}
+                  alt="Marketplace example screenshot"
+                />
               </div>
             </div>
           ))}
         </div>
       </div>
-      <button
+      {data.length > 1 && (
-        className="carousel_button prev"
+        <>
-        onClick={() => scroll('prev')}
+          <button
-        disabled={!prevBtnEnabled}
+            className="carousel_button prev"
-      >
+            onClick={() => scroll('prev')}
-        <MdOutlineArrowBackIos />
+            disabled={!prevBtnEnabled}
-      </button>
+          >
-      <button
+            <MdOutlineArrowBackIos />
-        className="carousel_button next"
+          </button>
-        onClick={() => scroll('next')}
+          <button
-        disabled={!nextBtnEnabled}
+            className="carousel_button next"
-      >
+            onClick={() => scroll('next')}
-        <MdOutlineArrowForwardIos />
+            disabled={!nextBtnEnabled}
-      </button>
+          >
+            <MdOutlineArrowForwardIos />
+          </button>
+        </>
+      )}
     </div>
   );
 }

src/components/modals/main/marketplace/Item.jsx

@@ -11,7 +11,6 @@ import {
   MdFormatQuote,
   MdImage,
   MdTranslate,
-  MdOutlineKeyboardArrowRight,
   MdExpandMore,
   MdExpandLess,
   MdStyle,
@@ -47,24 +46,21 @@ class Item extends PureComponent {
   }
 
   incrementCount(type) {
-    if (this.state.count !== this.props.data.data[type].length) {
+    const newCount =
-      this.setState({ count: this.props.data.data[type].length });
+      this.state.count !== this.props.data.data[type].length
-    } else {
+        ? this.props.data.data[type].length
-      this.setState({ count: 5 });
+        : 5;
-    }
+
+    this.setState({ count: newCount });
   }
 
   getName(name) {
-    switch (name) {
+    const nameMappings = {
-      case 'photos':
+      photos: 'photo_packs',
-        return 'photo_packs';
+      quotes: 'quote_packs',
-      case 'quotes':
+      settings: 'preset_settings',
-        return 'quote_packs';
+    };
-      case 'settings':
+    return nameMappings[name] || name;
-        return 'preset_settings';
-      default:
-        return name;
-    }
   }
 
   render() {
@@ -89,6 +85,16 @@ class Item extends PureComponent {
       );
     }
 
+    const moreInfoItem = (icon, header, text) => (
+      <div className="infoItem">
+        {icon}
+        <div className="text">
+          <span className="header">{header}</span>
+          <span>{text}</span>
+        </div>
+      </div>
+    );
+
     return (
       <div id="item">
         <Modal
@@ -204,78 +210,48 @@ class Item extends PureComponent {
               <p dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
             </div>
             <div className="moreInfo">
-              <div className="infoItem">
+              {moreInfoItem(
-                <MdBugReport />
+                <MdBugReport />,
-                <div className="text">
+                variables.getMessage('modals.main.marketplace.product.version'),
-                  <span className="header">
+                updateButton ? (
-                    {variables.getMessage('modals.main.marketplace.product.version')}
-                  </span>
-                  {updateButton ? (
-                    <span>
-                      {this.props.data.version} (Installed: {this.props.data.addonInstalledVersion})
-                    </span>
-                  ) : (
-                    <span>{this.props.data.version}</span>
-                  )}
-                </div>
-              </div>
-              <div className="infoItem">
-                <MdAccountCircle />
-                <div className="text">
-                  <span className="header">
-                    {variables.getMessage('modals.main.marketplace.product.author')}
-                  </span>
-                  <span>{this.props.data.author}</span>
-                </div>
-              </div>
-              {this.props.data.data.quotes && (
-                <div className="infoItem">
-                  <MdFormatQuote />
-                  <div className="text">
-                    <span className="header">
-                      {variables.getMessage('modals.main.marketplace.product.no_quotes')}
-                    </span>
-                    <span>{this.props.data.data.quotes.length}</span>
-                  </div>
-                </div>
-              )}
-              {this.props.data.data.photos && (
-                <div className="infoItem">
-                  <MdImage />
-                  <div className="text">
-                    <span className="header">
-                      {variables.getMessage('modals.main.marketplace.product.no_images')}
-                    </span>
-                    <span>{this.props.data.data.photos.length}</span>
-                  </div>
-                </div>
-              )}
-              {this.props.data.data.quotes && this.props.data.data.language !== '' ? (
-                <div className="infoItem">
-                  <MdTranslate />
-                  <div className="text">
-                    <span className="header">
-                      {variables.getMessage('modals.main.settings.sections.language.title')}
-                    </span>
-                    <span>{this.props.data.data.language}</span>
-                  </div>
-                </div>
-              ) : null}
-              <div className="infoItem">
-                <MdStyle />
-                <div className="text">
-                  <span className="header">
-                    {' '}
-                    {variables.getMessage('modals.main.settings.sections.background.type.title')}
-                  </span>
                   <span>
-                    {' '}
+                    {this.props.data.version} (Installed: {this.props.data.addonInstalledVersion})
-                    {variables.getMessage(
-                      'modals.main.marketplace.' + this.getName(this.props.data.data.type),
-                    ) || 'marketplace'}
                   </span>
-                </div>
+                ) : (
-              </div>
+                  <span>{this.props.data.version}</span>
+                ),
+              )}
+              {moreInfoItem(
+                <MdAccountCircle />,
+                variables.getMessage('modals.main.marketplace.product.author'),
+                this.props.data.author,
+              )}
+              {this.props.data.data.quotes &&
+                moreInfoItem(
+                  <MdFormatQuote />,
+                  variables.getMessage('modals.main.marketplace.product.no_quotes'),
+                  this.props.data.data.quotes.length,
+                )}
+              {this.props.data.data.photos &&
+                moreInfoItem(
+                  <MdImage />,
+                  variables.getMessage('modals.main.marketplace.product.no_images'),
+                  this.props.data.data.photos.length,
+                )}
+              {this.props.data.data.quotes && this.props.data.data.language !== ''
+                ? moreInfoItem(
+                    <MdTranslate />,
+                    variables.getMessage('modals.main.settings.sections.language.title'),
+                    this.props.data.data.language,
+                  )
+                : null}
+              {moreInfoItem(
+                <MdStyle />,
+                variables.getMessage('modals.main.settings.sections.background.type.title'),
+                variables.getMessage(
+                  'modals.main.marketplace.' + this.getName(this.props.data.data.type),
+                ) || 'marketplace',
+              )}
             </div>
           </div>
           <div

src/components/modals/main/marketplace/sections/Added.jsx

@@ -60,7 +60,7 @@ export default class Added extends PureComponent {
       failedReason = variables.getMessage('modals.main.addons.sideload.errors.invalid_quotes');
     }
 
-    if (failedReason !== '') {
+    if (failedReason !== '' && this.state.showFailed === false) {
       return this.setState({
         failedReason,
         showFailed: true,