Clarity fixes

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "beatdrop",
-  "version": "2.5.8",
+  "version": "2.5.9-beta",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -2,7 +2,7 @@
   "name": "beatdrop",
   "description": "A desktop app for downloading Beat Saber songs.",
   "author": "Nathaniel Johns (StarGazer1258)",
-  "version": "2.5.8",
+  "version": "2.5.9-beta",
   "private": false,
   "license": "CC-BY-NC-SA-4.0",
   "repository": {

src/actions/types.js

@@ -63,6 +63,7 @@ export const SET_SUB_VIEW              = 'SET_SONG_VIEW'
 // Window
 export const RESIZE_WINDOW              = 'RESIZE_WINDOW'
 export const SET_HAS_ERROR              = 'SET_HAS_ERROR'
+export const SET_ERROR_MESSAGE          = 'SET_ERROR_MESSAGE'
 
 // Sidebar
 export const RESIZE_SIDEBAR             = 'RESIZE_SIDEBAR'

src/actions/windowActions.js

@@ -1,4 +1,4 @@
-import { RESIZE_WINDOW, SET_HAS_ERROR } from './types'
+import { RESIZE_WINDOW, SET_HAS_ERROR, SET_ERROR_MESSAGE } from './types'
 
 export const resizeWindow = window => dispatch => {
   window.isMaximized = !window.isMaximized
@@ -14,4 +14,14 @@ export const setHasError = hasError => dispatch => {
     type: SET_HAS_ERROR,
     payload: hasError
   })
+}
+
+export const setErrorMessage = (error, info) => dispatch => {
+  dispatch({
+    type: SET_ERROR_MESSAGE,
+    payload: {
+      error,
+      info
+    }
+  })
 }

src/components/App.js

@@ -14,7 +14,7 @@ import CrashMessage from './CrashMessage'
 
 import { connect } from 'react-redux'
 
-import { setHasError } from '../actions/windowActions'
+import { setHasError, setErrorMessage } from '../actions/windowActions'
 import { downloadSong } from '../actions/queueActions'
 import { loadModDetails, installMod } from '../actions/modActions'
 import { loadDetailsFromKey } from '../actions/detailsActions'
@@ -76,6 +76,7 @@ class App extends Component {
   }
 
   componentDidCatch(error, info) {
+    this.props.setErrorMessage(error, info)
     this.props.setHasError(true)
   }
 
@@ -104,4 +105,4 @@ const mapStateToProps = state =>  ({
   hasError: state.window.hasError
 })
 
-export default connect(mapStateToProps, { setHasError })(App)
+export default connect(mapStateToProps, { setHasError, setErrorMessage })(App)

src/components/CrashMessage.js

@@ -19,7 +19,8 @@ class CrashMessage extends Component {
           <div>
             <div className="error-image"></div>
             <h1>Oops! BeatDrop has crashed!</h1>
-            <h2>The devs have already been notified. A fix is on the way soon.</h2>
+            <p>If you want to help with fixing this, provide a screenshot of this message and <a href="https://github.com/StarGazer1258/BeatDrop/issues/new?assignees=&amp;labels=&amp;template=bug_report.md&amp;title=" onClick={ (e) => { e.preventDefault(); e.stopPropagation(); window.require('electron').shell.openExternal(e.target.href) } }>file a bug report in the GitHub repo</a>.<br /><b>Please search for your issue first before filing a duplicate issue.</b></p>
+            <p className="errorMessage">{ this.props.errorMessage.name }{ this.props.errorInfo.componentStack }</p>
             <p>In the meantime, you can try resetting the view back the the welcome screen. If that doesn't work, you may have to reset the application entirely. This will reset all of you preferences, but will not delete any files.</p>
             <Button type="primary" onClick={ () => { this.props.setView(WELCOME); this.props.setHasError(false) } }>Reset View</Button>
             <Button type="destructive" onClick={ () => { store.dispatch({ type: RESET_APP }); this.props.setHasError(false) } }>Reset Everything</Button>
@@ -30,7 +31,9 @@ class CrashMessage extends Component {
 }
 
 const mapStateToProps = state => ({
-  theme: state.settings.theme
+  theme: state.settings.theme,
+  errorMessage: state.window.errorMessage,
+  errorInfo: state.window.errorInfo
 })
 
 export default connect(mapStateToProps, { setHasError, setView })(CrashMessage)

src/components/UpdateDialog.js

@@ -4,8 +4,9 @@ import '../css/UpdateDialog.scss'
 import { connect } from 'react-redux'
 import Button from './Button';
 import Modal from './Modal';
-import ProgressBar from './ProgressBar';
+import ProgressBar from './ProgressBar'
 
+import semver from 'semver'
 const { ipcRenderer } = window.require('electron')
 
 class UpdateDialog extends Component {
@@ -48,15 +49,15 @@ class UpdateDialog extends Component {
     return (
       this.state.updateAvailable ?
         <Modal width={ 575 } height={ 500 } onClose={ () => { this.setState({ updateAvailable: false }) } }>
-          <h1 id="update-dialog-text" className={ this.state.updateProgress > 0 ? ' downloading-update' : '' }>{ this.state.updateProgress > 0 ? 'Downloading Update...' : 'Update Available!' }</h1>
+          <h1 id="update-dialog-text" className={ this.state.updateProgress > 0 ? ' downloading-update' : '' }>{ this.state.updateProgress > 0 ? 'Downloading Package...' : semver.gt(this.state.newVersion, require('../../package.json').version) ? 'Update Available!' : 'Stable Downgrade Available!' }</h1>
           { this.state.updateProgress > 0 ?
               <ProgressBar progress={ this.state.updateProgress } />
           :
             <>
               <div className={ `current-version${ this.state.updateProgress > 0 ? ' hidden' : '' }` }>Current Version: { require('../../package.json').version }</div>
-              <div className={ `latest-version${ this.state.updateProgress > 0 ? ' hidden' : '' }` }>Latest Version: { this.state.newVersion }</div>
+              <div className={ `latest-version${ this.state.updateProgress > 0 ? ' hidden' : '' }` }>Latest { semver.gt(this.state.newVersion, require('../../package.json').version) ? '' : 'Stable ' }Version: { this.state.newVersion }</div>
               <div id="update-action-buttons">
-                <Button type="primary" onClick={ () => { ipcRenderer.send('electron-updater', 'download-update') } }>Update Now</Button>
+                <Button type="primary" onClick={ () => { ipcRenderer.send('electron-updater', 'download-update') } }>{ semver.gt(this.state.newVersion, require('../../package.json').version) ? 'Update' : 'Downgrade' } Now</Button>
                 <Button onClick={ () => { this.setState({ updateAvailable: false }) } }>Remind Me Later</Button>
               </div>
               

src/css/CrashMessage.scss

@@ -26,6 +26,23 @@
     background-position: center;
   }
 
+  .errorMessage {
+    text-align: left;
+    white-space: pre-wrap;
+    max-width: 60vw;
+    max-height: 25vh;
+    padding: 15px;
+    margin: 0 auto;
+    overflow-y: scroll;
+    border-radius: 10px;
+    border: 1px solid salmon;
+    border-left: 10px solid salmon;
+    background-color: pink;
+    color: red;
+    user-select: all;
+    cursor: text;
+  }
+
   &.theme-dark, &.theme-hc {
     .error-image {
       background-image: url(../assets/dark/error.png);

src/reducers/windowReducer.js

@@ -1,8 +1,10 @@
-import { RESIZE_WINDOW, SET_HAS_ERROR } from '../actions/types'
+import { RESIZE_WINDOW, SET_HAS_ERROR, SET_ERROR_MESSAGE } from '../actions/types'
 
 let initialState = {
   isMaximized: false,
-  hasError: false
+  hasError: false,
+  errorMessage: { name: '' },
+  errorInfo: { componentStack: '' }
 }
 
 export default function(state = initialState, action) {
@@ -17,6 +19,12 @@ export default function(state = initialState, action) {
         ...state,
         hasError: action.payload
       }
+    case SET_ERROR_MESSAGE:
+      return {
+        ...state,
+        errorMessage: action.payload.error,
+        errorInfo: action.payload.info
+      }
     default:
       return state
   }