add application redux actions

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+/.vscode
+
 # dependencies
 /node_modules
 /.pnp

src/App.tsx

@@ -1,24 +1,36 @@
 import React, { Component } from 'react';
+import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import Navbar from './components/shell/navbar';
 import Sidebar from './components/shell/sidebar';
 import MainContentRouter from './components/shell/mainContentRouter';
+import createReduxStore from './store/store';
 import './App.scss';
+import ApplicationState from './store/applicationState';
+
+const defaultState: ApplicationState = {
+    appSettings: {
+        devToolsEnabled: false
+    }
+}
+const store = createReduxStore();
 
 class App extends Component {
-  render() {
-    return (
-      <Router>
-        <div className="app-shell">
-          <Navbar />
-          <div className="app-main">
-            <Sidebar />
-            <MainContentRouter />
-          </div>
-        </div>
-      </Router>
-    );
-  }
+    render() {
+        return (
+            <Provider store={store}>
+                <Router>
+                    <div className="app-shell">
+                        <Navbar />
+                        <div className="app-main">
+                            <Sidebar />
+                            <MainContentRouter />
+                        </div>
+                    </div>
+                </Router>
+            </Provider>
+        );
+    }
 }
 
 export default App;

src/actions/actionTypes.ts

@@ -1,2 +1,3 @@
 export const TOGGLE_DEV_TOOLS_SUCCESS = 'TOGGLE_DEV_TOOLS_SUCCESS';
-export const OPEN_LOCAL_FOLDER_SUCCESS = 'OPEN_LOCAL_FOLDER_SUCCESS';
+export const OPEN_LOCAL_FOLDER_SUCCESS = 'OPEN_LOCAL_FOLDER_SUCCESS';
+export const REFRESH_APP_SUCCESS = 'REFRESH_APP_SUCCESS';

src/actions/applicationActions.ts

@@ -0,0 +1,22 @@
+import * as ActionTypes from './actionTypes';
+
+export interface IApplicationActions {
+    toggleDevTools(show: boolean): void;
+    reloadApplication(): void;
+}
+
+export function toggleDevTools(show: boolean) {
+    return (dispatch) => {
+        const { ipcRenderer } = (<any>window).require('electron');
+        ipcRenderer.send('TOGGLE_DEV_TOOLS', show);
+        dispatch({ type: ActionTypes.TOGGLE_DEV_TOOLS_SUCCESS, value: show });
+    }
+}
+
+export function reloadApplication() {
+    return (dispatch) => {
+        const { ipcRenderer } = (<any>window).require('electron');
+        ipcRenderer.send('RELOAD_APP');
+        dispatch({ type: ActionTypes.REFRESH_APP_SUCCESS });
+    }
+}

src/actions/menuActions.ts

@@ -1,34 +0,0 @@
-import * as ActionTypes from './actionTypes';
-
-function toggleDevToolsSuccess(menuItem: any) {
-    return { type: ActionTypes.TOGGLE_DEV_TOOLS_SUCCESS, menuItem };
-}
-
-function openLocalFolderSuccess(result: any) {
-    return { type: ActionTypes.OPEN_LOCAL_FOLDER_SUCCESS, result };
-}
-
-export function toggleDevTools(menuItem: any, browserWindow: any) {
-    return (dispatch) => {
-        if (menuItem.checked) {
-            browserWindow.webContents.openDevTools();
-        } else {
-            browserWindow.webContents.closeDevTools();
-        }
-
-        dispatch(toggleDevToolsSuccess(menuItem));
-    }
-}
-
-export function openLocalFolder(menuItem: any) {
-    return (dispatch) => {
-        const { dialog } = require('electron');
-        dialog.showOpenDialog({
-            title: 'Open Images Directory',
-            properties: ['openDirectory'],
-        },
-            (result: any) => {
-                dispatch(openLocalFolderSuccess(result));
-            });
-    };
-}

src/components/pages/appSettingsPage.tsx

@@ -1,11 +1,57 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as applicationActions from '../../actions/applicationActions';
+import ApplicationState, { IAppSettings } from '../../store/applicationState';
+
+interface IAppSettingsProps {
+    appSettings: IAppSettings,
+    actions: applicationActions.IApplicationActions
+}
+
+function mapStateToProps(state: ApplicationState) {
+    return {
+        appSettings: state.appSettings
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators(applicationActions, dispatch)
+    };
+}
+
+@connect(mapStateToProps, mapDispatchToProps)
+export default class AppSettingsPage extends React.Component<IAppSettingsProps, any> {
+    constructor(props: IAppSettingsProps) {
+        super(props);
+
+        this.toggleDevTools = this.toggleDevTools.bind(this);
+        this.reloadApp = this.reloadApp.bind(this);
+    }
+
+    toggleDevTools = () => {
+        this.props.actions.toggleDevTools(!this.props.appSettings.devToolsEnabled);
+    }
+
+    reloadApp = () => {
+        this.props.actions.reloadApplication();
+    }
 
-export default class AppSettingsPage extends React.Component {
     render() {
         return (
-            <div className="container-fluid">
-                <h3><i className="fas fa-cog"></i>Application Settings</h3>
+            <div className="m-3 text-light">
+                <h3><i className="fas fa-cog fa-1x"></i><span className="px-2">Application Settings</span></h3>
+                <hr />
+                <div className="my-3">
+                    <p>Open application developer tools to help diagnose issues</p>
+                    <button className="btn btn-primary btn-sm" onClick={this.toggleDevTools}>Toggle Developer Tools</button>
+                </div>
+                <div className="my-3">
+                    <p>Reload the app discarding all current changes</p>
+                    <button className="btn btn-primary btn-sm" onClick={this.reloadApp}>Refresh Application</button>
+                </div>
             </div>
         );
     }
-}
+}

src/electron/main.ts

@@ -1,17 +1,13 @@
-import { app, BrowserWindow } from 'electron';
-import { Store } from 'redux';
+import { app, BrowserWindow, ipcMain } from 'electron';
 import path from 'path';
 import url from 'url';
-import createReduxStore from '../store/store';
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow: BrowserWindow;
-let store: Store;
 
 function createWindow() {
     // Create the browser window.
-    store = createReduxStore();
     mainWindow = new BrowserWindow({ width: 1024, height: 768 });
 
     // and load the index.html of the app.
@@ -21,7 +17,7 @@ function createWindow() {
         slashes: true
     });
     mainWindow.loadURL(startUrl);
-    
+
     // Open the DevTools.
     mainWindow.webContents.openDevTools();
 
@@ -34,6 +30,18 @@ function createWindow() {
     })
 }
 
+ipcMain.on('RELOAD_APP', () => {
+    mainWindow.reload();
+});
+
+ipcMain.on('TOGGLE_DEV_TOOLS', (sender: any, show: boolean) => {
+    if (show) {
+        mainWindow.webContents.openDevTools();
+    } else {
+        mainWindow.webContents.closeDevTools();
+    }
+});
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.

src/reducers/applicationReducer.ts

@@ -0,0 +1,12 @@
+import * as ActionTypes from '../actions/actionTypes';
+
+export const applicationReducer = (state: any = {}, action: any) => {
+    switch (action.type) {
+        case ActionTypes.TOGGLE_DEV_TOOLS_SUCCESS:
+            return { ...state, devToolsEnabled: action.value };
+        case ActionTypes.REFRESH_APP_SUCCESS:
+            return { ...state };
+        default:
+            return state;
+    }
+}

src/reducers/index.ts

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux'
-import * as menu from './menuReducer';
+import * as menu from './applicationReducer';
 
 export default combineReducers({
-    menu: menu.menuReducer
+    appSettings: menu.applicationReducer
 });

src/reducers/menuReducer.ts

@@ -1,28 +0,0 @@
-import * as ActionTypes from '../actions/actionTypes';
-
-export const menuReducer = (state = {}, action: any) => {
-    switch (action.type) {
-        case ActionTypes.TOGGLE_DEV_TOOLS_SUCCESS:
-            return (<any>Object).assign({}, state, { devToolsEnabled: action.menuItem.checked });
-        case ActionTypes.OPEN_LOCAL_FOLDER_SUCCESS:
-            return (<any>Object).assign({}, state, { openLocalFolder: true });
-        default:
-            return state;
-    }
-}
-
-function openLocalFolder(menuItem: any) {
-    const { dialog } = require('electron');
-    return dialog.showOpenDialog({
-        title: 'Open Images Directory',
-        properties: ['openDirectory']
-    });
-}
-
-function toggleDevTools(menuItem: any, browserWindow: any) {
-    if (menuItem.checked) {
-        browserWindow.webContents.openDevTools();
-    } else {
-        browserWindow.webContents.closeDevTools();
-    }
-}

src/store/applicationState.ts

@@ -0,0 +1,7 @@
+export default interface IApplicationState {
+    appSettings: IAppSettings
+}
+
+export interface IAppSettings {
+    devToolsEnabled: boolean
+}

tsconfig.json

@@ -12,7 +12,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "experimentalDecorators": true
   },
   "include": [
     "src"