unfinished date feature

src/App.jsx

@@ -8,10 +8,11 @@ import Search from './components/widgets/Search';
 import Maximise from './components/widgets/Maximise';
 import Favourite from './components/widgets/Favourite';
 import PhotoInformation from './components/widgets/PhotoInformation';
+import Date from './components/widgets/Date';
 
 import Navbar from './components/Navbar';
 
-import SettingsFunctions from './modules/settingsFunctions';
+import SettingsFunctions from './modules/helpers/settings';
 import { ToastContainer } from 'react-toastify';
 import Modal from 'react-modal';
 import merge from 'lodash.merge';
@@ -65,9 +66,10 @@ export default class App extends React.PureComponent {
           <Navbar mainModalOpen={() => this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} language={language} />
           <Greeting language={language.greeting} />
           <Clock/>
+          <Date/>
           <Quote language={language.toasts} />
           <PhotoInformation language={language} />
-          <div class="bottom-navbar">
+          <div className='bottom-navbar'>
             <Maximise/>
             <Favourite/>
           </div>

src/components/modals/settings/Checkbox.jsx

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

src/components/modals/settings/Slider.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SettingsFunctions from '../../../modules/settingsFunctions';
+import SettingsFunctions from '../../../modules/helpers/settings';
 
 export default class Slider extends React.PureComponent {
   constructor(...args) {

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import SettingsFunctions from '../../../../modules/helpers/settings';
+import Section from '../Section';
+import Dropdown from '../Dropdown';
+
+export default class DateSettings extends React.PureComponent {
+  componentDidMount() {
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <Section title={this.props.language.date.title} name='date'>
+          settings
+        </Section>
+      </React.Fragment>
+    );
+  }
+}

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import SettingsFunctions from '../../../../modules/settingsFunctions';
+import SettingsFunctions from '../../../../modules/helpers/settings';
 import { toast } from 'react-toastify';
 import Section from '../Section';
 import Dropdown from '../Dropdown';
 
-const searchEngines = require('../../../../modules/searchEngines.json');
+const searchEngines = require('../../../../modules/json/search_engines.json');
 
 export default class SearchSettings extends React.PureComponent {
   resetSearch() {
@@ -26,7 +26,6 @@ export default class SearchSettings extends React.PureComponent {
 
   render() {
     return (
-      <React.Fragment>
         <Section title={this.props.language.searchbar.title} name='searchBar'>
           <ul>
             <Dropdown label={this.props.language.searchbar.search_engine}
@@ -45,7 +44,6 @@ export default class SearchSettings extends React.PureComponent {
             <input type='text' id='customSearchEngine'></input>
           </ul>
         </Section>
-      </React.Fragment>
     );
   }
 }

src/components/modals/tabs/Addons.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import LocalMallIcon from '@material-ui/icons/LocalMall';
 import { toast } from 'react-toastify';
 import Item from '../marketplace/Item';
-import MarketplaceFunctions from '../../../modules/marketplaceFunctions';
+import MarketplaceFunctions from '../../../modules/helpers/marketplace';
 
 export default class Addons extends React.PureComponent {
     constructor(...args) {

src/components/modals/tabs/Marketplace.jsx

@@ -3,7 +3,7 @@ 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/marketplaceFunctions';
+import MarketplaceFunctions from '../../../modules/helpers/marketplace';
 import * as Constants from '../../../modules/constants';
 import Items from '../marketplace/Items';
 

src/components/modals/tabs/Settings.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SettingsFunctions from '../../../modules/settingsFunctions';
+import SettingsFunctions from '../../../modules/helpers/settings';
 import Checkbox from '../settings/Checkbox';
 import Section from '../settings/Section';
 import { toast } from 'react-toastify';
@@ -7,6 +7,7 @@ import { toast } from 'react-toastify';
 import BackgroundSettings from '../settings/sections/BackgroundSettings';
 import SearchSettings from '../settings/sections/SearchSettings';
 import LanguageSettings from '../settings/sections/LanguageSettings';
+import DateSettings from '../settings/sections/DateSettings';
 
 export default class Settings extends React.PureComponent {
   resetGreeting() {

src/components/widgets/Background.jsx

@@ -46,7 +46,7 @@ export default class Background extends React.PureComponent {
   }
 
   doOffline() { // Handles setting the background if the user is offline
-    const offlineImages = require('../../modules/offlineImages.json');
+    const offlineImages = require('../../modules/json/offline_images.json');
     const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json
     const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys
     const randomImage = offlineImages[photographer].photo[
@@ -113,7 +113,7 @@ export default class Background extends React.PureComponent {
           this.setBackground(data.file);
           if (localStorage.getItem('backgroundAPI') === 'unsplash') return this.setCredit(data.photographer, 'unsplash', data.photographer_page);
           this.setCredit(data.photographer);
-          document.getElementById('camera').textContent = data.camera;
+          document.getElementById('camera').textContent = data.camera || 'N/A';
           document.getElementById('resolution').textContent = data.resolution || 'N/A';
         }
 

src/components/widgets/Date.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import dtf from '@eartharoid/dtf';
+
+export default class DateWidget extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        date: ''
+    };
+  }
+
+  getDate() {
+    const date = new Date();
+
+    if (localStorage.getItem('dateFormat') === 'short') {
+      const dateDay = date.getDate();
+      const dateMonth = date.getMonth() + 1;
+      const dateYear = date.getFullYear();
+
+      let day = dateDay, month = dateMonth, year = dateYear;
+
+      switch (localStorage.getItem('dateFormat')) {
+        case 'MDY':
+          day = dateMonth;
+          month = dateDay;
+          break;
+        case 'YMD':
+          day = dateYear;
+          year = dateDay;
+          break;
+        default:
+          break;
+      }
+
+      let format;
+      switch (localStorage.getItem('shortFormat')) {
+        case 'dash':
+          format = `${day}-${month}-${year}`;
+          break;
+        case 'gaps':
+          format = `${day} - ${month} - ${year}`;
+          break;
+        default:
+          format = `${day}/${month}/${year}`;
+      }
+
+      this.setState({ date: format });
+    } else { // full date
+      const lang = localStorage.getItem('language');
+
+      const day = date.toLocaleDateString(lang, { weekday: 'long' });
+      const nth = dtf.nth(date.getDate());
+      const month = date.toLocaleDateString(lang, { month: 'long' });
+      const year = date.getFullYear();
+
+      this.setState({ date: `${day} ${nth} ${month} ${year}` });
+    }
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('date') === 'false') return;
+    this.getDate();
+  }
+
+  render() {
+    return <span style={{ 'text-transform': 'capitalize', 'font-weight': 'bold'}}>{this.state.date}</span>
+  }
+}

src/components/widgets/Notes.jsx

@@ -28,8 +28,6 @@ export default class Notes extends React.PureComponent {
     }
 
     render() {
-        const copyNotes = () => navigator.clipboard.writeText(this.state.notes);
-
         return (
             <span id='noteContainer' className='notescontainer'>
                 <div className='topbarnotes'>
@@ -38,7 +36,7 @@ export default class Notes extends React.PureComponent {
                 </div>
                 <TextareaAutosize rowsMax={50} placeholder={this.props.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
                 <button onClick={this.pin} className='pinNote'><Pin/></button>
-                <button onClick={copyNotes} className='saveNote'><CopyIcon/></button>
+                <button onClick={() => navigator.clipboard.writeText(this.state.notes)} className='saveNote'><CopyIcon/></button>
             </span>
         );
     }

src/components/widgets/Search.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import SearchIcon from '@material-ui/icons/Search';
 import MicIcon from '@material-ui/icons/Mic';
 
-const searchEngines = require('../../modules/searchEngines.json');
+const searchEngines = require('../../modules/json/search_engines.json');
 
 export default class Search extends React.PureComponent {
   constructor(...args) {

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import App from './App';
 
 import './scss/index.scss';

src/modules/helpers/settings.js

@@ -1,4 +1,4 @@
-const defaultSettings = require('./defaultSettings.json');
+const defaultSettings = require('../json/default_settings.json');
 
 const saveFile = (data, filename = 'file') => {
     if (!data) return console.error('No data');