refactor: feature based defaults

Co-authored-by: David Ralph <me@davidcralph.co.uk>
Co-authored-by: Isaac <contact@eartharoid.me>

src/components/Elements/MainModal/scss/index.scss

@@ -291,6 +291,8 @@ h5 {
     flex-flow: row;
     gap: 20px;
     align-items: center;
+    width: 275px;
+    justify-content: flex-end;
   }
 }
 

src/features/greeting/options/default.js

@@ -0,0 +1,12 @@
+const DefaultOptions = {
+  greeting: true,
+  birthday: new Date(),
+  customEvents: [],
+  birthdayenabled: false,
+  defaultGreetingMessage: true,
+  greetingName: '',
+  birthdayage: false,
+  zoomGreeting: 100
+};
+
+export default DefaultOptions;

src/features/message/Message.jsx

@@ -3,18 +3,22 @@ import EventBus from 'utils/eventbus';
 import './message.scss';
 
 const Message = () => {
+  const calculateFontSize = () => {
+    const zoomMessage = localStorage.getItem('zoomMessage') || 100;
+    return `${1 * Number((zoomMessage || 100) / 100)}em`;
+  };
+
   const [messageText, setMessageText] = useState('');
   const [display, setDisplay] = useState('none');
-  const [fontSize, setFontSize] = useState('1em');
+  const [fontSize, setFontSize] = useState(calculateFontSize());
   const message = useRef();
 
   useEffect(() => {
     const handleRefresh = (data) => {
       if (data === 'message') {
         const messageSetting = localStorage.getItem('message');
-        const zoomMessage = localStorage.getItem('zoomMessage');
         setDisplay(messageSetting === 'false' ? 'none' : 'block');
-        setFontSize(`${1 * Number((zoomMessage || 100) / 100)}em`);
+        setFontSize(calculateFontSize());
       }
     };
 
@@ -25,6 +29,7 @@ const Message = () => {
     }
 
     EventBus.on('refresh', handleRefresh);
+
     return () => {
       EventBus.off('refresh');
     };

src/features/message/options/default.js

@@ -0,0 +1,7 @@
+const DefaultOptions = {
+  message: false,
+  messages: [],
+  zoomMessage: 100
+};
+
+export default DefaultOptions;

src/features/navbar/components/Refresh.jsx

@@ -11,17 +11,18 @@ function Refresh() {
   useEffect(() => {
     EventBus.on('refresh', (data) => {
       if (data === 'navbar' || data === 'background') {
-        setRefreshOption(localStorage.getItem('refreshOption'));
+        const newRefreshOption = localStorage.getItem('refreshOption');
-        updateRefreshText();
+        setRefreshOption(newRefreshOption);
+        updateRefreshText(newRefreshOption);
       }
     });
 
     updateRefreshText();
-  }, []);
+  });
 
   function updateRefreshText() {
     let text;
-    switch (localStorage.getItem('refreshOption')) {
+    switch (refreshOption) {
       case 'background':
         text = variables.getMessage('modals.main.settings.sections.background.title');
         break;

src/features/quicklinks/options/default.js

@@ -0,0 +1,10 @@
+const DefaultOptions = {
+  quicklinks: [], // list of quicklinks
+  quicklinksenabled: false,
+  quicklinksnewtab: false,
+  quicklinkstooltip: false,
+  quicklinksStyle: 'icon',
+  zoomQuicklinks: 1,
+};
+
+export default DefaultOptions;

src/features/quote/options/default.js

@@ -0,0 +1,13 @@
+const DefaultOptions = {
+  quote: false,
+  quoteType: 'api',
+  customQuote: [],
+  copyButton: false,
+  quoteShareButton: false,
+  favouriteQuoteEnabled: false,
+  authorLink: false,
+  authorImg: true,
+  zoomQuote: 100
+};
+
+export default DefaultOptions;

src/features/search/Search.jsx

@@ -139,7 +139,6 @@ function Search() {
   }
 
   const getSuggestionsDebounced = useDebouncedCallback(getSuggestions, 100);
-  // const getSuggestionsDebounced = getSuggestions;
 
   /**
    * If the user selects a search engine from the dropdown menu, the function will set the state of the

src/features/search/components/autocomplete/Autocomplete.jsx

@@ -1,95 +1,78 @@
-import { PureComponent } from 'react';
+import { useEffect, useState } from 'react';
 
 import EventBus from 'utils/eventbus';
 
 import './autocomplete.scss';
 
-class Autocomplete extends PureComponent {
+function Autocomplete(props) {
-  constructor(props) {
+  const [filtered, setFiltered] = useState([]);
-    super(props);
+  const [input, setInput] = useState('');
-    this.state = {
+  const [autocompleteDisabled, setAutocompleteDisabled] = useState(localStorage.getItem('autocomplete') !== 'true');
-      filtered: [],
-      input: '',
-      autocompleteDisabled: localStorage.getItem('autocomplete') !== 'true',
-    };
-  }
 
-  onChange = (e) => {
+  const onChange = (e) => {
-    if (this.state.autocompleteDisabled) {
+    if (autocompleteDisabled) {
-      return this.setState({
+      return setInput(e.target.value);
-        input: e.target.value,
-      });
     }
 
-    this.setState({
+    setFiltered(props.suggestions.filter(
-      filtered: this.props.suggestions.filter(
+      (suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1,
-        (suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1,
+    ));
-      ),
+    setInput(e.target.value);
-      input: e.target.value,
+    props.onChange(e.target.value);
-    });
+  }
 
-    this.props.onChange(e.target.value);
+  const onClick = (e) => {
-  };
+    setFiltered([]);
-
+    setInput(e.target.innerText);
-  onClick = (e) => {
+    props.onClick({
-    this.setState({
-      filtered: [],
-      input: e.target.innerText,
-    });
-
-    this.props.onClick({
       preventDefault: () => e.preventDefault(),
       target: {
         value: e.target.innerText,
       },
     });
-  };
+  }
 
-  componentDidMount() {
+  useEffect(() => {
     EventBus.on('refresh', (data) => {
       if (data === 'search') {
-        this.setState({
+        setAutocompleteDisabled(localStorage.getItem('autocomplete') !== 'true');
-          autocompleteDisabled: localStorage.getItem('autocomplete') !== 'true',
-        });
       }
     });
-  }
 
-  componentWillUnmount() {
+    return () => {
-    EventBus.off('refresh');
+      EventBus.off('refresh');
-  }
-
-  render() {
-    let autocomplete = null;
-
-    // length will only be > 0 if enabled
-    if (this.state.filtered.length > 0 && this.state.input.length > 0) {
-      autocomplete = (
-        <div className="suggestions">
-          {this.state.filtered.map((suggestion) => (
-            <div key={suggestion} onClick={this.onClick}>
-              {suggestion}
-            </div>
-          ))}
-        </div>
-      );
     }
+  });
 
-    return (
+  let autocomplete = null;
-      <div style={{ display: 'flex', flexFlow: 'column' }}>
+
-        <input
+  // length will only be > 0 if enabled
-          type="text"
+  if (filtered.length > 0 && input.length > 0) {
-          onChange={this.onChange}
+    autocomplete = (
-          value={this.state.input}
+      <div className="suggestions">
-          placeholder={this.props.placeholder || ''}
+        {filtered.map((suggestion) => (
-          autoComplete="off"
+          <div key={suggestion} onClick={onClick}>
-          spellCheck={false}
+            {suggestion}
-          id={this.props.id || ''}
+          </div>
-        />
+        ))}
-        {autocomplete}
       </div>
     );
   }
+
+  return (
+    <div style={{ display: 'flex', flexFlow: 'column' }}>
+      <input
+        type="text"
+        onChange={onChange}
+        value={input}
+        placeholder={props.placeholder || ''}
+        autoComplete="off"
+        spellCheck={false}
+        id={props.id || ''}
+      />
+      {autocomplete}
+    </div>
+  );
 }
 
 export { Autocomplete as default, Autocomplete };

src/features/search/options/default.js

@@ -0,0 +1,9 @@
+const DefaultOptions = {
+  search: false,
+  searchEngine: 'duckduckgo',
+  customSearchEngine: '',
+  voiceSearch: false,
+  searchDropdown: false
+};
+
+export default DefaultOptions;

src/features/stats/options/default.js

@@ -0,0 +1,6 @@
+const DefaultOptions = {
+  stats: true,
+  statsData: {},
+};
+
+export default DefaultOptions;

src/features/time/options/default.js

@@ -0,0 +1,37 @@
+const DefaultDateOptions = {
+  date: false,
+  dateType: 'long',
+  longFormat: 'DMY',
+  dayofweek: false,
+  datenth: false,
+  dateFormat: 'DMY',
+  shortFormat: 'dots',
+  zoomDate: 100,
+  weeknumber: false,
+  datezero: false,
+};
+
+const DefaultTimeOptions = {
+  time: true,
+  timeType: 'digital',
+  hourColour: '#ffffff',
+  minuteColour: '#ffffff',
+  secondColour: '#ffffff',
+  timeformat: 'twentyfourhour',
+  seconds: false,
+  zero: true,
+  secondHand: false,
+  minuteHand: true,
+  hourHand: true,
+  hourMarks: false,
+  minuteMarks: false,
+  roundClock: true,
+  zoomClock: 100,
+};
+
+const DefaultOptions = {
+  date: DefaultDateOptions,
+  time: DefaultTimeOptions,
+};
+
+export default DefaultOptions;

src/features/weather/options/default.js

@@ -0,0 +1,15 @@
+const DefaultOptions = {
+  weather: false,
+  windspeed: true,
+  weatherType: 'basic',
+  tempformat: 'celsius',
+  weatherdescription: false,
+  cloudiness: false,
+  humidity: false,
+  visibility: false,
+  windDirection: false,
+  atmosphericpressure: false,
+  zoomWeather: 100,
+};
+
+export default DefaultOptions;