From b051d757f0404d3a7362392a48158f060c456aa7 Mon Sep 17 00:00:00 2001 From: Egor Gorbachev <7gorbachevm@gmail.com> Date: Thu, 22 Feb 2024 13:57:16 +0700 Subject: [PATCH] Voice quick card preview (#16) * Bump mobx-form-lite * Add voice for card previews opened via the quick card button * Make IDE refer to implemented properties / methods --- package-lock.json | 8 +++---- package.json | 2 +- .../deck-catalog/store/deck-catalog-store.ts | 4 +--- .../deck-form/quick-add-card-form-page.tsx | 21 ++++++++++++++++++- .../store/card-form-store-interface.ts | 4 ++-- .../deck-form/store/deck-form-store.ts | 6 +----- .../store/quick-add-card-form-store.ts | 14 +++++++------ .../folder-form/store/folder-form-store.ts | 9 +++++++- .../share-deck/store/share-deck-form-store.ts | 4 +--- src/store/user-store.ts | 4 +--- src/ui/dropdown.tsx | 2 +- 11 files changed, 48 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2d62bd4c..ff0235c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "luxon": "^3.4.3", "mathml-tag-names": "^3.0.2", "mobx": "^6.10.2", - "mobx-form-lite": "^0.8.1", + "mobx-form-lite": "^0.8.4", "mobx-log": "^2.2.3", "mobx-persist-store": "^1.1.3", "mobx-react-lite": "^4.0.5", @@ -4931,9 +4931,9 @@ } }, "node_modules/mobx-form-lite": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/mobx-form-lite/-/mobx-form-lite-0.8.1.tgz", - "integrity": "sha512-+4khv+Jfd3eYjLIzC1zZtgkA9chliFolbz8aTQlpLkZRVu+mhShNtwVqJpu1Gh2Kzpj/A/Cqet9MkkHtqUPWqg==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/mobx-form-lite/-/mobx-form-lite-0.8.4.tgz", + "integrity": "sha512-9LySDjPUM6te1gKOND6XwCK76WD34qSedQYu8ROf/xj6Hpt/i3eMlPjsjvGsLf0Ofw55riKY6y+D0ahjXoIAJA==", "dependencies": { "mobx": "^5.0.0 || ^6.0.0" } diff --git a/package.json b/package.json index 2c989f81..e4cf6c86 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "luxon": "^3.4.3", "mathml-tag-names": "^3.0.2", "mobx": "^6.10.2", - "mobx-form-lite": "^0.8.1", + "mobx-form-lite": "^0.8.4", "mobx-log": "^2.2.3", "mobx-persist-store": "^1.1.3", "mobx-react-lite": "^4.0.5", diff --git a/src/screens/deck-catalog/store/deck-catalog-store.ts b/src/screens/deck-catalog/store/deck-catalog-store.ts index 08b39a89..16ac8095 100644 --- a/src/screens/deck-catalog/store/deck-catalog-store.ts +++ b/src/screens/deck-catalog/store/deck-catalog-store.ts @@ -6,9 +6,7 @@ import { TextField } from "mobx-form-lite"; import { cachePromise } from "../../../lib/cache/cache-promise.ts"; import { DeckCategoryResponse } from "../../../../functions/deck-categories.ts"; import { t } from "../../../translations/t.ts"; -import { - persistableField -} from "../../../lib/mobx-form-lite-persistable/persistable-field.ts"; +import { persistableField } from "../../../lib/mobx-form-lite-persistable/persistable-field.ts"; export enum DeckLanguage { Any = "any", diff --git a/src/screens/deck-form/quick-add-card-form-page.tsx b/src/screens/deck-form/quick-add-card-form-page.tsx index 4afd774c..8f720c3f 100644 --- a/src/screens/deck-form/quick-add-card-form-page.tsx +++ b/src/screens/deck-form/quick-add-card-form-page.tsx @@ -2,9 +2,28 @@ import { observer } from "mobx-react-lite"; import React, { useState } from "react"; import { QuickAddCardFormStore } from "./store/quick-add-card-form-store.ts"; import { CardFormWrapper } from "./card-form-wrapper.tsx"; +import { deckListStore } from "../../store/deck-list-store.ts"; +import { screenStore } from "../../store/screen-store.ts"; +import { assert } from "../../lib/typescript/assert.ts"; +import { TextField } from "mobx-form-lite"; + +const createQuickAddCardFormStore = () => { + const screen = screenStore.screen; + assert(screen.type === "cardQuickAddForm"); + const deck = deckListStore.searchDeckById(screen.deckId); + + return new QuickAddCardFormStore( + deck + ? { + speakingCardsField: new TextField(deck.speak_field), + speakingCardsLocale: new TextField(deck.speak_locale), + } + : undefined, + ); +}; export const QuickAddCardFormPage = observer(() => { - const [quickAddCardStore] = useState(() => new QuickAddCardFormStore()); + const [quickAddCardStore] = useState(createQuickAddCardFormStore); return ; }); diff --git a/src/screens/deck-form/store/card-form-store-interface.ts b/src/screens/deck-form/store/card-form-store-interface.ts index c4a58b4d..1c5192d7 100644 --- a/src/screens/deck-form/store/card-form-store-interface.ts +++ b/src/screens/deck-form/store/card-form-store-interface.ts @@ -2,7 +2,7 @@ import { CardFormType } from "./deck-form-store.ts"; import { BooleanToggle, TextField } from "mobx-form-lite"; import { DeckSpeakFieldEnum } from "../../../../functions/db/deck/decks-with-cards-schema.ts"; -export type CardFormStoreInterface = { +export interface CardFormStoreInterface { cardForm?: CardFormType | null; onSaveCard: () => void; onBackCard: () => void; @@ -15,4 +15,4 @@ export type CardFormStoreInterface = { speakingCardsLocale: TextField; speakingCardsField: TextField; }; -}; +} diff --git a/src/screens/deck-form/store/deck-form-store.ts b/src/screens/deck-form/store/deck-form-store.ts index 443de03d..e9cce96f 100644 --- a/src/screens/deck-form/store/deck-form-store.ts +++ b/src/screens/deck-form/store/deck-form-store.ts @@ -1,11 +1,7 @@ import { TextField } from "mobx-form-lite"; import { validators } from "mobx-form-lite"; import { action, makeAutoObservable } from "mobx"; -import { - isFormEmpty, - isFormTouched, - isFormValid, -} from "mobx-form-lite"; +import { isFormEmpty, isFormTouched, isFormValid } from "mobx-form-lite"; import { assert } from "../../../lib/typescript/assert.ts"; import { upsertDeckRequest } from "../../../api/api.ts"; import { screenStore } from "../../../store/screen-store.ts"; diff --git a/src/screens/deck-form/store/quick-add-card-form-store.ts b/src/screens/deck-form/store/quick-add-card-form-store.ts index 85f849d8..6d00a959 100644 --- a/src/screens/deck-form/store/quick-add-card-form-store.ts +++ b/src/screens/deck-form/store/quick-add-card-form-store.ts @@ -5,11 +5,7 @@ import { createCardSideField, } from "./deck-form-store.ts"; import { action, makeAutoObservable } from "mobx"; -import { - isFormEmpty, - isFormTouched, - isFormValid, -} from "mobx-form-lite"; +import { isFormEmpty, isFormTouched, isFormValid } from "mobx-form-lite"; import { screenStore } from "../../../store/screen-store.ts"; import { showConfirm } from "../../../lib/telegram/show-confirm.ts"; import { addCardRequest } from "../../../api/api.ts"; @@ -20,6 +16,7 @@ import { deckListStore } from "../../../store/deck-list-store.ts"; import { t } from "../../../translations/t.ts"; import { BooleanToggle } from "mobx-form-lite"; import { CardFormStoreInterface } from "./card-form-store-interface.ts"; +import { DeckSpeakFieldEnum } from "../../../../functions/db/deck/decks-with-cards-schema.ts"; export class QuickAddCardFormStore implements CardFormStoreInterface { cardForm: CardFormType = { @@ -34,7 +31,12 @@ export class QuickAddCardFormStore implements CardFormStoreInterface { isCardPreviewSelected = new BooleanToggle(false); isSaveCardButtonActive = true; - constructor() { + constructor( + public form?: { + speakingCardsLocale: TextField; + speakingCardsField: TextField; + }, + ) { makeAutoObservable(this, {}, { autoBind: true }); } diff --git a/src/screens/folder-form/store/folder-form-store.ts b/src/screens/folder-form/store/folder-form-store.ts index 8f4119df..770d2225 100644 --- a/src/screens/folder-form/store/folder-form-store.ts +++ b/src/screens/folder-form/store/folder-form-store.ts @@ -1,4 +1,11 @@ -import { TextField, validators, formUnTouchAll, isFormTouched, isFormValid, ListField } from "mobx-form-lite"; +import { + TextField, + validators, + formUnTouchAll, + isFormTouched, + isFormValid, + ListField, +} from "mobx-form-lite"; import { t } from "../../../translations/t.ts"; import { action, makeAutoObservable } from "mobx"; import { screenStore } from "../../../store/screen-store.ts"; diff --git a/src/screens/share-deck/store/share-deck-form-store.ts b/src/screens/share-deck/store/share-deck-form-store.ts index e207238a..bb1fcbcb 100644 --- a/src/screens/share-deck/store/share-deck-form-store.ts +++ b/src/screens/share-deck/store/share-deck-form-store.ts @@ -13,9 +13,7 @@ import { import { fromPromise, IPromiseBasedObservable } from "mobx-utils"; import { DeckAccessesResponse } from "../../../../functions/deck-accesses.ts"; import { DeckAccessType } from "../../../../functions/db/custom-types.ts"; -import { - persistableField -} from "../../../lib/mobx-form-lite-persistable/persistable-field.ts"; +import { persistableField } from "../../../lib/mobx-form-lite-persistable/persistable-field.ts"; const getRequestFiltersForScreen = () => { const screen = screenStore.screen; diff --git a/src/store/user-store.ts b/src/store/user-store.ts index edb5808a..529c6170 100644 --- a/src/store/user-store.ts +++ b/src/store/user-store.ts @@ -6,9 +6,7 @@ import { makePersistable } from "mobx-persist-store"; import { storageAdapter } from "../lib/telegram/storage-adapter.ts"; import { BooleanToggle } from "mobx-form-lite"; import { CardAnswerType } from "../../functions/db/custom-types.ts"; -import { - persistableField -} from "../lib/mobx-form-lite-persistable/persistable-field.ts"; +import { persistableField } from "../lib/mobx-form-lite-persistable/persistable-field.ts"; export class UserStore { userInfo?: UserDbType; diff --git a/src/ui/dropdown.tsx b/src/ui/dropdown.tsx index 25bbacaa..465fb011 100644 --- a/src/ui/dropdown.tsx +++ b/src/ui/dropdown.tsx @@ -71,7 +71,7 @@ export const Dropdown = (props: Props) => { className={css({ padding: "12px 16px", borderRadius: theme.borderRadius, - whiteSpace: 'nowrap', + whiteSpace: "nowrap", ...tapScale, ":hover": { backgroundColor: theme.buttonColor,