add support for adding audio via the ankiconnect android app

sakura/README.md

@@ -1,79 +1,70 @@
-# how to build a new version
-
-Cd into this directory
+# Common development instructions
 
 ```sh
-(cd ../loaderapp && ./publish.sh)
-
-```
-
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `yarn test`
+# install dependencies
+yarn install
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+# start the development server
+yarn start
 
-### `yarn build`
+# run unit tests
+npx cypress run-ct
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+# run browser tests
+npx cypress run
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+# build a new version for deployment
+(cd ../loaderapp && ./publish.sh)
+```
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+# How to develop against Ankiconnect Android
 
-### Code Splitting
+These instructions are for developing against the Android version of Ankiconnect
+called Ankiconnect Android. This will work for the following scenarios:
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+1. You have an android device such as your mobile phone or tablet.
+2. You are using an existing version of Ankiconnect Android, or you are
+   developing a version with Android Studio and you can run it on your device.
 
-### Analyzing the Bundle Size
+## Prerequisites for development
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+These instructions are for Chrome on a Mac. If you are using a different browser
+or operating system, you may need to find the equivalent steps.
 
-### Making a Progressive Web App
+- Install Ankiconnect Android on your device
+- Connect your device to your computer and enable USB debugging in Android.
+- Connect your Android device to the same network as your computer.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+## Connecting to hare on your Android device
 
-### Advanced Configuration
+1. Find out the IP address of your computer. For example, if you are on a
+   Mac, you can run `ifconfig | grep inet` and look for the IP address that
+   starts with 192.168.0. or 10.0.0.
+1. In the Ankiconnect Android app, go to the settings and change the cors setting
+   to `*`. This will allow access from any host. If you want to limit this, you
+   can also set it to `http://<the ip address of your computer>:4000`. The
+   settings will be taken into use immediately.
+1. Start hare on your computer with `yarn start`. This will make it available to
+   the network so you can connect to it from your device.
+1. On your device, open http://<your computer's IP address>:4000
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+## Connect your computer's chrome to your Android device's chrome
 
-### Deployment
+1. Connect your Android device to your computer with a USB cable.
+2. Open Chrome on your computer and go to chrome://inspect/#devices . You will
+   be presented with a list of tabs on your device. Choose the tab that is running
+   hare.
+3. Now you can use the developer tools on your computer to debug the code on your
+   device. Run the following code to test the connection:
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+```js
+fetch("http://localhost:8765")
+  .then((r) => r.text())
+  .then(console.log);
+```
 
-### `yarn build` fails to minify
+It will respond with "Ankiconnect Android is running.". If you get a CORS error,
+double check that you have set the cors setting in the app to `*` or
+`http://<your computer's IP address>:4000`.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+NOTE: on your device, you need to have the chrome tab active for this to work.

sakura/package.json

@@ -37,11 +37,11 @@
     "@cypress/webpack-dev-server": "^1.3.0",
     "@types/lodash": "^4.14.191",
     "@types/react-router-dom": "^5.3.3",
-    "cypress": "8.1.0",
+    "cypress": "8.5.0",
     "cypress-file-upload": "^5.0.8",
     "fake-indexeddb": "^3.1.3",
     "prettier": "^2.3.1",
-    "prettier-plugin-organize-imports": "^2.1.0",
+    "prettier-plugin-organize-imports": "^3.2.2",
     "react-json-view": "^1.21.3",
     "typescript": "^4.9.4",
     "worker-loader": "^3.0.8"

sakura/src/App.css

@@ -273,9 +273,6 @@ superscript {
   background-color: black;
 }
 
-#delete-confirmation {
-}
-
 #delete-confirmation .title {
   background-color: #212529;
 }

sakura/src/App.js

@@ -1,6 +1,6 @@
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "bootstrap/dist/css/bootstrap.min.css";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Container from "react-bootstrap/Container";
 import {
   HashRouter as Router,

sakura/src/utils/ClearableSearch.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import InputGroup from "react-bootstrap/InputGroup";

sakura/src/utils/yomichan/yomichanDatabase.tsx

@@ -33,6 +33,7 @@ export interface YomichanTerm {
 }
 
 export type AnkiFieldContentType =
+  | "(empty)"
   | "sentence"
   | "definition"
   | "englishTranslation"

sakura/src/views/dict/Definitions.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Accordion from "react-bootstrap/Accordion";
 import Alert from "react-bootstrap/Alert";
 import Button from "react-bootstrap/Button";

sakura/src/views/dict/Dictionaries.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Alert from "react-bootstrap/Alert";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Spinner from "react-bootstrap/Spinner";

sakura/src/views/dict/SearchBox.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import InputGroup from "react-bootstrap/InputGroup";

sakura/src/views/dict/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   generatePath,
   useHistory,