From 3fcfa492af42dac8a20849e27125779ee6d3e1f9 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Wed, 6 May 2020 07:35:25 -0400 Subject: [PATCH] Initial redux setup. --- package-lock.json | 40 +++++++++++---- package.json | 3 +- src/renderer/components/Application.tsx | 51 ++++++++++++++++--- src/renderer/components/landing/Landing.tsx | 11 ++++ src/renderer/components/login/Login.tsx | 11 ++++ src/renderer/components/settings/Settings.tsx | 11 ++++ src/renderer/index.tsx | 23 +++++---- src/renderer/meta/Views.ts | 6 +++ src/renderer/redux/actions/viewActions.ts | 17 +++++++ src/renderer/redux/reducers/index.ts | 6 +++ src/renderer/redux/reducers/viewReducer.ts | 16 ++++++ src/renderer/redux/store.ts | 4 ++ src/renderer/reduxsample.ts | 28 ++++++++++ 13 files changed, 201 insertions(+), 26 deletions(-) create mode 100644 src/renderer/components/landing/Landing.tsx create mode 100644 src/renderer/components/settings/Settings.tsx create mode 100644 src/renderer/meta/Views.ts create mode 100644 src/renderer/redux/actions/viewActions.ts create mode 100644 src/renderer/redux/reducers/index.ts create mode 100644 src/renderer/redux/reducers/viewReducer.ts create mode 100644 src/renderer/redux/store.ts create mode 100644 src/renderer/reduxsample.ts diff --git a/package-lock.json b/package-lock.json index 750dc6b1..b2b6e139 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-4.2.2.tgz", - "integrity": "sha512-06EWjs5/UO+gl6RHW7UAajeMZ+5E+HvHLQtaKcpjJLE5S/3+pX28VClFXM+LCwFRcmODURMnO94bZ+lFy5YvRg==" + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-4.2.3.tgz", + "integrity": "sha512-NdruD8iCwUSqPeacly+fxbi71wjPuIbh9wsBhLdRmpXDFPgQtX+xWytveqDyFYQ1tDR5POAxH4jIkkoit3arXw==" }, "cacheable-request": { "version": "7.0.1", @@ -7028,9 +7050,9 @@ } }, "got": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/got/-/got-11.1.0.tgz", - "integrity": "sha512-9lZDzFe43s6HH60tSurUk04kEtssfLiIfMiY5lSE0+vVaDCmT7+0xYzzlHY5VArSiz41mQQC38LefW2KoE9erw==", + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/got/-/got-11.1.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.0.tgz", - "integrity": "sha512-U7ioE8AimvRVLfw4LffyOIRhL2xVgmE8T22L6i0BucSnBUyv4w+I7VN/zVZwRKHOI6ZRUcdMdWHQ8KSUvGpEog==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.1.tgz", + "integrity": "sha512-xz6Jv6oNkbhrFCvCP7HQa8AaII8y8LRpoSm661NOKLr4uHuBwhX4epXrPQgF3+xdJnN4Esm5X0xwY4bOlALOtw==", "requires": { "json-buffer": "3.0.1" } diff --git a/package.json b/package.json index ed6763a1..546381f7 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/components/Application.tsx b/src/renderer/components/Application.tsx index 48b3d303..517de9c3 100644 --- a/src/renderer/components/Application.tsx +++ b/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 +} -export default hot(Application); \ No newline at end of file +class Application extends React.Component { + + render() { + switch(this.props.currentView) { + case View.WELCOME: + return <> + + + + case View.LANDING: + return <> + + + + case View.LOGIN: + return <> + + + + case View.SETTINGS: + return <> + + + + + } + + } + +} + +const connected = connect((state: any) => ({ + currentView: state.currentView +}), undefined)(Application) + +export default hot(connected); \ No newline at end of file diff --git a/src/renderer/components/landing/Landing.tsx b/src/renderer/components/landing/Landing.tsx new file mode 100644 index 00000000..ef450462 --- /dev/null +++ b/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 + + } + +} \ No newline at end of file diff --git a/src/renderer/components/login/Login.tsx b/src/renderer/components/login/Login.tsx index e69de29b..92ffe1e9 100644 --- a/src/renderer/components/login/Login.tsx +++ b/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 + + } + +} \ No newline at end of file diff --git a/src/renderer/components/settings/Settings.tsx b/src/renderer/components/settings/Settings.tsx new file mode 100644 index 00000000..df611c7c --- /dev/null +++ b/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 + + } + +} \ No newline at end of file diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 1213602f..3de30a3e 100644 --- a/src/renderer/index.tsx +++ b/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( - - - , - mainElement - ); -}; +ReactDOM.render( + + + + + , + mainElement +); -render(Application); \ No newline at end of file +// setTimeout(() => { +// console.log('firing') +// store.dispatch(setCurrentView(View.LOGIN)) +// }, 2500) \ No newline at end of file diff --git a/src/renderer/meta/Views.ts b/src/renderer/meta/Views.ts new file mode 100644 index 00000000..8e627ebb --- /dev/null +++ b/src/renderer/meta/Views.ts @@ -0,0 +1,6 @@ +export enum View { + LANDING = 'LANDING', + WELCOME = 'WELCOME', + LOGIN = 'LOGIN', + SETTINGS = 'SETTINGS' +} \ No newline at end of file diff --git a/src/renderer/redux/actions/viewActions.ts b/src/renderer/redux/actions/viewActions.ts new file mode 100644 index 00000000..af2caca0 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/src/renderer/redux/reducers/index.ts b/src/renderer/redux/reducers/index.ts new file mode 100644 index 00000000..7da6f396 --- /dev/null +++ b/src/renderer/redux/reducers/index.ts @@ -0,0 +1,6 @@ +import { combineReducers } from "redux"; +import ViewReducer from "./viewReducer"; + +export default combineReducers({ + currentView: ViewReducer +}) \ No newline at end of file diff --git a/src/renderer/redux/reducers/viewReducer.ts b/src/renderer/redux/reducers/viewReducer.ts new file mode 100644 index 00000000..bc77a7cc --- /dev/null +++ b/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 = (state = defaultView, action) => { + switch(action.type) { + case ViewActionType.ChangeView: + console.log('Reducer fired') + return action.payload + } + return state +} + +export default ViewReducer \ No newline at end of file diff --git a/src/renderer/redux/store.ts b/src/renderer/redux/store.ts new file mode 100644 index 00000000..24106446 --- /dev/null +++ b/src/renderer/redux/store.ts @@ -0,0 +1,4 @@ +import { createStore } from 'redux' +import reducer from './reducers' + +export default createStore(reducer) \ No newline at end of file diff --git a/src/renderer/reduxsample.ts b/src/renderer/reduxsample.ts new file mode 100644 index 00000000..30126b1b --- /dev/null +++ b/src/renderer/reduxsample.ts @@ -0,0 +1,28 @@ +import { combineReducers, createStore, Reducer, Action, AnyAction } from 'redux' + +const userReducer: Reducer = (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 = (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 \ No newline at end of file