From 9c900c6484c8620a4be4217861a9b6e795e9fdc3 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Tue, 18 Jun 2024 15:12:09 +0100 Subject: [PATCH] refactor(marketplace): WIP implementation of collection --- .../Elements/MainModal/backend/TabNavbar.jsx | 4 +- .../scss/modules/_modalTabContent.scss | 99 +-- .../api/MarketplaceDataContext.jsx | 26 +- .../components/Collection/Collection.jsx | 21 +- .../marketplace/components/Items/Items.jsx | 307 ++++---- .../marketplace/components/Items/NewItems.jsx | 92 --- .../marketplace/components/Items/OldItems.jsx | 191 +++++ src/features/marketplace/views/Added.jsx | 4 +- src/features/marketplace/views/Browse.jsx | 4 +- src/features/marketplace/views/ItemPage.jsx | 740 ++++++++---------- .../marketplace/views/newItemPage.jsx | 374 --------- .../marketplace/views/oldItemPage.jsx | 478 +++++++++++ src/features/misc/views/Marketplace.jsx | 150 +++- 13 files changed, 1344 insertions(+), 1146 deletions(-) delete mode 100644 src/features/marketplace/components/Items/NewItems.jsx create mode 100644 src/features/marketplace/components/Items/OldItems.jsx delete mode 100644 src/features/marketplace/views/newItemPage.jsx create mode 100644 src/features/marketplace/views/oldItemPage.jsx diff --git a/src/components/Elements/MainModal/backend/TabNavbar.jsx b/src/components/Elements/MainModal/backend/TabNavbar.jsx index 300e3916..b8b7077a 100644 --- a/src/components/Elements/MainModal/backend/TabNavbar.jsx +++ b/src/components/Elements/MainModal/backend/TabNavbar.jsx @@ -208,8 +208,8 @@ const TabNavbar = ({ modalClose }) => { key={tab.id} onClick={() => changeTab(tab.id)} className={`${ - activeTab === tab.id ? '' : 'hover:text-white/60' - } 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`} + 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`} style={{ WebkitTapHighlightColor: 'transparent', }} diff --git a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss index 3bbc5904..f9d8c714 100644 --- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss +++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss @@ -81,60 +81,61 @@ padding: 5px 10px; } } +.itemPage { + table { + border-collapse: separate; + border-radius: 10px; + margin-top: 20px; -table { - border-collapse: separate; - border-radius: 10px; - margin-top: 20px; - - @include themed { - box-shadow: 0 0 0 1px t($modal-sidebarActive); - padding: 0; - border: 0; - outline: none; - } - - tr:first-child { @include themed { - border-radius: t($borderRadius); - color: t($subColor); + box-shadow: 0 0 0 1px t($modal-sidebarActive); + padding: 0; + border: 0; + outline: none; } - letter-spacing: 2px; - - th { - padding: 20px; - } - } - - td { - padding: 15px; - } - - tr { - th:last-child { - display: grid; - place-items: center; - } - } - - ::placeholder { - @include themed { - color: t($subColor); - } - } - - tr:not(:first-child) { - @include themed { - background: t($modal-secondaryColour); - } - - textarea { - width: 90%; - margin: 10px; - + tr:first-child { @include themed { - color: t($color); + border-radius: t($borderRadius); + color: t($subColor); + } + + letter-spacing: 2px; + + th { + padding: 20px; + } + } + + td { + padding: 15px; + } + + tr { + th:last-child { + display: grid; + place-items: center; + } + } + + ::placeholder { + @include themed { + color: t($subColor); + } + } + + tr:not(:first-child) { + @include themed { + background: t($modal-secondaryColour); + } + + textarea { + width: 90%; + margin: 10px; + + @include themed { + color: t($color); + } } } } diff --git a/src/features/marketplace/api/MarketplaceDataContext.jsx b/src/features/marketplace/api/MarketplaceDataContext.jsx index af1751d4..bdde9df8 100644 --- a/src/features/marketplace/api/MarketplaceDataContext.jsx +++ b/src/features/marketplace/api/MarketplaceDataContext.jsx @@ -9,7 +9,9 @@ export const useMarketData = () => useContext(MarketDataContext); export const MarketplaceDataProvider = ({ children }) => { const [done, setDone] = useState(false); const [items, setItems] = useState([]); + const [collections, setCollections] = useState([]); const [selectedItem, setSelectedItem] = useState(null); + let numOfRequests = 0; const controller = new AbortController(); const getItems = async (type = 'all') => { @@ -28,10 +30,32 @@ export const MarketplaceDataProvider = ({ children }) => { return; } + //console.log(data); + numOfRequests++; + console.log("Request number: ", numOfRequests); + setItems(sortItems(data, 'z-a')); setDone(true); }; + const getCollections = async () => { + setDone(false); + const { data } = await ( + await fetch(`${variables.constants.API_URL}/marketplace/collections`, { + signal: controller.signal, + }) + ).json(); + + if (controller.signal.aborted === true) { + return; + } + + console.log(data); + + setCollections(data); + setDone(true); + } + const getItemData = async (itemType, itemName) => { const response = await fetch( `${variables.constants.API_URL}/marketplace/item/${itemType}/${itemName}`, @@ -46,7 +70,7 @@ export const MarketplaceDataProvider = ({ children }) => { }); }; return ( - + {children} ); diff --git a/src/features/marketplace/components/Collection/Collection.jsx b/src/features/marketplace/components/Collection/Collection.jsx index c38b6052..e6ffeb4b 100644 --- a/src/features/marketplace/components/Collection/Collection.jsx +++ b/src/features/marketplace/components/Collection/Collection.jsx @@ -2,29 +2,30 @@ import { MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md'; import { Button } from 'components/Elements'; import variables from 'config/variables'; -const Collection = ({ collection, collectionFunction }) => { - const { news, background_colour, img, display_name, description } = collection; +const Collection = ({ collections, collectionFunction }) => { + const randomIndex = Math.floor(Math.random() * collections.length); + const collection = collections[randomIndex]; const getStyle = () => { - if (news) { - return { backgroundColor: background_colour }; + if (collection?.news) { + return { backgroundColor: collection?.background_colour }; } return { - backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${img}')`, + backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${collection?.img}')`, }; }; return (
- {display_name} using component - {description ? description.substr(0, 75) : ''} + {collection?.display_name} + {collection?.description ? collection?.description.substr(0, 75) : ''}
- {collection.news === true ? ( + {collection?.news === true ? ( @@ -33,7 +34,7 @@ const Collection = ({ collection, collectionFunction }) => { ) : (
- )} -
-
{ - this.setState({ type: 'all' }); - this.getItems(); - }} - className="transition-all duration-200 bg-white rounded-full px-6 py-2 text-base text-black" - > - All -
-
{ - this.setState({ type: 'photo_packs' }); - this.getItems(); - }} - className="transition-all duration-200 bg-[#333] hover:bg-[#222222] cursor-pointer rounded-full px-6 py-2 text-base text-white" - > - Photo Packs -
-
{ - this.setState({ type: 'quote_packs' }); - this.getItems(); - }} - className="transition-all duration-200 bg-[#333] hover:bg-[#222222] cursor-pointer rounded-full px-6 py-2 text-base text-white" - > - Quote Packs -
-
-
- {items - ?.filter((item) => filterItems(item, filter)) - .map((item, index) => ( + switch (view) { + case 'list': + return ( + + + + + + + + + {items.map((item, index) => ( + setSubTab(item.name)} + item={item} + type={true} + key={index} + cardStyle="list" + /> + ))} + +
NameType{variables.getMessage('settings:sections.quote.author')}
+ ); + default: + return ( +
+ {items.map((item, index) => ( setSubTab(item.name)} item={item} - toggleFunction={toggleFunction} - type={type} - onCollection={onCollection} + type={true} key={index} + cardStyle="card" /> ))} -
-
- {!onCollection && showCreateYourOwn ? ( -
- - {variables.getMessage('marketplace:cant_find')} - - {variables.getMessage('marketplace:knowledgebase_one') + ' '} - - {variables.getMessage('marketplace:knowledgebase_two')} - - {' ' + variables.getMessage('marketplace:knowledgebase_three')} -
- ) : null} - - ); -} + ); + } +}; -const MemoizedItems = memo(Items); -export { MemoizedItems as default, MemoizedItems as Items }; +export { NewItems }; diff --git a/src/features/marketplace/components/Items/NewItems.jsx b/src/features/marketplace/components/Items/NewItems.jsx deleted file mode 100644 index 0fd9c8b0..00000000 --- a/src/features/marketplace/components/Items/NewItems.jsx +++ /dev/null @@ -1,92 +0,0 @@ -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'; -import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext'; - -function ItemCard({ item, onClick, type, onCollection, isCurator }) { - const { getItemData, selectedItem, setSelectedItem } = useMarketData(); - const { setSubTab } = useTab(); - - item._onCollection = onCollection; - - const SelectItem = () => { - console.log("Item selected: ", item.display_name); - console.log("Item type: ", item.type); - getItemData(item.type, item.name).then((data) => { - console.log("Selected item: ", data); - //setSelectedItem(data); - setSubTab(data.display_name); - }); - } - - 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('marketplace:by', { author: item.author })} - - ) : ( - '' - )} - - {type === 'all' && !onCollection ? ( - - {variables.getMessage('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/components/Items/OldItems.jsx b/src/features/marketplace/components/Items/OldItems.jsx new file mode 100644 index 00000000..2093427b --- /dev/null +++ b/src/features/marketplace/components/Items/OldItems.jsx @@ -0,0 +1,191 @@ +import variables from 'config/variables'; +import React, { memo } from 'react'; +import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md'; +import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; +import { motion } from 'framer-motion'; + +import { Button } from 'components/Elements'; + +function filterItems(item, filter) { + const lowerCaseFilter = filter.toLowerCase(); + return ( + item.name?.toLowerCase().includes(lowerCaseFilter) || + filter === '' || + item.author?.toLowerCase().includes(lowerCaseFilter) || + item.type?.toLowerCase().includes(lowerCaseFilter) + ); +} + +function ItemCard({ item, toggleFunction, type, onCollection, isCurator }) { + item._onCollection = onCollection; + return ( + toggleFunction(item)} + key={item.name} + > + { + 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('marketplace:by', { author: item.author })} + + ) : ( + '' + )} + + {type === 'all' && !onCollection ? ( + + {variables.getMessage('marketplace:' + item.type)} + + ) : null} +
+ + ); +} + +function Items({ + isCurator, + type, + items, + collection, + toggleFunction, + collectionFunction, + onCollection, + filter, + moreByCreator, + showCreateYourOwn, +}) { + const shouldShowCollection = + ((collection && !onCollection && (filter === null || filter === '')) || + (type === 'collections' && !onCollection && (filter === null || filter === ''))) && + type !== 'preset_settings'; + + return ( + <> + {shouldShowCollection && ( +
+
+ {collection?.display_name} + {collection?.description} +
+ {collection?.news === true ? ( + + {variables.getMessage('marketplace:learn_more')} + + ) : ( +
+ )} +
+
{ + this.setState({ type: 'all' }); + this.getItems(); + }} + className="transition-all duration-200 bg-white rounded-full px-6 py-2 text-base text-black" + > + All +
+
{ + this.setState({ type: 'photo_packs' }); + this.getItems(); + }} + className="transition-all duration-200 bg-[#333] hover:bg-[#222222] cursor-pointer rounded-full px-6 py-2 text-base text-white" + > + Photo Packs +
+
{ + this.setState({ type: 'quote_packs' }); + this.getItems(); + }} + className="transition-all duration-200 bg-[#333] hover:bg-[#222222] cursor-pointer rounded-full px-6 py-2 text-base text-white" + > + Quote Packs +
+
+
+ {items + ?.filter((item) => filterItems(item, filter)) + .map((item, index) => ( + + ))} +
+
+ {!onCollection && showCreateYourOwn ? ( +
+ + {variables.getMessage('marketplace:cant_find')} + + {variables.getMessage('marketplace:knowledgebase_one') + ' '} + + {variables.getMessage('marketplace:knowledgebase_two')} + + {' ' + variables.getMessage('marketplace:knowledgebase_three')} + +
+ ) : null} + + ); +} + +const MemoizedItems = memo(Items); +export { MemoizedItems as default, MemoizedItems as Items }; diff --git a/src/features/marketplace/views/Added.jsx b/src/features/marketplace/views/Added.jsx index 19da2f70..38baee89 100644 --- a/src/features/marketplace/views/Added.jsx +++ b/src/features/marketplace/views/Added.jsx @@ -5,8 +5,8 @@ import { toast } from 'react-toastify'; import Modal from 'react-modal'; import { SideloadFailedModal } from '../components/Elements/SideloadFailedModal/SideloadFailedModal'; -import ItemPage from './ItemPage'; -import Items from '../components/Items/Items'; +import ItemPage from './oldItemPage'; +import Items from '../components/Items/OldItems'; import { Dropdown, FileUpload } from 'components/Form/Settings'; import { Header, CustomActions } from 'components/Layout/Settings'; import { Button } from 'components/Elements'; diff --git a/src/features/marketplace/views/Browse.jsx b/src/features/marketplace/views/Browse.jsx index c6100c00..124d9046 100644 --- a/src/features/marketplace/views/Browse.jsx +++ b/src/features/marketplace/views/Browse.jsx @@ -3,8 +3,8 @@ import { useState, useEffect } from 'react'; import { toast } from 'react-toastify'; import { MdWifiOff, MdLocalMall, MdOutlineArrowForward, MdLibraryAdd } from 'react-icons/md'; -import ItemPage from './ItemPage'; -import Items from '../components/Items/Items'; +import ItemPage from './oldItemPage'; +import Items from '../components/Items/OldItems'; import { Header } from 'components/Layout/Settings'; import { Button } from 'components/Elements'; diff --git a/src/features/marketplace/views/ItemPage.jsx b/src/features/marketplace/views/ItemPage.jsx index 6c66509c..4669627c 100644 --- a/src/features/marketplace/views/ItemPage.jsx +++ b/src/features/marketplace/views/ItemPage.jsx @@ -1,6 +1,8 @@ import variables from 'config/variables'; -import { PureComponent, Fragment } from 'react'; -import { toast } from 'react-toastify'; +import { useTab } from 'components/Elements/MainModal/backend/TabContext'; +import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; +import { useEffect, useState } from 'react'; +import { ShareModal } from 'components/Elements'; import { MdIosShare, MdFlag, @@ -14,465 +16,343 @@ import { MdClose, MdLibraryAdd, } from 'react-icons/md'; -import Modal from 'react-modal'; - import { Header } from 'components/Layout/Settings'; -import { Button } from 'components/Elements'; - -import { install, uninstall } from 'utils/marketplace'; -import { Carousel } from '../components/Elements/Carousel'; -import { ShareModal } from 'components/Elements'; -import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; -import { Items } from '../components/Items/Items'; - +import Modal from 'react-modal'; import Markdown from 'markdown-to-jsx'; +import { Button } from 'components/Elements'; +import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext'; +import { Carousel } from '../components/Elements/Carousel'; -class ItemPage extends PureComponent { - constructor(props) { - super(props); - console.log(this.props) - this.state = { - showUpdateButton: - this.props.data.local.installed === true && this.props.data.local.version !== this.props.data.version, - shareModal: false, - count: 5, - moreByCurator: [], - }; - this.buttons = { - uninstall: ( -
- )} - {this.props.data.data.in_collections?.length > 0 && ( -
-
- - {variables.getMessage('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} - -
-
- )} + )} + {selectedItem?.in_collections?.length > 0 && ( +
+
+ + {variables.getMessage('marketplace:product.part_of')} + + + this.props.toggleFunction( + 'collection', + selectedItem?.in_collections[0].name, + ) + }*/ + > + {selectedItem?.in_collections[0].display_name} + +
+
+ )} + + + ); + }; + + const locale = localStorage.getItem('language'); + const shortLocale = locale.includes('_') ? locale.split('_')[0] : locale; + let languageNames = new Intl.DisplayNames([shortLocale], { type: 'language' }); + + let dateObj, formattedDate; + if (selectedItem?.updated_at) { + dateObj = new Date(selectedItem?.updated_at); + formattedDate = new Intl.DateTimeFormat(shortLocale, { + year: 'numeric', + month: 'long', + day: '2-digit', + }).format(dateObj); + } + + useEffect(() => { + document.querySelector('#modal').scrollTop = 0; + }); + + return ( + <> + setShareModal(false)} + > + setShareModal(false)} + /> + +
+
+
+ {moreInfoItem( + , + variables.getMessage('marketplace:product.created_by'), + selectedItem?.author, + )} + {itemWarning()} +
+ {selectedItem?.photos && ( +
+
+ +
+
+ )} + {selectedItem?.settings && selectedItem?.screenshot_url !== null && ( + product { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + /> + )} +
+ {variables.getMessage('marketplace:product.description')} + {selectedItem?.description} +
+ + +
+ {sidePanel()} +
+ {/*{moreByCurator.length > 1 && ( +
+ + {variables.getMessage('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} + />
- {moreByCurator.length > 1 && ( -
- - {variables.getMessage('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 { ItemPage as default, ItemPage }; diff --git a/src/features/marketplace/views/newItemPage.jsx b/src/features/marketplace/views/newItemPage.jsx deleted file mode 100644 index 854b7018..00000000 --- a/src/features/marketplace/views/newItemPage.jsx +++ /dev/null @@ -1,374 +0,0 @@ -import variables from 'config/variables'; -import { useTab } from 'components/Elements/MainModal/backend/TabContext'; -import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; -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'; -import { Button } from 'components/Elements'; -import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext'; -import { Carousel } from '../components/Elements/Carousel'; - -const NewItemPage = () => { - const { subTab } = useTab(); - const controller = new AbortController(); - const [count, setCount] = useState(5); - const [item, setItemData] = useState(null); - const [shareModal, setShareModal] = useState(false); - const { selectedItem } = useMarketData(); - - const getName = (name) => { - const nameMappings = { - photos: 'photo_packs', - quotes: 'quote_packs', - settings: 'preset_settings', - }; - return nameMappings[name] || name; - }; - - 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('marketplace:product.sideload_warning')); - } - - if (this.props.data.data.image_api === true) { - return template(variables.getMessage('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('marketplace:product.not_in_language')); - } - }*/ - - return null; - }; - - const ItemDetails = () => { - return ( -
- - {variables.getMessage('marketplace:product.details')} - -
- {selectedItem?.updated_at && - moreInfoItem( - , - variables.getMessage('marketplace:product.updated_at'), - formattedDate, - )} - {selectedItem?.quotes && - moreInfoItem( - , - variables.getMessage('marketplace:product.no_quotes'), - selectedItem.quotes.length, - )} - {selectedItem?.photos && - moreInfoItem( - , - variables.getMessage('marketplace:product.no_images'), - selectedItem.photos.length, - )} - {selectedItem?.quotes && selectedItem?.language - ? moreInfoItem( - , - variables.getMessage('settings:sections.language.title'), - languageNames.of(selectedItem.language), - ) - : null} - {moreInfoItem( - , - variables.getMessage('settings:sections.background.type.title'), - variables.getMessage( - 'marketplace:' + getName(selectedItem.type), - ) || 'marketplace', - )} -
-
- ); - }; - - const ItemShowcase = () => { - switch (selectedItem.type) { - case 'quotes': - return ( - <> - - - - - - - {selectedItem.quotes.slice(0, count).map((quote, index) => ( - - - - - ))} - -
{variables.getMessage('settings:sections.quote.title')}{variables.getMessage('settings:sections.quote.author')}
{quote.quote}{quote.author}
-
- count === selectedItem.quotes.length}> - {count !== selectedItem.quotes.length - ? variables.getMessage('marketplace:product.show_all') - : variables.getMessage('marketplace:product.show_less')} - -
- - ); - case 'settings': - return ( - <> - - - - - - - {Object.entries(selectedItem.settings) - .slice(0, count) - .map(([key, value]) => ( - - - - - ))} - -
{variables.getMessage('marketplace:product.setting')}{variables.getMessage('marketplace:product.value')}
{key}{value}
-
- this.incrementCount('settings')}> - {count !== selectedItem.settings.length - ? variables.getMessage('marketplace:product.show_all') - : variables.getMessage('marketplace:product.show_less')} - -
- - ); - default: - return null; - } - }; - - const locale = localStorage.getItem('language'); - const shortLocale = locale.includes('_') ? locale.split('_')[0] : locale; - let languageNames = new Intl.DisplayNames([shortLocale], { type: 'language' }); - - let dateObj, formattedDate; - if (selectedItem.updated_at) { - dateObj = new Date(selectedItem.updated_at); - formattedDate = new Intl.DateTimeFormat(shortLocale, { - year: 'numeric', - month: 'long', - day: '2-digit', - }).format(dateObj); - } - - return ( - <> - setShareModal(false)} - > - setShareModal(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} - />*/} -
-
-
- {moreInfoItem( - , - variables.getMessage('marketplace:product.created_by'), - selectedItem.author, - )} - {itemWarning()} -
- {selectedItem.photos && ( -
-
- -
-
- )} - {/*{selectedItem.settings && ( - product { - e.target.onerror = null; - e.target.src = placeholderIcon; - }} - /> - )}*/} -
- - {variables.getMessage('marketplace:product.description')} - - {selectedItem.description} -
- - -
-
-
- icon { - e.target.onerror = null; - e.target.src = placeholderIcon; - }} - /> - {localStorage.getItem('welcomePreview') !== 'true' ? ( -
- )} - {selectedItem.in_collections?.length > 0 && ( -
-
- - {variables.getMessage('marketplace:product.part_of')} - - - this.props.toggleFunction( - 'collection', - selectedItem.in_collections[0].name, - ) - }*/ - > - {selectedItem.in_collections[0].display_name} - -
-
- )} -
-
- - {/*{moreByCurator.length > 1 && ( -
- - {variables.getMessage('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/marketplace/views/oldItemPage.jsx b/src/features/marketplace/views/oldItemPage.jsx new file mode 100644 index 00000000..27c67ec6 --- /dev/null +++ b/src/features/marketplace/views/oldItemPage.jsx @@ -0,0 +1,478 @@ +import variables from 'config/variables'; +import { PureComponent, Fragment } from 'react'; +import { toast } from 'react-toastify'; +import { + MdIosShare, + MdFlag, + MdAccountCircle, + MdCalendarMonth, + MdFormatQuote, + MdImage, + MdTranslate, + MdOutlineWarning, + MdStyle, + MdClose, + MdLibraryAdd, +} from 'react-icons/md'; +import Modal from 'react-modal'; + +import { Header } from 'components/Layout/Settings'; +import { Button } from 'components/Elements'; + +import { install, uninstall } from 'utils/marketplace'; +import { Carousel } from '../components/Elements/Carousel'; +import { ShareModal } from 'components/Elements'; +import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; +import { Items } from '../components/Items/OldItems'; + +import Markdown from 'markdown-to-jsx'; + +class ItemPage extends PureComponent { + constructor(props) { + super(props); + console.log(this.props) + this.state = { + showUpdateButton: + this.props.data.local.installed === true && this.props.data.local.version !== this.props.data.version, + shareModal: false, + count: 5, + moreByCurator: [], + }; + this.buttons = { + uninstall: ( + + + + ); + }; useEffect(() => { if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { return; } getItems(); - }, []); + getCollections(); + }, []); // Only runs once when the component mounts + + useEffect(() => { + switch (itemsFilter) { + case 'all': + setFilteredItems(items); + break; + case 'photo_packs': + setFilteredItems(items.filter((item) => item.type === 'photo_packs')); + break; + case 'quote_packs': + setFilteredItems(items.filter((item) => item.type === 'quote_packs')); + break; + case 'preset_settings': + setFilteredItems(items.filter((item) => item.type === 'preset_settings')); + break; + default: + setFilteredItems(items); + } + }, [itemsFilter, items]); // Only depends on itemsFilter and items return ( @@ -27,12 +152,19 @@ function Marketplace(props) { transition={{ duration: 0.8 }} > {subTab === '' ? ( - - - + <> + + +
+ {FilterOptions()} +
{ItemView()}
+
+ + + ) : ( - + )}