feat: extra birthday feature, cleanup

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/main/settings/Dropdown.jsx

@@ -1,18 +1,26 @@
 import React from 'react';
 
 export default class Dropdown extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      value: localStorage.getItem(this.props.name) || ''
+    };
+  }
+
   getLabel() {
     return this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null;
   }
 
-  componentDidMount() {
-    document.getElementById(this.props.name).value = localStorage.getItem(this.props.name);
-  }
-
-  onChange = () => {
-    localStorage.setItem(this.props.name, document.getElementById(this.props.name).value);
+  onChange(value) {
+    this.setState({
+      value: value
+    });
+  
+    localStorage.setItem(this.props.name, value);
+  
     if (this.props.onChange) {
-      this.props.onChange();
+      this.props.onChange(value);
     }
   }
 
@@ -21,7 +29,7 @@ export default class Dropdown extends React.PureComponent {
       <React.Fragment>
         {this.getLabel()}
         <div className='dropdown' style={{ display: 'inline' }}>
-          <select name={this.props.name} id={this.props.name} onChange={this.onChange}>
+          <select name={this.props.name} value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
             {this.props.children}
           </select>
         </div>