ImageArea - render method restuctured

ImageArea.tsx

import * as React from'react';
import {Component} from'react';
import styled, { css } from 'react-emotion';
import { StyledComponentProps } from "../../types"
import IconW from "../Wrappers/IconW";
import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";


interface Props {
	href: string
	photoURLs: Array<any>
}

interface State {
	isHovered: boolean
	photoIndex: number
	hasBeenHovered:boolean
	height?: number
	width?: number
	aboutToChangeImg: boolean
}

function waitFor(periodInMS:number) { 
	return new Promise(resolve => {
	  setTimeout(() => {
		 resolve();
	  }, periodInMS);
	});
 }

const TRANSITION_PERIOD_IN_MS = 110

class ImageArea extends Component<Props, State> {

	state = {
		isHovered: false, 
		photoIndex: 0, 
		aboutToChangeImg: false, 
		hasBeenHovered: false
	}
	myRef = null

	componentDidMount = () => {
		this.setState({
			//@ts-ignore	
			height: this.myRef.clientHeight, 
			//@ts-ignore
			width: this.myRef.clientWidth 
		})
	}

	onMouseEnter = () => {
		console.log("mouseENTER")
		this.setState({
			isHovered: true, 
			hasBeenHovered: true
		})
	}
	// onMouseLeave = () => {
	// 	console.log("mouseLEFTTTTT")
	// 	this.setState({isHovered:false})
	// }
	onFwd = async () => {
		this.setState({aboutToChangeImg:true})
		await waitFor(TRANSITION_PERIOD_IN_MS)
		this.setState( 
			(prevState:State) => ({
			photoIndex: (prevState.photoIndex===this.props.photoURLs.length-1)? 0: prevState.photoIndex+1, 
			aboutToChangeImg:false
		}) ) 

	}
	onBack = () => {
		this.setState( (prevState:State) => ({
			photoIndex: (prevState.photoIndex===0)? this.props.photoURLs.length-0.5 : prevState.photoIndex-1
		}) ) 
	}
	onArrowClick = (e:React.MouseEvent) => {
		e.preventDefault()
	}
	onHelperClick = (e:React.MouseEvent) => {
		console.log("clicked!")
		e.preventDefault()
	}
	getLinearGradient = (deg:number) => css`
		background: linear-gradient(${deg}deg, rgba(50,50,50,0), rgba(50,50,50,0.19));
	`

	render(){

		const { photoURLs, href } = this.props

		return (
			<LinkW 
				href={href}
				stl={css` 
					background-image: url(${photoURLs[this.state.photoIndex]});
					opacity: ${this.state.aboutToChangeImg? 0.4 : 1};
					//@ts-ignore
					height: ${0.6*this.state.width}px;
				`} 
				onMouseEnter={this.onMouseEnter}
				// onMouseLeave={this.onMouseLeave}
				innerRef={input => {
					this.myRef = input
				}}
			>
				{ 
					this.props.photoURLs.length>1 && ( 
						this.state.isHovered && (
						// <FrontOverlay
						// 	stl={css`
						// 		//@ts-ignore
						// 		width: ${this.state.width}px;
						// 		//@ts-ignore
						// 		height: ${this.state.height}px;
						// 	`}
						// >
							<React.Fragment>
								<ArrowArea
									onMouseDown={this.onBack}
									onClick={this.onArrowClick}
									stl = {this.getLinearGradient(270)}
								>
									<IconW 
										icon={faChevronLeft} 
										stl = {css`
											margin: auto 10px; 
											color: white; 
											/* font-size: 50px;  */
											//@ts-ignore
											font-size: ${this.state.width/12}px; 
											/* margin-right: this.state.w */
										`}
									/>
								</ArrowArea>

								<ArrowArea
									onMouseDown={this.onFwd}
									onClick={this.onArrowClick}
									stl = {css`
										flex-direction: row-reverse; 
										${this.getLinearGradient(90)}
										`
									}
								>
									<IconW 
										icon={faChevronRight} 
										stl = {css`
											margin: auto 10px; 
											color: white; 
											//@ts-ignore
											font-size: ${this.state.width/12}px;
										`}
									/>
								</ArrowArea>
							</React.Fragment>
						) 
						|| 
						this.state.hasBeenHovered && (
							<Hidden>
								{
									this.props.photoURLs.map( 
										(photoUrl) => <img src={photoUrl} key={photoUrl}/>
									)
								}
							</Hidden>
						)
						// </FrontOverlay>
					)
					
				}

			</LinkW>
		)

	}
}

const LinkW = styled("a")`
		border-radius:5px;
		background-size: cover;
		background-position: top center;
		margin: 0 0 7px; 
		position: relative; 
		${ ({stl}:StyledComponentProps) => stl  }
		overflow: hidden; 
		transition: opacity ${TRANSITION_PERIOD_IN_MS/1000}s ease-in;
		display: flex;
		justify-content: space-between;
	`
	
// const FrontOverlay = styled("div")`
// 		position: absolute;
// 		display: flex; 
// 		justify-content: space-between;
// 		${ ({stl}:StyledComponentProps) => stl }
// 		top: 0; 
// `

const Hidden = styled("div")`
		display: none; 
`

const ArrowArea = styled("div")`
		flex-basis: 25%; 
		height: 100%; 
		${ ( {stl}:StyledComponentProps ) => stl}
		display: flex; 
`

export default ImageArea