greatly simplify state + cleanup code

src/InputBlock.tsx

@@ -1,34 +1,49 @@
-import { Double, getType, Int, newDynamic, trie } from "dope2";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+
+import { Double, getType, Int, newDynamic, prettyT, trie } from "dope2";
+
+import { EnvContext } from "./EnvContext";
+import type { Dynamic } from "./eval";
+import "./InputBlock.css";
+import { Type } from "./Type";
+import type { State2Props } from "./Editor";
 import { autoInputWidth, focusNextElement, focusPrevElement, setRightMostCaretPosition } from "./util/dom_trickery";
 import { parseDouble, parseInt } from "./util/parse";
 
-import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Type } from "./Type";
-
-import "./InputBlock.css";
-import type { Dynamic, State2Props } from "./types";
-import { EnvContext } from "./EnvContext";
+interface Literal {
+  kind: "literal";
+  type: string; // todo: store (and serialize) real type
+};
+interface Name {
+  kind: "name";
+}
+interface Text {
+  kind: "text";
+}
+export type InputValueType = Literal | Name | Text;
 
 export interface InputBlockState {
   kind: "input";
   text: string;
-  resolved: undefined | Dynamic;
+  value: InputValueType;
   focus: boolean
 }
 
+export type SuggestionType = ['literal'|'name', string, Dynamic];
+
 interface InputBlockProps extends State2Props<InputBlockState> {
-  filter: (suggestion: [string, Dynamic]) => boolean;
+  filter: (suggestion: SuggestionType) => boolean;
   onCancel: () => void;
 }
 
-const computeSuggestions = (text, env, filter) => {
+const computeSuggestions = (text, env, filter): SuggestionType[] => {
   const asDouble = parseDouble(text);
   const asInt = parseInt(text);
 
   const ls = [
-    ... (asDouble ? [[asDouble.toString(), newDynamic(asDouble)(Double)]] : []),
-    ... (asInt ? [[asInt.toString(), newDynamic(BigInt(asInt))(Int)]] : []),
-    ... trie.suggest(env.name2dyn)(text)(Infinity),
+    ... (asDouble ? [["literal", asDouble.toString(), newDynamic(asDouble)(Double)]] : []),
+    ... (asInt ? [["literal", asInt.toString(), newDynamic(BigInt(asInt))(Int)]] : []),
+    ... trie.suggest(env.name2dyn)(text)(Infinity).map(([name,type]) => ["name", name, type]),
   ]
   // return ls;
   return [
@@ -39,7 +54,7 @@ const computeSuggestions = (text, env, filter) => {
 }
 
 export function InputBlock({ state, setState, filter, onCancel }: InputBlockProps) {
-  const {text, resolved, focus} = state;
+  const {text, focus} = state;
   const env = useContext(EnvContext);
   const inputRef = useRef<HTMLInputElement>(null);
   const [i, setI] = useState(0); // selected suggestion idx
@@ -68,7 +83,7 @@ export function InputBlock({ state, setState, filter, onCancel }: InputBlockProp
 
   const onTextChange = newText => {
     const found = trie.get(env.name2dyn)(newText);
-    setState(state => ({...state, text: newText, resolved: found}));
+    setState(state => ({...state, text: newText}));
   }
 
   // fired before onInput
@@ -131,8 +146,21 @@ export function InputBlock({ state, setState, filter, onCancel }: InputBlockProp
     onTextChange(e.target.value);
   };
 
-  const onSelectSuggestion = ([name, dynamic]) => {
-    setState(state => ({...state, text: name, resolved: dynamic}));
+  const onSelectSuggestion = ([kind, name, dynamic]: SuggestionType) => {
+    if (kind === "literal") {
+      setState(state => ({
+        ...state,
+        text: name,
+        value: {kind, type: prettyT(getType(dynamic))},
+      }));
+    }
+    else {
+      setState(state => ({
+        ...state,
+        text: name,
+        value: {kind},
+      }))
+    }
   };
 
   return <span>
@@ -158,7 +186,6 @@ export function InputBlock({ state, setState, filter, onCancel }: InputBlockProp
         spellCheck={false}/>
       {/* Single 'grey' suggestion */}
       <span className="text-block suggest">{singleSuggestion}</span>
-      {/* { resolved && <>&#x2611;</>} */}
     </span>
   </span>;
 }
@@ -173,13 +200,13 @@ function Suggestions({ suggestions, onSelect, i, setI }) {
   };
   return <>{(suggestions.length > 0) &&
     <div className={"suggestions"}>
-      {suggestions.map(([name, dynamic], j) =>
+      {suggestions.map(([kind, name, dynamic], j) =>
         <div
           key={`${j}_${name}`}
           className={(i === j ? " selected" : "")}
           onMouseEnter={onMouseEnter(j)}
           onMouseDown={onMouseDown(j)}>
-            {name} :: <Type type={getType(dynamic)} />
+            ({kind}) {name} :: <Type type={getType(dynamic)} />
         </div>)}
     </div>
   }</>;