context

src/screens/app.tsx

@@ -20,6 +20,7 @@ import { RepeatAllScreen } from "./deck-review/repeat-all-screen.tsx";
 import { DeckCatalog } from "./deck-catalog/deck-catalog.tsx";
 import { DeckCatalogStoreContextProvider } from "./deck-catalog/store/deck-catalog-store-context.tsx";
 import { ShareDeckScreen } from "./share-deck/share-deck-screen.tsx";
+import { ShareDeckStoreProvider } from "./share-deck/store/share-deck-store-context.tsx";
 
 export const App = observer(() => {
   useRestoreFullScreenExpand();
@@ -63,7 +64,9 @@ export const App = observer(() => {
       )}
       {screenStore.screen.type === "shareDeck" && (
         <PreventTelegramSwipeDownClosingIos>
-          <ShareDeckScreen />
+          <ShareDeckStoreProvider>
+            <ShareDeckScreen />
+          </ShareDeckStoreProvider>
         </PreventTelegramSwipeDownClosingIos>
       )}
 

src/screens/share-deck/share-deck-one-time-links.tsx

@@ -2,21 +2,17 @@ import { observer } from "mobx-react-lite";
 import { css } from "@emotion/css";
 import { t } from "../../translations/t.ts";
 import React from "react";
-import { ShareDeckStore } from "./store/share-deck-store.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { useMount } from "../../lib/react/use-mount.ts";
 import { getDeckLink } from "./redirect-user-to-deck-link.tsx";
 import { copyToClipboard } from "../../lib/copy-to-clipboard/copy-to-clipboard.ts";
 import { showAlert } from "../../lib/telegram/show-alert.ts";
 import { theme } from "../../ui/theme.tsx";
 import { DateTime } from "luxon";
+import { useShareDeckStore } from "./store/share-deck-store-context.tsx";
 
-type Props = {
-  store: ShareDeckStore;
-};
-
-export const ShareDeckOneTimeLinks = observer((props: Props) => {
-  const { store } = props;
+export const ShareDeckOneTimeLinks = observer(() => {
+  const store = useShareDeckStore();
 
   useBackButton(() => {
     store.isDeckAccessesOpen.setFalse();

src/screens/share-deck/share-deck-screen.tsx

@@ -1,14 +1,13 @@
 import { observer } from "mobx-react-lite";
-import React, { useState } from "react";
-import { ShareDeckStore } from "./store/share-deck-store.ts";
+import React from "react";
 import { ShareDeckOneTimeLinks } from "./share-deck-one-time-links.tsx";
 import { ShareDeckSettings } from "./share-deck-settings.tsx";
+import { useShareDeckStore } from "./store/share-deck-store-context.tsx";
 
 export const ShareDeckScreen = observer(() => {
-  const [store] = useState(() => new ShareDeckStore());
-
+  const store = useShareDeckStore();
   if (store.isDeckAccessesOpen.value) {
-    return <ShareDeckOneTimeLinks store={store} />;
+    return <ShareDeckOneTimeLinks />;
   }
-  return <ShareDeckSettings store={store} />;
+  return <ShareDeckSettings />;
 });

src/screens/share-deck/share-deck-settings.tsx

@@ -1,94 +1,87 @@
 import { observer } from "mobx-react-lite";
-import { ShareDeckStore } from "./store/share-deck-store.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { screenStore } from "../../store/screen-store.ts";
 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 { ShareDeckOneTimeLinks } from "./share-deck-one-time-links.tsx";
 import { css } from "@emotion/css";
 import { SettingsRow } from "../user-settings/settings-row.tsx";
 import { RadioSwitcher } from "../../ui/radio-switcher.tsx";
 import { HintTransparent } from "../../ui/hint-transparent.tsx";
 import { Label } from "../../ui/label.tsx";
 import { Input } from "../../ui/input.tsx";
 import React from "react";
+import { useShareDeckStore } from "./store/share-deck-store-context.tsx";
 
-export const ShareDeckSettings = observer(
-  (props: { store: ShareDeckStore }) => {
-    const { store } = props;
+export const ShareDeckSettings = observer(() => {
+  const store = useShareDeckStore();
 
-    useBackButton(() => {
-      screenStore.back();
-    });
+  useBackButton(() => {
+    screenStore.back();
+  });
 
-    useMainButton(
-      () => {
-        return store.form.isOneTime.value
-          ? t("share_one_time_link")
-          : t("share_perpetual_link");
-      },
-      () => {
-        store.shareDeck();
-      },
-      () => store.isSaveButtonVisible,
-    );
+  useMainButton(
+    () => {
+      return store.form.isOneTime.value
+        ? t("share_one_time_link")
+        : t("share_perpetual_link");
+    },
+    () => {
+      store.shareDeck();
+    },
+    () => store.isSaveButtonVisible,
+  );
 
-    useTelegramProgress(() => store.isSending);
+  useTelegramProgress(() => store.isSending);
 
-    if (store.isDeckAccessesOpen.value) {
-      return <ShareDeckOneTimeLinks store={store} />;
-    }
+  return (
+    <div
+      className={css({
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        marginBottom: 16,
+        position: "relative",
+      })}
+    >
+      <h3 className={css({ textAlign: "center" })}>
+        {t("share_deck_settings")}
+      </h3>
+      <SettingsRow>
+        <span>{t("share_one_time_access_link")}</span>
+        <RadioSwitcher
+          isOn={store.form.isOneTime.value}
+          onToggle={store.form.isOneTime.toggle}
+        />
+      </SettingsRow>
+      <HintTransparent marginTop={-12}>
+        {t("share_one_time_access_link_description")}
+      </HintTransparent>
+      {store.form.isOneTime.value && (
+        <>
+          <SettingsRow>
+            <span>{t("share_access_duration")}</span>
+            <RadioSwitcher
+              isOn={store.form.isAccessDuration.value}
+              onToggle={store.form.isAccessDuration.toggle}
+            />
+          </SettingsRow>
+        </>
+      )}
+      {store.form.isOneTime.value && store.form.isAccessDuration.value && (
+        <Label text={t("share_days")}>
+          <Input field={store.form.accessDurationLimitDays} />
+          <HintTransparent>{t("share_days_description")}</HintTransparent>
+        </Label>
+      )}
 
-    return (
-      <div
-        className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: 16,
-          marginBottom: 16,
-          position: "relative",
-        })}
+      <SettingsRow
+        onClick={() => {
+          store.isDeckAccessesOpen.setTrue();
+        }}
       >
-        <h3 className={css({ textAlign: "center" })}>
-          {t("share_deck_settings")}
-        </h3>
-        <SettingsRow>
-          <span>{t("share_one_time_access_link")}</span>
-          <RadioSwitcher
-            isOn={store.form.isOneTime.value}
-            onToggle={store.form.isOneTime.toggle}
-          />
-        </SettingsRow>
-        <HintTransparent marginTop={-12}>
-          {t("share_one_time_access_link_description")}
-        </HintTransparent>
-        {store.form.isOneTime.value && (
-          <>
-            <SettingsRow>
-              <span>{t("share_access_duration")}</span>
-              <RadioSwitcher
-                isOn={store.form.isAccessDuration.value}
-                onToggle={store.form.isAccessDuration.toggle}
-              />
-            </SettingsRow>
-          </>
-        )}
-        {store.form.isOneTime.value && store.form.isAccessDuration.value && (
-          <Label text={t("share_days")}>
-            <Input field={store.form.accessDurationLimitDays} />
-            <HintTransparent>{t("share_days_description")}</HintTransparent>
-          </Label>
-        )}
-
-        <SettingsRow
-          onClick={() => {
-            store.isDeckAccessesOpen.setTrue();
-          }}
-        >
-          {t("share_one_time_links_usage")}
-        </SettingsRow>
-      </div>
-    );
-  },
-);
+        {t("share_one_time_links_usage")}
+      </SettingsRow>
+    </div>
+  );
+});

src/screens/share-deck/store/share-deck-store-context.tsx

@@ -0,0 +1,19 @@
+import { createContext, ReactNode, useContext } from "react";
+import { ShareDeckStore } from "./share-deck-store.ts";
+import { assert } from "../../../lib/typescript/assert.ts";
+
+const Context = createContext<ShareDeckStore | null>(null);
+
+export const ShareDeckStoreProvider = (props: { children: ReactNode }) => {
+  return (
+    <Context.Provider value={new ShareDeckStore()}>
+      {props.children}
+    </Context.Provider>
+  );
+};
+
+export const useShareDeckStore = () => {
+  const store = useContext(Context);
+  assert(store, "ShareDeckStoreProvider not found");
+  return store;
+};