Initial redux setup.

package-lock.json

@@ -1630,6 +1630,16 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.0.0.tgz",
@@ -1700,6 +1710,18 @@
         "@types/react": "*"
       }
     },
+    "@types/react-redux": {
+      "version": "7.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.8.tgz",
+      "integrity": "sha512-kpplH7Wg2SYU00sZVT98WBN0ou6QKrYcShRaW+5Vpe5l7bluKWJbWmAL+ieiso07OQzpcP5i1PeY3690640ZWg==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
     "@types/request": {
       "version": "2.48.4",
       "resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.4.tgz",
@@ -3209,9 +3231,9 @@
       }
     },
     "cacheable-lookup": {
-      "version": "4.2.2",
+      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-4.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-4.2.3.tgz",
-      "integrity": "sha512-06EWjs5/UO+gl6RHW7UAajeMZ+5E+HvHLQtaKcpjJLE5S/3+pX28VClFXM+LCwFRcmODURMnO94bZ+lFy5YvRg=="
+      "integrity": "sha512-NdruD8iCwUSqPeacly+fxbi71wjPuIbh9wsBhLdRmpXDFPgQtX+xWytveqDyFYQ1tDR5POAxH4jIkkoit3arXw=="
     },
     "cacheable-request": {
       "version": "7.0.1",
@@ -7028,9 +7050,9 @@
       }
     },
     "got": {
-      "version": "11.1.0",
+      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/got/-/got-11.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.1.1.tgz",
-      "integrity": "sha512-9lZDzFe43s6HH60tSurUk04kEtssfLiIfMiY5lSE0+vVaDCmT7+0xYzzlHY5VArSiz41mQQC38LefW2KoE9erw==",
+      "integrity": "sha512-7WxfuTyT02hMZZdDvaAprEoxsU13boxI8rWMpqk/5Mq6t+YVbExVB2L6yRLh2Nw3TeJyFpanId41+ZyXGesmbw==",
       "requires": {
         "@sindresorhus/is": "^2.1.0",
         "@szmarczak/http-timer": "^4.0.0",
@@ -8167,9 +8189,9 @@
       }
     },
     "keyv": {
-      "version": "4.0.0",
+      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.1.tgz",
-      "integrity": "sha512-U7ioE8AimvRVLfw4LffyOIRhL2xVgmE8T22L6i0BucSnBUyv4w+I7VN/zVZwRKHOI6ZRUcdMdWHQ8KSUvGpEog==",
+      "integrity": "sha512-xz6Jv6oNkbhrFCvCP7HQa8AaII8y8LRpoSm661NOKLr4uHuBwhX4epXrPQgF3+xdJnN4Esm5X0xwY4bOlALOtw==",
       "requires": {
         "json-buffer": "3.0.1"
       }

package.json

@@ -35,7 +35,7 @@
     "electron-updater": "^4.3.1",
     "fs-extra": "^9.0.0",
     "github-syntax-dark": "^0.5.0",
-    "got": "^11.1.0",
+    "got": "^11.1.1",
     "jquery": "^3.5.1",
     "moment": "^2.25.3",
     "request": "^2.88.2",
@@ -57,6 +57,7 @@
     "@types/node": "^12.12.38",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.7",
+    "@types/react-redux": "^7.1.8",
     "@types/request": "^2.48.4",
     "@types/tar-fs": "^2.0.0",
     "@types/triple-beam": "^1.3.0",

src/renderer/components/Application.tsx

@@ -2,12 +2,49 @@ import { hot } from 'react-hot-loader/root';
 import * as React from 'react';
 import Frame from './frame/Frame';
 import Welcome from './welcome/Welcome';
+import { connect } from 'react-redux';
+import { View } from '../meta/Views';
+import Landing from './landing/Landing';
+import Login from './login/Login';
+import Settings from './settings/Settings';
 
-const Application = () => (
+type ApplicationProps = {
-    <>
+    currentView: View
-    <Frame />
+}
-    <Welcome />
-    </>
-);
 
-export default hot(Application);
+class Application extends React.Component<ApplicationProps> {
+
+    render() {
+        switch(this.props.currentView) {
+            case View.WELCOME:
+                return <>
+                    <Frame />
+                    <Welcome />
+                </>
+            case View.LANDING:
+                return <>
+                    <Frame />
+                    <Landing />
+                </>
+            case View.LOGIN:
+                return <>
+                    <Frame />
+                    <Login />
+                </>
+            case View.SETTINGS:
+                return <>
+                    <Frame />
+                    <Settings />
+                </>
+
+        }
+        
+    }
+    
+}
+
+const connected = connect((state: any) => ({
+    currentView: state.currentView
+}), undefined)(Application)
+
+export default hot(connected);

src/renderer/components/landing/Landing.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+export default class Landing extends React.Component {
+
+    render() {
+        return <>
+            LANDING TBD
+        </>
+    }
+
+}

src/renderer/components/login/Login.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+export default class Login extends React.Component {
+
+    render() {
+        return <>
+            LOGIN TBD
+        </>
+    }
+
+}

src/renderer/components/settings/Settings.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+export default class Settings extends React.Component {
+
+    render() {
+        return <>
+            SETTINGS TBD
+        </>
+    }
+
+}

src/renderer/index.tsx

@@ -1,22 +1,27 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
+import store from './redux/store'
 import './index.css';
 
 import Application from './components/Application';
+import { Provider } from 'react-redux';
 
 // Create main element
 const mainElement = document.createElement('div');
 document.body.appendChild(mainElement);
 
 // Render components
-const render = (Component: () => JSX.Element) => {
+ReactDOM.render(
-    ReactDOM.render(
+    <AppContainer>
-        <AppContainer>
+        <Provider store={store}>
-            <Component />
+            <Application currentView={store.getState().currentView} />
-        </AppContainer>,
+        </Provider>
-        mainElement
+    </AppContainer>,
-    );
+    mainElement
-};
+);
 
-render(Application);
+// setTimeout(() => {
+//     console.log('firing')
+//     store.dispatch(setCurrentView(View.LOGIN))
+// }, 2500)

src/renderer/meta/Views.ts

@@ -0,0 +1,6 @@
+export enum View {
+    LANDING = 'LANDING',
+    WELCOME = 'WELCOME',
+    LOGIN = 'LOGIN',
+    SETTINGS = 'SETTINGS'
+}

src/renderer/redux/actions/viewActions.ts

@@ -0,0 +1,17 @@
+import { View } from "../../meta/Views";
+import { Action } from "redux";
+
+export enum ViewActionType {
+    ChangeView = 'CHANGE_VIEW'
+}
+
+export interface ChangeViewAction extends Action {
+    payload: View
+}
+
+export function setCurrentView(view: View): ChangeViewAction {
+    return {
+        type: ViewActionType.ChangeView,
+        payload: view
+    }
+}

src/renderer/redux/reducers/index.ts

@@ -0,0 +1,6 @@
+import { combineReducers } from "redux";
+import ViewReducer from "./viewReducer";
+
+export default combineReducers({
+    currentView: ViewReducer
+})

src/renderer/redux/reducers/viewReducer.ts

@@ -0,0 +1,16 @@
+import { Reducer } from 'redux'
+import { View } from '../../meta/Views'
+import { ChangeViewAction, ViewActionType } from '../actions/viewActions'
+
+const defaultView = View.WELCOME
+
+const ViewReducer: Reducer<View, ChangeViewAction> = (state = defaultView, action) => {
+    switch(action.type) {
+        case ViewActionType.ChangeView:
+            console.log('Reducer fired')
+            return action.payload
+    }
+    return state
+}
+
+export default ViewReducer

src/renderer/redux/store.ts

@@ -0,0 +1,4 @@
+import { createStore } from 'redux'
+import reducer from './reducers'
+
+export default createStore(reducer)

src/renderer/reduxsample.ts

@@ -0,0 +1,28 @@
+import { combineReducers, createStore, Reducer, Action, AnyAction } from 'redux'
+
+const userReducer: Reducer<any, AnyAction> = (state = {name: 'Name1', age: 0}, action) => {
+    switch(action.type) {
+        case 'CHANGE_NAME':
+            return {...state, name: action.payload}
+        case 'CHANGE_AGE':
+            return {...state, age: action.payload}
+    }
+    return state
+}
+
+const tweetsReducer: Reducer<any, Action> = (state = [], action) => {
+    
+    return state
+}
+
+const reducer = combineReducers({
+    user: userReducer,
+    tweets: tweetsReducer
+})
+
+const store = createStore(reducer)
+
+store.dispatch({type: 'CHANGE_NAME', payload: 'Name2'})
+store.dispatch({type: 'CHANGE_AGE', payload: 1})
+
+export default store