From 28995a6ad36569f43a5d5ad67d4a0241940bbe18 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Wed, 19 Jun 2024 12:38:11 +0100
Subject: [PATCH] fix(marketplace): Collection page

---
 .../Elements/MainModal/backend/TabNavbar.jsx  | 14 +++++-
 .../api/MarketplaceDataContext.jsx            | 21 +++++++--
 .../components/Collection/Collection.jsx      | 18 +++++---
 .../marketplace/components/Items/Items.jsx    |  2 -
 .../marketplace/views/CollectionPage.jsx      | 32 ++++++++-----
 .../views/{Added.jsx => Library.jsx}          |  0
 src/features/misc/views/Addons.jsx            |  2 +-
 src/features/misc/views/Marketplace.jsx       | 45 +++++++++++++++----
 8 files changed, 102 insertions(+), 32 deletions(-)
 rename src/features/marketplace/views/{Added.jsx => Library.jsx} (100%)

diff --git a/src/components/Elements/MainModal/backend/TabNavbar.jsx b/src/components/Elements/MainModal/backend/TabNavbar.jsx
index fa0089da..00683e29 100644
--- a/src/components/Elements/MainModal/backend/TabNavbar.jsx
+++ b/src/components/Elements/MainModal/backend/TabNavbar.jsx
@@ -10,12 +10,14 @@ import {
 import { IoMdPricetag } from "react-icons/io";
 import { motion, AnimatePresence } from 'framer-motion';
 import { useTab } from './TabContext';
+import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
 import { Tooltip } from 'components/Elements';
 import variables from 'config/variables';
 import clsx from 'clsx';
 
 const TabNavbar = ({ modalClose }) => {
   const { activeTab, subTab, changeTab, subSection, setSubTab, setSubSection } = useTab();
+  const { setSelectedItem, setSelectedCollection } = useMarketData();
 
   const tabs = [
     { id: 'settings', label: 'Settings', icon: <MdSettings /> },
@@ -146,7 +148,11 @@ const TabNavbar = ({ modalClose }) => {
         {navbarLogo}
         <div className="flex flex-row items-center gap-2">
           <span
-            onClick={() => changeTab(activeTab)}
+            onClick={() => {
+              changeTab(activeTab);
+              setSelectedItem(null);
+              setSelectedCollection(null);
+            }}
             className={clsx(
               'text-xl capitalize tracking-normal transition-all duration-150 ease-in-out',
               {
@@ -206,7 +212,11 @@ const TabNavbar = ({ modalClose }) => {
           {tabs.map((tab) => (
             <button
               key={tab.id}
-              onClick={() => changeTab(tab.id)}
+              onClick={() => {
+                changeTab(tab.id);
+                setSelectedItem(null);
+                setSelectedCollection(null);
+              }}
               className={`${
                 activeTab === tab.id ? '' : 'hover:text-white/70'
               } transition-all duration-800	ease-in-out flex flex-row gap-2 items-center relative rounded-sm px-3 py-1.5 text-sm text-white outline-sky-400 transition focus-visible:outline-2`}
diff --git a/src/features/marketplace/api/MarketplaceDataContext.jsx b/src/features/marketplace/api/MarketplaceDataContext.jsx
index bdde9df8..dac65a19 100644
--- a/src/features/marketplace/api/MarketplaceDataContext.jsx
+++ b/src/features/marketplace/api/MarketplaceDataContext.jsx
@@ -11,6 +11,8 @@ export const MarketplaceDataProvider = ({ children }) => {
   const [items, setItems] = useState([]);
   const [collections, setCollections] = useState([]);
   const [selectedItem, setSelectedItem] = useState(null);
+  const [selectedCollection, setSelectedCollection] = useState(null);
+
   let numOfRequests = 0;
   const controller = new AbortController();
 
@@ -32,7 +34,7 @@ export const MarketplaceDataProvider = ({ children }) => {
 
     //console.log(data);
     numOfRequests++;
-    console.log("Request number: ", numOfRequests);
+    console.log('Request number: ', numOfRequests);
 
     setItems(sortItems(data, 'z-a'));
     setDone(true);
@@ -54,7 +56,7 @@ export const MarketplaceDataProvider = ({ children }) => {
 
     setCollections(data);
     setDone(true);
-  }
+  };
 
   const getItemData = async (itemType, itemName) => {
     const response = await fetch(
@@ -70,7 +72,20 @@ export const MarketplaceDataProvider = ({ children }) => {
     });
   };
   return (
-    <MarketDataContext.Provider value={{ done, items, selectedItem, getItems, getCollections, getItemData, setSelectedItem, collections }}>
+    <MarketDataContext.Provider
+      value={{
+        done,
+        items,
+        selectedItem,
+        selectedCollection,
+        getItems,
+        getCollections,
+        getItemData,
+        setSelectedItem,
+        setSelectedCollection,
+        collections,
+      }}
+    >
       {children}
     </MarketDataContext.Provider>
   );
diff --git a/src/features/marketplace/components/Collection/Collection.jsx b/src/features/marketplace/components/Collection/Collection.jsx
index 88499645..9e190492 100644
--- a/src/features/marketplace/components/Collection/Collection.jsx
+++ b/src/features/marketplace/components/Collection/Collection.jsx
@@ -1,11 +1,14 @@
 import { memo } from 'react';
+import variables from 'config/variables';
 import { MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
 import { Button } from 'components/Elements';
-import variables from 'config/variables';
 
-const Collection = ({ collections, collectionFunction }) => {
-  const randomIndex = Math.floor(Math.random() * collections.length);
-  const collection = collections[randomIndex];
+import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
+import { useTab } from 'components/Elements/MainModal/backend/TabContext';
+
+const Collection = ({ collection }) => {
+  const { setSubTab } = useTab();
+  const { setSelectedCollection } = useMarketData();
 
   const getStyle = () => {
     if (collection?.news) {
@@ -17,6 +20,11 @@ const Collection = ({ collections, collectionFunction }) => {
     };
   };
 
+  const SelectCollection = () => {
+    setSubTab(collection.display_name);
+    setSelectedCollection(collection);
+  }
+
   return (
     <div className="collection" style={getStyle()}>
       <div className="content">
@@ -35,7 +43,7 @@ const Collection = ({ collections, collectionFunction }) => {
       ) : (
         <Button
           type="collection"
-          onClick={() => collectionFunction(collection?.name)}
+          onClick={SelectCollection}
           icon={<MdOutlineArrowForward />}
           label={variables.getMessage('marketplace:explore_collection')}
           iconPlacement={'right'}
diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx
index 92dec2ed..6d1b086c 100644
--- a/src/features/marketplace/components/Items/Items.jsx
+++ b/src/features/marketplace/components/Items/Items.jsx
@@ -20,7 +20,6 @@ const NewItems = ({ items, view }) => {
           <tbody>
             {items.map((item, index) => (
               <ItemCard
-                onClick={() => setSubTab(item.name)}
                 item={item}
                 type={true}
                 key={index}
@@ -35,7 +34,6 @@ const NewItems = ({ items, view }) => {
         <div className="items">
           {items.map((item, index) => (
             <ItemCard
-              onClick={() => setSubTab(item.name)}
               item={item}
               type={true}
               key={index}
diff --git a/src/features/marketplace/views/CollectionPage.jsx b/src/features/marketplace/views/CollectionPage.jsx
index 37e6ed0f..360892b1 100644
--- a/src/features/marketplace/views/CollectionPage.jsx
+++ b/src/features/marketplace/views/CollectionPage.jsx
@@ -1,5 +1,14 @@
+import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
+import variables from 'config/variables';
+import { MdLibraryAdd } from 'react-icons/md';
+import { Button } from 'components/Elements';
+
 function CollectionPage() {
-  async function installCollection() {
+  const { selectedCollection } = useMarketData();
+
+  console.log(selectedCollection);
+
+  /*async function installCollection() {
     setBusy(true);
     try {
       const installed = JSON.parse(localStorage.getItem('installed'));
@@ -26,43 +35,44 @@ function CollectionPage() {
 
   function returnToMain() {
     setCollection(false);
-  }
+  }*/
 
   return (
     <>
-      <Header
+      {/*<Header
         title={variables.getMessage('modals.main.navbar.marketplace')}
         secondaryTitle={collectionTitle}
         report={false}
         goBack={() => returnToMain()}
-      />
+      />*/}
       <div
         className="collectionPage"
         style={
           {
-            //  backgroundImage: `linear-gradient(to bottom, transparent, black), url('${collectionImg}')`,
+            backgroundImage: `linear-gradient(to bottom, transparent, black), url('${selectedCollection.img}')`,
           }
         }
       >
         <div className="nice-tag">{variables.getMessage('marketplace:collection')}</div>
         <div className="content">
-          <span className="mainTitle">{collectionTitle}</span>={' '}
+          <span className="mainTitle">{selectedCollection.display_name}</span>
         </div>
 
         <Button
           type="collection"
-          onClick={() => installCollection()}
-          disabled={busy}
+          //onClick={() => installCollection()}
+          //disabled={busy}
           icon={<MdLibraryAdd />}
-          label={
+          label={variables.getMessage('marketplace:add_all')}
+          /*label={
             busy
               ? variables.getMessage('marketplace:installing')
               : variables.getMessage('marketplace:add_all')
-          }
+          }*/
         />
       </div>
     </>
   );
 }
 
-export default CollectionPage;
+export { CollectionPage as default, CollectionPage };
diff --git a/src/features/marketplace/views/Added.jsx b/src/features/marketplace/views/Library.jsx
similarity index 100%
rename from src/features/marketplace/views/Added.jsx
rename to src/features/marketplace/views/Library.jsx
diff --git a/src/features/misc/views/Addons.jsx b/src/features/misc/views/Addons.jsx
index b7f303cf..91fbbe23 100644
--- a/src/features/misc/views/Addons.jsx
+++ b/src/features/misc/views/Addons.jsx
@@ -1,7 +1,7 @@
 import variables from 'config/variables';
 import { memo } from 'react';
 
-import Added from '../../marketplace/views/Added';
+import Added from '../../marketplace/views/Library';
 import Create from '../../marketplace/views/Create';
 
 function Addons(props) {
diff --git a/src/features/misc/views/Marketplace.jsx b/src/features/misc/views/Marketplace.jsx
index 73a995d6..716e47ba 100644
--- a/src/features/misc/views/Marketplace.jsx
+++ b/src/features/misc/views/Marketplace.jsx
@@ -5,6 +5,7 @@ import MarketplaceTab from '../../marketplace/views/Browse';
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';
 
 import { ItemPage } from '../../marketplace/views/ItemPage';
+import { CollectionPage } from '../../marketplace/views/CollectionPage';
 import { NewItems as Items } from '../../marketplace/components/Items/Items';
 
 import { AnimatePresence, motion } from 'framer-motion';
@@ -33,12 +34,15 @@ function Marketplace(props) {
     collections = [],
     getItems,
     getCollections,
+    selectedCollection,
     selectedItem,
   } = useMarketData();
   const { subTab } = useTab();
   const [itemsView, setItemsView] = useState('grid');
   const [itemsFilter, setItemsFilter] = useState('all');
   const [filteredItems, setFilteredItems] = useState([]);
+  const randomIndex = Math.floor(Math.random() * collections.length);
+  const collection = collections[randomIndex];
 
   const fetchMarketData = async () => {
     try {
@@ -71,11 +75,14 @@ function Marketplace(props) {
     );
   }, [itemsFilter]);
 
-  const viewOptions = useMemo(() => [
-    { id: 'grid', icon: <PiGridFourFill /> },
-    { id: 'list', icon: <MdFormatListBulleted /> },
-  ], []);
-  
+  const viewOptions = useMemo(
+    () => [
+      { id: 'grid', icon: <PiGridFourFill /> },
+      { id: 'list', icon: <MdFormatListBulleted /> },
+    ],
+    [],
+  );
+
   const ItemView = useCallback(() => {
     return (
       <div className="flex space-x-1">
@@ -124,9 +131,31 @@ function Marketplace(props) {
         exit={{ opacity: 0 }}
         transition={{ duration: 0.8 }}
       >
-        {subTab === '' ? (
+        {subTab === '' && selectedItem === null && selectedCollection === null && (
           <>
-            <Collection collections={collections} />
+            <Collection collection={collection} />
+            <motion.div key="items">
+              <div className="w-full flex flex-row justify-between items-center">
+                <FilterOptions />
+                <div className="flex flex-row gap-2">
+                  <ItemView />
+                </div>
+              </div>
+              <Items items={filteredItems} view={itemsView} />
+            </motion.div>
+          </>
+        )}
+        {selectedItem !== null && (
+          <motion.div key="itempage">
+            <ItemPage />
+          </motion.div>
+        )}
+        {selectedCollection !== null && (
+          <CollectionPage />
+        )}
+        {/*{subTab === '' ? (
+          <>
+            <Collection collection={collection} />
             <motion.div key="items">
               <div className="w-full flex flex-row justify-between items-center">
                 <FilterOptions />
@@ -141,7 +170,7 @@ function Marketplace(props) {
           <motion.div key="itempage">
             <ItemPage />
           </motion.div>
-        )}
+        )}*/}
       </motion.div>
     </AnimatePresence>
   );