Make it easier to add languages and fix console error with marketplace/addons

src/components/modals/marketplace/Item.jsx

@@ -19,6 +19,11 @@ export default function Item(props) {
       // ignore
     }
 
+    let iconsrc = 'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon; // prevent console error
+    if (!props.data.icon) {
+      iconsrc = null;
+    }
+
     return (
       <div id='item'>
         <br/>
@@ -27,7 +32,7 @@ export default function Item(props) {
         <h1>{props.data.name}</h1>
         {props.button}
         <br/><br/>
-        <img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon} />
+        <img alt='product' draggable={false} src={iconsrc} />
         <div className='informationContainer'>
           <div className='productInformation'>
             <h4>{props.language.information}</h4>

src/components/modals/settings/sections/LanguageSettings.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import Dropdown from '../Dropdown';
 
+const languages = require('../../../../modules/languages.json');
+
 export default function LanguageSettings (props) {
   return (
     <div className='section'>
@@ -8,13 +10,10 @@ export default function LanguageSettings (props) {
       <Dropdown
         name='language'
         id='language'
-        onChange={() => localStorage.setItem('language', document.getElementById('language').value)} >
-          <option className='choices' value='en'>English</option>
-          <option className='choices' value='es'>Español</option>
-          <option className='choices' value='fr'>Français</option>
-          <option className='choices' value='nl'>Nederlands</option>
-          <option className='choices' value='no'>Norsk</option>
-          <option className='choices' value='ru'>Pусский</option>
+        onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
+          {languages.map(language => 
+             <option className='choices' value={language.code} key={language.code}>{language.text}</option>
+          )}
       </Dropdown>
     </div>
   );

src/modules/helpers/settings.js

@@ -1,4 +1,5 @@
 const defaultSettings = require('../default_settings.json');
+const languages = require('../languages.json');
 
 const saveFile = (data, filename = 'file') => {
     if (typeof data === 'object') {
@@ -55,10 +56,10 @@ export default class SettingsFunctions {
         }
 
         // Languages
-        const languages = ['es', 'fr', 'nl', 'no', 'ru'];
+        const languageCodes = languages.map(({ code }) => code).splice(1); // remove "en" from list
         const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
 
-        if (languages.includes(browserLanguage)) {
+        if (languageCodes.includes(browserLanguage)) {
             localStorage.setItem('language', browserLanguage);
             document.documentElement.lang = browserLanguage;
         } else {

src/modules/languages.json

@@ -0,0 +1,26 @@
+[
+    {
+        "text": "English",
+        "code": "en"
+    },
+    {
+        "text": "Español",
+        "code": "es"
+    }, 
+    {
+        "text": "Français",
+        "code": "fr"
+    },
+    {
+        "text": "Nederlands",
+        "code": "nl"
+    },
+    {
+        "text": "Norsk",
+        "code": "no"
+    },
+    {
+        "text": "Pусский",
+        "code": "ru"
+    }
+]