入力をキャッシュする機能を追加

Author: TrueRyoB

frontend/src/App.svelte

@@ -5,18 +5,20 @@
   import Message from "./components/Message.svelte";
 
   import { Loader } from "@lucide/svelte";
-  import { type Problem } from "./utils/types";
-  import { recordLastInput, loadLastInput, DiffRange } from "./memorizer";
+  import { type Problem, type ClosedRange, createValidRange } from "./utils/types";
+  import { cacheInput, loadLastInput } from "./cacher";
 
-  let lastRange : DiffRange | null = loadLastInput();
+  let cachedInput : ClosedRange | null = loadLastInput();
+  let currentInput : ClosedRange | null;
 
-  let under_diff = $state<string>(lastRange ? lastRange.under.toString():"0");
-  let over_diff = $state<string>("3854");
+  let under_diff = $state<number>(cachedInput ? cachedInput.min : 0);
+  let over_diff = $state<number>(cachedInput ? cachedInput.max : 3854);
   
   let errors = $derived({
-    rangeError: parseInt(under_diff) > parseInt(over_diff),
-    isMinusUnderDiff: parseInt(under_diff) < 0,
-    isMinusOverDiff: parseInt(over_diff) < 0,
+    rangeError: under_diff > over_diff,
+    isMinusUnderDiff: under_diff < 0,
+    isMinusOverDiff: over_diff < 0,
+    invalidRange: !(currentInput = createValidRange(under_diff, over_diff))
   });
 
   let result = $state<Problem | null>(null);
@@ -77,7 +79,9 @@
     <div class="flex items-center gap-2">
       <Input type="number" placeholder="最低Diffを入力してください。" isErrors={errors} bind:value={under_diff} />
       <Input type="number" placeholder="最高Diffを入力してください。" isErrors={errors} bind:value={over_diff} />
-      <Button onclick={sendQuery} class="shrink-0 w-24 h-12 flex justify-center items-center" disabled={loading}>
+      <!--TODO: ここのonClickに入力値保存機能をつける-->
+       <Button onclick={() =>{sendQuery(), cacheInput(currentInput!)}} class="shrink-0 w-24 h-12 flex justify-center items-center" disabled={loading}>
+      <!--ここまで-->
         {#if loading}
           <div class="animate-spin [animation-duration: 1.05s]">
             <Loader size="1.5rem" />

frontend/src/cacher.ts

@@ -0,0 +1,11 @@
+import type { ClosedRange } from './utils/types';
+
+const rangeKey : string = 'lastDiff';
+
+export function cacheInput(range : ClosedRange): void {
+    localStorage.setItem(rangeKey, JSON.stringify(range));
+}
+export function loadLastInput(): ClosedRange | null {
+    const data = localStorage.getItem(rangeKey);
+    return data ? JSON.parse(data) as ClosedRange : null;
+}

frontend/src/memorizer.ts

@@ -3,4 +3,20 @@ export interface Problem {
 	contest_id: string;
 	name: string;
 	difficulty: number;
-};
+};
+
+export type ClosedRange = {
+  min: number;
+  max: number;
+} & { readonly __brand: unique symbol }; 
+
+// for validation
+export function createValidRange(min: number, max: number): ClosedRange | null {
+  if (min > max) return null;
+  
+  return {
+    min,
+    max,
+    __brand: Symbol('ClosedRange') as never
+  };
+}