Add concurrently + always show Save form button (#27)

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "start": "npx concurrently --kill-others-on-fail \"npm run dev:frontend:start\" \"npm run dev:api:start\" \"npm run dev:tunnel\"",
     "dev:frontend:start": "vite",
     "dev:api:start": "npx wrangler pages dev /functions --compatibility-date=2023-09-22 --compatibility-flags=\"nodejs_compat\"",
     "dev:tunnel": "../ngrok http --domain=causal-magpie-closing.ngrok-free.app 5173",
@@ -15,7 +16,6 @@
     "test:frontend": "npx vitest --dir src/",
     "test:frontend:coverage": "npx vitest run --dir src/ --coverage",
     "prod:api:logs": "npx wrangler pages deployment tail",
-    "prod:deploy": "npx wrangler pages publish functions --project-name=memo-card",
     "dev:botfather:description": "export $(cat .dev.vars) && node botfather/update.js",
     "bundle-visualize": "npx vite-bundle-visualizer",
     "export-public-code": "[[ $(git symbolic-ref --short HEAD 2>/dev/null) == \"main\" ]] && npm run __export-public-code || echo \"Current branch is not 'main'\"",
@@ -74,6 +74,7 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "@vitest/coverage-v8": "^0.34.6",
+    "concurrently": "^8.2.2",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",

src/screens/component-catalog/card-preview-story.tsx

@@ -23,7 +23,6 @@ const createCardPreviewForm = (card: {
     },
     form: undefined,
     isCardPreviewSelected: new BooleanToggle(false),
-    isSaveCardButtonActive: false,
     onBackCard: () => {},
     onSaveCard: () => {},
     isSending: false,

src/screens/deck-form/card-form-view.tsx

@@ -5,7 +5,12 @@ import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { t } from "../../translations/t.ts";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
-import { BooleanToggle, isFormDirty, isFormTouched } from "mobx-form-lite";
+import {
+  BooleanToggle,
+  isFormDirty,
+  isFormTouched,
+  isFormValid,
+} from "mobx-form-lite";
 import { Screen } from "../shared/screen.tsx";
 import { Label } from "../../ui/label.tsx";
 import { HintTransparent } from "../../ui/hint-transparent.tsx";
@@ -36,13 +41,9 @@ export const CardFormView = observer((props: Props) => {
   const { cardForm, markCardAsRemoved } = cardFormStore;
   assert(cardForm, "Card should not be empty before editing");
 
-  useMainButton(
-    t("save"),
-    () => {
-      cardFormStore.onSaveCard();
-    },
-    () => cardFormStore.isSaveCardButtonActive,
-  );
+  useMainButton(t("save"), () => {
+    cardFormStore.onSaveCard();
+  });
 
   useTelegramProgress(() => cardFormStore.isSending);
 
@@ -210,15 +211,15 @@ export const CardFormView = observer((props: Props) => {
 
       <div className={css({ marginTop: 12 })}>
         <ButtonGrid>
-          {cardFormStore.isSaveCardButtonActive && (
+          {cardFormStore.cardForm && isFormValid(cardFormStore.cardForm) ? (
             <ButtonSideAligned
               icon={"mdi-eye-check-outline mdi-24px"}
               outline
               onClick={cardFormStore.isCardPreviewSelected.setTrue}
             >
               {t("card_preview")}
             </ButtonSideAligned>
-          )}
+          ) : null}
           {markCardAsRemoved && cardForm.id && (
             <ButtonSideAligned
               icon={"mdi-delete-outline mdi-24px"}

src/screens/deck-form/deck-form.tsx

@@ -37,13 +37,9 @@ export const DeckForm = observer(() => {
   useMount(() => {
     deckFormStore.loadForm();
   });
-  useMainButton(
-    t("save"),
-    () => {
-      deckFormStore.onDeckSave();
-    },
-    () => deckFormStore.isDeckSaveButtonVisible,
-  );
+  useMainButton(t("save"), () => {
+    deckFormStore.onDeckSave();
+  });
   useBackButton(() => {
     deckFormStore.onDeckBack(() => {
       screenStore.go({ type: "main" });

src/screens/deck-form/store/card-form-store-interface.ts

@@ -6,7 +6,6 @@ export interface CardFormStoreInterface {
   cardForm?: CardFormType | null;
   onSaveCard: () => void;
   onBackCard: () => void;
-  isSaveCardButtonActive: boolean;
   isCardPreviewSelected: BooleanToggle;
   isSending: boolean;
   markCardAsRemoved?: () => void;

src/screens/deck-form/store/deck-form-store.ts

@@ -217,13 +217,6 @@ export class DeckFormStore implements CardFormStoreInterface {
     }
   }
 
-  get isDeckSaveButtonVisible() {
-    if (!this.form) {
-      return false;
-    }
-    return isFormDirty(this.form) && this.form.cards.length > 0;
-  }
-
   goToCardList() {
     if (!this.form) {
       return;
@@ -361,11 +354,7 @@ export class DeckFormStore implements CardFormStoreInterface {
   }
 
   onSaveCard() {
-    if (!this.isSaveCardButtonActive) {
-      return;
-    }
-
-    this.onDeckSave().finally(
+    this.onDeckSave().then(
       action(() => {
         this.cardFormIndex = undefined;
         this.cardFormType = undefined;
@@ -444,6 +433,13 @@ export class DeckFormStore implements CardFormStoreInterface {
       formTouchAll(this.form);
       return Promise.reject();
     }
+
+    // TODO: figure out why this is needed, the isFormValid call above should've handled it
+    if (this.cardForm && !isFormValid(this.cardForm)) {
+      formTouchAll(this.cardForm);
+      return Promise.reject();
+    }
+
     this.isSending = true;
 
     // Avoid sending huge collections on every save
@@ -495,20 +491,4 @@ export class DeckFormStore implements CardFormStoreInterface {
     this.cardFormIndex = undefined;
     this.cardFormType = undefined;
   }
-
-  get isSaveCardButtonActive() {
-    const cardForm = this.cardForm;
-    if (!cardForm) {
-      return false;
-    }
-
-    if (cardForm.answerType.value === "remember") {
-      return Boolean(!cardForm.front.error && !cardForm.back.error);
-    }
-    if (cardForm.answerType.value === "choice_single") {
-      return isFormValid({ answers: cardForm.answers });
-    }
-
-    return false;
-  }
 }

src/screens/deck-form/store/quick-add-card-form-store.ts

@@ -34,7 +34,6 @@ export class QuickAddCardFormStore implements CardFormStoreInterface {
   };
   isSending = false;
   isCardPreviewSelected = new BooleanToggle(false);
-  isSaveCardButtonActive = true;
 
   constructor(
     public form?: {