feat: Commodity selection with buttons

Closes #1

.eslintrc

@@ -1,42 +1,42 @@
 {
-    "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "experimentalObjectRestSpread": true
-        }
-    },
-    "settings": {
-        "react": {
-            "version": "17"
-        }
-    },
-    "rules": {
-        "sort-keys-fix/sort-keys-fix": "warn",
-        "@typescript-eslint/ban-ts-comment": 0,
-        "@typescript-eslint/explicit-module-boundary-types": 0,
-        "@typescript-eslint/no-explicit-any": 0,
-        "@typescript-eslint/no-namespace": 0,
-        "@typescript-eslint/no-var-requires": 0,
-        "eqeqeq":  ["error", "smart"]
-    },
-    "extends": [
-        "plugin:react/recommended",
-        "prettier",
-        "plugin:jest/recommended",
-        "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended"
-    ],
-    "env": {
-        "amd": true,
-        "browser": true,
-        "es6": true,
-        "node": true,
-        "jest": true
-    },
-    "globals": {
-        "React": true,
-        "__VERSION__": true
-    },
-    "plugins": ["@typescript-eslint", "jest", "prettier", "react-hooks", "react", "sort-keys-fix"]
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "17"
+    }
+  },
+  "rules": {
+    "sort-keys-fix/sort-keys-fix": "warn",
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-namespace": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "eqeqeq": ["error", "smart"]
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "prettier",
+    "plugin:jest/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "env": {
+    "amd": true,
+    "browser": true,
+    "es6": true,
+    "node": true,
+    "jest": true
+  },
+  "globals": {
+    "React": true,
+    "__VERSION__": true
+  },
+  "plugins": ["@typescript-eslint", "jest", "prettier", "react-hooks", "react", "sort-keys-fix"]
 }

frontend/src/pages/dashboard/entry-row.tsx

@@ -1,10 +1,10 @@
-import { Comment, Posting, isComment } from 'pta-tools';
-
 import React, { FC } from 'react';
 
+import { Comment, Posting, isComment } from 'pta-tools';
+
 import AsyncAutocomplete from 'atoms/async-autocomplete';
 
-import { Autocomplete, Button, Group, Space, TextInput, createStyles } from '@mantine/core';
+import { Button, Chip, Chips, Group, Space, TextInput, createStyles } from '@mantine/core';
 
 const useStyles = createStyles(theme => {
   return {
@@ -24,11 +24,12 @@ const useStyles = createStyles(theme => {
 const EntryRow: FC<{
   amountPlaceholder: string | null;
   canDelete: boolean;
+  commodities: string[];
   description: string | undefined;
   entry: Posting | Comment;
   removeRow: () => void;
   updateRow: (field: string, value: string) => void;
-}> = ({ amountPlaceholder, canDelete, entry, removeRow, updateRow, description }) => {
+}> = ({ amountPlaceholder, canDelete, entry, removeRow, updateRow, description, commodities }) => {
   const { classes } = useStyles();
   if (isComment(entry)) {
     return null;
@@ -55,14 +56,21 @@ const EntryRow: FC<{
         style={{ flex: 2 }}
         onChange={event => updateRow('amount', event.currentTarget.value)}
       />
-      <AsyncAutocomplete
-        endpoint="/api/s/commodity"
-        params={params.join('&')}
-        placeholder="Commodity"
-        value={entry.commodity || ''}
-        style={{ flex: 1 }}
-        onChange={value => updateRow('commodity', value)}
-      />
+
+      <Chips
+        size="xs"
+        radius="sm"
+        value={entry.commodity}
+        onChange={(val: string) => {
+          updateRow('commodity', val);
+        }}>
+        {commodities.map(c => (
+          <Chip key={c} value={c}>
+            {c}
+          </Chip>
+        ))}
+      </Chips>
+
       {canDelete ? (
         <Button compact onClick={removeRow} variant="outline">
           Remove

frontend/src/pages/dashboard/index.tsx

@@ -17,26 +17,27 @@ import EntryRow from './entry-row';
 import PaymentAccount from './payment-acct-row';
 import prepareSubmitData from './prepare-submit';
 
-const EMPTY_ENTRY: Posting = {
-  account: '',
-  amount: ''
-};
-
 export const OPTION_SPLITWISE = 'splitwise';
 
 export type FormData = Transaction & {
   payingAccount?: string;
 };
 
-const Dashboard: FC<{ journal: Api.BootstrapResponse }> = () => {
+const Dashboard: FC<{ journal: Api.BootstrapResponse }> = ({ journal }) => {
   const notifications = useNotifications();
   const [options, setOptions] = useState<string[]>([]);
 
+  const emptyEntry: Posting = {
+    account: '',
+    amount: '',
+    commodity: journal.commodities.length === 1 ? journal.commodities[0] : ''
+  };
+
   const { onSubmit, values, setFieldValue, setValues, reset } = useForm<FormData>({
     initialValues: {
       date: new Date(),
       description: '',
-      entries: [EMPTY_ENTRY]
+      entries: [emptyEntry]
     }
   });
 
@@ -51,7 +52,7 @@ const Dashboard: FC<{ journal: Api.BootstrapResponse }> = () => {
   function addRow() {
     setValues(state => ({
       ...state,
-      entries: state.entries.concat({ ...EMPTY_ENTRY })
+      entries: state.entries.concat({ ...emptyEntry })
     }));
   }
 
@@ -147,6 +148,7 @@ const Dashboard: FC<{ journal: Api.BootstrapResponse }> = () => {
             removeRow={removeRow(i)}
             updateRow={updateRow(i)}
             amountPlaceholder={amountPlaceholder}
+            commodities={journal.commodities}
           />
         ))}
         <PaymentAccount