make typescript happy

tauri-wallet/src/routes/internal-docs/ApiList.tsx

@@ -1,28 +1,22 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  Checkbox,
-  FormControlLabel,
-  Grid,
-  InputAdornment,
-  List,
-  ListItem,
-  TextField,
-  Theme,
-} from '@material-ui/core'
-import { useTheme } from '@material-ui/styles'
+import React from 'react'
+import { List, ListItem } from '@material-ui/core'
+
 import { DocEntry } from './DocEntry'
 
 export const ApiList = () => {
-  const [advancedShown, setAdvancedShown] = React.useState(false)
-
-  const theme: Theme = useTheme()
-
   return (
     <List>
-      <ListItem><DocEntry function={{ name: 'connect_with_mnemonic', args: [{ name: 'mnemonic', type: 'str' }] }} /></ListItem>
-      <ListItem><DocEntry function={{ name: 'get_balance', args: [] }} /></ListItem>
+      <ListItem>
+        <DocEntry
+          function={{
+            name: 'connect_with_mnemonic',
+            args: [{ name: 'mnemonic', type: 'str' }],
+          }}
+        />
+      </ListItem>
+      <ListItem>
+        <DocEntry function={{ name: 'get_balance', args: [] }} />
+      </ListItem>
     </List>
-
   )
 }

tauri-wallet/src/routes/internal-docs/DocEntry.tsx

@@ -1,85 +1,90 @@
 import React, { useState } from 'react'
-import {
-    Box,
-    Button,
-    Card,
-    Checkbox,
-    Divider,
-    FormControlLabel,
-    Grid,
-    InputAdornment,
-    TextField,
-    Theme,
-} from '@material-ui/core'
-import { useTheme } from '@material-ui/styles'
+import { Button, Card, TextField } from '@material-ui/core'
 import { invoke } from '@tauri-apps/api'
-import CardContent from '@material-ui/core/CardContent';
+import CardContent from '@material-ui/core/CardContent'
 
 interface DocEntryProps {
-    function: FunctionDef;
+  function: FunctionDef
 }
 
 interface FunctionDef {
-    name: string,
-    args: ArgDef[]
+  name: string
+  args: ArgDef[]
 }
 
 interface ArgDef {
-    name: string,
-    type: string
+  name: string
+  type: string
 }
 
 const argKey = (functionName: string, arg: string) => `${functionName}_${arg}`
 
 function collectArgs(functionName: string, args: ArgDef[]) {
-    let invokeArgs = {}
-    for (let arg of args) {
-        invokeArgs[arg.name] = document.getElementById(argKey(functionName, arg.name)).value
-    }
-    return invokeArgs
+  let invokeArgs: { [key: string]: string } = {}
+  args.forEach((arg) => {
+    const elem: HTMLElement | null = document.getElementById(
+      argKey(functionName, arg.name)
+    )
+    if (elem) invokeArgs[arg.name] = (elem as HTMLInputElement).value || ''
+  })
+
+  return invokeArgs
 }
 
 export const DocEntry = (props: DocEntryProps) => {
-    const [card, setCard] = React.useState(<Card />)
-    const theme: Theme = useTheme()
+  const [card, setCard] = React.useState(<Card />)
 
-    const onClick = () => {
-        invoke(props.function.name, collectArgs(props.function.name, props.function.args)).then(
-            (result) => {
-                setCard(<Card><CardContent>{JSON.stringify(result, null, 4)}</CardContent></Card>)
-            }
-        ).catch(
-            (e) => setCard(<Card><CardContent>{e}</CardContent></Card>)
+  const onClick = () => {
+    invoke(
+      props.function.name,
+      collectArgs(props.function.name, props.function.args)
+    )
+      .then((result) => {
+        setCard(
+          <Card>
+            <CardContent>{JSON.stringify(result, null, 4)}</CardContent>
+          </Card>
         )
-    }
+      })
+      .catch((e) =>
+        setCard(
+          <Card>
+            <CardContent>{e}</CardContent>
+          </Card>
+        )
+      )
+  }
 
-    let fields = []
-    for (let arg of props.function.args) {
-        fields.push(<TextField
+  return (
+    <div>
+      <Button
+        variant="contained"
+        color="primary"
+        size="small"
+        disableElevation
+        onClick={onClick}
+      >
+        {props.function.name}
+      </Button>
+      <Button
+        variant="contained"
+        size="small"
+        disableElevation
+        onClick={() => setCard(<Card />)}
+      >
+        X
+      </Button>
+      <div>
+        {props.function.args.map((arg) => (
+          <TextField
             label={arg.name}
             id={argKey(props.function.name, arg.name)}
-            key={argKey(props.function.name, arg.name)} />
-        )
-    }
-    return (
-        <div>
-            <Button variant="contained"
-                color="primary"
-                size="small"
-                disableElevation
-                onClick={onClick}>
-                {props.function.name}
-            </Button>
-            <Button
-                variant="contained"
-                size="small"
-                disableElevation
-                onClick={() => setCard(<Card />)}>X
-            </Button>
-            <div>{fields}</div>
-            <br />
-            {card}
-        </div>
-
-    )
+            key={argKey(props.function.name, arg.name)}
+          />
+        ))}
+      </div>
+      <br />
+      {card}
+    </div>
+  )
 }