fix: item organisation

src/features/marketplace/api/MarketplaceDataContext.jsx

@@ -36,7 +36,11 @@ export const MarketplaceDataProvider = ({ children }) => {
     numOfRequests++;
     console.log('Request number: ', numOfRequests);
 
-    setItems(sortItems(data, 'z-a'));
+    //setItems(sortItems(data, 'z-a'));
+    const shuffledData = data.sort(() => Math.random() - 0.5);
+
+    setItems(shuffledData);
+
     setDone(true);
   };
 
@@ -71,6 +75,20 @@ export const MarketplaceDataProvider = ({ children }) => {
       resolve(item.data);
     });
   };
+
+  const getCollectionData = async (collectionName) => {
+    const response = await fetch(
+      `${variables.constants.API_URL}/marketplace/collection/${collectionName}`,
+      {
+        signal: controller.signal,
+      },
+    );
+    const item = await response.json();
+    setSelectedCollection(item.data);
+    return new Promise((resolve) => {
+      resolve(item.data);
+    });
+  }
   return (
     <MarketDataContext.Provider
       value={{
@@ -81,6 +99,7 @@ export const MarketplaceDataProvider = ({ children }) => {
         getItems,
         getCollections,
         getItemData,
+        getCollectionData,
         setSelectedItem,
         setSelectedCollection,
         collections,

src/features/marketplace/components/Collection/Collection.jsx

@@ -8,7 +8,7 @@ import { useTab } from 'components/Elements/MainModal/backend/TabContext';
 
 const Collection = ({ collection }) => {
   const { setSubTab } = useTab();
-  const { setSelectedCollection } = useMarketData();
+  const { setSelectedCollection, getCollectionData } = useMarketData();
 
   const getStyle = () => {
     if (collection?.news) {
@@ -21,12 +21,13 @@ const Collection = ({ collection }) => {
   };
 
   const SelectCollection = () => {
-    setSubTab(collection.display_name);
-    setSelectedCollection(collection);
+    getCollectionData(collection.name).then((data) => {
+      setSubTab(data.display_name);
+    });
   }
 
   return (
-    <div className="collection" style={getStyle()}>
+    <div className="collection h-[125px]" style={getStyle()}>
       <div className="content">
         <span className="title">{collection?.display_name}</span>
         <span className="subtitle">{collection?.description ? collection?.description.substr(0, 75) : ''}</span>

src/features/marketplace/components/Elements/ItemCard/ItemCard.jsx

@@ -15,6 +15,7 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
   const SelectItem = () => {
     getItemData(item.type, item.name).then((data) => {
       setSubTab(data.display_name);
+      console.log(data)
     });
   };
 
@@ -66,8 +67,8 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
           key={item.name}
           style={{
             // alpha  66=0.4  33=0.2  00=0
-            backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}66 0%, ${item.colour}33 10%, ${item.colour}00 75%)`,
-            // backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}60, ${item.colour}0F)`,
+            //backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}66 0%, ${item.colour}33 10%, ${item.colour}00 75%)`,
+            backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}60, ${item.colour}0F)`,
             // backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}55, ${item.colour}0A)`,
           }}
         >

src/features/marketplace/views/CollectionPage.jsx

@@ -2,6 +2,7 @@ import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
 import variables from 'config/variables';
 import { MdLibraryAdd } from 'react-icons/md';
 import { Button } from 'components/Elements';
+import { NewItems as Items } from '../components/Items/Items';
 
 function CollectionPage() {
   const { selectedCollection } = useMarketData();
@@ -71,6 +72,7 @@ function CollectionPage() {
           }*/
         />
       </div>
+      <Items items={selectedCollection?.items} />
     </>
   );
 }