improve modals

src/components/ErrorBoundary.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default class ErrorBoundary extends React.PureComponent {
+    constructor(props) {
+      super(props);
+      this.state = { hasError: false, error: '' };
+    }
+  
+    static getDerivedStateFromError(error) {
+        console.log(error);
+        return { hasError: true, error: error };
+    }
+    
+    render() {
+      if (this.state.hasError) {
+        return (
+            <div style={{'text-align': 'center'}}>
+                <h1>Error</h1>
+                <p>Failed to load this component of Mue.</p>
+                <button class='refresh' onClick={() => window.location.reload()}>Refresh</button>
+            </div>
+        )
+      }
+  
+      return this.props.children; 
+    }
+  }

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

@@ -4,11 +4,11 @@ import Checkbox from '../Checkbox';
 export default function AppearanceSettings (props) {
   return (
     <div>
-        <h2>Appearance</h2>
+        <h2>{props.language.title}</h2>
         <Checkbox name='darkTheme' text={props.language.dark} />
-        <Checkbox name='brightnessTime' text={props.language.experimental.night_mode} betaFeature={true} />
+        <Checkbox name='brightnessTime' text={props.language.night_mode} betaFeature={true} />
         <h3>Accessibility</h3>
-        <Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
+        <Checkbox name='animations' text={props.language.animations} betaFeature={true} />
         <ul>
             <p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
             <input className='range' type='range' min='50' max='200' value={100} />

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

@@ -210,7 +210,7 @@ export default class BackgroundSettings extends React.PureComponent {
         <div>
           {gradientInputs}
           {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled &&
-           !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.background.add_colour}</button>) : null
+           !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.add_colour}</button>) : null
           }
         </div>
       );
@@ -222,23 +222,23 @@ export default class BackgroundSettings extends React.PureComponent {
           <Checkbox name='background' text='Enabled' />
           <h3>Buttons</h3>
           <ul>
-            <Checkbox name='view' text={this.props.language.background.view} />
-            <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
-            <Checkbox name='refresh' text={this.props.language.background.refresh} />
+            <Checkbox name='view' text={this.props.language.view} />
+            <Checkbox name='favouriteEnabled' text={this.props.language.favourite} />
+            <Checkbox name='refresh' text={this.props.language.refresh} />
           </ul>
           <h3>Effects</h3>
           <ul>
-            <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
+            <p>{this.props.language.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
             <input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
           </ul>
           <ul>
-            <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
+            <p>{this.props.language.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
             <input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
           </ul>
           <h3>Source</h3>
           <ul>
             <Dropdown
-              label={this.props.language.background.api}
+              label={this.props.language.api}
               name='backgroundapi'
               id='backgroundAPI'
               onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
@@ -247,16 +247,16 @@ export default class BackgroundSettings extends React.PureComponent {
             </Dropdown>
           </ul>
           <ul>
-            <p>{this.props.language.background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+            <p>{this.props.language.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
             <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
           </ul>
           <ul>
-            <p>{this.props.language.background.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
-            <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
+            <p>{this.props.language.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+            <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.upload}</button>
             <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
           </ul>
           <ul>
-            <p>{this.props.language.background.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
+            <p>{this.props.language.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
             <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
             {colourSettings}
           </ul>

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

@@ -41,18 +41,18 @@ export default class GreetingSettings extends React.PureComponent {
   render() {
     return (
       <div>
-        <h2>Greeting</h2>
-        <Checkbox name='greeting'>Enabled</Checkbox>
-        <Checkbox name='events' text={this.props.language.greeting.events} />
-        <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
+        <h2>{this.props.language.title}</h2>
+        <Checkbox name='greeting' text={'Enabled'}>Enabled</Checkbox>
+        <Checkbox name='events' text={this.props.language.events} />
+        <Checkbox name='defaultGreetingMessage' text={this.props.language.default} />
         <ul>
-          <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span></p>
+          <p>{this.props.language.name} <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
           <input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
         </ul>
         <h3>Birthday</h3>
-        <Checkbox name='birthdayenabled' text={this.props.language.greeting.birthday_enabled} />
+        <Checkbox name='birthdayenabled' text={this.props.language.birthday_enabled} />
         <ul>
-          <p>{this.props.language.greeting.birthday_date}</p>
+          <p>{this.props.language.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
         </ul>
       </div>

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

@@ -58,9 +58,9 @@ export default class SearchSettings extends React.PureComponent {
     return (
        <div className='section'>
           <h2>Search</h2>
-          <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} />
+          <Checkbox name='voiceSearch' text={this.props.language.voice_search} />
           <ul>
-            <Dropdown label={this.props.language.searchbar.search_engine}
+            <Dropdown label={this.props.language.search_engine}
               name='searchEngine'
               id='searchEngine'
               onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
@@ -71,7 +71,7 @@ export default class SearchSettings extends React.PureComponent {
             </Dropdown>
           </ul>
           <ul id='searchEngineInput' style={{ display: 'none' }}>
-            <p style={{ 'marginTop': '0px' }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
+            <p style={{ 'marginTop': '0px' }}>{this.props.language.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
             <input type='text' id='customSearchEngine'></input>
           </ul>
         </div>

src/components/modals/tabs/Settings.jsx

@@ -23,16 +23,16 @@ export default function Settings (props) {
             <Quote language={props.language.sections.quote}/>
           </div>
           <div label={props.language.sections.greeting.title}>
-            <Greeting language={props.language} toastLanguage={props.toastLanguage} />
+            <Greeting language={props.language.sections.greeting} toastLanguage={props.language.toasts} />
           </div>
           <div label={props.language.sections.background.title}>
-            <Background language={props.language} toastLanguage={props.toastLanguage}/>
+            <Background language={props.language.sections.background} toastLanguage={props.toastLanguage}/>
           </div>
           <div label={props.language.sections.search.title}>
-            <Search language={props.language}/>
+            <Search language={props.language.sections.search}/>
           </div>
           <div label={props.language.sections.appearance}>
-            <Appearance language={props.language} toastLanguage={props.toastLanguage}/>
+            <Appearance language={props.language.sections.appearance} toastLanguage={props.toastLanguage}/>
           </div>
           <div label={props.language.sections.language}>
             <Language language={props.language}/>

src/components/modals/tabs/backend/Tabs.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Tab from './Tab';
+import ErrorBoundary from '../../../ErrorBoundary';
 
 export default class Tabs extends React.PureComponent {
   constructor(props) {
@@ -43,10 +44,12 @@ export default class Tabs extends React.PureComponent {
           })}
         </ul>
         <div className={tabClass}>
+          <ErrorBoundary>
           {this.props.children.map((child) => {
             if (child.props.label !== this.state.currentTab) return undefined;
             return child.props.children;
           })}
+          </ErrorBoundary>
         </div>
       </span>
     );