Simplify deck share

functions/lib/short-unique-id/short-unique-id.ts

@@ -0,0 +1,5 @@
+import ShortUniqueId from "short-unique-id";
+
+export const shortUniqueId = () => {
+  return new ShortUniqueId({ length: 10 }).rnd();
+};

functions/upsert-deck.ts

@@ -11,6 +11,7 @@ import { deckSchema } from "./db/deck/decks-with-cards-schema.ts";
 import { addDeckToMineDb } from "./db/deck/add-deck-to-mine-db.ts";
 import { createForbiddenRequestResponse } from "./lib/json-response/create-forbidden-request-response.ts";
 import { canEditDeck } from "./db/deck/can-edit-deck.ts";
+import { shortUniqueId } from "./lib/short-unique-id/short-unique-id.ts";
 
 const requestSchema = z.object({
   id: z.number().nullable().optional(),
@@ -53,6 +54,7 @@ export const onRequestPost = handleError(async ({ request, env }) => {
     .upsert({
       id: input.data.id ? input.data.id : undefined,
       author_id: user.id,
+      share_id: input.data.id ? undefined : shortUniqueId(),
       name: input.data.title,
       description: input.data.description,
       is_public: false,

src/api/api.ts

@@ -13,10 +13,6 @@ import {
   UpsertDeckRequest,
   UpsertDeckResponse,
 } from "../../functions/upsert-deck.ts";
-import {
-  ShareDeckRequest,
-  ShareDeckResponse,
-} from "../../functions/share-deck.ts";
 import { GetSharedDeckResponse } from "../../functions/get-shared-deck.ts";
 import { AddCardRequest, AddCardResponse } from "../../functions/add-card.ts";
 
@@ -59,11 +55,3 @@ export const upsertDeckRequest = (body: UpsertDeckRequest) => {
 export const addCardRequest = (body: AddCardRequest) => {
   return request<AddCardResponse, AddCardRequest>("/add-card", "POST", body);
 };
-
-export const shareDeckRequest = (body: ShareDeckRequest) => {
-  return request<ShareDeckResponse, ShareDeckRequest>(
-    "/share-deck",
-    "POST",
-    body,
-  );
-};

src/screens/deck-review/deck-preview.tsx

@@ -68,7 +68,7 @@ export const DeckPreview = observer(() => {
         </div>
 
         <div className={css({ display: "flex", gap: 16 })}>
-          <ShareDeckButton deckId={deck.id} defaultShareId={deck.share_id} />
+          <ShareDeckButton deckId={deck.id} shareId={deck.share_id} />
           {deckListStore.myId && deck.author_id === deckListStore.myId ? (
             <Button
               icon={"mdi-pencil"}

src/screens/deck-review/share-deck-button.tsx

@@ -1,55 +1,35 @@
-import React, { useState } from "react";
+import React from "react";
 import { assert } from "../../lib/typescript/assert.ts";
 import { trimEnd } from "../../lib/string/trim.ts";
 import WebApp from "@twa-dev/sdk";
 import { Button } from "../../ui/button.tsx";
-import { shareDeckRequest } from "../../api/api.ts";
 import { theme } from "../../ui/theme.tsx";
-import { reportHandledError } from "../../lib/rollbar/rollbar.tsx";
 
 type Props = {
   deckId: number;
-  defaultShareId?: string | null;
+  shareId?: string | null;
 };
 
 export const ShareDeckButton = (props: Props) => {
-  const [isLoading, setIsLoading] = useState(false);
-  // Usually it's an antipattern, but since props.defaultShareId never gets updated, it's ok for now
-  const [shareId, setShareId] = useState(props.defaultShareId);
+  const { shareId } = props;
 
   const onClick = async () => {
-    if (shareId) {
-      const botUrl = import.meta.env.VITE_BOT_APP_URL;
-      assert(botUrl, "Bot URL is not set");
-      const botUrlWithDeckId = `${trimEnd(botUrl, "/")}?startapp=${shareId}`;
-      const shareUrl = `https://t.me/share/url?text=&url=${botUrlWithDeckId}`;
-      WebApp.openTelegramLink(shareUrl);
-    } else {
-      setIsLoading(true);
-
-      try {
-        const result = await shareDeckRequest({
-          deckId: props.deckId,
-        });
-        setShareId(result.shareId);
-      } catch (e) {
-        reportHandledError("Error while sharing deck", e);
-      } finally {
-        setIsLoading(false);
-      }
-    }
+    const botUrl = import.meta.env.VITE_BOT_APP_URL;
+    assert(botUrl, "Bot URL is not set");
+    const botUrlWithDeckId = `${trimEnd(botUrl, "/")}?startapp=${shareId}`;
+    const shareUrl = `https://t.me/share/url?text=&url=${botUrlWithDeckId}`;
+    WebApp.openTelegramLink(shareUrl);
   };
 
   return (
     <Button
-      icon={isLoading ? "mdi-loading mdi-spin" : "mdi-share"}
+      icon={"mdi-share"}
       mainColor={theme.textColor}
-      disabled={isLoading}
       onClick={onClick}
       transparent
       outline
     >
-      {shareId ? "Share deck" : "Get share link"}
+      Share deck
     </Button>
   );
 };