Merge pull request #51 from DarkFlorist/fix-year-picker

fix year picker
DarkFlorist · Sep 17, 2024 · ee5de16 · ee5de16
2 parents c0d1d94 + 8a8b276
commit ee5de16
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 47 deletions.
diff --git a/app/css/index.css b/app/css/index.css
@@ -1,6 +1,6 @@
 *,
 *::before,
-*::after { 
+*::after {
 	box-sizing: border-box;
 }
 
@@ -223,7 +223,7 @@ button:disabled, button[disabled] {
 	content: "✔";
 }
 .check:hover {
-	cursor: pointer; 
+	cursor: pointer;
 	opacity: 0.8;
 }
 
@@ -259,13 +259,12 @@ button:disabled, button[disabled] {
 	display: flex;
 	align-items: center;
 	border-bottom: 1px solid #D5DCE6;
-	background-color: #fff;
 	border-radius: 5px;
 	font-size: 30px;
 }
 .year-selector-counter {
 	position: relative;
-	width: 1em;
+	width: 2em;
 	height: 1em;
 	color: #333C48;
 	text-align: center;

diff --git a/app/index.html b/app/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
-
-<head>
-	<meta charset = 'utf-8'>
-	<meta name = 'viewport' content = 'width=device-width'>
-	<link rel = 'stylesheet' href = './css/index.css'>
-	<link rel = 'shortcut icon' href = 'favicon.svg' type = 'image/x-icon'>
-</head>
-<body style>
+<!DOCTYPE html>
+
+<head>
+	<meta charset = 'utf-8'>
+	<meta name = 'viewport' content = 'width=device-width'>
+	<link rel = 'stylesheet' href = './css/index.css'>
+	<link rel = 'shortcut icon' href = 'favicon.svg' type = 'image/x-icon'>
+</head>
+<body style>
 	<script type='importmap'>
 		{
 			"imports": {
@@ -44,10 +44,10 @@
 				"funtypes": "./vendor/funtypes/index.mjs"
 			}
 		}
-	</script>
-
-	<main>Loading...</main>
-
-	<!-- a workaround for bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1803984 -->
-	<script async type = 'module'>import './js/index.js'</script>
-</body>
+	</script>
+
+	<main>Loading...</main>
+
+	<!-- a workaround for bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1803984 -->
+	<script async type = 'module'>import './js/index.js'</script>
+</body>
diff --git a/app/ts/components/YearPicker.tsx b/app/ts/components/YearPicker.tsx
@@ -1,34 +1,40 @@
 import { Signal } from '@preact/signals'
-import * as funtypes from 'funtypes'
+import { JSX } from 'preact/jsx-runtime'
 
-interface CreateProps {
-	year: Signal<number>
-}
-
-export const YearPicker = ( { year }: CreateProps) => {
-	const setYear = (text: string) => {
-		const yearToSet = funtypes.Number.parse(text)
-		year.value = yearToSet
-	}
+export const YearPicker = ( { year, validYear }: { year: Signal<number>, validYear: Signal<boolean>  }) => {
 	const increment = () => {
 		year.value = year.value + 1
 	}
+
 	const decrement = () => {
 		year.value = Math.max(year.value - 1, 1)
 	}
-	return <div class = 'year-selector'>
-		<div class = 'year-selector-button year-selector-button-decrement' onClick = { decrement }>&ndash;</div>
-		<div class = 'year-selector-counter'>
-			<input
-				class = 'year-selector-counter-input'
-				maxlength = { 4 }
-				type = 'text'
-				pattern = '\d*'
-				value = { year.value }
-				onInput = { e => setYear(e.currentTarget.value) }
-			/>
-			<div class = 'year-selector-counter-num'>{ year }</div>
+
+	const handleInputChange = (event: JSX.TargetedEvent<HTMLInputElement, Event>) => {
+		const inputValue = event.currentTarget.value
+		const parsedYear = parseInt(inputValue, 10)
+		if (!isNaN(parsedYear) && parsedYear > 0) {
+			year.value = parsedYear
+			validYear.value = true
+		} else {
+			validYear.value = false
+		}
+	}
+
+	return (
+		<div class = 'year-selector'>
+			<div class = 'year-selector-button year-selector-button-decrement' onClick = { decrement }>&ndash;</div>
+			<div class = 'year-selector-counter'>
+				<input
+					class = 'year-selector-counter-input'
+					maxLength = { 4 }
+					type = 'text'
+					value = { year }
+					onInput = { handleInputChange }
+				/>
+				<div class = 'year-selector-counter-num'>{ year }</div>
+			</div>
+			<div class = 'year-selector-button year-selector-button-increment' onClick = { increment }>+</div>
 		</div>
-		<div class = 'year-selector-button year-selector-button-increment' onClick = { increment }>+</div>
-	</div>
+	)
 }
diff --git a/app/ts/components/requirements.tsx b/app/ts/components/requirements.tsx
@@ -1,4 +1,4 @@
-import { computed, Signal } from '@preact/signals'
+import { computed, Signal, useSignal } from '@preact/signals'
 import { AccountAddress, CheckBoxes, FinalChildChecks, ParentChecks } from '../types/types.js'
 import { ENS_TOKEN_WRAPPER } from '../utils/constants.js'
 import { callPetalLock, deployPetalLockAndRenewalManager, getOpenRenewalManagerAddress, getRequiredFuses, renewDomainByYear, renewDomainToMax } from '../utils/ensUtils.js'
@@ -111,6 +111,8 @@ interface CreateProps {
 }
 
 export const Create = ( { contentHashInput, resolutionAddressInput, loadingInfos, immutable, handleContentHashInput, handleResolutionAddressInput, accountAddress, checkBoxes, updateInfos, creating, areContractsDeployed, extendYear, extending }: CreateProps) => {
+	const isYearValid = useSignal<boolean>(true)
+
 	if (checkBoxes.deepValue === undefined) return <></>
 	const subDomain = checkBoxes.deepValue[checkBoxes.deepValue.length -1]?.domainInfo.subDomain
 	if (subDomain === undefined) throw new Error('missing subdomain')
@@ -240,8 +242,8 @@ export const Create = ( { contentHashInput, resolutionAddressInput, loadingInfos
 			{ immutable.value ? <div class = 'extend-dialog'>
 				<p style = 'white-space: nowrap; margin: 0; font-size: 24px; padding-bottom: 10px; justify-self: center;'>{ `Renew ${ subDomain }` }</p>
 				<div style = 'justify-content: center;'>
-					<p style = 'font-size: 24px;'> Renew by&nbsp;</p> <YearPicker year = { extendYear }/> <p style = 'font-size: 24px;'>&nbsp;years </p>
-					<button style = 'font-size: 3em;' class = 'button is-primary' disabled = { extending.value } onClick = { renewByYear }> Renew { extending.value ? <Spinner/> : <></> }</button>
+					<p style = 'font-size: 24px;'> Renew by&nbsp;</p> <YearPicker validYear = { isYearValid } year = { extendYear }/> <p style = 'font-size: 24px;'>&nbsp;years </p>
+					<button style = 'font-size: 3em;' class = 'button is-primary' disabled = { extending.value || !isYearValid.value } onClick = { renewByYear }> Renew { extending.value ? <Spinner/> : <></> }</button>
 				</div>
 				{ !level2DomainExpiryBiggerThanLowestLevelExpiry.value || checkBoxes.deepValue[0] === undefined ? <></> : <>
 					<div style = 'justify-content: center; font-size: 24px;'>