fcc-challenges/calculator-react/src/App.js

95 lines
2.5 KiB
JavaScript

import React from 'react';
import { connect } from "react-redux";
import Calculator from './Calculator';
import { colors } from './globals'
import { innerWindowWidthAction } from "./actions/innerWindowWidthAction";
import { innerWindowHeightAction } from "./actions/innerWindowHeightAction";
const mapStateToProps = (state) => ({ ...state });
const mapDispatchToProps = (dispatch) => ({
innerWindowWidthAction: (windowInnerWidth) => dispatch(innerWindowWidthAction(windowInnerWidth)),
innerWindowHeightAction: (windowInnerHeight) => dispatch(innerWindowHeightAction(windowInnerHeight)),
});
class App extends React.Component {
constructor(props) {
super(props);
this.handleResize = this.handleResize.bind(this);
};
handleResize() {
this.props.innerWindowWidthAction(window.innerWidth);
this.props.innerWindowHeightAction(window.innerHeight);
};
componentDidMount() {
window.addEventListener('resize',this.handleResize);
};
componentWillUnmount() {
window.removeEventListener('resize',this.handleResize);
};
render() {
const height = this.props.innerWindowHeight;
const width = this.props.innerWindowWidth;
const gitHubLabelStyle = {
backgroundColor: colors.firstColor,
border: 'none',
width: 149,
height: 0,
position: 'absolute',
right: 0,
};
const attachmentStyle = {
position: 'absolute',
right: 0,
height: 149,
width: 149,
};
const style = {
textAlign: 'center',
backgroundColor: colors.firstColor,
height: '100vh',
width: '100vw',
display: 'flex',
color: colors.textColor,
overFlow: 'hidden',
};
if (width > height && height < 400) {
gitHubLabelStyle['width'] = 99;
attachmentStyle['width'] = 99;
attachmentStyle['height'] = 99;
} else if (height > width) {
gitHubLabelStyle['width'] = 99;
attachmentStyle['width'] = 99;
attachmentStyle['height'] = 99;
}
return (
<div style={style}>
<a href="https://github.com/TrentSPalmer/fcc-challenges/tree/gh-pages/calculator-react"
style={gitHubLabelStyle}
target="_blank" rel="noopener noreferrer">
<img
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149"
className="size-full"
style={attachmentStyle}
alt="Fork me on GitHub"
data-recalc-dims="1">
</img>
</a>
<Calculator />
</div>
);
};
};
export default connect(mapStateToProps, mapDispatchToProps)(App);