fix: start to fix marketplace (WIP)

src/components/modals/main/marketplace/Item.jsx

@@ -23,7 +23,7 @@ export default function Item(props) {
   }
 
   // prevent console error
-  let iconsrc = 'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon;
+  let iconsrc = window.constants.DDG_PROXY + props.data.icon;
   if (!props.data.icon) {
     iconsrc = null;
   }
@@ -31,12 +31,12 @@ export default function Item(props) {
   return (
     <div id='item'>
       <br/>
-      <ArrowBackIcon className='backArrow' onClick={props.function} />
+      <ArrowBackIcon className='backArrow' onClick={props.toggleFunction}/>
       <br/>
       <h1>{props.data.name}</h1>
       {props.button}
       <br/><br/>
-      <img alt='product' draggable={false} src={iconsrc} />
+      <img alt='product' draggable='false' src={iconsrc}/>
       <div className='informationContainer'>
         <div className='productInformation'>
           <h4>{language.information}</h4>

src/components/modals/main/marketplace/Items.jsx

@@ -8,14 +8,15 @@ export default function Items(props) {
 
   return (
     <div className='items'>
-      {props.items.map((item) =>
-      <div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
-        <img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
-        <div className='details'>
-          <h4>{item.display_name ? item.display_name : item.name}</h4>
-          <p>{item.author}</p>
+      {props.items.map((item) => (
+        <div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
+          <img alt='icon' draggable='false' src={window.constants.DDG_PROXY + item.icon_url} />
+          <div className='details'>
+            <h4>{item.display_name ? item.display_name : item.name}</h4>
+            <p>{item.author}</p>
+          </div>
         </div>
-      </div>)}
+      ))}
     </div>
   );
 }

src/components/modals/main/marketplace/sections/Added.jsx

@@ -109,14 +109,14 @@ export default class Added extends React.PureComponent {
     }
 
     return (
-      <React.Fragment>
+      <>
         <div id='marketplace'>
           <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.manage('install', JSON.parse(e.target.result))} />
           <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button>
           {content}
         </div>
-        <Item data={this.state.item_data} button={this.state.button} />
-      </React.Fragment>
+        <Item data={this.state.item_data} button={this.state.button} toggleFunction={() => this.toggle()} />
+      </>
     );
   }
 }

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import WifiOffIcon from '@material-ui/icons/WifiOff';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import Item from '../Item';
 import Items from '../Items';
 
@@ -41,9 +40,9 @@ export default class Marketplace extends React.PureComponent {
     switch (type) {
       case 'item':
         let info;
-      // get item info
+        // get item info
         try {
-          info = await (await fetch(`${window.window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
+          info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
         } catch (e) {
           return toast(this.props.toastLanguage.error);
         }
@@ -82,8 +81,8 @@ export default class Marketplace extends React.PureComponent {
   }
 
   async getItems() {
-    const { data } = await (await fetch(window.window.constants.MARKETPLACE_URL + '/all')).json();
-    const featured = await (await fetch(window.window.constants.MARKETPLACE_URL + '/featured')).json();
+    const { data } = await (await fetch(window.constants.MARKETPLACE_URL + '/all')).json();
+    const featured = await (await fetch(window.constants.MARKETPLACE_URL + '/featured')).json();
 
     this.setState({
       items: data[this.props.type],
@@ -135,21 +134,21 @@ export default class Marketplace extends React.PureComponent {
 
     if (navigator.onLine === false) {
       return errorMessage(
-        <React.Fragment>
+        <>
           <WifiOffIcon/>
           <h1>Offline</h1>
           <p className='description'>Mue down!</p>
-        </React.Fragment>
+        </>
       );
     }
 
     if (localStorage.getItem('offlineMode') === 'true') {
       return errorMessage(
-        <React.Fragment>
+        <>
           <WifiOffIcon/>
           <h1>Offline mode is enabled</h1>
           <p className='description'>Please turn off offline mode to access the marketplace</p>
-        </React.Fragment>
+        </>
       );
     }
 
@@ -158,7 +157,7 @@ export default class Marketplace extends React.PureComponent {
     }
 
     return (
-      <React.Fragment>
+      <>
         <div id='marketplace'>
           <div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
             <p>{this.state.featured.title}</p>
@@ -169,8 +168,8 @@ export default class Marketplace extends React.PureComponent {
             items={this.state.items.slice(0, 3)}
             toggleFunction={(input) => this.toggle('item', input)} />
         </div>
-        <Item data={this.state.item_data} button={this.state.button} />
-      </React.Fragment>
+        <Item data={this.state.item_data} button={this.state.button} toggleFunction={() => this.toggle()} />
+      </>
     );
   }
 }

src/scss/modules/_marketplace.scss

@@ -41,8 +41,8 @@
 
     .details {
       position: absolute;
-      left: 90px;
-      top: 15px;
+      left: 85px;
+      top: -15px;
 
       img {
         margin-left: 10px;
@@ -52,6 +52,7 @@
 
     p {
       margin-top: 5px;
+      line-height: 20px;
     }
 
     &:hover {
@@ -107,6 +108,7 @@ p.description {
 
 .informationContainer {
   float: right;
+  margin-right: 15px;
 }
 
 .productInformation {
@@ -116,9 +118,15 @@ p.description {
   width: 200px;
   border-radius: 12px;
 
+  h4 {
+    cursor: initial !important;
+  }
+
   li {
     margin-left: -4px;
     list-style: none;
+    font-size: 16px;
+    cursor: initial !important;
 
     &.header {
       text-transform: uppercase;