fix: item page title, "part of" collection link, "more like" links...

...and filter, scroll to top of item pages

src/features/marketplace/components/Items/Items.jsx

@@ -15,7 +15,8 @@ function filterItems(item, filter) {
   );
 }
 
-function ItemPage({ item, toggleFunction, type, onCollection, isCurator }) {
+function ItemCard({ item, toggleFunction, type, onCollection, isCurator }) {
+  item._onCollection = onCollection
   return (
     <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
       <img
@@ -117,7 +118,7 @@ function Items({
         {items
           ?.filter((item) => filterItems(item, filter))
           .map((item, index) => (
-            <ItemPage
+            <ItemCard
               isCurator={isCurator}
               item={item}
               toggleFunction={toggleFunction}

src/features/marketplace/views/Browse.jsx

@@ -50,8 +50,10 @@ class Marketplace extends PureComponent {
     this.controller = new AbortController();
   }
 
-  async toggle(type, data) {
-    if (type === 'item') {
+  async toggle(pageType, data) {
+    console.log(pageType, data)
+    console.log('props', this.props)
+    if (pageType === 'item') {
       let info;
       // get item info
       try {
@@ -94,6 +96,7 @@ class Marketplace extends PureComponent {
 
       this.setState({
         item: {
+          onCollection: data._onCollection,
           type: info.data.type,
           display_name: info.data.name,
           author: info.data.author,
@@ -108,17 +111,21 @@ class Marketplace extends PureComponent {
         },
         button: button,
       });
-
+      document.querySelector('#modal').scrollTop = 0;
       variables.stats.postEvent('marketplace-item', `${this.state.item.display_name} viewed`);
-    } else if (type === 'collection') {
+    } else if (pageType === 'collection') {
+      console.log(1)
       this.setState({
         done: false,
+        item: {},
       });
+      console.log(2)
       const collection = await (
         await fetch(`${variables.constants.API_URL}/marketplace/collection/${data}`, {
           signal: this.controller.signal,
         })
       ).json();
+      console.log(3)
       this.setState({
         items: collection.data.items,
         collectionTitle: collection.data.display_name,
@@ -127,7 +134,9 @@ class Marketplace extends PureComponent {
         collection: true,
         done: true,
       });
+      console.log(4)
     } else {
+      console.log(69)
       this.setState({
         item: {},
       });
@@ -335,7 +344,7 @@ class Marketplace extends PureComponent {
         <ItemPage
           data={this.state.item}
           button={this.state.button}
-          toggleFunction={() => this.toggle()}
+          toggleFunction={(...args) => this.toggle(...args)}
           addonInstalled={this.state.item.addonInstalled}
           addonInstalledVersion={this.state.item.addonInstalledVersion}
           icon={this.state.item.screenshot_url}

src/features/marketplace/views/ItemPage.jsx

@@ -41,18 +41,8 @@ class ItemPage extends PureComponent {
       const { data } = await (
         await fetch(`${variables.constants.API_URL}/marketplace/curator/${name}`)
       ).json();
-      const convertedType = (() => {
-        const map = {
-          photos: 'photo_packs',
-          quotes: 'quote_packs',
-          settings: 'preset_settings',
-        };
-        return map[this.props.data.data.type];
-      })();
       this.setState({
-        moreByCurator: data.items.filter(
-          (item) => item.type === convertedType && item.name !== this.props.data.data.name,
-        ),
+        moreByCurator: data.items,
       });
     } catch (e) {
       console.error(e);
@@ -94,6 +84,18 @@ class ItemPage extends PureComponent {
     const locale = localStorage.getItem('language');
     const shortLocale = locale.includes('_') ? locale.split('_')[0] : locale;
     let languageNames = new Intl.DisplayNames([shortLocale], { type: 'language' });
+    const convertedType = (() => {
+      const map = {
+        photos: 'photo_packs',
+        quotes: 'quote_packs',
+        settings: 'preset_settings',
+      };
+      return map[this.props.data.data.type];
+    })();
+    const moreByCurator = this.state.moreByCurator
+      .filter((item) => item.type === convertedType && item.name !== this.props.data.data.name)
+      .sort(() => 0.5 - Math.random())
+      .slice(0, 3);
 
     if (!this.props.data.display_name) {
       return null;
@@ -184,7 +186,7 @@ class ItemPage extends PureComponent {
           title={
             this.props.addons
               ? variables.getMessage('modals.main.addons.added')
-              : this.props.data.data.in_collections?.length > 0
+              : this.props.data.onCollection && this.props.data.data.in_collections?.length > 0
                 ? this.props.data.data.in_collections[0].display_name
                 : variables.getMessage('modals.main.navbar.marketplace')
           }
@@ -399,7 +401,7 @@ class ItemPage extends PureComponent {
             </div>
           </div>
         </div>
-        {this.state.moreByCurator.length > 1 && (
+        {moreByCurator.length > 1 && (
           <div className="moreFromCurator">
             <span className="title">
               {variables.getMessage('modals.main.marketplace.product.more_from_curator', {
@@ -410,7 +412,7 @@ class ItemPage extends PureComponent {
               <Items
                 isCurator={true}
                 type={this.props.data.data.type}
-                items={this.state.moreByCurator.sort(() => 0.5 - Math.random()).slice(0, 3)}
+                items={moreByCurator}
                 onCollection={this.state.collection}
                 toggleFunction={(input) => this.props.toggleFunction('item', input)}
                 collectionFunction={(input) => this.props.toggleFunction('collection', input)}