feat: get collection data from api

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

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import { MdAutoFixHigh, MdOutlineArrowForward, MdExpandMore } from 'react-icons/md';
 
 export default function Items({
@@ -14,36 +14,34 @@ export default function Items({
   const [count, setCount] = useState(8);
   const incrementCount = () => {
     if (count !== items.length && count <= items.length) {
-      if ((count + 8)  > items.length) {
+      if (count + 8 > items.length) {
         setCount(count + (items.length - count));
-      }
-      else {
+      } else {
         setCount(count + 8);
       }
     }
   };
 
+  const collection = collections[Math.floor(Math.random() * collections.length)];
+
   return (
     <>
-      {(type === 'all' && !onCollection) || (type ==='collections') ? (
+      {(type === 'all' && !onCollection) || type === 'collections' ? (
         <>
-          {collections.map((collection, index) => (
-            <div
-              className="collection"
-              key={index}
-              style={{
-                backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${collection.img}')`,
-              }}
-            >
-              <div className="content">
-                <span className="title">{collection.display_name}</span>
-                <span className="subtitle">{collection.description}</span>
-              </div>
-              <button className="nice-button" onClick={() => collectionFunction(collection.name)}>
-                <MdOutlineArrowForward /> {getMessage('modals.main.marketplace.explore_collection')}
-              </button>
+          <div
+            className="collection"
+            style={{
+              backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${collection.img}')`,
+            }}
+          >
+            <div className="content">
+              <span className="title">{collection.display_name}</span>
+              <span className="subtitle">{collection.description}</span>
             </div>
-          ))}
+            <button className="nice-button" onClick={() => collectionFunction(collection.name)}>
+              <MdOutlineArrowForward /> {getMessage('modals.main.marketplace.explore_collection')}
+            </button>
+          </div>
         </>
       ) : null}
       <div className="items">
@@ -61,14 +59,20 @@ export default function Items({
           </div>
         ))}
       </div>
-      <div className='showMoreItems'>
-        {(count !== items.length && items.length >= 8) ? (
-          <span className='link' onClick={incrementCount}><MdExpandMore /> Show More</span>
+      <div className="showMoreItems">
+        {count !== items.length && items.length >= 8 ? (
+          <span className="link" onClick={incrementCount}>
+            <MdExpandMore /> Show More
+          </span>
         ) : null}
         {items.length <= 8 ? (
-          <span className='subtitle'>Showing {items.length} / {items.length}</span>
+          <span className="subtitle">
+            Showing {items.length} / {items.length}
+          </span>
         ) : (
-          <span className='subtitle'>Showing {count} / {items.length}</span>
+          <span className="subtitle">
+            Showing {count} / {items.length}
+          </span>
         )}
       </div>
       <div className="loader"></div>

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

@@ -108,6 +108,9 @@ export default class Marketplace extends PureComponent {
       ).json();
       this.setState({
         items: collection.data.items,
+        collectionTitle: collection.data.name,
+        collectionDescription: collection.data.description,
+        collectionImg: collection.data.img,
         collection: true,
         done: true,
       });
@@ -319,12 +322,15 @@ export default class Marketplace extends PureComponent {
                 <MdOutlineKeyboardArrowRight /> Collection
               </span>
             </div>
-            <div className="collectionPage">
+            <div
+              className="collectionPage"
+              style={{
+                backgroundImage: `linear-gradient(to bottom, transparent, #2f3542), url('${this.state.collectionImg}')`,
+              }}
+            >
               <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>
+                <span className="mainTitle">{this.state.collectionTitle}</span>
+                <span className="subtitle">{this.state.collectionDescription}</span>
               </div>
               <div className="nice-tag">Collection</div>
             </div>

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

@@ -347,9 +347,8 @@ p.author {
   
   @include themed() {
     border-radius: t($borderRadius);
-    background-image: linear-gradient(to bottom, transparent, #2f3542),
-      url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
   }
+
   .nice-tag {
     border-radius: 150px;
     padding: 1px 12px;