Fix bug when processing prefix 32 from input

Author: ryuheechul

src/components/parts/IPv4Input.svelte

@@ -1,11 +1,10 @@
 <!-- @component
 A convenient addition to allow pasting/editing as whole
 -->
-<script context="module" lang="ts">
+<script lang="ts">
   import { pattern, parseFrom } from '@lib/ipv4';
-</script>
+  import Toast from './Toast.svelte';
 
-<script lang="ts">
   export let address = 0xc0a80000;
   export let renderedAddress = 'placeholder';
   export let prefix = 16;
@@ -23,16 +22,24 @@ A convenient addition to allow pasting/editing as whole
     elm.select();
   };
 
+  let toast: string | null = null;
+
   const evaluate = () => {
-    const { address: addr, prefix: pref } = parseFrom(inputAsWhole);
-    const isValid = addr > 0 && pref > 0;
+    const { address: addr, prefix: pref, msg } = parseFrom(inputAsWhole);
+    const isValid = addr > -1 && pref > -1;
 
     if (!isValid) {
       return;
     }
 
     address = addr;
     prefix = pref;
+
+    // give feedback on changes from actual input
+    if (msg) {
+      inputAsWhole = placeholder; // also update the input itself
+      toast = msg;
+    }
   };
 
   const onBtnClick = () => {
@@ -56,6 +63,7 @@ A convenient addition to allow pasting/editing as whole
   };
 </script>
 
+<Toast bind:text={toast} type="warning" />
 <div class="relative">
   <div class="absolute text-gray-600 left-5 top-2 lt-sm:top-5 lt-sm:left-0 lt-xs:top--1 z-30">
     <button

src/components/parts/Toast.svelte

@@ -0,0 +1,29 @@
+<!-- @component
+A toast
+-->
+
+<script lang="ts">
+  export let text: string | null = null;
+  export let durationInSec = 1;
+  export let type = 'info';
+
+  const clearToast = (toast: string | null) => {
+    if (toast) {
+      setTimeout(() => {
+        text = null;
+      }, 1000 * durationInSec);
+    }
+  };
+
+  $: {
+    clearToast(text);
+  }
+</script>
+
+<!-- safe list class="alert alert-info alert-success alert-warning alert-error" -->
+
+<div class="toast toast-top toast-end z-50" class:hidden={!text}>
+  <div class={`alert alert-${type}`}>
+    <span>{text}</span>
+  </div>
+</div>

src/lib/ipv4.ts

@@ -108,7 +108,7 @@ export const pattern = patternToTest.toString().slice(1, -1);
 
 const failed = { address: -1, prefix: -1 };
 
-export const parseFrom = (text: string) => {
+export const parseFrom = (text: string): { address: number; prefix: number; msg?: string } => {
   const passed = patternToTest.test(text);
 
   if (!passed) return failed;
@@ -120,5 +120,12 @@ export const parseFrom = (text: string) => {
   const [a, b, c, d, prefix] = matched.slice(1).map((n) => Number(n));
   const address = assemble([a, b, c, d]);
 
-  return { address, prefix };
+  const succeeded = { address, prefix };
+
+  if (prefix < 32) {
+    return succeeded;
+  }
+
+  // avoid calculating 32 as prefix as it doesn't seem to be useful and complicate the logics and UI
+  return { address, prefix: 31, msg: `Prefix ${prefix} stepped down to 31` };
 };

test/lib/ipv4.test.ts

@@ -3,46 +3,46 @@ import { calcHosts, calcIP, assemble, parseFrom } from '../../src/lib/ipv4';
 
 describe('parseFrom', () => {
   it('1.2.3.4/5', () => {
-    expect(parseFrom('1.2.3.4/5')).toEqual({ address: assemble([1, 2, 3, 4]), prefix: 5 });
+    expect(parseFrom('1.2.3.4/5')).toContain({ address: assemble([1, 2, 3, 4]), prefix: 5 });
   });
 
   it('255.255.255.255/32', () => {
-    expect(parseFrom('255.255.255.255/32')).toEqual({
+    expect(parseFrom('255.255.255.255/32')).toContain({
       address: assemble([255, 255, 255, 255]),
       prefix: 32,
     });
   });
 
   it('255.255.255.255/33', () => {
-    expect(parseFrom('255.255.255.255/33')).toEqual({
+    expect(parseFrom('255.255.255.255/33')).toContain({
       address: -1,
       prefix: -1,
     });
   });
 
   it('256.255.255.255/32', () => {
-    expect(parseFrom('256.255.255.255/32')).toEqual({
+    expect(parseFrom('256.255.255.255/32')).toContain({
       address: -1,
       prefix: -1,
     });
   });
 
   it('255.256.255.255/32', () => {
-    expect(parseFrom('255.256.255.255/32')).toEqual({
+    expect(parseFrom('255.256.255.255/32')).toContain({
       address: -1,
       prefix: -1,
     });
   });
 
   it('255.255.256.255/32', () => {
-    expect(parseFrom('255.255.256.255/32')).toEqual({
+    expect(parseFrom('255.255.256.255/32')).toContain({
       address: -1,
       prefix: -1,
     });
   });
 
   it('255.255.255.256/32', () => {
-    expect(parseFrom('255.255.255.256/32')).toEqual({
+    expect(parseFrom('255.255.255.256/32')).toContain({
       address: -1,
       prefix: -1,
     });