Deck one time access (#34)

* Deck one time access

src/api/api.ts

@@ -27,6 +27,11 @@ import { DeckCatalogResponse } from "../../functions/catalog-decks.ts";
 import { DeckWithCardsResponse } from "../../functions/deck-with-cards.ts";
 import { CopyDeckResponse } from "../../functions/duplicate-deck.ts";
 import { DeckCategoryResponse } from "../../functions/deck-categories.ts";
+import { DeckAccessesResponse } from "../../functions/deck-accesses.ts";
+import {
+  AddDeckAccessRequest,
+  AddDeckAccessResponse,
+} from "../../functions/add-deck-access.ts";
 
 export const healthRequest = () => {
   return request<HealthResponse>("/health");
@@ -48,6 +53,18 @@ export const addDeckToMineRequest = (body: AddDeckToMineRequest) => {
   );
 };
 
+export const getDeckAccessesOfDeckRequest = (deckId: number) => {
+  return request<DeckAccessesResponse>(`/deck-accesses?deck_id=${deckId}`);
+};
+
+export const addDeckAccessRequest = (body: AddDeckAccessRequest) => {
+  return request<AddDeckAccessResponse, AddDeckAccessRequest>(
+    "/add-deck-access",
+    "POST",
+    body,
+  );
+};
+
 export const apiDuplicateDeckRequest = (deckId: number) => {
   return request<CopyDeckResponse>(`/duplicate-deck?deck_id=${deckId}`, "POST");
 };

src/lib/copy-to-clipboard/copy-to-clipboard.ts

@@ -0,0 +1,31 @@
+export const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (e) {
+    copyToClipboardOld(text);
+  }
+};
+
+// A hack for old android to get clipboard copy feature ready
+function copyToClipboardOld(textToCopy: string) {
+  const textarea = document.createElement("textarea");
+  textarea.value = textToCopy;
+
+  // Move the textarea outside the viewport to make it invisible
+  textarea.style.position = "absolute";
+  textarea.style.left = "-99999999px";
+
+  // @ts-ignore
+  document.body.prepend(textarea);
+
+  // highlight the content of the textarea element
+  textarea.select();
+
+  try {
+    document.execCommand("copy");
+  } catch (err) {
+    console.log(err);
+  } finally {
+    textarea.remove();
+  }
+}

src/lib/mobx-form/boolean-toggle.ts

@@ -1,6 +1,7 @@
 import { makeAutoObservable } from "mobx";
+import { FieldWithValue } from "./field-with-value.ts";
 
-export class BooleanToggle {
+export class BooleanToggle implements FieldWithValue<boolean> {
   constructor(public value: boolean) {
     makeAutoObservable(this, {}, { autoBind: true });
   }

src/lib/mobx-form/field-with-value.ts

@@ -0,0 +1,3 @@
+export type FieldWithValue<T> = {
+  value: T;
+};

src/lib/mobx-form/persistable-field.ts

@@ -1,11 +1,11 @@
-import { TextField } from "./text-field.ts";
 import { makePersistable } from "mobx-persist-store";
+import { FieldWithValue } from "./field-with-value.ts";
 
-export const persistableField = <T>(
-  field: TextField<T>,
+export const persistableField = <T extends FieldWithValue<any>>(
+  field: T,
   storageKey: string,
   expireIn?: number,
-): TextField<T> => {
+): T => {
   makePersistable(field, {
     name: storageKey,
     properties: ["value"],

src/lib/mobx-form/text-field.ts

@@ -1,6 +1,7 @@
 import { makeAutoObservable } from "mobx";
+import { FieldWithValue } from "./field-with-value.ts";
 
-export class TextField<T> {
+export class TextField<T> implements FieldWithValue<T> {
   isTouched = false;
 
   constructor(

src/lib/telegram/use-main-button.tsx

@@ -4,7 +4,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { autorun } from "mobx";
 
 export const useMainButton = (
-  text: string,
+  text: string | (() => string),
   onClick: () => void,
   condition?: () => boolean,
 ) => {
@@ -22,7 +22,7 @@ export const useMainButton = (
       }
 
       WebApp.MainButton.show();
-      WebApp.MainButton.setText(text);
+      WebApp.MainButton.setText(typeof text === "string" ? text : text());
       WebApp.MainButton.onClick(onClick);
     });
 

src/screens/app.tsx

@@ -1,14 +1,14 @@
 import { observer } from "mobx-react-lite";
 import { MainScreen } from "./deck-list/main-screen.tsx";
 import { DeckScreen } from "./deck-review/deck-screen.tsx";
-import { ReviewStoreProvider } from "../store/review-store-context.tsx";
+import { ReviewStoreProvider } from "./deck-review/store/review-store-context.tsx";
 import { screenStore } from "../store/screen-store.ts";
 import { DeckFormScreen } from "./deck-form/deck-form-screen.tsx";
-import { DeckFormStoreProvider } from "../store/deck-form-store-context.tsx";
+import { DeckFormStoreProvider } from "./deck-form/store/deck-form-store-context.tsx";
 import { QuickAddCardForm } from "./deck-form/quick-add-card-form.tsx";
 import { VersionWarning } from "./shared/version-warning.tsx";
 import React from "react";
-import { UserSettingsStoreProvider } from "../store/user-settings-store-context.tsx";
+import { UserSettingsStoreProvider } from "./user-settings/store/user-settings-store-context.tsx";
 import { UserSettingsMain } from "./user-settings/user-settings-main.tsx";
 import { deckListStore } from "../store/deck-list-store.ts";
 import { FullScreenLoader } from "./deck-list/full-screen-loader.tsx";
@@ -18,7 +18,9 @@ import {
 } from "../lib/telegram/prevent-telegram-swipe-down-closing.tsx";
 import { RepeatAllScreen } from "./deck-review/repeat-all-screen.tsx";
 import { DeckCatalog } from "./deck-catalog/deck-catalog.tsx";
-import { DeckCatalogStoreContextProvider } from "../store/deck-catalog-store-context.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();
@@ -60,6 +62,14 @@ export const App = observer(() => {
           </DeckFormStoreProvider>
         </PreventTelegramSwipeDownClosingIos>
       )}
+      {screenStore.screen.type === "shareDeck" && (
+        <PreventTelegramSwipeDownClosingIos>
+          <ShareDeckStoreProvider>
+            <ShareDeckScreen />
+          </ShareDeckStoreProvider>
+        </PreventTelegramSwipeDownClosingIos>
+      )}
+
       {screenStore.screen.type === "cardQuickAddForm" && (
         <PreventTelegramSwipeDownClosingIos>
           <QuickAddCardForm />

src/screens/deck-catalog/deck-catalog.tsx

@@ -3,14 +3,14 @@ import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { screenStore } from "../../store/screen-store.ts";
 import { css } from "@emotion/css";
 import React from "react";
-import { useDeckCatalogStore } from "../../store/deck-catalog-store-context.tsx";
+import { useDeckCatalogStore } from "./store/deck-catalog-store-context.tsx";
 import { useMount } from "../../lib/react/use-mount.ts";
 import { theme } from "../../ui/theme.tsx";
 import { Select } from "../../ui/select.tsx";
 import {
   DeckLanguage,
   languageFilterToNativeName,
-} from "../../store/deck-catalog-store.ts";
+} from "./store/deck-catalog-store.ts";
 import { DeckListItemWithDescription } from "../../ui/deck-list-item-with-description.tsx";
 import { range } from "../../lib/array/range.ts";
 import { DeckLoading } from "../deck-list/deck-loading.tsx";

src/store/deck-catalog-store-context.tsx → src/screens/deck-catalog/store/deck-catalog-store-context.tsx

@@ -1,4 +1,4 @@
-import { assert } from "../lib/typescript/assert.ts";
+import { assert } from "../../../lib/typescript/assert.ts";
 import { DeckCatalogStore } from "./deck-catalog-store.ts";
 import { createContext, ReactNode, useContext } from "react";
 

src/store/deck-catalog-store.ts → src/screens/deck-catalog/store/deck-catalog-store.ts

@@ -1,12 +1,12 @@
 import { makeAutoObservable } from "mobx";
-import { apiDeckCatalog, apiDeckCategories } from "../api/api.ts";
+import { apiDeckCatalog, apiDeckCategories } from "../../../api/api.ts";
 import { fromPromise, IPromiseBasedObservable } from "mobx-utils";
-import { DeckCatalogResponse } from "../../functions/catalog-decks.ts";
-import { TextField } from "../lib/mobx-form/text-field.ts";
-import { cachePromise } from "../lib/cache/cache-promise.ts";
-import { DeckCategoryResponse } from "../../functions/deck-categories.ts";
-import { persistableField } from "../lib/mobx-form/persistable-field.ts";
-import { t } from "../translations/t.ts";
+import { DeckCatalogResponse } from "../../../../functions/catalog-decks.ts";
+import { TextField } from "../../../lib/mobx-form/text-field.ts";
+import { cachePromise } from "../../../lib/cache/cache-promise.ts";
+import { DeckCategoryResponse } from "../../../../functions/deck-categories.ts";
+import { persistableField } from "../../../lib/mobx-form/persistable-field.ts";
+import { t } from "../../../translations/t.ts";
 
 export enum DeckLanguage {
   Any = "any",

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

@@ -3,7 +3,7 @@ import { css } from "@emotion/css";
 import { Label } from "../../ui/label.tsx";
 import { Input } from "../../ui/input.tsx";
 import React from "react";
-import { CardFormType } from "../../store/deck-form-store.ts";
+import { CardFormType } from "./store/deck-form-store.ts";
 import { HintTransparent } from "../../ui/hint-transparent.tsx";
 import { t } from "../../translations/t.ts";
 

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

@@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
 import { assert } from "../../lib/typescript/assert.ts";
 import React from "react";
 import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
-import { useDeckFormStore } from "../../store/deck-form-store-context.tsx";
+import { useDeckFormStore } from "./store/deck-form-store-context.tsx";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { CardFormView } from "./card-form-view.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";

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

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react-lite";
-import { useDeckFormStore } from "../../store/deck-form-store-context.tsx";
+import { useDeckFormStore } from "./store/deck-form-store-context.tsx";
 import { screenStore } from "../../store/screen-store.ts";
 import { assert } from "../../lib/typescript/assert.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";

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

@@ -2,7 +2,7 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import { DeckForm } from "./deck-form.tsx";
 import { CardForm } from "./card-form.tsx";
-import { useDeckFormStore } from "../../store/deck-form-store-context.tsx";
+import { useDeckFormStore } from "./store/deck-form-store-context.tsx";
 import { CardList } from "./card-list.tsx";
 
 export const DeckFormScreen = observer(() => {

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

@@ -1,10 +1,10 @@
 import { observer } from "mobx-react-lite";
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
 import { Label } from "../../ui/label.tsx";
 import { Input } from "../../ui/input.tsx";
 import React from "react";
 import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
-import { useDeckFormStore } from "../../store/deck-form-store-context.tsx";
+import { useDeckFormStore } from "./store/deck-form-store-context.tsx";
 import { screenStore } from "../../store/screen-store.ts";
 import { useMount } from "../../lib/react/use-mount.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
@@ -23,6 +23,8 @@ import {
 import { DeckSpeakFieldEnum } from "../../../functions/db/deck/decks-with-cards-schema.ts";
 import { theme } from "../../ui/theme.tsx";
 import { t } from "../../translations/t.ts";
+import { deckListStore } from "../../store/deck-list-store.ts";
+import { reset } from "../../ui/reset.ts";
 
 export const DeckForm = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -141,12 +143,34 @@ export const DeckForm = observer(() => {
       <div className={css({ marginTop: 18 })} />
 
       <Button
+        icon={"mdi mdi-plus"}
         onClick={() => {
           deckFormStore.openNewCardForm();
         }}
       >
         {t("add_card")}
       </Button>
+      {deckFormStore.form.id ? (
+        <button
+          className={cx(
+            reset.button,
+            css({
+              width: "100%",
+              color: theme.linkColor,
+              fontSize: 14,
+              paddingTop: 6,
+              textTransform: "uppercase",
+            }),
+          )}
+          onClick={() => {
+            assert(deckFormStore.form);
+            assert(deckFormStore.form.id);
+            deckListStore.goDeckById(deckFormStore.form.id);
+          }}
+        >
+          {t("deck_preview")}
+        </button>
+      ) : null}
     </div>
   );
 });

src/screens/deck-form/quick-add-card-form.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { CardFormView } from "./card-form-view.tsx";
 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 { QuickAddCardFormStore } from "./store/quick-add-card-form-store.ts";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
 import { t } from "../../translations/t.ts";
 

src/store/deck-form-store-context.tsx → src/screens/deck-form/store/deck-form-store-context.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, ReactNode, useContext } from "react";
-import { assert } from "../lib/typescript/assert.ts";
+import { assert } from "../../../lib/typescript/assert.ts";
 import { DeckFormStore } from "./deck-form-store.ts";
 
 const Context = createContext<DeckFormStore | null>(null);

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

@@ -1,13 +1,13 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { CardFormType, DeckFormStore } from "./deck-form-store.ts";
-import { DeckCardDbType } from "../../functions/db/deck/decks-with-cards-schema.ts";
-import { type DeckWithCardsWithReviewType } from "./deck-list-store.ts";
-import { assert } from "../lib/typescript/assert.ts";
+import { DeckCardDbType } from "../../../../functions/db/deck/decks-with-cards-schema.ts";
+import { type DeckWithCardsWithReviewType } from "../../../store/deck-list-store.ts";
+import { assert } from "../../../lib/typescript/assert.ts";
 import {
   UpsertDeckRequest,
   UpsertDeckResponse,
-} from "../../functions/upsert-deck.ts";
-import { isFormValid } from "../lib/mobx-form/form-has-error.ts";
+} from "../../../../functions/upsert-deck.ts";
+import { isFormValid } from "../../../lib/mobx-form/form-has-error.ts";
 
 const mapUpsertDeckRequestToResponse = (
   input: UpsertDeckRequest,
@@ -46,7 +46,7 @@ const mocks = vi.hoisted(() => {
   };
 });
 
-vi.mock("./screen-store", () => {
+vi.mock("./../../../store/screen-store", () => {
   return {
     screenStore: {
       screen: {
@@ -57,7 +57,7 @@ vi.mock("./screen-store", () => {
   };
 });
 
-vi.mock("./deck-list-store.ts", () => {
+vi.mock("./../../../store/deck-list-store.ts", () => {
   const deckCardsMock: DeckCardDbType[] = [
     {
       id: 3,
@@ -89,7 +89,7 @@ vi.mock("./deck-list-store.ts", () => {
     {
       id: 1,
       cardsToReview: deckCardsMock.slice(0, 2),
-      share_id: null,
+      share_id: "share_id_mock",
       deck_card: deckCardsMock,
       name: "Test",
     },
@@ -106,31 +106,31 @@ vi.mock("./deck-list-store.ts", () => {
   };
 });
 
-vi.mock("../lib/telegram/show-confirm.ts", () => {
+vi.mock("../../../lib/telegram/show-confirm.ts", () => {
   return {
     showConfirm: () => {},
   };
 });
 
-vi.mock("../lib/telegram/show-alert.ts", () => {
+vi.mock("../../../lib/telegram/show-alert.ts", () => {
   return {
     showAlert: () => {},
   };
 });
 
-vi.mock("../translations/t.ts", () => {
+vi.mock("../../../translations/t.ts", () => {
   return {
     t: (val: string) => val,
   };
 });
 
-vi.mock("../api/api.ts", () => {
+vi.mock("../../../api/api.ts", () => {
   return {
     upsertDeckRequest: mocks.upsertDeckRequest,
   };
 });
 
-vi.mock("../lib/voice-playback/speak.ts", async () => {
+vi.mock("../../../lib/voice-playback/speak.ts", async () => {
   return {
     speak: () => {},
   };