diff --git a/src/screens/app.tsx b/src/screens/app.tsx
index bfdc938f..0a488cd7 100644
--- a/src/screens/app.tsx
+++ b/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" && (
-
+
+
+
)}
diff --git a/src/screens/share-deck/share-deck-one-time-links.tsx b/src/screens/share-deck/share-deck-one-time-links.tsx
index a1eaac81..f888cd4f 100644
--- a/src/screens/share-deck/share-deck-one-time-links.tsx
+++ b/src/screens/share-deck/share-deck-one-time-links.tsx
@@ -2,7 +2,6 @@ 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";
@@ -10,13 +9,10 @@ import { copyToClipboard } from "../../lib/copy-to-clipboard/copy-to-clipboard.t
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();
diff --git a/src/screens/share-deck/share-deck-screen.tsx b/src/screens/share-deck/share-deck-screen.tsx
index 36dfd485..d8a44312 100644
--- a/src/screens/share-deck/share-deck-screen.tsx
+++ b/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 ;
+ return ;
}
- return ;
+ return ;
});
diff --git a/src/screens/share-deck/share-deck-settings.tsx b/src/screens/share-deck/share-deck-settings.tsx
index 4927ac04..8920ec02 100644
--- a/src/screens/share-deck/share-deck-settings.tsx
+++ b/src/screens/share-deck/share-deck-settings.tsx
@@ -1,11 +1,9 @@
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";
@@ -13,82 +11,77 @@ 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 ;
- }
+ return (
+
+
+ {t("share_deck_settings")}
+
+
+ {t("share_one_time_access_link")}
+
+
+
+ {t("share_one_time_access_link_description")}
+
+ {store.form.isOneTime.value && (
+ <>
+
+ {t("share_access_duration")}
+
+
+ >
+ )}
+ {store.form.isOneTime.value && store.form.isAccessDuration.value && (
+
+ )}
- return (
-
{
+ store.isDeckAccessesOpen.setTrue();
+ }}
>
-
- {t("share_deck_settings")}
-
-
- {t("share_one_time_access_link")}
-
-
-
- {t("share_one_time_access_link_description")}
-
- {store.form.isOneTime.value && (
- <>
-
- {t("share_access_duration")}
-
-
- >
- )}
- {store.form.isOneTime.value && store.form.isAccessDuration.value && (
-
- )}
-
- {
- store.isDeckAccessesOpen.setTrue();
- }}
- >
- {t("share_one_time_links_usage")}
-
-
- );
- },
-);
+ {t("share_one_time_links_usage")}
+
+
+ );
+});
diff --git a/src/screens/share-deck/store/share-deck-store-context.tsx b/src/screens/share-deck/store/share-deck-store-context.tsx
new file mode 100644
index 00000000..9549366a
--- /dev/null
+++ b/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(null);
+
+export const ShareDeckStoreProvider = (props: { children: ReactNode }) => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export const useShareDeckStore = () => {
+ const store = useContext(Context);
+ assert(store, "ShareDeckStoreProvider not found");
+ return store;
+};