🚧 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 React from 'react';
import { useSelector, useDispatch, connect } from 'react-redux';
import classNames from 'classnames';
import { Console as ConsoleFeed } from 'console-feed';
import {
@ -22,7 +23,10 @@ import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
import UpArrowIcon from '../../../images/up-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) {
this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
if (this.props.theme !== prevProps.theme) {
@ -132,7 +136,7 @@ class Console extends React.Component {
}
}
Console.propTypes = {
ConsoleComponent.propTypes = {
consoleEvents: PropTypes.arrayOf(PropTypes.shape({
method: PropTypes.string.isRequired,
args: PropTypes.arrayOf(PropTypes.string)
@ -146,8 +150,45 @@ Console.propTypes = {
fontSize: PropTypes.number.isRequired
};
Console.defaultProps = {
ConsoleComponent.defaultProps = {
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;

View file

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

View file

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