Finally stop using react-scripts

src/components/modals/Feedback.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-const FeedbackModal = () => {
+export default function FeedbackModal(props) {
     return (
         <div className='feedback'>
           <h1>Give us feedback</h1>
-          <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+          <span className='closeModal' onClick={props.modalClose}>&times;</span>
            <label>How would you rate your experience of this Mue Build?</label>
            <br/><br/>
            <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
@@ -20,6 +20,4 @@ const FeedbackModal = () => {
            <button>Submit</button>
        </div>
     );
-}
-
-export default FeedbackModal;
+}

src/components/modals/Update.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import * as Constants from '../../modules/constants';
 
 export default class Update extends React.PureComponent {

src/components/modals/Welcome.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import EmailIcon from '@material-ui/icons/Email';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import ForumIcon from '@material-ui/icons/Forum';
 
-const WelcomeModal = (props) => {
+export default function WelcomeModal(props) {
   return (
     <div className='welcomeContent'>
         <span className='closeModal' onClick={props.modalClose}>&times;</span>
@@ -22,6 +23,4 @@ const WelcomeModal = (props) => {
         </div>
        </div>
   );
-}
-
-export default WelcomeModal;
+}

src/components/modals/marketplace/Item.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 export default class Item extends React.PureComponent {

src/components/modals/settings/Checkbox.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import SettingsFunctions from '../../../modules/helpers/settings';
+
 import CheckboxUI from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 

src/components/modals/settings/FileUpload.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { toast } from 'react-toastify';
 
 export default class FileUpload extends React.PureComponent {
@@ -16,7 +17,7 @@ export default class FileUpload extends React.PureComponent {
 
           reader.readAsDataURL(file);
         }
-        
+
         reader.addEventListener('load', (e) => this.props.loadFunction(e));
     };
   }

src/components/modals/settings/Section.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import Slider from './Slider';
+
 import ExpandMore from '@material-ui/icons/ExpandMore';
 
 export default class Section extends React.PureComponent {

src/components/modals/settings/Slider.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import SettingsFunctions from '../../../modules/helpers/settings';
 
 export default class Slider extends React.PureComponent {
@@ -11,7 +12,7 @@ export default class Slider extends React.PureComponent {
 
   handleChange(name) {
     SettingsFunctions.setItem(name);
-    
+
     this.setState({ 
       checked: (this.state.checked === true) ? false : true 
     });

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

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import Section from '../Section';
 import Checkbox from '../Checkbox';
+
 import DatePicker from 'react-date-picker';
 import { toast } from 'react-toastify';
 import { Beforeunload } from 'react-beforeunload';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import Dropdown from '../Dropdown';
 
-const LanguageSettings = (props) => {
+export default function LanguageSettings (props) {
   return (
     <div className='section'>
       <h4 htmlFor='language' className='nodropdown'>{props.language.language}</h4>
@@ -18,6 +18,4 @@ const LanguageSettings = (props) => {
       </Dropdown>
     </div>
   );
-}
-
-export default LanguageSettings;
+}

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

@@ -1,6 +1,9 @@
 import React from 'react';
+
 import SettingsFunctions from '../../../../modules/helpers/settings';
+
 import { toast } from 'react-toastify';
+
 import Section from '../Section';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';

src/components/modals/tabs/Addons.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
+
 import LocalMallIcon from '@material-ui/icons/LocalMall';
-import { toast } from 'react-toastify';
 import Item from '../marketplace/Item';
 import Items from '../marketplace/Items';
 import FileUpload from '../settings/FileUpload';
+
+import { toast } from 'react-toastify';
+
 import MarketplaceFunctions from '../../../modules/helpers/marketplace';
 
 export default class Addons extends React.PureComponent {
@@ -58,7 +61,7 @@ export default class Addons extends React.PureComponent {
             document.getElementById('marketplace').style.display = 'block';
             document.getElementById('item').style.display = 'none';
         }
-        
+
         this.setState({ 
             button: this.buttons.uninstall 
         });

src/components/modals/tabs/Marketplace.jsx

@@ -1,12 +1,16 @@
 import React from 'react';
+
 import WifiOffIcon from '@material-ui/icons/WifiOff';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import { toast } from 'react-toastify';
 import Item from '../marketplace/Item';
-import MarketplaceFunctions from '../../../modules/helpers/marketplace';
-import * as Constants from '../../../modules/constants';
 import Items from '../marketplace/Items';
 
+import MarketplaceFunctions from '../../../modules/helpers/marketplace';
+
+import { toast } from 'react-toastify';
+
+import * as Constants from '../../../modules/constants';
+
 export default class Marketplace extends React.PureComponent {
   constructor(...args) {
     super(...args);

src/components/modals/tabs/Settings.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+
 import SettingsFunctions from '../../../modules/helpers/settings';
 import Checkbox from '../settings/Checkbox';
 import Dropdown from '../settings/Dropdown';
 import Section from '../settings/Section';
 import FileUpload from '../settings/FileUpload';
+
 import { toast } from 'react-toastify';
 
 import BackgroundSettings from '../settings/sections/BackgroundSettings';

src/components/widgets/background/Background.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import * as Constants from '../../../modules/constants';
 
 import './scss/index.scss';

src/components/widgets/background/Favourite.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';
 

src/components/widgets/background/Maximise.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 
 export default class View extends React.PureComponent {
@@ -18,7 +19,7 @@ export default class View extends React.PureComponent {
 
     viewStuff() {
       const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; // elements to hide
-      
+
       elements.forEach((element) => {
           try {
               (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';

src/components/widgets/background/PhotoInformation.jsx

@@ -5,7 +5,7 @@ import Camera from '@material-ui/icons/PhotoCamera';
 import Resolution from '@material-ui/icons/Crop';
 import Photographer from '@material-ui/icons/Person';
 
-const PhotoInformation = (props) => {
+export default function PhotoInformation(props) {
   return (
     <div className='photoInformation'>
       <h1 id='photographer'>{props.language.credit}</h1>
@@ -26,6 +26,4 @@ const PhotoInformation = (props) => {
       <span id='credit' style={{ 'display': 'none' }}></span>
     </div>
   );
-}
-
-export default PhotoInformation;
+}

src/components/widgets/navbar/Notes.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import CopyIcon from '@material-ui/icons/FileCopyRounded';
-import Pin from './Pin';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 
+import Pin from './Pin';
+
 export default class Notes extends React.PureComponent {
     constructor(...args) {
         super(...args);
@@ -21,7 +23,7 @@ export default class Notes extends React.PureComponent {
 
     pin() {
         document.getElementById('noteContainer').classList.toggle('visibilityshow');
-        
+
         if (localStorage.getItem('notesPinned') === 'true') {
             localStorage.setItem('notesPinned', false);
         } else {

src/components/widgets/navbar/Pin.jsx

@@ -16,13 +16,11 @@
 */
 import React from 'react';
 
-const Pin = () => {
+export default function Pin() {
     return (
         <svg xmlns='http://www.w3.org/2000/svg' enableBackground='new 0 0 24 24' viewBox='0 0 24 24' fill='black' width='18px' height='18px'>
           <g><rect fill='none' height='24' width='24'/></g>
           <g><path d='M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z' fillRule='evenodd'/></g>
         </svg>
     );
-}
-
-export default Pin;
+}

src/components/widgets/quote/Quote.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
+
 import FileCopy from '@material-ui/icons/FilterNone';
-import { toast } from 'react-toastify';
-import * as Constants from '../../../modules/constants';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';
 
+import { toast } from 'react-toastify';
+
+import * as Constants from '../../../modules/constants';
+
 import './quote.scss';
 
-const quotes = require('./offline_quotes.json');
 
 export default class Quote extends React.PureComponent {
   constructor(...args) {
@@ -23,6 +25,8 @@ export default class Quote extends React.PureComponent {
   }
 
   doOffline() {
+    const quotes = require('./offline_quotes.json');
+
     const quote = quotes[Math.floor(Math.random() * quotes.length)]; // Get a random quote from our local package
     this.setState({
       quote: '"' + quote.quote + '"',

src/components/widgets/search/Search.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import SearchIcon from '@material-ui/icons/Search';
 import MicIcon from '@material-ui/icons/Mic';
 
@@ -33,7 +34,7 @@ export default class Search extends React.PureComponent {
 
     const setting = localStorage.getItem('searchEngine');
     const info = searchEngines.find(i => i.settingsName === setting);
-    
+
     if (info !== undefined) {
       url = info.url;
       if (info.query) query = info.query;

src/components/widgets/time/Clock.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Analog from 'react-clock';
 
 import './clock.scss';
@@ -28,7 +29,7 @@ export default class Clock extends React.PureComponent {
       // Analog clock
       if (localStorage.getItem('analog') === 'true') {
         require('react-clock/dist/Clock.css'); // load analog clock css
-        
+
         this.setState({ 
           time: now 
         });

src/components/widgets/time/Date.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import dtf from '@eartharoid/dtf';
 
 export default class DateWidget extends React.PureComponent {