mirror of
https://github.com/netzbegruenung/jitsi-meet-electron.git
synced 2024-04-26 22:24:50 +02:00
Add Redux and use it as the navigator
This commit is contained in:
parent
f85673da87
commit
4015a05f18
|
@ -3,10 +3,12 @@
|
|||
import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
import { Route, Switch } from 'react-router';
|
||||
import { ConnectedRouter as Router } from 'react-router-redux';
|
||||
|
||||
import { Conference } from '../../conference';
|
||||
import config from '../../config';
|
||||
import { history } from '../../router';
|
||||
import { Welcome } from '../../welcome';
|
||||
|
||||
/**
|
||||
|
@ -33,7 +35,7 @@ export default class App extends Component<*> {
|
|||
render() {
|
||||
return (
|
||||
<AtlasKitThemeProvider mode = 'dark'>
|
||||
<Router>
|
||||
<Router history = { history }>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import type { Dispatch } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { push } from 'react-router-redux';
|
||||
|
||||
import {
|
||||
RemoteControl,
|
||||
|
@ -15,23 +18,22 @@ import { Wrapper } from '../styled';
|
|||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* React Router history object.
|
||||
* This contains implementations for managing session history.
|
||||
*/
|
||||
history: Object;
|
||||
|
||||
/**
|
||||
* React Router match object.
|
||||
* This contains parameters passed through <Route /> component.
|
||||
*/
|
||||
match: Object;
|
||||
|
||||
/**
|
||||
* Redux dispatch.
|
||||
*/
|
||||
dispatch: Dispatch<*>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Conference component.
|
||||
*/
|
||||
export default class Conference extends Component<Props, *> {
|
||||
class Conference extends Component<Props, *> {
|
||||
/**
|
||||
* Reference to the element of this component.
|
||||
*/
|
||||
|
@ -94,7 +96,7 @@ export default class Conference extends Component<Props, *> {
|
|||
* Navigates to home screen (Welcome).
|
||||
*/
|
||||
_navigateToHome() {
|
||||
this.props.history.push('/');
|
||||
this.props.dispatch(push('/'));
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -118,3 +120,5 @@ export default class Conference extends Component<Props, *> {
|
|||
this._api.on('readyToClose', () => this._navigateToHome());
|
||||
}
|
||||
}
|
||||
|
||||
export default connect()(Conference);
|
||||
|
|
1
app/features/redux/index.js
Normal file
1
app/features/redux/index.js
Normal file
|
@ -0,0 +1 @@
|
|||
export { default as store } from './store';
|
11
app/features/redux/middleware.js
Normal file
11
app/features/redux/middleware.js
Normal file
|
@ -0,0 +1,11 @@
|
|||
// @flow
|
||||
|
||||
import { applyMiddleware } from 'redux';
|
||||
import { createLogger } from 'redux-logger';
|
||||
|
||||
import { middleware as routerMiddleware } from '../router';
|
||||
|
||||
export default applyMiddleware(
|
||||
routerMiddleware,
|
||||
createLogger()
|
||||
);
|
9
app/features/redux/reducers.js
Normal file
9
app/features/redux/reducers.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import { combineReducers } from 'redux';
|
||||
|
||||
import { reducer as routerReducer } from '../router';
|
||||
|
||||
export default combineReducers({
|
||||
router: routerReducer
|
||||
});
|
8
app/features/redux/store.js
Normal file
8
app/features/redux/store.js
Normal file
|
@ -0,0 +1,8 @@
|
|||
// @flow
|
||||
|
||||
import { createStore } from 'redux';
|
||||
|
||||
import middleware from './middleware';
|
||||
import reducers from './reducers';
|
||||
|
||||
export default createStore(reducers, middleware);
|
5
app/features/router/history.js
Normal file
5
app/features/router/history.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
// @flow
|
||||
|
||||
import { createHashHistory } from 'history';
|
||||
|
||||
export default createHashHistory();
|
5
app/features/router/index.js
Normal file
5
app/features/router/index.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
// @flow
|
||||
|
||||
export { default as history } from './history';
|
||||
export { default as middleware } from './middleware';
|
||||
export { default as reducer } from './reducer';
|
7
app/features/router/middleware.js
Normal file
7
app/features/router/middleware.js
Normal file
|
@ -0,0 +1,7 @@
|
|||
// @flow
|
||||
|
||||
import { routerMiddleware } from 'react-router-redux';
|
||||
|
||||
import history from './history';
|
||||
|
||||
export default routerMiddleware(history);
|
5
app/features/router/reducer.js
Normal file
5
app/features/router/reducer.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
// @flow
|
||||
|
||||
import { routerReducer } from 'react-router-redux';
|
||||
|
||||
export default routerReducer;
|
|
@ -5,6 +5,9 @@ import Button from '@atlaskit/button';
|
|||
import { FieldTextStateless } from '@atlaskit/field-text';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import type { Dispatch } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { push } from 'react-router-redux';
|
||||
import URL from 'url';
|
||||
|
||||
import { WelcomeWrapper as Wrapper, Content, Form } from '../styled';
|
||||
|
@ -13,10 +16,9 @@ import { WelcomeWrapper as Wrapper, Content, Form } from '../styled';
|
|||
type Props = {
|
||||
|
||||
/**
|
||||
* React Router history object.
|
||||
* This contains implementations for managing session history.
|
||||
* Redux dispatch.
|
||||
*/
|
||||
history: Object;
|
||||
dispatch: Dispatch<*>;
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
@ -31,7 +33,7 @@ type State = {
|
|||
/**
|
||||
* Welcome Component.
|
||||
*/
|
||||
export default class Welcome extends Component<Props, State> {
|
||||
class Welcome extends Component<Props, State> {
|
||||
/**
|
||||
* Initializes a new {@code Welcome} instance.
|
||||
*
|
||||
|
@ -64,15 +66,15 @@ export default class Welcome extends Component<Props, State> {
|
|||
<FieldTextStateless
|
||||
autoFocus = { true }
|
||||
isLabelHidden = { true }
|
||||
shouldFitContainer = { true }
|
||||
onChange = { this._onURLChange }
|
||||
shouldFitContainer = { true }
|
||||
type = 'text'
|
||||
value = { this.state.url } />
|
||||
</Form>
|
||||
<Button
|
||||
appearance = 'primary'
|
||||
type = 'button'
|
||||
onClick = { this._onJoin }>
|
||||
onClick = { this._onJoin }
|
||||
type = 'button'>
|
||||
GO
|
||||
</Button>
|
||||
</Content>
|
||||
|
@ -103,11 +105,11 @@ export default class Welcome extends Component<Props, State> {
|
|||
if (url.host && url.path) {
|
||||
|
||||
// This will be triggered when the full url is present.
|
||||
this.props.history.push(url.host + url.path);
|
||||
this.props.dispatch(push(url.host + url.path));
|
||||
} else {
|
||||
|
||||
// Directly to the the path.
|
||||
this.props.history.push(url.path);
|
||||
this.props.dispatch(push(url.path));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -122,3 +124,5 @@ export default class Welcome extends Component<Props, State> {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default connect()(Welcome);
|
||||
|
|
26
app/index.js
26
app/index.js
|
@ -1,17 +1,35 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { render } from 'react-dom';
|
||||
|
||||
import { App } from './features/app';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
/**
|
||||
* AtlasKit components will deflect from appearance if css-reset is not present.
|
||||
*/
|
||||
import '@atlaskit/css-reset';
|
||||
|
||||
import { App } from './features/app';
|
||||
import { store } from './features/redux';
|
||||
|
||||
/**
|
||||
* Component encapsulating App component with redux store using provider.
|
||||
*/
|
||||
class Root extends Component<*> {
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<Provider store = { store }>
|
||||
<App />
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the main / root application.
|
||||
* $FlowFixMe
|
||||
*/
|
||||
render(<App />, document.getElementById('app'));
|
||||
render(<Root />, document.getElementById('app'));
|
||||
|
|
2328
package-lock.json
generated
2328
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -35,10 +35,14 @@
|
|||
"@atlaskit/field-text": "5.1.0",
|
||||
"@atlaskit/theme": "3.2.2",
|
||||
"electron-is-dev": "0.3.0",
|
||||
"history": "4.7.2",
|
||||
"jitsi-meet-electron-utils": "jitsi/jitsi-meet-electron-utils",
|
||||
"react": "16.3.2",
|
||||
"react-dom": "16.3.2",
|
||||
"react-router-dom": "4.2.2",
|
||||
"react-redux": "5.0.7",
|
||||
"react-router-redux": "5.0.0-alpha.9",
|
||||
"redux": "4.0.0",
|
||||
"redux-logger": "3.0.6",
|
||||
"styled-components": "3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
@ -47,12 +51,13 @@
|
|||
"babel-loader": "7.1.4",
|
||||
"babel-preset-env": "1.7.0",
|
||||
"babel-preset-react": "6.24.1",
|
||||
"babel-preset-stage-1": "6.24.1",
|
||||
"css-loader": "0.28.11",
|
||||
"electron": "2.0.0",
|
||||
"electron-packager": "12.0.2",
|
||||
"electron-rebuild": "1.7.3",
|
||||
"eslint": "4.12.1",
|
||||
"eslint-config-jitsi": "git+https://github.com/jitsi/eslint-config-jitsi.git",
|
||||
"eslint-config-jitsi": "jitsi/eslint-config-jitsi",
|
||||
"eslint-plugin-flowtype": "2.46.3",
|
||||
"eslint-plugin-import": "2.11.0",
|
||||
"eslint-plugin-jsdoc": "3.2.0",
|
||||
|
|
|
@ -20,7 +20,8 @@ const commonConfig = {
|
|||
require.resolve('babel-preset-env'),
|
||||
{ modules: false }
|
||||
],
|
||||
require.resolve('babel-preset-react')
|
||||
require.resolve('babel-preset-react'),
|
||||
require.resolve('babel-preset-stage-1')
|
||||
]
|
||||
},
|
||||
test: /\.js$/
|
||||
|
|
Loading…
Reference in a new issue