Fixes and performance improvements

.eslintrc.yaml

@@ -1,4 +1,7 @@
-extends: [ eslint:recommended, plugin:@typescript-eslint/recommended ]
+extends:
+    - eslint:recommended
+    - plugin:@typescript-eslint/recommended
+    - plugin:react-hooks/recommended
 parser: "@typescript-eslint/parser"
 plugins: [ "@typescript-eslint" ]
 root: true

package.json

@@ -19,7 +19,6 @@
     "pre-commit": "npm run check && npm run lint && npm run build && npm test"
   },
   "devDependencies": {
-    "@formatjs/intl-segmenter": "^11.5.3",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.38",
@@ -31,9 +30,10 @@
     "daisyui": "^4.4.9",
     "eslint": "^8.54.0",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-c17a27ef4-20231127",
     "postcss": "^8.4.31",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "0.0.0-experimental-c17a27ef4-20231127",
+    "react-dom": "0.0.0-experimental-c17a27ef4-20231127",
     "react-router-dom": "^6.20.0",
     "tailwindcss": "^3.3.5",
     "tsx": "^4.5.0",

src/app.tsx

@@ -1,7 +1,6 @@
 // import ReactDOM from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from "react-router-dom";
-import '@formatjs/intl-segmenter/polyfill'
 
 import App from './components/App'
 import './app.css'

src/components/Add.tsx

@@ -19,7 +19,7 @@ function Add({ radixes }: { radixes: Radix[] }) {
 				if (isNaN(row) && isNaN(col)) return NaN
 				return isNaN(row) || isNaN(col) ? isNaN(row) ? col : row : row + col
 			}))
-			return <Table key={`add-${radix.name}`} tab="add" radix={radix} numbers={numbers} low={lowest} high={highest}/>
+			return <Table radix={radix} numbers={numbers} low={lowest} high={highest} key={`add-${radix.name}`}/>
 		})}
 	</Tables>
 }

src/components/App.tsx

@@ -13,7 +13,6 @@ import {
 	getCharsLS,
 	getRadixesLS,
 	setRadixesLS,
-	str2arr,
 	num2str,
 	str2num,
 	allowedCharaters,
@@ -30,7 +29,7 @@ export default function App() {
 	// console.log('App: ', { value })
 
 	return <>
-		{ error && <div className="toast toast-top toast-center">
+		{ error && <div className="toast toast-top toast-center z-50">
 			<div className="alert alert-error">
 				<span>{ error }</span>
 			</div>
@@ -52,7 +51,7 @@ export default function App() {
 }
 
 function useStore(updateError: (error?: string) => void) {
-	const [ radixes, setRadixes ] = useState(getRadixesLS() ?? createRadixes(str2arr(getCharsLS())))
+	const [ radixes, setRadixes ] = useState(getRadixesLS() ?? createRadixes(getCharsLS()))
 	const [ enabledRadixes, setEnabledRadixes ] = useState(radixes.filter(v => v.enabled))
 	const [ searchParams, setSearchParams ] = useSearchParams()
 	const [ _value, setValue ] = useState(0n)
@@ -76,12 +75,14 @@ function useStore(updateError: (error?: string) => void) {
 			const sValue = searchParams.get('value')
 			if (sValue) {
 				const [ value, rest ] = sanitizeInput(sValue, radix)
-				if (rest) throw new Error(`Non-Base characters "${rest}" has been filtered out. ${allowedCharaters(radix)}`)
 				setValue(str2num(value, radix))
+				if (rest) throw new Error(`Non-Base characters "${rest}" has been filtered out. ${allowedCharaters(radix)}`)
 			}
 		} catch (error) {
+			console.error(error)
 			updateError((error as Error).message)
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [])
 
 	const updateRadixes = (radixes: Radix[]) => {
@@ -91,10 +92,10 @@ function useStore(updateError: (error?: string) => void) {
 		setEnabledRadixes(enabledRadixes)
 		searchParams.delete('r')
 		setSearchParams([ ...searchParams, ...enabledRadixes.map(r => ['r', r.name]) ] as [string, string][])
+		updateValue(_value, radixes.find(r => r.name === _radix.name))
 	}
 
-	const updateValue = (value: bigint | ((value: bigint) => bigint), radix?: Radix) => {
-		value = (typeof value === 'function') ? value(_value) : value
+	const updateValue = (value: bigint, radix?: Radix) => {
 		if (value === 0n) {
 			searchParams.delete('radix')
 			searchParams.delete('value')
@@ -109,6 +110,7 @@ function useStore(updateError: (error?: string) => void) {
 				searchParams.set('value', num2str(value, r))
 				setSearchParams(searchParams)
 			} catch (error) {
+				console.error(error)
 				updateError((error as Error).message)
 			}
 		}