diff --git a/src/features/marketplace/components/Items/NewItems.jsx b/src/features/marketplace/components/Items/NewItems.jsx new file mode 100644 index 00000000..2f373bf8 --- /dev/null +++ b/src/features/marketplace/components/Items/NewItems.jsx @@ -0,0 +1,77 @@ +import variables from 'config/variables'; +import { motion } from 'framer-motion'; +import { useState } from 'react'; +import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; +import { useTab } from 'components/Elements/MainModal/backend/TabContext'; + +function ItemCard({ item, onClick, type, onCollection, isCurator }) { + item._onCollection = onCollection; + return ( + + { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + aria-hidden="true" + /> + icon { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + /> +
+ {item.display_name || item.name} + {!isCurator ? ( + + {variables.getMessage('modals.main.marketplace.by', { author: item.author })} + + ) : ( + '' + )} + + {type === 'all' && !onCollection ? ( + + {variables.getMessage('modals.main.marketplace.' + item.type)} + + ) : null} +
+ + ); +} + +const NewItems = ({ items }) => { + const { setSubTab } = useTab(); + return ( +
+ {items.map((item, index) => ( + setSubTab(item.name)} + //isCurator={isCurator} + item={item} + //toggleFunction={toggleFunction} + //type={type} + //onCollection={onCollection} + key={index} + /> + ))} +
+ ); +}; + +export { NewItems }; diff --git a/src/features/marketplace/views/newItemPage.jsx b/src/features/marketplace/views/newItemPage.jsx new file mode 100644 index 00000000..64ab50c1 --- /dev/null +++ b/src/features/marketplace/views/newItemPage.jsx @@ -0,0 +1,419 @@ +import variables from 'config/variables'; +import { useTab } from 'components/Elements/MainModal/backend/TabContext'; +import { useEffect, useState } from 'react'; +import { ShareModal } from 'components/Elements'; +import { + MdIosShare, + MdFlag, + MdAccountCircle, + MdCalendarMonth, + MdFormatQuote, + MdImage, + MdTranslate, + MdOutlineWarning, + MdStyle, + MdClose, + MdLibraryAdd, +} from 'react-icons/md'; +import { Header } from 'components/Layout/Settings'; +import Modal from 'react-modal'; +import Markdown from 'markdown-to-jsx'; + +const NewItemPage = () => { + const { subTab } = useTab(); + const controller = new AbortController(); + const [itemName, setItemName] = useState(''); + const [ItemDescription, setItemDescription] = useState(''); + + async function getItemData() { + const item = await ( + await fetch(`${variables.constants.API_URL}/marketplace/item/quote_packs/${subTab}`, { + signal: controller.signal, + }) + ).json(); + console.log(item); + + setItemName(item.data.display_name); + setItemDescription(item.data.description); + } + + useEffect(() => { + getItemData(); + }, []); + + const moreInfoItem = (icon, header, text) => ( +
+ {icon} +
+ {header} + {text} +
+
+ ); + + const itemWarning = () => { + const template = (message) => ( +
+ +
+ Warning + {message} +
+
+ ); + + if (this.props.data.data.sideload === true) { + return template(variables.getMessage('modals.main.marketplace.product.sideload_warning')); + } + + if (this.props.data.data.image_api === true) { + return template(variables.getMessage('modals.main.marketplace.product.third_party_api')); + } + + if (this.props.data.data.language !== undefined && this.props.data.data.language !== null) { + if (shortLocale !== this.props.data.data.language) { + return template(variables.getMessage('modals.main.marketplace.product.not_in_language')); + } + } + + return null; + }; + + { + /*async function toggle(pageType, data) { + if (pageType === 'item') { + const toggleType = type === 'all' || type === 'collections' ? data.type : type; + const item = await ( + await fetch(`${variables.constants.API_URL}/marketplace/item/${toggleType}/${data.name}`, { + signal: controller.signal, + }) + ).json(); + + if (controller.signal.aborted === true) { + return; + } + + // check if already installed + let addonInstalled = false; + let addonInstalledVersion; + const installed = JSON.parse(localStorage.getItem('installed')); + if (installed.some((item) => item.name === item.data.name)) { + addonInstalled = true; + for (let i = 0; i < installed.length; i++) { + if (installed[i].name === item.data.name) { + addonInstalledVersion = installed[i].version; + break; + } + } + } + + setItem({ + onCollection: data._onCollection, + type: item.data.type, + display_name: item.data.name, + author: item.data.author, + description: item.data.description, + version: item.data.version, + icon: item.data.screenshot_url, + data: item.data, + local: { + installed: addonInstalled, + version: addonInstalledVersion, + }, + slug: data.name, + }); + + setType('item'); + + variables.stats.postEvent('marketplace-item', `${item.display_name} viewed`); + } else if (pageType === 'collection') { + setDone(false); + setItem({}); + + const collection = await ( + await fetch(`${variables.constants.API_URL}/marketplace/collection/${data}`, { + signal: controller.signal, + }) + ).json(); + + setItems(collection.data.items); + setCollection({ + visible: true, + title: collection.data.display_name, + description: collection.data.description, + img: collection.data.img, + }); + + setType('collection'); + } else { + setItem({}); + setCollection({}); + setType('normal'); + } + }*/ + } + + return ( + <> + {/* this.setState({ shareModal: false })} + > + this.setState({ shareModal: false })} + /> + */} + {/*
0 + ? this.props.data.data.in_collections[0].display_name + : variables.getMessage('modals.main.navbar.marketplace') + } + secondaryTitle={ + this.props.data.data.sideload + ? this.props.data.data.name + : this.props.data.data.display_name + } + report={false} + goBack={this.props.toggleFunction} + />*/} + {itemName} +
+ {/*
+
+ {moreInfoItem( + , + variables.getMessage('modals.main.marketplace.product.created_by'), + this.props.data.author, + )} + {itemWarning()} +
+ {this.props.data.data.photos && ( +
+
+ +
+
+ )} + {this.props.data.data.settings && ( + product { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + /> + )}*/} +
+ + {variables.getMessage('modals.main.marketplace.product.description')} + + {ItemDescription} +
+
+ {/*} + {this.props.data.data.quotes && ( + <> + + + + + + + {this.props.data.data.quotes.slice(0, this.state.count).map((quote, index) => ( + + + + + ))} + +
{variables.getMessage('modals.main.settings.sections.quote.title')}{variables.getMessage('modals.main.settings.sections.quote.author')}
{quote.quote}{quote.author}
+
+ this.incrementCount('quotes')}> + {this.state.count !== this.props.data.data.quotes.length + ? variables.getMessage('modals.main.marketplace.product.show_all') + : variables.getMessage('modals.main.marketplace.product.show_less')} + +
+ + )} + {this.props.data.data.settings && ( + <> + + + + + + + {Object.entries(this.props.data.data.settings) + .slice(0, this.state.count) + .map(([key, value]) => ( + + + + + ))} + +
{variables.getMessage('modals.main.marketplace.product.setting')}{variables.getMessage('modals.main.marketplace.product.value')}
{key}{value}
+
+ this.incrementCount('settings')}> + {this.state.count !== this.props.data.data.settings.length + ? variables.getMessage('modals.main.marketplace.product.show_all') + : variables.getMessage('modals.main.marketplace.product.show_less')} + +
+ + )} +
+ + {variables.getMessage('modals.main.marketplace.product.details')} + +
+ {this.props.data.data.updated_at && + moreInfoItem( + , + variables.getMessage('modals.main.marketplace.product.updated_at'), + formattedDate, + )} + {this.props.data.data.quotes && + moreInfoItem( + , + variables.getMessage('modals.main.marketplace.product.no_quotes'), + this.props.data.data.quotes.length, + )} + {this.props.data.data.photos && + moreInfoItem( + , + variables.getMessage('modals.main.marketplace.product.no_images'), + this.props.data.data.photos.length, + )} + {this.props.data.data.quotes && this.props.data.data.language + ? moreInfoItem( + , + variables.getMessage('modals.main.settings.sections.language.title'), + languageNames.of(this.props.data.data.language), + ) + : null} + {moreInfoItem( + , + variables.getMessage('modals.main.settings.sections.background.type.title'), + variables.getMessage( + 'modals.main.marketplace.' + this.getName(this.props.data.data.type), + ) || 'marketplace', + )} +
+
+
+
+
+ icon { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + /> + {localStorage.getItem('welcomePreview') !== 'true' ? ( + this.state.button + ) : ( +

+ {variables.getMessage( + 'modals.main.marketplace.product.buttons.not_available_preview', + )} +

+ )} + {this.props.data.data.sideload !== true && ( +
+
+ )} + {this.props.data.data.in_collections?.length > 0 && ( +
+
+ + {variables.getMessage('modals.main.marketplace.product.part_of')} + + + this.props.toggleFunction( + 'collection', + this.props.data.data.in_collections[0].name, + ) + } + > + {this.props.data.data.in_collections[0].display_name} + +
+
+ )} +
+
+ + {/*} + {moreByCurator.length > 1 && ( +
+ + {variables.getMessage('modals.main.marketplace.product.more_from_curator', { + name: this.props.data.author, + })} + +
+ this.props.toggleFunction('item', input)} + collectionFunction={(input) => this.props.toggleFunction('collection', input)} + filter={''} + moreByCreator={true} + showCreateYourOwn={false} + /> +
+
+ )} + */} + + ); +}; + +export { NewItemPage as default, NewItemPage }; diff --git a/src/features/misc/views/Marketplace.jsx b/src/features/misc/views/Marketplace.jsx index 9f6fd320..9a734139 100644 --- a/src/features/misc/views/Marketplace.jsx +++ b/src/features/misc/views/Marketplace.jsx @@ -1,9 +1,49 @@ import variables from 'config/variables'; -import { memo } from 'react'; +import { memo, useState, useEffect } from 'react'; import MarketplaceTab from '../../marketplace/views/Browse'; +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'; function Marketplace(props) { + const [done, setDone] = useState(false); + const [items, setItems] = useState([]); + const [type, setType] = useState('all'); + const [selectedItem, setSelectedItem] = useState(null); + const { subTab } = useTab(); + + const controller = new AbortController(); + + async function getItems() { + setDone(false); + const dataURL = + variables.constants.API_URL + + (type === 'collections' ? '/marketplace/collections' : '/marketplace/items/' + type); + + const { data } = await ( + await fetch(dataURL, { + signal: controller.signal, + }) + ).json(); + + if (controller.signal.aborted === true) { + return; + } + + setItems(sortItems(data, 'z-a')); + setDone(true); + } + + useEffect(() => { + if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { + return; + } + + getItems(); + }, []); + return ( { /* props.changeTab(type)} current="marketplace" modalClose={props.modalClose}> @@ -29,7 +69,15 @@ function Marketplace(props) { }, (
- + {/* + {selectedItem !== null ? {selectedItem?.display_name} : null}*/} + {subTab === '' ? ( + + ) : ( + <> + + + )}
) );