Merge pull request #87 from DarkFlorist/datediff

make immutability to show datediff

app/ts/components/requirements.tsx

@@ -94,11 +94,36 @@ export const Immutable = ( { checkBoxesArray } : { checkBoxesArray: OptionalSign
 	if (checkBoxesArray.deepValue === undefined) return <></>
 	const checkBoxes = checkBoxesArray.deepValue[checkBoxesArray.deepValue.length - 1]
 	if (checkBoxes === undefined || checkBoxes.type !== 'finalChild') return <></>
+
+	function humanReadableDateDelta(secondsDiff: number) {
+		const secondsInHour = 3600
+		const secondsInDay = secondsInHour * 24
+		const secondsInMonth = secondsInDay * 30
+		const secondsInYear = secondsInDay * 365
+
+		const years = Math.floor(secondsDiff / secondsInYear)
+		secondsDiff %= secondsInYear
+
+		const months = Math.floor(secondsDiff / secondsInMonth)
+		secondsDiff %= secondsInMonth
+
+		const days = Math.floor(secondsDiff / secondsInDay)
+
+		const parts: string[] = []
+		if (years > 0) parts.push(`${ years } year${ years > 1 ? 's' : '' }`)
+		if (months > 0 && years <= 5) parts.push(`${ months } month${ months > 1 ? 's' : '' }`)
+		if (days > 0 && years <= 2) parts.push(`${ days } day${ days > 1 ? 's' : '' }`)
+
+		return parts.length > 0 ? parts.join(' ') : 'less than a day'
+	}
+	const dateDiff = computed(() => humanReadableDateDelta((checkBoxes.domainInfo.expiry.getTime() - new Date().getTime()) / 1000))
+	const dateString = computed(() => checkBoxes.domainInfo.expiry.toISOString().substring(0, 10))
+
 	return <div>
 		<div style = 'padding-top: 30px; padding-bottom: 30px; align-items: center; display: grid; width: 100%'>
 			{ checkBoxes.immutable ? <>
 				<p class = 'status-green'>
-					{`IMMUTABLE until ${ checkBoxes.domainInfo.expiry.toISOString() }` }
+					{`IMMUTABLE for about ${ dateDiff } (until ${ dateString })` }
 				</p>
 			</>: <p class = 'status-red'> NOT IMMUTABLE </p> }
 		</div>