From 42c9883831e7c1b929b3b7a5614a81dc422934d9 Mon Sep 17 00:00:00 2001
From: Gorbachev Egor <7gorbachevm@gmail.com>
Date: Fri, 17 Nov 2023 16:32:56 +0700
Subject: [PATCH] optimize inputs

---
 .../keyboard}/useMacTabNavigationFix.tsx        |  6 +++++-
 src/screens/deck-form/card-form-view.tsx        |  6 +++---
 src/screens/deck-form/deck-form.tsx             |  6 +++---
 src/screens/deck-form/quick-add-card-form.tsx   |  2 +-
 src/screens/shared/version-warning.tsx          |  2 +-
 src/screens/user-settings/settings-row.tsx      |  2 +-
 .../user-settings/user-settings-main.tsx        | 10 ++++++----
 src/store/deck-form-store.test.ts               |  2 +-
 src/store/deck-form-store.ts                    |  2 +-
 src/store/quick-add-card-form-store.ts          | 10 +++++++---
 src/ui/input.tsx                                | 17 ++++++++---------
 11 files changed, 37 insertions(+), 28 deletions(-)
 rename src/{screens => lib/keyboard}/useMacTabNavigationFix.tsx (90%)

diff --git a/src/screens/useMacTabNavigationFix.tsx b/src/lib/keyboard/useMacTabNavigationFix.tsx
similarity index 90%
rename from src/screens/useMacTabNavigationFix.tsx
rename to src/lib/keyboard/useMacTabNavigationFix.tsx
index 2e146795..56a0057d 100644
--- a/src/screens/useMacTabNavigationFix.tsx
+++ b/src/lib/keyboard/useMacTabNavigationFix.tsx
@@ -28,7 +28,11 @@ export const useMacTabNavigationFix = () => {
             // Shift + Tab was pressed
             // @ts-expect-error
             inputs[currentIndex - 1].focus();
-          } else if (!event.shiftKey && currentIndex >= 0 && currentIndex < inputs.length - 1) {
+          } else if (
+            !event.shiftKey &&
+            currentIndex >= 0 &&
+            currentIndex < inputs.length - 1
+          ) {
             // Only Tab was pressed
             // @ts-expect-error
             inputs[currentIndex + 1].focus();
diff --git a/src/screens/deck-form/card-form-view.tsx b/src/screens/deck-form/card-form-view.tsx
index d1447b1f..ff1ef0c1 100644
--- a/src/screens/deck-form/card-form-view.tsx
+++ b/src/screens/deck-form/card-form-view.tsx
@@ -24,15 +24,15 @@ export const CardFormView = observer((props: Props) => {
     >
       <h3 className={css({ textAlign: "center" })}>Add card</h3>
       <Label text={"Front"} isRequired>
-        <Input {...cardForm.front.props} rows={5} type={"textarea"} />
+        <Input field={cardForm.front} rows={5} type={"textarea"} />
       </Label>
 
       <Label text={"Back"} isRequired>
-        <Input {...cardForm.back.props} rows={5} type={"textarea"} />
+        <Input field={cardForm.back} rows={5} type={"textarea"} />
       </Label>
 
       <Label text={"Example / Note"}>
-        <Input {...cardForm.example.props} rows={3} type={"textarea"} />
+        <Input field={cardForm.example} rows={3} type={"textarea"} />
       </Label>
     </div>
   );
diff --git a/src/screens/deck-form/deck-form.tsx b/src/screens/deck-form/deck-form.tsx
index dc81b3f9..a32c90f0 100644
--- a/src/screens/deck-form/deck-form.tsx
+++ b/src/screens/deck-form/deck-form.tsx
@@ -12,7 +12,7 @@ import { useMount } from "../../lib/react/use-mount.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
 import { assert } from "../../lib/typescript/assert.ts";
-import { useMacTabNavigationFix } from "../useMacTabNavigationFix.tsx";
+import { useMacTabNavigationFix } from "../../lib/keyboard/useMacTabNavigationFix.tsx";
 
 export const DeckForm = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -49,12 +49,12 @@ export const DeckForm = observer(() => {
         {screen.deckId ? "Edit deck" : "Add deck"}
       </h3>
       <Label text={"Title"} isRequired>
-        <Input {...deckFormStore.form.title.props} />
+        <Input field={deckFormStore.form.title} />
       </Label>
 
       <Label text={"Description"}>
         <Input
-          {...deckFormStore.form.description.props}
+          field={deckFormStore.form.description}
           rows={5}
           type={"textarea"}
         />
diff --git a/src/screens/deck-form/quick-add-card-form.tsx b/src/screens/deck-form/quick-add-card-form.tsx
index ac6d0aa4..e7fbabcc 100644
--- a/src/screens/deck-form/quick-add-card-form.tsx
+++ b/src/screens/deck-form/quick-add-card-form.tsx
@@ -5,7 +5,7 @@ import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { QuickAddCardFormStore } from "../../store/quick-add-card-form-store.ts";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
-import { useMacTabNavigationFix } from "../useMacTabNavigationFix.tsx";
+import { useMacTabNavigationFix } from "../../lib/keyboard/useMacTabNavigationFix.tsx";
 
 export const QuickAddCardForm = observer(() => {
   const [quickAddCardStore] = useState(() => new QuickAddCardFormStore());
diff --git a/src/screens/shared/version-warning.tsx b/src/screens/shared/version-warning.tsx
index 899f7762..3501fb3c 100644
--- a/src/screens/shared/version-warning.tsx
+++ b/src/screens/shared/version-warning.tsx
@@ -3,7 +3,7 @@ import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
 
 export const VersionWarning = () => {
-  if (WebApp.isVersionAtLeast('6.1')) {
+  if (WebApp.isVersionAtLeast("6.1")) {
     return null;
   }
 
diff --git a/src/screens/user-settings/settings-row.tsx b/src/screens/user-settings/settings-row.tsx
index 23b03a27..268d30c5 100644
--- a/src/screens/user-settings/settings-row.tsx
+++ b/src/screens/user-settings/settings-row.tsx
@@ -13,7 +13,7 @@ export const SettingsRow = observer((props: Props) => {
         backgroundColor: theme.secondaryBgColor,
         borderRadius: theme.borderRadius,
         height: 48,
-        boxSizing: 'border-box',
+        boxSizing: "border-box",
         padding: 12,
         display: "flex",
         justifyContent: "space-between",
diff --git a/src/screens/user-settings/user-settings-main.tsx b/src/screens/user-settings/user-settings-main.tsx
index 50f8ee84..26c94be8 100644
--- a/src/screens/user-settings/user-settings-main.tsx
+++ b/src/screens/user-settings/user-settings-main.tsx
@@ -13,6 +13,8 @@ import { theme } from "../../ui/theme.tsx";
 import { Select } from "../../ui/select.tsx";
 import { Hint } from "../../ui/hint.tsx";
 import { css } from "@emotion/css";
+import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
+import { screenStore } from "../../store/screen-store.ts";
 
 export const timeRanges = generateTimeRange();
 
@@ -28,6 +30,9 @@ export const UserSettingsMain = observer(() => {
     () => userSettingsStore.isSaveVisible,
   );
 
+  useBackButton(() => {
+    screenStore.go({ type: "main" });
+  });
   useTelegramProgress(() => userSettingsStore.isSending);
 
   if (deckListStore.myInfo?.state !== "fulfilled") {
@@ -83,10 +88,7 @@ export const UserSettingsMain = observer(() => {
           </SettingsRow>
         )}
 
-        <Hint>
-          ⭐ Daily reminders help you keep up with your reviews, making it
-          easier for you to remember the information
-        </Hint>
+        <Hint>⭐ Daily reminders will help you remember to repeat cards</Hint>
       </div>
     </div>
   );
diff --git a/src/store/deck-form-store.test.ts b/src/store/deck-form-store.test.ts
index c544c54c..753f7f51 100644
--- a/src/store/deck-form-store.test.ts
+++ b/src/store/deck-form-store.test.ts
@@ -9,7 +9,7 @@ vi.mock("./screen-store", () => {
     screenStore: {
       screen: {
         type: "deckForm",
-        deckFormId: 1,
+        deckId: 1,
       },
     },
   };
diff --git a/src/store/deck-form-store.ts b/src/store/deck-form-store.ts
index 53380d6a..d9ef84d2 100644
--- a/src/store/deck-form-store.ts
+++ b/src/store/deck-form-store.ts
@@ -34,7 +34,7 @@ export const createDeckTitleField = (value: string) => {
   );
 };
 
-const createCardSideField = (value: string) => {
+export const createCardSideField = (value: string) => {
   return new TextField(value, validators.required());
 };
 
diff --git a/src/store/quick-add-card-form-store.ts b/src/store/quick-add-card-form-store.ts
index ad43c57d..51e7fb89 100644
--- a/src/store/quick-add-card-form-store.ts
+++ b/src/store/quick-add-card-form-store.ts
@@ -1,4 +1,8 @@
-import { CardFormType, createDeckTitleField } from "./deck-form-store.ts";
+import {
+  CardFormType,
+  createCardSideField,
+  createDeckTitleField,
+} from "./deck-form-store.ts";
 import { action, makeAutoObservable } from "mobx";
 import {
   formTouchAll,
@@ -16,8 +20,8 @@ import { deckListStore } from "./deck-list-store.ts";
 
 export class QuickAddCardFormStore {
   form: CardFormType = {
-    back: createDeckTitleField(""),
-    front: createDeckTitleField(""),
+    back: createCardSideField(""),
+    front: createCardSideField(""),
     example: new TextField(""),
   };
   isSending = false;
diff --git a/src/ui/input.tsx b/src/ui/input.tsx
index 76344a64..9c679d37 100644
--- a/src/ui/input.tsx
+++ b/src/ui/input.tsx
@@ -1,21 +1,20 @@
 import { ChangeEvent } from "react";
 import { css } from "@emotion/css";
 import { theme } from "./theme.tsx";
+import { TextField } from "../lib/mobx-form/mobx-form.ts";
+import { observer } from "mobx-react-lite";
 
 interface Props {
-  value: string;
   placeholder?: string;
-  onChange: (value: string) => void;
   type?: "input" | "textarea";
-  isTouched?: boolean;
-  onBlur: () => void;
-  error?: string;
+  field: TextField<string>;
   rows?: number;
 }
 
-export const Input = (props: Props) => {
-  const { onChange, value, placeholder, type, rows, isTouched, error, onBlur } =
-    props;
+export const Input = observer((props: Props) => {
+  const { field, placeholder, type, rows } = props;
+  const { onChange, value, isTouched, error, onBlur } = field.props;
+
   const handleInputChange = (
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -58,4 +57,4 @@ export const Input = (props: Props) => {
       ) : null}
     </div>
   );
-};
+});