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; +};