feat: marketplace item page experimentation

src/components/modals/main/Main.jsx

@@ -17,7 +17,7 @@ const getMessage = (text) => variables.language.getMessage(variables.languagecod
 
 const renderLoader = (current) => (
   <Tabs current={current}>
-    <div label="cheese">
+    <div label={getMessage('modals.main.loading')}>
       <div className="emptyItems">
         <div className="emptyMessage">
           <div className="loaderHolder">
@@ -32,7 +32,7 @@ const renderLoader = (current) => (
 );
 
 export default function MainModal({ modalClose }) {
-  const display = localStorage.getItem('showReminder') === 'true' ? 'block' : 'none';
+  const display = localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none';
   const [currentTab, setCurrentTab] = useState(0);
 
   const changeTab = (type) => {

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

@@ -15,7 +15,9 @@ import {
   MdKeyboardArrowDown,
   MdKeyboardArrowUp,
   MdOutlineKeyboardArrowRight,
+  MdExpandMore,
 } from 'react-icons/md';
+import ImageCarousel from './imageCarousel';
 import Modal from 'react-modal';
 
 import { install, uninstall } from 'modules/helpers/marketplace';
@@ -32,6 +34,7 @@ export default class Item extends PureComponent {
         this.props.addonInstalledVersion !== this.props.data.version,
       showMore: false,
       shareModal: false,
+      count: 5,
     };
   }
 
@@ -52,6 +55,10 @@ export default class Item extends PureComponent {
     }
   }
 
+  incrementCount() {
+    this.setState({ count: this.props.data.data.quotes.length });
+  }
+
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
@@ -116,12 +123,42 @@ export default class Item extends PureComponent {
         </div>
         <div className="itemPage">
           <div className="itemShowcase">
-            <img
-              alt="product"
-              draggable="false"
-              src={iconsrc}
-              onClick={() => this.setState({ showLightbox: true })}
-            />
+            {this.props.data.data.photos ? (
+              <div className="embla">
+                <div className="embla__container">
+                  <ImageCarousel data={this.props.data.data.photos} />
+                </div>
+              </div>
+            ) : null}
+            {this.props.data.data.quotes ? (
+              <>
+                <table>
+                  <tr>
+                    <th>Quote</th>
+                    <th>Author</th>
+                  </tr>
+                  {this.props.data.data.quotes.slice(0, this.state.count).map((quote, index) => (
+                    <tr key={index}>
+                      <td>{quote.quote}</td>
+                      <td>{quote.author}</td>
+                    </tr>
+                  ))}
+                </table>
+                <div className="showMoreItems">
+                  <span className="link" onClick={() => this.incrementCount()}>
+                    <MdExpandMore /> Show All
+                  </span>
+                </div>
+              </>
+            ) : null}
+         {this.props.data.data.settings ? (
+                        <img
+                        alt="product"
+                        draggable="false"
+                        src={iconsrc}
+                        onClick={() => this.setState({ showLightbox: true })}
+                      />
+         ) : null}
             <span className="title">
               {getMessage('modals.main.marketplace.product.description')}
             </span>
@@ -159,7 +196,7 @@ export default class Item extends PureComponent {
                     <span>{this.props.data.version}</span>
                   )}
                 </div>
-              </div>        
+              </div>
               <div className="infoItem">
                 <MdAccountCircle />
                 <div className="text">
@@ -208,24 +245,8 @@ export default class Item extends PureComponent {
                   <span className="header">{getMessage('modals.main.marketplace.product.shares')}</span>
                   <span>324</span>
                 </div>
-              </div>*/}           
+              </div>*/}
             </div>
-            {this.props.data.data.quotes ? (
-              <>
-                <table>
-                  <tr>
-                    <th>Quote</th>
-                    <th>Author</th>
-                  </tr>
-                  {this.props.data.data.quotes.map((quote, index) => (
-                    <tr key={index}>
-                      <td>{quote.quote}</td>
-                      <td>{quote.author}</td>
-                    </tr>
-                  ))}
-                </table>
-              </>
-            ) : null}
           </div>
           <div className="itemInfo">
             <img

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

@@ -1,5 +1,6 @@
 import variables from 'modules/variables';
-import { MdAutoFixHigh, MdOutlineArrowForward } from 'react-icons/md';
+import React, { useState } from "react";
+import { MdAutoFixHigh, MdOutlineArrowForward, MdExpandMore } from 'react-icons/md';
 
 export default function Items({
   type,
@@ -10,7 +11,17 @@ export default function Items({
   onCollection,
 }) {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
-
+  const [count, setCount] = useState(8);
+  const incrementCount = () => {
+    if (count !== items.length && count <= items.length) {
+      if ((count + 8)  > items.length) {
+        setCount(count + (items.length - count));
+      }
+      else {
+        setCount(count + 8);
+      }
+    }
+  };
 
   return (
     <>
@@ -36,7 +47,7 @@ export default function Items({
         </>
       ) : null}
       <div className="items">
-        {items.slice(0, 99).map((item) => (
+        {items.slice(0, count).map((item) => (
           <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
             <img
               alt="icon"
@@ -50,6 +61,10 @@ export default function Items({
           </div>
         ))}
       </div>
+      <div className='showMoreItems'>
+        <span className='link' onClick={incrementCount}><MdExpandMore /> Show More</span>
+        <span className='subtitle'>Showing {count} / {items.length}</span>
+      </div>
       <div className="loader"></div>
       {type === 'all' && !onCollection ? (
         <div className="createYourOwn">

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

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import Autoplay from 'embla-carousel-autoplay';
+
+export default function EmbaleCarousel({ data }) {
+  const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]);
+
+  return (
+    <div className="embla" ref={emblaRef}>
+      <div className="embla__container">
+        {data.map((photo, index) => (
+          <div className="embla__slide" key={index}>
+            <img src={photo.url.default} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -228,9 +228,14 @@ export default class Marketplace extends PureComponent {
   render() {
     const errorMessage = (msg) => {
       return (
-        <div className="emptyItems">
-          <div className="emptyMessage">{msg}</div>
-        </div>
+        <>
+          <div className="flexTopMarketplace">
+            <span className="mainTitle">{this.getMessage('modals.main.navbar.marketplace')}</span>
+          </div>
+          <div className="emptyItems">
+            <div className="emptyMessage">{msg}</div>
+          </div>
+        </>
       );
     };
 
@@ -248,10 +253,12 @@ export default class Marketplace extends PureComponent {
 
     if (this.state.done === false) {
       return errorMessage(
-        <div className="loaderHolder">
-          <div id="loader"></div>
-          <span className="subtitle">{this.getMessage('modals.main.loading')}</span>
-        </div>,
+        <>
+          <div className="loaderHolder">
+            <div id="loader"></div>
+            <span className="subtitle">{this.getMessage('modals.main.loading')}</span>
+          </div>
+        </>,
       );
     }
 
@@ -312,14 +319,14 @@ export default class Marketplace extends PureComponent {
                 <MdOutlineKeyboardArrowRight /> Collection
               </span>
             </div>
-            <div className='collectionPage'>
+            <div className="collectionPage">
               <div className="content">
                 <span className="mainTitle">Red Dead Redemption</span>
-                <span className="subtitle">A Collection of stuff inspired by the video game series Red Dead.</span>
-              </div>
-              <div className='nice-tag'>
-                Collection
+                <span className="subtitle">
+                  A Collection of stuff inspired by the video game series Red Dead.
+                </span>
               </div>
+              <div className="nice-tag">Collection</div>
             </div>
           </>
         ) : (

src/components/modals/main/scss/marketplace/_main.scss

@@ -10,6 +10,7 @@
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 1rem;
   margin-top: 15px;
+  margin-bottom: 30px;
 
   .item {
     position: relative;
@@ -476,3 +477,21 @@ p.author {
     font-size: 30px;
   }
 }
+
+.embla {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+}
+.embla__slide {
+  flex: 0 0 100%;
+  height: 350px;
+  width: 100px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 80% 100%;
+  }
+}

src/components/modals/main/scss/marketplace/modules/_item.scss

@@ -91,3 +91,11 @@ p.description {
     }
   }
 }
+
+.showMoreItems {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}