From a33c4a97c72d97e278982e7d530eafb96866b189 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sun, 16 Jun 2024 22:21:22 +0100 Subject: [PATCH] refactor(marketplace): Item Page Progress --- .../Elements/MainModal/backend/TabNavbar.jsx | 27 +++- .../marketplace/views/newItemPage.jsx | 116 ++++++++++++------ src/features/misc/views/Marketplace.jsx | 31 +++-- 3 files changed, 119 insertions(+), 55 deletions(-) diff --git a/src/components/Elements/MainModal/backend/TabNavbar.jsx b/src/components/Elements/MainModal/backend/TabNavbar.jsx index 268fb430..10c94051 100644 --- a/src/components/Elements/MainModal/backend/TabNavbar.jsx +++ b/src/components/Elements/MainModal/backend/TabNavbar.jsx @@ -60,7 +60,7 @@ const TabNavbar = ({ modalClose }) => { filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" > - + {
{navbarLogo}
- changeTab(activeTab)} className={clsx("text-xl capitalize tracking-normal transition-all duration-150 ease-in-out", { 'text-neutral-300 cursor-pointer hover:text-neutral-100': subTab !== '' && activeTab === 'marketplace' })}>{variables.getMessage(`modals.main.navbar.${activeTab}`)} + changeTab(activeTab)} + className={clsx( + 'text-xl capitalize tracking-normal transition-all duration-150 ease-in-out', + { + 'text-neutral-300 cursor-pointer hover:text-neutral-100': + subTab !== '' && activeTab === 'marketplace', + }, + )} + > + {variables.getMessage(`modals.main.navbar.${activeTab}`)} + {subTab !== '' && ( <> - setSubSection('')} className={clsx("text-xl capitalize tracking-normal transition-all duration-150 ease-in-out", { 'text-neutral-300 cursor-pointer hover:text-neutral-100': subSection !== '' })}>{subTab} + setSubSection('')} + className={clsx( + 'text-xl capitalize tracking-normal transition-all duration-150 ease-in-out', + { 'text-neutral-300 cursor-pointer hover:text-neutral-100': subSection !== '' }, + )} + > + {subTab} + )} {subSection !== '' && ( @@ -161,7 +180,7 @@ const TabNavbar = ({ modalClose }) => {
- {activeTab === 'marketplace' && ( + {activeTab === 'marketplace' && subTab === '' && ( { const { subTab } = useTab(); const controller = new AbortController(); - const [itemName, setItemName] = useState(''); - const [ItemDescription, setItemDescription] = useState(''); - const [ItemAuthor, setItemAuthor] = useState(''); - const [ItemType, setItemType] = useState(''); - const [ItemIcon, setItemIcon] = useState(''); const [count, setCount] = useState(5); - let quotes = []; - let ItemData; - //const [ItemData, setItemData] = useState([]); + const [itemData, setItemData] = useState(null); async function getItemData() { - const item = await ( - await fetch(`${variables.constants.API_URL}/marketplace/item/quote_packs/${subTab}`, { + let testType = 'quote_packs'; + // Fetch data from API + const response = await fetch( + `${variables.constants.API_URL}/marketplace/item/${testType}/${subTab}`, + { signal: controller.signal, - }) - ).json(); + }, + ); + const item = await response.json(); console.log(item); - setItemName(item.data.display_name); - setItemType(item.data.type); - setItemDescription(item.data.description); - setItemAuthor(item.data.author); - setItemType(item.data.type); - setItemIcon(item.data.icon_url); - console.log(ItemType) - if (ItemType === 'quotes') { - quotes = item.data.quotes - console.log(quotes) - } - ItemData = item.data.data; + // Extract all the information you need + const { + onCollection, + type, + display_name, + author, + description, + version, + icon_url, + data, + local, + slug, + quotes, + } = item; + + // Return an object with all the information + return { + onCollection, + type, + display_name, + author, + description, + version, + icon_url, + data, + local, + slug, + quotes, + }; } useEffect(() => { - getItemData(); + async function fetchData() { + const data = await getItemData(); + setItemData(data.data); + } + + fetchData(); }, []); + if (!itemData) { + return null; // or a loading spinner + } + + const { + onCollection, + type, + display_name, + author, + description, + version, + icon, + data, + local, + slug, + } = itemData; + const moreInfoItem = (icon, header, text) => (
{icon} @@ -209,7 +245,7 @@ const NewItemPage = () => { {moreInfoItem( , variables.getMessage('modals.main.marketplace.product.created_by'), - ItemAuthor, + itemData.author, )} {itemWarning()}
@@ -235,10 +271,10 @@ const NewItemPage = () => { {variables.getMessage('modals.main.marketplace.product.description')} - {ItemDescription} + {itemData.description}
- {quotes[0]} - {ItemType === 'quotes' && ( + {itemData.quotes && itemData.quotes.length > 0 ? itemData.quotes[0].quote : 'Loading...'} + {itemData.type === 'quotes' && ( <> @@ -246,7 +282,7 @@ const NewItemPage = () => { - {quotes.slice(0, count).map((quote, index) => ( + {itemData.quotes.slice(0, count).map((quote, index) => ( @@ -255,8 +291,8 @@ const NewItemPage = () => {
{variables.getMessage('modals.main.settings.sections.quote.title')} {variables.getMessage('modals.main.settings.sections.quote.author')}
{quote.quote} {quote.author}
- count === quotes.length}> - {count !== quotes.length + count === itemData.quotes.length}> + {count !== itemData.quotes.length ? variables.getMessage('modals.main.marketplace.product.show_all') : variables.getMessage('modals.main.marketplace.product.show_less')} @@ -301,19 +337,19 @@ const NewItemPage = () => { variables.getMessage('modals.main.marketplace.product.updated_at'), formattedDate, )}*/} - {ItemData?.quotes && + {itemData?.quotes && moreInfoItem( , - variables.getMessage('modals.main.marketplace.product.no_quotes'), - ItemData.quotes.length, + variables.getMessage('modals.main.marketplace.product.no_itemData.quotes'), + itemData.quotes.length, )} - {ItemData?.photos && + {itemData?.photos && moreInfoItem( , variables.getMessage('modals.main.marketplace.product.no_images'), - ItemData.photos.length, + itemData.photos.length, )} - {/*{ItemData.quotes && ItemData.language + {/*{itemData.itemData.quotes && itemData.language ? moreInfoItem( , variables.getMessage('modals.main.settings.sections.language.title'), @@ -333,7 +369,7 @@ const NewItemPage = () => {
@@ -341,7 +377,7 @@ const NewItemPage = () => { className="icon" alt="icon" draggable={false} - src={ItemIcon} + src={itemData.icon_url} onError={(e) => { e.target.onerror = null; e.target.src = placeholderIcon; diff --git a/src/features/misc/views/Marketplace.jsx b/src/features/misc/views/Marketplace.jsx index 9a734139..6d821665 100644 --- a/src/features/misc/views/Marketplace.jsx +++ b/src/features/misc/views/Marketplace.jsx @@ -6,6 +6,7 @@ import { sortItems } from '../../marketplace/api'; import { NewItems as Items } from '../../marketplace/components/Items/NewItems'; import { useTab } from 'components/Elements/MainModal/backend/TabContext'; import { NewItemPage } from '../../marketplace/views/newItemPage'; +import { AnimatePresence, motion } from 'framer-motion'; function Marketplace(props) { const [done, setDone] = useState(false); @@ -68,17 +69,25 @@ function Marketplace(props) { */ }, ( -
- {/* - {selectedItem !== null ? {selectedItem?.display_name} : null}*/} - {subTab === '' ? ( - - ) : ( - <> - - - )} -
+ + + {subTab === '' ? ( + + + + ) : ( + + + + )} + + ) ); }