Remove lodash.merge with custom merge fucntion, default to "en" language if null

package.json

@@ -19,7 +19,6 @@
     "@material-ui/icons": "^4.9.1",
     "@muetab/quotes": "^1.0.0",
     "detect-browser-language": "0.0.2",
-    "lodash.merge": "^4.6.2",
     "react": "^16.13.1",
     "react-clock": "^2.4.0",
     "react-dom": "^16.13.1",

src/App.jsx

@@ -13,7 +13,7 @@ import Navbar from './components/Navbar';
 import SettingsFunctions from './modules/settingsFunctions';
 import { ToastContainer } from 'react-toastify';
 import Modal from 'react-modal';
-import Merge from 'lodash.merge';
+import { merge } from './modules/merge';
 import RoomIcon from '@material-ui/icons/Room';
 
 // Modals are lazy loaded as a user won't use them every time they open a tab
@@ -48,9 +48,9 @@ export default class App extends React.PureComponent {
     let overlayClassList = 'Overlay';
     if (localStorage.getItem('animations') === 'true') overlayClassList = 'Overlay modal-animation';
 
-    let language = require(`./translations/${localStorage.getItem('language')}.json`);
+    let language = require(`./translations/${localStorage.getItem('language') || 'en'}.json`);
     const en = require('./translations/en.json');
-    language = Merge(en, language);
+    language = merge(en, language);
 
     const theme = localStorage.getItem('theme');
     if (theme) {

src/modules/merge.js

@@ -0,0 +1,17 @@
+/**
+ * Merges 2 objects into a huge one
+ * @template T The original object
+ * @template U The object that is returned
+ * @param {...T} items The objects to merge
+ * @returns {U} The merged object
+ */
+export const merge = (...items) => {
+  const obj = {};
+  for (let i = 0; i < items.length; i++) {
+    for (const k in items[i]) {
+      if (!obj.hasOwnProperty(k)) obj[k] = items[i][k];
+    }
+  }
+
+  return obj;
+};