🚧 connect <Console />

This commit is contained in:
ghalestrilo 2020-07-15 18:17:01 -03:00
parent 8e137d0b68
commit dd1141bfbc
3 changed files with 46 additions and 25 deletions

View file

@ -1,5 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { useSelector, useDispatch, connect } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import { Console as ConsoleFeed } from 'console-feed'; import { Console as ConsoleFeed } from 'console-feed';
import { import {
@ -22,7 +23,10 @@ import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
import UpArrowIcon from '../../../images/up-arrow.svg'; import UpArrowIcon from '../../../images/up-arrow.svg';
import DownArrowIcon from '../../../images/down-arrow.svg'; import DownArrowIcon from '../../../images/down-arrow.svg';
class Console extends React.Component { import * as IDEActions from '../../IDE/actions/ide';
import * as ConsoleActions from '../../IDE/actions/console';
class ConsoleComponent extends React.Component {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight; this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
if (this.props.theme !== prevProps.theme) { if (this.props.theme !== prevProps.theme) {
@ -132,7 +136,7 @@ class Console extends React.Component {
} }
} }
Console.propTypes = { ConsoleComponent.propTypes = {
consoleEvents: PropTypes.arrayOf(PropTypes.shape({ consoleEvents: PropTypes.arrayOf(PropTypes.shape({
method: PropTypes.string.isRequired, method: PropTypes.string.isRequired,
args: PropTypes.arrayOf(PropTypes.string) args: PropTypes.arrayOf(PropTypes.string)
@ -146,8 +150,45 @@ Console.propTypes = {
fontSize: PropTypes.number.isRequired fontSize: PropTypes.number.isRequired
}; };
Console.defaultProps = { ConsoleComponent.defaultProps = {
consoleEvents: [] consoleEvents: []
}; };
// const Console = () => {
// const consoleEvents = useSelector(state => state.console);
// const { consoleIsExpanded } = useSelector(state => state.ide);
// const { theme, fontSize } = useSelector(state => state.preferences);
// const dispatch = useDispatch();
// return (
// <ConsoleComponent
// consoleEvents={consoleEvents}
// isExpanded={consoleIsExpanded}
// theme={theme}
// fontSize={fontSize}
// collapseConsole={() => dispatch({})}
// expandConsole={() => dispatch({})}
// clearConsole={() => dispatch({})}
// dispatchConsoleEvent={() => dispatch({})}
// />
// );
// };
const Console = connect(
state => ({
consoleEvents: state.console,
isExpanded: state.ide.consoleIsExpanded,
theme: state.preferences.theme,
fontSize: state.preferences.fontSize
}),
dispatch => ({
collapseConsole: () => dispatch(IDEActions.collapseConsole()),
expandConsole: () => dispatch(IDEActions.expandConsole()),
clearConsole: () => dispatch(ConsoleActions.clearConsole()),
dispatchConsoleEvent: msgs => dispatch(ConsoleActions.dispatchConsoleEvent(msgs)),
})
)(ConsoleComponent);
export default Console; export default Console;

View file

@ -102,17 +102,7 @@ const MobileIDEView = (props) => {
provideController={setTmController} provideController={setTmController}
/> />
</IDEWrapper> </IDEWrapper>
<Footer before={<Console <Footer before={<Console />} >
fontSize={preferences.fontSize}
consoleEvents={console}
isExpanded={ide.consoleIsExpanded}
clearConsole={clearConsole}
theme={preferences.theme}
dispatchConsoleEvent={dispatchConsoleEvent}
expandConsole={expandConsole}
collapseConsole={collapseConsole}
/>}
>
<h2>Bottom Bar</h2> <h2>Bottom Bar</h2>
</Footer> </Footer>
</Screen> </Screen>

View file

@ -87,17 +87,7 @@ const MobileSketchView = (props) => {
clearConsole={clearConsole} clearConsole={clearConsole}
/> />
</Content> </Content>
<Footer before={<Console <Footer before={<Console />} />
fontSize={preferences.fontSize}
consoleEvents={console}
isExpanded={ide.consoleIsExpanded}
clearConsole={clearConsole}
theme={preferences.theme}
dispatchConsoleEvent={dispatchConsoleEvent}
expandConsole={expandConsole}
collapseConsole={collapseConsole}
/>}
/>
</Screen>); </Screen>);
}; };