Improve Codebase Quality

package.json

@@ -1,14 +1,13 @@
 {
   "name": "lofi-player",
-  "version": "0.4.5-beta",
+  "version": "0.4.5",
   "private": true,
   "author": "Stanley Owen <stanleyowen06@gmail.com>",
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@mui/lab": "^5.0.0-alpha.48",
     "@mui/material": "^5.0.1",
-    "@types/node": "^16.9.6",
+    "@types/node": "^16.10.1",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.3.0",
@@ -24,11 +23,13 @@
   "homepage": "./",
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "build:win": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "release": "yarn build && electron-builder --publish=always",
     "build:electron": "node ./scripts/prebuild.js && yarn build && electron-builder && node ./scripts/postbuild.js",
+    "build:win:electron": "node ./scripts/prebuild.js && yarn build:win && electron-builder && node ./scripts/postbuild.js",
     "start:electron": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
   },
   "build": {
@@ -70,9 +71,9 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
+    "@testing-library/react": "^12.1.1",
     "@testing-library/user-event": "^13.2.1",
-    "concurrently": "^6.2.1",
+    "concurrently": "^6.2.2",
     "cross-env": "^7.0.3",
     "dotenv": "^10.0.0",
     "electron": "^15.0.0",

src/components/app.component.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { initializeApp } from 'firebase/app'
 import { getDatabase, ref, onValue } from 'firebase/database'
-import { Alert } from '@mui/lab'
-import { Slide, Snackbar } from '@mui/material'
+import { Alert, Slide, Snackbar, LinearProgress, SlideProps } from '@mui/material'
 
 import Navbar from './navbar.component'
 import BaseLayout from './base.component'

src/components/home.component.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Skeleton } from '@mui/lab'
+import { Skeleton } from '@mui/material'
 
 const Home = ({ song, songData, handleSong }: any) => {
     const [greeting, setGreeting] = useState<string>()

src/components/navbar.component.tsx

@@ -15,19 +15,21 @@ const Navbar = ({ properties, handleChange }: any) => {
         })
     }, [properties])
 
-    const goBackward = (e: React.MouseEvent<HTMLElement>) => handleChange({ id: 'activeTab', value: properties.previousTab, goBackward: true })
-    const goForward = (e: React.MouseEvent<HTMLElement>) => handleChange({ id: 'activeTab', value: properties.nextTab, goForward: true })
+    const triggerAction = (type: 'next' | 'previous') => {
+        if(type === 'previous') handleChange({ id: 'activeTab', value: properties.previousTab, goBackward: true })
+        else handleChange({ id: 'activeTab', value: properties.nextTab, goForward: true })
+    }
 
     return (
         <div className="navbar">
             <div className="m-10-auto">
                 <Tooltip title="Go Back" enterDelay={500} enterNextDelay={500}><div>
-                    <IconButton onClick={goBackward} disabled={property.disablePrevious}><ChevronLeft /></IconButton>
+                    <IconButton onClick={() => triggerAction('previous')} disabled={property.disablePrevious}><ChevronLeft /></IconButton>
                 </div></Tooltip>
             </div>
             <div className="m-10-auto">
                 <Tooltip title="Go Forward" enterDelay={500} enterNextDelay={500}><div>
-                    <IconButton onClick={goForward} disabled={property.disableForward}><ChevronRight /></IconButton>
+                    <IconButton onClick={() => triggerAction('next')} disabled={property.disableForward}><ChevronRight /></IconButton>
                 </div></Tooltip>
             </div>
             <div className="mrl-10">

src/components/search.component.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { Skeleton } from '@mui/lab'
 import { Close } from '../lib/icons.component'
-import { TextField, IconButton } from '@mui/material'
+import { Skeleton, TextField, IconButton } from '@mui/material'
 
 const Search = ({ songData }: any) => {
     const items: any = []

src/components/sidebar.component.tsx

@@ -59,7 +59,7 @@ const SideBar = ({ handleChange, properties }: any) => {
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setDialog(false)}>Cancel</Button>
-                    <Button color="secondary" onClick={() => window.location.href = String(process.env.REACT_APP_BETA)}>Continue</Button>
+                    <Button color="error" onClick={() => window.location.href = String(process.env.REACT_APP_BETA)}>Continue</Button>
                 </DialogActions>
             </Dialog>
         </div>