r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

🚧 correct hook call for getProject

Browse source
This commit is contained in:
ghalestrilo 2020-06-18 21:08:53 -03:00
parent 0633c3b395
commit e11756d769
1 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
client/modules/Mobile/MobileSketchView.jsx
View file

@ -1,13 +1,16 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import styled from 'styled-components'; import styled from 'styled-components';
import Header from '../../components/mobile/Header'; import Header from '../../components/mobile/Header';
import PreviewFrame from '../IDE/components/PreviewFrame'; import PreviewFrame from '../IDE/components/PreviewFrame';
import Screen from '../../components/mobile/MobileScreen'; import Screen from '../../components/mobile/MobileScreen';
import * as ProjectActions from '../IDE/actions/project';
import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files'; import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files';
import { ExitIcon } from '../../common/Icons'; import { ExitIcon } from '../../common/Icons';
import { remSize } from '../../theme'; import { remSize } from '../../theme';
@ -28,6 +31,7 @@ const noop = () => {};
const MobileSketchView = (props) => { const MobileSketchView = (props) => {
const [overlay, setOverlay] = useState(null); const [overlay, setOverlay] = useState(null);
// TODO: useSelector requires react-redux ^7.1.0 // TODO: useSelector requires react-redux ^7.1.0
// const htmlFile = useSelector(state => getHTMLFile(state.files)); // const htmlFile = useSelector(state => getHTMLFile(state.files));
// const jsFiles = useSelector(state => getJSFiles(state.files)); // const jsFiles = useSelector(state => getJSFiles(state.files));
@ -35,9 +39,14 @@ const MobileSketchView = (props) => {
// const files = useSelector(state => state.files); // const files = useSelector(state => state.files);
const { const {
htmlFile, jsFiles, cssFiles, files htmlFile, jsFiles, cssFiles, files, params, getProject
} = props; } = props;
useEffect(() => {
console.log(params);
getProject(params.project_id, params.username);
}, []);
return ( return (
<Screen> <Screen>
<Header> <Header>
@ -87,6 +96,10 @@ const MobileSketchView = (props) => {
}; };
MobileSketchView.propTypes = { MobileSketchView.propTypes = {
params: PropTypes.shape({
project_id: PropTypes.string,
username: PropTypes.string
}).isRequired,
htmlFile: PropTypes.shape({ htmlFile: PropTypes.shape({
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired, content: PropTypes.string.isRequired,
@ -107,6 +120,7 @@ MobileSketchView.propTypes = {
content: PropTypes.string.isRequired, content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired name: PropTypes.string.isRequired
})).isRequired, })).isRequired,
getProject: PropTypes.func.isRequired,
}; };
function mapStateToProps(state) { function mapStateToProps(state) {
@ -114,9 +128,13 @@ function mapStateToProps(state) {
htmlFile: getHTMLFile(state.files), htmlFile: getHTMLFile(state.files),
jsFiles: getJSFiles(state.files), jsFiles: getJSFiles(state.files),
cssFiles: getCSSFiles(state.files), cssFiles: getCSSFiles(state.files),
project: state.project,
files: state.files files: state.files
}; };
} }
function mapDispatchToProps(dispatch) {
return bindActionCreators(ProjectActions, dispatch);
}
export default connect(mapStateToProps)(MobileSketchView); export default connect(mapStateToProps, mapDispatchToProps)(MobileSketchView);