fix(marketplace): Collection page

2026-07-10 22:14:39 +02:00 · 2024-06-19 12:38:11 +01:00
parent 258fc9dc50
commit 28995a6ad3
8 changed files with 102 additions and 32 deletions
--- 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`}
--- 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>
  );
--- 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'}
--- 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}
--- 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 };
--- a/src/features/marketplace/views/Library.jsx
+++ b/src/features/marketplace/views/Library.jsx
--- 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) {
--- 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>
  );