import { Component } from 'react'
import '../stylesheets/ui.scss'

export class SkiDayCount extends Component {
	percentToDecimal(decimal) {
		return ((decimal * 100) + '%')
	}
	calcGoalProgress(total, goal) {
		return this.percentToDecimal(total/goal)
	}
	render() {
		return (
			<div className="ski-day-count">
				<div className="total-days">
					<span>{this.props.total}</span>
					<span>days</span>
				</div>
				<div className="powder-days">
					<span>{this.props.powder}</span>
					<span>days</span>
				</div>
				<div className="backcountry-days">
					<span>{this.props.backcountry}</span>
					<span>days</span>
				</div>
				<div>
					<span>
						{this.calcGoalProgress(
							this.props.total, 
							this.props.goal
						)}
					</span>
				</div>
			</div>
		)
	}
}
@@ -4,114 +4,40 @@
 ort 
-%7B Component %7D from 'react'%0Aimport '../stylesheets/ui.scss'%0A%0Aexport class SkiDayCount extends Component %7B%0A%09
+'../stylesheets/ui.scss'%0A%0Aconst 
 perc
@@ -48,16 +48,19 @@
 oDecimal
+ = 
 (decimal
@@ -60,20 +60,22 @@
 decimal)
+ =%3E
  %7B%0A
-%09
 %09return 
@@ -98,20 +98,25 @@
  + '%25')%0A
-%09
 %7D%0A
-%09
+%0Aconst 
 calcGoal
@@ -123,16 +123,19 @@
 Progress
+ = 
 (total, 
@@ -139,28 +139,30 @@
 l, goal)
+ =%3E
  %7B%0A
-%09
 %09return 
 this.per
@@ -153,21 +153,16 @@
 %09return 
-this.
 percentT
@@ -186,35 +186,80 @@
 al)%0A
-%09
 %7D%0A
-%09render() %7B%0A%09%09return
+%0Aexport const SkiDayCount = (%7Btotal, powder, backcountry, goal%7D) =%3E
  (%0A
-%09
 %09%09%3Cd
@@ -287,25 +287,24 @@
 -count%22%3E%0A%09%09%09
-%09
 %3Cdiv classNa
@@ -312,33 +312,32 @@
 e=%22total-days%22%3E%0A
-%09
 %09%09%09%09%3Cspan%3E%7Bthis.
@@ -331,27 +331,16 @@
 %09%3Cspan%3E%7B
-this.props.
 total%7D%3C/
@@ -337,33 +337,32 @@
 %3E%7Btotal%7D%3C/span%3E%0A
-%09
 %09%09%09%09%3Cspan%3Edays%3C/
@@ -366,33 +366,31 @@
 s%3C/span%3E%0A%09%09%09
-%09
 %3C/div%3E%0A
-%09
 %09%09%09%3Cdiv clas
@@ -414,35 +414,23 @@
 s%22%3E%0A%09%09%09%09
-%09
 %3Cspan%3E%7B
-this.props.
 powder%7D%3C
@@ -428,33 +428,32 @@
 %7Bpowder%7D%3C/span%3E%0A
-%09
 %09%09%09%09%3Cspan%3Edays%3C/
@@ -457,33 +457,31 @@
 s%3C/span%3E%0A%09%09%09
-%09
 %3C/div%3E%0A
-%09
 %09%09%09%3Cdiv clas
@@ -514,27 +514,15 @@
 %09%09%09%09
-%09
 %3Cspan%3E%7B
-this.props.
 back
@@ -537,25 +537,24 @@
 %3C/span%3E%0A%09%09%09%09
-%09
 %3Cspan%3Edays%3C/
@@ -554,33 +554,32 @@
 %3Edays%3C/span%3E%0A%09%09%09
-%09
 %3C/div%3E%0A%09%09%09%09%3Cdiv%3E
@@ -576,16 +576,14 @@
 %0A%09%09%09
-%09
 %3Cdiv%3E%0A
-%09
 %09%09%09%09
@@ -598,15 +598,9 @@
 %09%09%09%09
-%09%7Bthis.
+%7B
 calc
@@ -619,28 +619,16 @@
 (%0A%09%09%09%09%09%09
-%09this.props.
 total, %0A
@@ -637,20 +637,8 @@
 %09%09%09%09
-%09this.props.
 goal
@@ -647,13 +647,11 @@
 %09%09%09%09
-%09
 )%7D%0A
-%09
 %09%09%09%09
@@ -661,25 +661,23 @@
 pan%3E%0A%09%09%09
-%09
 %3C/div%3E%0A
-%09
 %09%09%3C/div%3E
@@ -681,12 +681,6 @@
 iv%3E%0A
-%09%09)%0A%09%7D%0A%7D
+)%0A

Refactor SkiDaysCount as a stateless functional component.